@public-ui/themes 3.0.0-rc.3 → 3.0.0-rc.8

package/dist/index.cjs

@@ -364,7 +364,7 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-const R=(e,t)=>s=>s(e,t),H=(e,t)=>s=>s(e,t,{append:false}),$=new Map,M=[],Y=new Map,a={A11yUi:{CSS_STYLE_CACHE:$,HYDRATED_HISTORY:M,STYLING_TASK_QUEUE:Y,Themes:{}}};const w=new Set,q=/--[^;]+/g,J=/:/,V=(e,t)=>{let s=t.match(q);if(Array.isArray(s)){s=s.filter(n=>J.test(n));const o=document.createElement("style");o.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(o);}w.add(e);},f=(e,t)=>typeof a.A11yUi=="object"&&a.A11yUi!==null&&typeof a.A11yUi.Themes=="object"&&a.A11yUi.Themes!==null&&typeof a.A11yUi.Themes[e]=="object"&&a.A11yUi.Themes[e]!==null&&typeof a.A11yUi.Themes[e][t]=="string"?a.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",W=e=>{for(const t of Array.from(e.childNodes))if(t instanceof HTMLStyleElement&&t.tagName==="STYLE"&&t.dataset.themingFallback===undefined)e.removeChild(t);else break},X=(e,t)=>{try{if(a.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];t.forEach(o=>{const n=new CSSStyleSheet;n.replaceSync(o),s.push(n);}),e.adoptedStyleSheets=s;}catch{[...t].reverse().forEach((s,o)=>{if(typeof s!="string"||s.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",o){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=s,e.insertBefore(n,e.firstChild);});}},Z=(e,t,s)=>{if(s!==false){const o=[...Array.from(e.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE")];let n;try{n=[...Array.from(e.adoptedStyleSheets)];}catch{n=[];}s?.mode==="before"?(o.reverse().forEach(r=>t.unshift(r.innerHTML)),n.reverse().forEach(r=>t.unshift(Array.from(r.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(o.forEach(r=>t.push(r.innerHTML)),n.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join(""))));}},L=(e,t,s)=>{const o=t.name||"default";let n;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");n=e.shadowRoot;}catch{n=e;}if(a.A11yUi.CSS_STYLE_CACHE.get(o)?.has(e.tagName))_(e,n,a.A11yUi.CSS_STYLE_CACHE.get(o)?.get(e.tagName),s);else {const r=f(o,"PROPERTIES"),i=f(o,"GLOBAL"),m=f(o,e.tagName);w.has(o)===false&&V(o,i);const h=[r,i,m];Z(n,h,t.encroachCss),t.loglevel==="debug"&&console.log(e.tagName,h),t.cache===true&&(a.A11yUi.CSS_STYLE_CACHE.has(o)===false&&a.A11yUi.CSS_STYLE_CACHE.set(o,new Map),a.A11yUi.CSS_STYLE_CACHE.get(o)?.set(e.tagName,h)),_(e,n,h,s);}},_=(e,t,s,o)=>{W(t),X(t,s),e.style.display=o;},N=e=>{e.loglevel==="debug"&&a.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:a.A11yUi.STYLING_TASK_QUEUE.size});},se=e=>{a.A11yUi.STYLING_TASK_QUEUE.delete(e);},j=(e,t)=>{se(e),N(t);},oe=e=>{for(const t of e)if(a.A11yUi.STYLING_TASK_QUEUE.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:s,themeDetails:o}=a.A11yUi.STYLING_TASK_QUEUE.get(t.target);L(t.target,o,s),j(t.target,o);}};let d;try{d=new MutationObserver(oe);}catch{d=null;}class re{constructor(t,s,o){this.createTheme=(n,r)=>H(n,r),this.createTranslation=(n,r)=>R(n,r),this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(o);}}
+const j=(t,e)=>s=>s(t,e),H=(t,e)=>s=>s(t,e,{append:false}),M=new Map,Y=[],$=new Map,o={A11yUi:{CSS_STYLE_CACHE:M,HYDRATED_HISTORY:Y,STYLING_TASK_QUEUE:$,Themes:{}}};const C=new Set,F=/--[^;]+/g,V=/:/,q=(t,e)=>{let s=e.match(F);if(Array.isArray(s)){s=s.filter(r=>V.test(r));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}C.add(t);},f=(t,e)=>typeof o.A11yUi=="object"&&o.A11yUi!==null&&typeof o.A11yUi.Themes=="object"&&o.A11yUi.Themes!==null&&typeof o.A11yUi.Themes[t]=="object"&&o.A11yUi.Themes[t]!==null&&typeof o.A11yUi.Themes[t][e]=="string"?o.A11yUi.Themes[t][e].replace(/\r?\n/g,""):"",J=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},W=(t,e)=>{try{if(o.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,r)=>{if(typeof a!="string"||a.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",r){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=a,t.insertBefore(n,t.firstChild);});}},X=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(t.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>e.unshift(n.innerHTML)),r.reverse().forEach(n=>e.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>e.push(n.innerHTML)),r.forEach(n=>e.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},w=(t,e,s)=>{const a=e.name||"default";let r;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");r=t.shadowRoot;}catch{r=t;}if(o.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))L(t,r,o.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const n=f(a,"PROPERTIES"),i=f(a,"GLOBAL"),c=f(a,t.tagName);C.has(a)===false&&q(a,i);const m=[n,i,c];X(r,m,e.encroachCss),e.loglevel==="debug"&&console.log(t.tagName,m),e.cache===true&&(o.A11yUi.CSS_STYLE_CACHE.has(a)===false&&o.A11yUi.CSS_STYLE_CACHE.set(a,new Map),o.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),L(t,r,m,s);}},L=(t,e,s,a)=>{J(e),W(e,s),t.style.visibility=a;},v=t=>{t.loglevel==="debug"&&o.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o.A11yUi.STYLING_TASK_QUEUE.size});},te=t=>{o.A11yUi.STYLING_TASK_QUEUE.delete(t);},_=(t,e)=>{te(t),v(e);},se=t=>{for(const e of t)if(o.A11yUi.STYLING_TASK_QUEUE.has(e.target)&&e.target.classList.contains("hydrated")){const{styleVisibility:s,themeDetails:a}=o.A11yUi.STYLING_TASK_QUEUE.get(e.target);w(e.target,a,s),_(e.target,a);}};let d;try{d=new MutationObserver(se);}catch{d=null;}class ne{Prefix;Key;Tag;createTheme=(e,s)=>H(e,s);createTranslation=(e,s)=>j(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
 
 /*!
  * KoliBri - The accessible HTML-Standard
@@ -435,27 +435,28 @@ var TagEnum;
     TagEnum[TagEnum["modal"] = 31] = "modal";
     TagEnum[TagEnum["nav"] = 32] = "nav";
     TagEnum[TagEnum["pagination"] = 33] = "pagination";
-    TagEnum[TagEnum["progress"] = 34] = "progress";
-    TagEnum[TagEnum["select"] = 35] = "select";
-    TagEnum[TagEnum["separator"] = 36] = "separator";
-    TagEnum[TagEnum["skip-nav"] = 37] = "skip-nav";
-    TagEnum[TagEnum["spin"] = 38] = "spin";
-    TagEnum[TagEnum["single-select"] = 39] = "single-select";
-    TagEnum[TagEnum["split-button"] = 40] = "split-button";
-    TagEnum[TagEnum["symbol"] = 41] = "symbol";
-    TagEnum[TagEnum["table"] = 42] = "table";
-    TagEnum[TagEnum["table-stateless"] = 43] = "table-stateless";
+    TagEnum[TagEnum["popover-button"] = 34] = "popover-button";
+    TagEnum[TagEnum["progress"] = 35] = "progress";
+    TagEnum[TagEnum["select"] = 36] = "select";
+    TagEnum[TagEnum["separator"] = 37] = "separator";
+    TagEnum[TagEnum["single-select"] = 38] = "single-select";
+    TagEnum[TagEnum["skip-nav"] = 39] = "skip-nav";
+    TagEnum[TagEnum["spin"] = 40] = "spin";
+    TagEnum[TagEnum["split-button"] = 41] = "split-button";
+    TagEnum[TagEnum["symbol"] = 42] = "symbol";
+    TagEnum[TagEnum["table"] = 43] = "table";
     TagEnum[TagEnum["table-stateful"] = 44] = "table-stateful";
-    TagEnum[TagEnum["tabs"] = 45] = "tabs";
-    TagEnum[TagEnum["textarea"] = 46] = "textarea";
-    TagEnum[TagEnum["toast-container"] = 47] = "toast-container";
-    TagEnum[TagEnum["toolbar"] = 48] = "toolbar";
-    TagEnum[TagEnum["tooltip"] = 49] = "tooltip";
-    TagEnum[TagEnum["tree"] = 50] = "tree";
-    TagEnum[TagEnum["tree-item"] = 51] = "tree-item";
+    TagEnum[TagEnum["table-stateless"] = 45] = "table-stateless";
+    TagEnum[TagEnum["tabs"] = 46] = "tabs";
+    TagEnum[TagEnum["textarea"] = 47] = "textarea";
+    TagEnum[TagEnum["toast-container"] = 48] = "toast-container";
+    TagEnum[TagEnum["toolbar"] = 49] = "toolbar";
+    TagEnum[TagEnum["tooltip"] = 50] = "tooltip";
+    TagEnum[TagEnum["tree"] = 51] = "tree";
+    TagEnum[TagEnum["tree-item"] = 52] = "tree-item";
 })(TagEnum || (TagEnum = {}));
 
-const KoliBri = new re('kol', KeyEnum, TagEnum);
+const KoliBri = new ne('kol', KeyEnum, TagEnum);
 
 var Bundesministerium;
 (function (Bundesministerium) {
@@ -624,397 +625,415 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Arzneimittel und Mediz
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Bevölkerungsforschung'], ['Bundesinstitut', 'für Bevölkerungsforschung']);
 BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], ['Bundesinstitut', 'für Sportwissenschaft']);
 
-var css_248z$1$ = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, calc(5rem / var(--kolibri-root-font-size, 16)));\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, calc(1rem / var(--kolibri-root-font-size, 16)));\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-headline {\n    font-weight: 700;\n  }\n  .kol-tooltip__floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip__arrow {\n    background-color: var(--color-light);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__content {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+var css_248z$25 = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, Verdana, Arial, Calibri, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, calc(16rem / var(--kolibri-root-font-size, 16)));\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #b4003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-headline {\n    font-weight: 700;\n  }\n  .kol-tooltip__floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip__arrow {\n    background-color: var(--color-light);\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip__content {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
 
-var css_248z$1_ = "@layer kol-theme-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  .kol-accordion {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-left: 2.25em;\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    display: flex;\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within .kol-button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span__container {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n    gap: 0.5em;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button .kol-button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$24 = "@layer kol-theme-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    font-family: var(--font-family);\n  }\n  .kol-accordion {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-accordion__content {\n    margin: 0;\n    padding-left: 2.25em;\n    padding-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading {\n    margin: 0;\n  }\n  .kol-accordion__heading-button {\n    display: flex;\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n  .kol-accordion__heading-button:focus-within .kol-button {\n    outline: 0;\n  }\n  .kol-accordion__heading-button .kol-span__container {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n    gap: 0.5em;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1;\n  }\n  .kol-accordion__heading-button .kol-button {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button :focus {\n    outline: none;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    color: var(--color-primary);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1Z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$23 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1Y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$22 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1X = "@layer kol-theme-component {\n  .kol-badge {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  .kol-badge--has-smart-button {\n    align-items: center;\n  }\n  .kol-badge__smart-button .kol-button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__smart-button .kol-button:hover {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-badge__smart-button .kol-button__text {\n    align-items: center;\n    font-style: normal;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label .kol-span__container {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$21 = "@layer kol-theme-component {\n  .kol-badge {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  .kol-badge--has-smart-button {\n    align-items: center;\n  }\n  .kol-badge__smart-button .kol-button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__smart-button .kol-button:hover {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-badge__smart-button .kol-button__text {\n    align-items: center;\n    font-style: normal;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-badge__label .kol-span__container {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1W = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__list-element-span {\n    color: var(--color-subtle);\n  }\n  .kol-breadcrumb__link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n}";
+var css_248z$20 = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__list-element-span {\n    color: var(--color-subtle);\n  }\n  .kol-breadcrumb__link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-breadcrumb__icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1V = "@layer kol-theme-component {\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary, .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-button .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n}";
+var css_248z$1$ = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary, .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n}";
 
-var css_248z$1U = "@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-button {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    font-size: inherit;\n  }\n  .kol-button:focus {\n    outline: none;\n    --text-border-radius: var(--border-radius);\n    --text-outline: calc(var(--border-width) * 2) solid;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--text-border-radius);\n    outline: var(--text-outline);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1_ = "@layer kol-theme-component {\n  .kol-button {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-button {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    font-size: inherit;\n  }\n  .kol-button:focus {\n    outline: none;\n    --text-border-radius: var(--border-radius);\n    --text-outline: calc(var(--border-width) * 2) solid;\n  }\n  .kol-button:visited {\n    color: var(--visited);\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--text-border-radius);\n    outline: var(--text-outline);\n  }\n  .kol-button:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-button__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n}";
 
-var css_248z$1T = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  .kol-card__headline {\n    line-height: 1.75;\n  }\n}";
+var css_248z$1Z = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n    border-radius: var(--border-radius);\n  }\n  .kol-card__header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-card__content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  .kol-card__headline {\n    line-height: 1.75;\n  }\n}";
 
-var css_248z$1S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__input {\n    flex-grow: 1;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-subtle);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:not(.hidden-error) .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    padding: 0;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1Y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-style: solid;\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-combobox__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n  }\n  .kol-combobox__input {\n    flex-grow: 1;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-combobox__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1R = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading {\n    margin: 0;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__heading-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
+var css_248z$1X = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    border-left: 2px solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading {\n    margin: 0;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__heading-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
 
-var css_248z$1Q = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n  }\n  .kol-drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
+var css_248z$1W = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 4px var(--color-subtle);\n  }\n  .kol-drawer__wrapper--left {\n    animation: slideInLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--left.kol-drawer__wrapper--is-closing {\n    animation: slideOutLeft 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right {\n    animation: slideInRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--right.kol-drawer__wrapper--is-closing {\n    animation: slideOutRight 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top {\n    animation: slideInTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--top.kol-drawer__wrapper--is-closing {\n    animation: slideOutTop 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom {\n    animation: slideInBottom 0.4s forwards;\n  }\n  .kol-drawer__wrapper--bottom.kol-drawer__wrapper--is-closing {\n    animation: slideOutBottom 0.4s forwards;\n  }\n}\n@keyframes slideInLeft {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInTop {\n  from {\n    transform: translateY(-100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideInBottom {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n@keyframes slideOutLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@keyframes slideOutRight {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideOutTop {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(-100%);\n  }\n}\n@keyframes slideOutBottom {\n  from {\n    transform: translateY(0);\n  }\n  to {\n    transform: translateY(100%);\n  }\n}";
 
-var css_248z$1P = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
+var css_248z$1V = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-left: 2px solid var(--color-primary-variant);\n    padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
 
-var css_248z$1O = "@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.667;\n  }\n  .kol-headline--h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.333;\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3 {\n    font-weight: 700;\n  }\n}";
+var css_248z$1U = "@layer kol-theme-component {\n  .kol-headline--h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.667;\n  }\n  .kol-headline--h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.333;\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3 {\n    font-weight: 700;\n  }\n}";
 
-var css_248z$1N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-form-field--disabled .kol-form-field__input {\n    outline: none;\n    cursor: not-allowed;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    cursor: not-allowed;\n  }\n  .kol-field-control {\n    column-gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control {\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    cursor: pointer;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: var(--border-radius);\n    appearance: none;\n    background-color: white;\n    transition: 0.5s;\n    margin: 0;\n  }\n  .kol-checkbox .kol-input:checked, .kol-checkbox .kol-input:indeterminate {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-checkbox .kol-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-checkbox .kol-input:focus {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-checkbox .kol-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-checkbox .kol-input:active {\n    box-shadow: none;\n  }\n  .kol-checkbox .kol-input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .kol-checkbox.kol-checkbox--disabled {\n    opacity: 0.5;\n  }\n  .kol-checkbox--variant-default {\n    width: initial;\n    min-width: initial;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    color: var(--color-light);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input:focus {\n    outline-color: var(--color-primary);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked {\n    background-color: var(--color-primary);\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(2em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(1em);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(2em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(1em, -50%);\n  }\n  .kol-input-checkbox__field-control--variant-button {\n    gap: unset;\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input, .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input {\n    height: 100%;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label-text {\n    margin: auto auto;\n    font-weight: 700;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__input, .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) 0);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) 0 calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__input {\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__label {\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16)) 0 calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) 0 calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) 0);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--hide-label .kol-field-control__input {\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--disabled .kol-field-control__input {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--disabled .kol-field-control__label {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-form-field--disabled .kol-form-field__input {\n    outline: none;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--label-align-left:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n    padding-right: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right:not(.kol-input-checkbox__field-control--variant-button) .kol-field-control__label {\n    padding-left: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n    appearance: none;\n    background-color: white;\n    transition: 0.5s;\n    margin: 0;\n  }\n  .kol-checkbox .kol-input:checked, .kol-checkbox .kol-input:indeterminate {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-checkbox .kol-input:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-checkbox .kol-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-checkbox .kol-input:active {\n    box-shadow: none;\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-checkbox.kol-checkbox--disabled {\n    opacity: 0.5;\n  }\n  .kol-checkbox--variant-default {\n    width: initial;\n    min-width: initial;\n  }\n  .kol-checkbox--variant-default .kol-input {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-default .kol-icon {\n    color: var(--color-light);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox--variant-switch .kol-input:focus {\n    outline-color: var(--color-primary);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox--variant-switch .kol-input:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  .kol-checkbox--variant-switch .kol-input:checked {\n    background-color: var(--color-primary);\n  }\n  .kol-checkbox--variant-switch .kol-input:checked::before {\n    transform: translateX(2em);\n  }\n  .kol-checkbox--variant-switch .kol-input:indeterminate::before {\n    transform: translateX(1em);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    transform: translate(2em, -50%);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--indeterminate .kol-icon {\n    transform: translate(1em, -50%);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input, .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__input {\n    height: 100%;\n    border-width: 1px 0 1px 1px;\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label {\n    border-width: 1px 1px 1px 0;\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-checkbox__field-control--variant-button .kol-field-control__label-text {\n    margin: auto auto;\n    font-weight: 700;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--indeterminate .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__input, .kol-input-checkbox__field-control--variant-button.kol-input-checkbox__field-control--checked .kol-field-control__label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__input, .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled) .kol-field-control__label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) 0);\n  }\n  .kol-input-checkbox__field-control--variant-button:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) 0 calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__input {\n    border-width: 1px 1px 1px 0;\n    border-style: solid solid solid none;\n    border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left .kol-field-control__label {\n    border-width: 1px 0 1px 1px;\n    border-style: solid none solid solid;\n    border-radius: var(--border-radius) 0 0 var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__label {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) 0 calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)));\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--label-align-left:is(:active, :hover):not(.kol-field-control--disabled):not(.kol-field-control--hide-label) .kol-field-control__input {\n    clip-path: inset(calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) calc(-10rem / var(--kolibri-root-font-size, 16)) 0);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--hide-label .kol-field-control__input {\n    border-width: 1px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n  }\n  .kol-input-checkbox__field-control--variant-button.kol-field-control--disabled .kol-field-control__input {\n    opacity: 0.5;\n    outline: none;\n  }\n}";
 
-var css_248z$1M = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-light);\n  border: 1px solid var(--color-subtle);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
 
-var css_248z$1L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1R = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1K = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1Q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1J = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}\n@layer kol-theme-component {\n  .kol-input-container {\n    gap: initial;\n  }\n  .kol-input {\n    padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n    background-color: transparent;\n  }\n}";
+var css_248z$1P = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary, .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-input-container {\n    gap: initial;\n  }\n  .kol-input-container__filename {\n    color: var(--color-subtle);\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-primary);\n  }\n  .kol-button__text {\n    border-top-right-radius: calc(var(--border-radius) - 2px);\n    border-bottom-right-radius: calc(var(--border-radius) - 2px);\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n    white-space: nowrap;\n  }\n  .kol-input {\n    padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n    background-color: transparent;\n  }\n}";
 
-var css_248z$1I = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1G = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control {\n    column-gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field {\n    border: 0;\n    display: grid;\n    font-family: var(--font-family);\n    margin: 0;\n    padding: 0;\n  }\n  .kol-form-field--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field__label {\n    display: inline-block;\n    padding: 0;\n  }\n  .kol-form-field__input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__input--orientation-horizontal {\n    margin-top: calc(var(--spacing) / 2);\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  .kol-field-control__wrapper {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label {\n    padding-top: 0.1em;\n  }\n  .kol-input-radio {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-radius: 50%;\n    line-height: 1.5;\n  }\n  .kol-input-radio:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .kol-input-radio:focus {\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-radio:focus:hover {\n    box-shadow: none;\n  }\n  .kol-input-radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-input-radio:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-input--error:focus {\n    outline-color: var(--color-danger);\n  }\n  .kol-field-control__hint,\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-alert--error {\n    margin-left: -0.25em;\n  }\n}";
+var css_248z$1M = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-field-control--required .kol-field-control__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field {\n    border: 0;\n    display: grid;\n    font-family: var(--font-family);\n    margin: 0;\n    padding: 0;\n  }\n  .kol-form-field--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field__label {\n    display: inline-block;\n    padding: 0;\n  }\n  .kol-form-field__input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__input--orientation-horizontal {\n    margin-top: calc(var(--spacing) / 2);\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  .kol-field-control__label {\n    padding-top: 0.1em;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-radio {\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 50%;\n    line-height: 1.5;\n  }\n  .kol-input-radio:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-input-radio:focus {\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-radio:focus:hover {\n    box-shadow: none;\n  }\n  .kol-input-radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-input-radio:disabled {\n    background-color: var(--color-mute-variant);\n  }\n  .kol-input--error:focus {\n    outline-color: var(--color-danger);\n  }\n  .kol-field-control__hint,\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-alert--error {\n    margin-left: -0.25em;\n  }\n}";
 
-var css_248z$1F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1E = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}";
+var css_248z$1K = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1D = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1J = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1C = "@layer kol-theme-component {\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary, .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-link:disabled:hover .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-link .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link__text {\n    font-weight: 700;\n    border-style: solid;\n    border-radius: var(--a11y-min-size);\n    outline-width: calc(var(--border-width) * 2);\n  }\n  .kol-link:focus .kol-link__text {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-link:disabled:hover .kol-link__text {\n    box-shadow: none;\n  }\n  .kol-link:focus:hover .kol-link__text {\n    box-shadow: none;\n  }\n}";
+var css_248z$1I = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n  }\n  .kol-link__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary, .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-link:disabled:hover .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1B = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  :host {\n    font-family: inherit;\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
+var css_248z$1H = "@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 4px var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n}";
 
-var css_248z$1A = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-mute);\n  }\n  .kol-nav__list {\n    list-style: none;\n  }\n  .kol-nav__list--nested {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__list--nested .kol-link,\n  .kol-nav__list--nested .kol-button {\n    font-weight: normal !important;\n    border-left-color: transparent !important;\n  }\n  .kol-nav__entry--link {\n    display: flex;\n  }\n  .kol-nav__entry .kol-link:hover {\n    text-decoration: underline;\n  }\n  .kol-nav__entry .kol-link,\n  .kol-nav__entry .kol-button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .kol-nav__entry .kol-link:focus-visible,\n  .kol-nav__entry .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__list--vertical .kol-nav__entry .kol-link,\n  .kol-nav__list--vertical .kol-nav__entry .kol-button {\n    border-left: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--horizontal .kol-nav__entry .kol-link,\n  .kol-nav--horizontal .kol-nav__entry .kol-button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    border-left-color: var(--color-primary);\n  }\n  .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    font-weight: bold;\n  }\n  .kol-nav__expand-button {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__expand-button .kol-button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-nav__expand-button .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__expand-button .kol-button__text {\n    justify-content: center;\n  }\n}";
+var css_248z$1G = "@layer kol-theme-component {\n  .kol-link {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link:visited {\n    color: var(--visited);\n  }\n  .kol-link:focus .kol-link__text {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  .kol-link:is(:focus, :hover):not([aria-disabled], [disabled]) .kol-link__text .kol-span__label {\n    text-decoration-thickness: 0.25em;\n  }\n  :host {\n    font-family: inherit;\n  }\n  .kol-link {\n    line-height: 1;\n  }\n}";
 
-var css_248z$1z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-button__text {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n    border: 0;\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n}";
+var css_248z$1F = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-mute);\n  }\n  .kol-nav__list {\n    list-style: none;\n  }\n  .kol-nav__list--nested {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__list--nested .kol-link,\n  .kol-nav__list--nested .kol-button {\n    font-weight: normal !important;\n    border-left-color: transparent !important;\n  }\n  .kol-nav__entry--link {\n    display: flex;\n  }\n  .kol-nav__entry .kol-link:hover {\n    text-decoration: underline;\n  }\n  .kol-nav__entry .kol-link,\n  .kol-nav__entry .kol-button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .kol-nav__entry .kol-link:focus-visible,\n  .kol-nav__entry .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__list--vertical .kol-nav__entry .kol-link,\n  .kol-nav__list--vertical .kol-nav__entry .kol-button {\n    border-left: 2px solid transparent;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--horizontal .kol-nav__entry .kol-link,\n  .kol-nav--horizontal .kol-nav__entry .kol-button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav--vertical .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    border-left-color: var(--color-primary);\n  }\n  .kol-nav__list-item--active .kol-nav__entry .kol-link,\n  .kol-nav__list-item--active .kol-nav__entry .kol-button {\n    font-weight: bold;\n  }\n  .kol-nav__expand-button {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__expand-button .kol-button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .kol-nav__expand-button .kol-button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__expand-button .kol-button__text {\n    justify-content: center;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-nav__toggle-button .kol-button:disabled:hover .kol-nav__toggle-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n}";
 
-var css_248z$1y = "@layer kol-theme-component {\n  .kol-progress {\n    font-family: var(--font-family);\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-primary-variant);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-mute-variant);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
+var css_248z$1E = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-pagination__button--selected .kol-button {\n    opacity: 1;\n  }\n  .kol-button__text {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n    border: 0;\n  }\n  .kol-button:focus .kol-button__text {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:is(:active, :hover):not(:disabled) .kol-button__text {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .kol-button:active .kol-button__text {\n    color: var(--color-light);\n    outline: none;\n  }\n}";
 
-var css_248z$1x = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  .kol-select__option:disabled {\n    cursor: not-allowed;\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n}";
+var css_248z$1D = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary, .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-popover-button__popover {\n    border: var(--border-width) solid var(--color-primary);\n    padding: var(--spacing);\n  }\n}";
 
-var css_248z$1w = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .single-select__group {\n    width: 100%;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__input {\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-subtle);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-primary);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    width: 100%;\n  }\n  .single-select__item {\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:not(.hidden-error) .kol-alert {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n    padding: 0;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error:not(.hidden-error) .input:focus-within {\n    outline-color: var(--color-danger);\n  }\n  .kol-input.error:not(.hidden-error) .kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1C = "@layer kol-theme-component {\n  .kol-progress {\n    font-family: var(--font-family);\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-primary-variant);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-mute-variant);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
 
-var css_248z$1v = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
+var css_248z$1B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-select {\n    border: none;\n  }\n  .kol-select[multiple] {\n    overflow: auto;\n  }\n  .kol-select__option {\n    margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n    border-radius: var(--border-radius);\n  }\n  .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-select:not([multiple]) .kol-select__option {\n    padding: 0.5em;\n  }\n}";
 
-var css_248z$1u = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-split-button__button .kol-button .kol-span {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .kol-split-button__horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__secondary-button {\n    height: 100%;\n  }\n  .kol-split-button__secondary-button .kol-span {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-span {\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--secondary, .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-split-button .kol-button--primary:not([disabled]):hover, .kol-split-button .kol-button--secondary:not([disabled]):hover, .kol-split-button .kol-button--normal:not([disabled]):hover, .kol-split-button .kol-button--danger:not([disabled]):hover, .kol-split-button .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-split-button .kol-button:disabled:hover .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-split-button .kol-button .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1A = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option:focus {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n    outline: 0;\n  }\n  .kol-custom-suggestions-options-group {\n    border-style: solid;\n    border-width: 1px;\n    border-radius: var(--border-radius);\n    border-color: var(--color-subtle);\n    overflow-y: auto;\n    overflow-x: hidden;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    left: calc(-8rem / var(--kolibri-root-font-size, 16));\n    right: calc(-8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle {\n    display: grid;\n    place-items: center;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-toggle:focus {\n    outline: 0;\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-single-select__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n  }\n  .kol-single-select__input {\n    flex-grow: 1;\n    border: none;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-single-select__input::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1t = "@layer kol-theme-component {\n  .kol-table {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-table-stateful__pagination {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
+var css_248z$1z = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
 
-var css_248z$1s = "@layer kol-theme-component {\n  .kol-table {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-primary-variant);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(3rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: calc(5rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n    border-color: var(--color-primary);\n  }\n}";
+var css_248z$1y = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .kol-split-button__button .kol-button .kol-span {\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n  }\n  .kol-split-button__horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__secondary-button {\n    height: 100%;\n  }\n  .kol-split-button__secondary-button .kol-span {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-span {\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-split-button .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--secondary, .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-split-button .kol-button--primary:not([disabled]):hover, .kol-split-button .kol-button--secondary:not([disabled]):hover, .kol-split-button .kol-button--normal:not([disabled]):hover, .kol-split-button .kol-button--danger:not([disabled]):hover, .kol-split-button .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-split-button .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-split-button .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-split-button .kol-button:disabled:hover .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-split-button__button .kol-button__text {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n  .kol-split-button__secondary-button .kol-button__text {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n  .kol-split-button .kol-button {\n    height: 100%;\n  }\n  .kol-split-button .kol-button__text {\n    height: 100%;\n    border: none;\n  }\n}";
 
-var css_248z$1r = "@layer kol-theme-component {\n  .kol-tabs {\n    font-family: var(--font-family);\n    display: grid;\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-top {\n    --display: flex;\n    --grid-template-rows: auto 1fr;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    flex-wrap: wrap;\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n  }\n  .kol-tabs .kol-button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    border: none;\n    font-style: normal;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__content {\n    padding: 0.25em 0;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n  .kol-tabs .kol-button-wc {\n    width: 100%;\n  }\n}";
+var css_248z$1x = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary, .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled]):hover, .kol-table-settings__content .kol-button--normal:not([disabled]):hover, .kol-table-settings__content .kol-button--danger:not([disabled]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-table-settings__content .kol-button:disabled:hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-table-stateful__pagination {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
 
-var css_248z$1q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) {\n    border-left: calc(3rem / var(--kolibri-root-font-size, 16)) solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hidden-error) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n  .kol-input:disabled {\n    cursor: not-allowed;\n  }\n}\n@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter {\n    order: 4;\n  }\n  .kol-form-field__hint {\n    order: 5;\n  }\n  .kol-textarea {\n    border: none;\n    display: block;\n    overflow: auto;\n  }\n  .kol-textarea:disabled {\n    cursor: not-allowed;\n  }\n  .kol-textarea::placeholder {\n    color: var(--color-subtle);\n  }\n}";
+var css_248z$1w = "@layer kol-theme-component {\n  .kol-table-settings {\n    right: calc(8rem / var(--kolibri-root-font-size, 16));\n    top: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content {\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__content .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-table-settings__content .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-table-settings__content .kol-button:focus {\n    outline: none;\n  }\n  .kol-table-settings__content .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--secondary, .kol-table-settings__content .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-table-settings__content .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-table-settings__content .kol-button--primary:not([disabled]):hover, .kol-table-settings__content .kol-button--secondary:not([disabled]):hover, .kol-table-settings__content .kol-button--normal:not([disabled]):hover, .kol-table-settings__content .kol-button--danger:not([disabled]):hover, .kol-table-settings__content .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-table-settings__content .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-table-settings__content .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-table-settings__content .kol-button--hide-label .kol-table-settings__content .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-table-settings__content .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-table-settings__content .kol-button:disabled:hover .kol-table-settings__content .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-table-settings__error-message {\n    display: block;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__columns {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-settings__actions {\n    border-top: var(--border-width) solid var(--color-mute-variant);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    justify-content: flex-end;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table, .kol-table__caption {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  .kol-table__caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) var(--a11y-min-size) calc(8rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(var(--a11y-min-size) + 2px);\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-table__cell {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-primary);\n    background-color: var(--color-light);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__spacer {\n    display: table-row;\n    height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__spacer-line {\n    border-width: 0;\n    border-color: var(--color-primary-variant);\n    border-style: solid;\n  }\n  .kol-table__spacer-line--foot {\n    border-bottom-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__spacer-line--head {\n    border-top-width: calc(var(--border-width) * 2);\n  }\n  .kol-table__row--body:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  .kol-table__selection-input:not(:disabled):hover {\n    border-color: var(--color-primary);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-primary);\n    outline-color: var(--color-primary-variant);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 3px;\n  }\n  .kol-table__selection-input:focus:hover {\n    box-shadow: none;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-subtle);\n    border-radius: 5px;\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-color: var(--color-subtle);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-primary);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-light);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-primary);\n  }\n}";
 
-var css_248z$1p = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :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  .kol-toast-item {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1v = "@layer kol-theme-component {\n  .kol-tabs {\n    font-family: var(--font-family);\n    display: grid;\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-display: grid;\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: flex;\n    --grid-template-rows: 1fr auto;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 1;\n  }\n  .kol-tabs--align-top {\n    --display: flex;\n    --grid-template-rows: auto 1fr;\n    --button-group-gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: var(--display);\n    flex-wrap: wrap;\n    gap: var(--button-group-gap);\n    order: var(--button-group-order);\n  }\n  .kol-tabs .kol-button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    border: none;\n    font-style: normal;\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  .kol-tabs .kol-button:hover {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button.primary, .kol-tabs .kol-button.selected {\n    color: var(--color-primary);\n  }\n  .kol-tabs .kol-button:not(.kol-tabs .kol-button.selected) .kol-span__container {\n    padding-bottom: 0.25em;\n  }\n  .kol-tabs .kol-button.selected .kol-span__container {\n    border-bottom: 0.25em solid;\n  }\n  .kol-tabs .kol-button .kol-span__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__content {\n    padding: 0.25em 0;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n  .kol-tabs .kol-button-wc {\n    width: 100%;\n  }\n}";
 
-var css_248z$1o = "@layer kol-theme-component {\n  .kol-toolbar {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    background-color: var(--color-light);\n    border-width: var(--border-width);\n    border-style: solid;\n  }\n}";
+var css_248z$1u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field--error:not(.kol-form-field--hide-msg) .kol-form-field__msg.kol-alert--error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    padding-left: 0.125em;\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-input-container {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    gap: calc(6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment {\n    min-width: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--start > .kol-icon {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container__adornment--end > .kol-icon {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input-container--disabled {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n    cursor: not-allowed;\n  }\n  .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-primary);\n  }\n  .kol-input-container:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-input-container--error:focus-within {\n    outline-color: var(--color-danger);\n  }\n}\n@layer kol-theme-component {\n  .kol-input {\n    background-color: transparent;\n    border: none;\n  }\n  .kol-input::placeholder {\n    color: var(--color-subtle);\n  }\n}\n@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-form-field__msg {\n    order: 1;\n  }\n  .kol-form-field__label {\n    order: 2;\n  }\n  .kol-form-field__input {\n    order: 3;\n  }\n  .kol-form-field__counter {\n    order: 4;\n  }\n  .kol-form-field__hint {\n    order: 5;\n  }\n  .kol-textarea {\n    border: none;\n    display: block;\n    overflow: auto;\n  }\n  .kol-textarea::placeholder {\n    color: var(--color-subtle);\n  }\n}";
 
-var css_248z$1n = "@layer kol-theme-component {\n  .kol-tree-item__link {\n    display: block;\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .kol-tree-item__link .kol-link {\n    display: block;\n    color: var(--color-text);\n    text-decoration: none;\n    text-align: left;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    outline-offset: 0;\n    color: var(--color-light);\n  }\n  .kol-tree-item__link--active {\n    background-color: var(--color-primary);\n  }\n  .kol-tree-item__link--active .kol-link {\n    color: var(--color-light);\n  }\n  .kol-tree-item__toggle-button {\n    display: inline-block;\n  }\n  .kol-tree-item__toggle-button:hover {\n    transform: scale(1.3);\n  }\n}";
+var css_248z$1t = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    background-color: var(--color-light);\n  }\n  .kol-alert--msg {\n    align-items: start;\n  }\n  .kol-alert--card {\n    border-radius: var(--border-radius);\n    border: var(--border-width) solid var(--alert-accent-color);\n    filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-subtle);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-danger);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-primary);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-success);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-warning);\n  }\n  .kol-alert__container {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert--card .kol-alert__container {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--alert-accent-color);\n  }\n  .kol-alert__container-content {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__container-content {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__close-button {\n    place-self: center;\n  }\n  .kol-alert__close-button .kol-button {\n    border-radius: 50%;\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .kol-alert--msg .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-button {\n    color: var(--color-light);\n  }\n  .kol-alert__close-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading {\n    color: var(--alert-accent-color);\n    padding-top: calc(--var-spacing / 2);\n  }\n  .kol-alert--card .kol-alert__heading {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n  }\n  .kol-alert__heading-icon {\n    color: var(--color-light);\n    padding: 0;\n  }\n  .kol-alert:not(.kol-alert--default) .kol-alert__heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n    place-items: baseline;\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    justify-self: right;\n    margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :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  .kol-toast-item {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1m = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-radius: var(--border-radius);\n  }\n  .kol-tree:focus-within {\n    outline: 0;\n  }\n  .kol-tree:focus-within ul {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-primary);\n  }\n}";
+var css_248z$1s = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n  }\n  .kol-button__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-button--secondary, .kol-button--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-button--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-button--primary:not([disabled]):hover, .kol-button--secondary:not([disabled]):hover, .kol-button--normal:not([disabled]):hover, .kol-button--danger:not([disabled]):hover, .kol-button--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-button--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button--hide-label .kol-button__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-button:disabled:hover .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n  .kol-link__text {\n    font-weight: 700;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-radius: var(--border-radius);\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-primary);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-light);\n  }\n  .kol-link--secondary, .kol-link--normal {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n    --text-color: var(--color-light);\n  }\n  .kol-link--ghost {\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-light);\n    --text-color: var(--color-primary);\n    --text-box-shadow: none;\n  }\n  .kol-link--primary:not([disabled]):hover, .kol-link--secondary:not([disabled]):hover, .kol-link--normal:not([disabled]):hover, .kol-link--danger:not([disabled]):hover, .kol-link--ghost:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n  .kol-link--danger:not([disabled]):hover {\n    --text-background-color: var(--color-danger);\n    --text-border-color: var(--color-danger);\n  }\n  .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-link__text:hover {\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link--hide-label .kol-link__text {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link:focus {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n    transition: 200ms outline-offset linear;\n  }\n  .kol-link:disabled:hover .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    box-shadow: none;\n  }\n  .kol-toolbar {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n    border-radius: var(--border-radius);\n    background-color: var(--color-light);\n    border-width: var(--border-width);\n    border-style: solid;\n  }\n  .kol-link {\n    text-decoration: none;\n    --text-background-color: var(--color-light);\n    --text-border-color: var(--color-primary);\n    --text-color: var(--color-primary);\n  }\n  .kol-link:not([disabled]):hover {\n    --text-background-color: var(--color-primary-variant);\n    --text-border-color: var(--color-primary-variant);\n    --text-color: var(--color-light);\n  }\n}";
+
+var css_248z$1r = "@layer kol-theme-component {\n  .kol-tree-item {\n    --tree-item-indentation: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: 1px solid transparent;\n  }\n  .kol-tree-item__link .kol-link {\n    color: var(--color-text);\n    text-align: left;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    border: 1px solid var(--color-primary);\n    background-color: var(--color-primary-variant);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    outline-offset: 0;\n    color: var(--color-light);\n  }\n  .kol-tree-item__link--active {\n    background-color: var(--color-primary);\n  }\n  .kol-tree-item__link--active .kol-link {\n    color: var(--color-light);\n  }\n  .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n    transform: scale(1.6);\n  }\n  .kol-tree-item__text {\n    text-decoration: none;\n  }\n}";
+
+var css_248z$1q = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    border: 2px solid transparent;\n    border-radius: var(--border-radius);\n  }\n  .kol-tree:focus-within {\n    outline: 0;\n  }\n  .kol-tree:focus-within ul {\n    border: 2px solid var(--color-primary);\n  }\n}";
 
 const DEFAULT = KoliBri.createTheme('default', {
-    GLOBAL: css_248z$1$,
-    'KOL-ACCORDION': css_248z$1_,
-    'KOL-ALERT': css_248z$1Z,
-    'KOL-AVATAR': css_248z$1Y,
-    'KOL-BADGE': css_248z$1X,
-    'KOL-BREADCRUMB': css_248z$1W,
-    'KOL-BUTTON': css_248z$1V,
-    'KOL-BUTTON-LINK': css_248z$1U,
-    'KOL-CARD': css_248z$1T,
-    'KOL-COMBOBOX': css_248z$1S,
-    'KOL-DETAILS': css_248z$1R,
-    'KOL-DRAWER': css_248z$1Q,
-    'KOL-FORM': css_248z$1P,
-    'KOL-HEADING': css_248z$1O,
-    'KOL-INPUT-CHECKBOX': css_248z$1N,
-    'KOL-INPUT-COLOR': css_248z$1M,
-    'KOL-INPUT-DATE': css_248z$1L,
-    'KOL-INPUT-EMAIL': css_248z$1K,
-    'KOL-INPUT-FILE': css_248z$1J,
-    'KOL-INPUT-NUMBER': css_248z$1I,
-    'KOL-INPUT-PASSWORD': css_248z$1H,
-    'KOL-INPUT-RADIO': css_248z$1G,
-    'KOL-INPUT-RANGE': css_248z$1F,
-    'KOL-INPUT-TEXT': css_248z$1E,
-    'KOL-KOLIBRI': css_248z$1D,
-    'KOL-LINK': css_248z$1B,
-    'KOL-LINK-BUTTON': css_248z$1C,
-    'KOL-NAV': css_248z$1A,
-    'KOL-PAGINATION': css_248z$1z,
-    'KOL-PROGRESS': css_248z$1y,
-    'KOL-SELECT': css_248z$1x,
-    'KOL-SINGLE-SELECT': css_248z$1w,
-    'KOL-SKIP-NAV': css_248z$1v,
-    'KOL-SPLIT-BUTTON': css_248z$1u,
-    'KOL-TABLE-STATEFUL': css_248z$1t,
-    'KOL-TABLE-STATELESS': css_248z$1s,
-    'KOL-TABS': css_248z$1r,
-    'KOL-TEXTAREA': css_248z$1q,
-    'KOL-TOAST-CONTAINER': css_248z$1p,
-    'KOL-TOOLBAR': css_248z$1o,
-    'KOL-TREE': css_248z$1m,
-    'KOL-TREE-ITEM': css_248z$1n,
+    GLOBAL: css_248z$25,
+    'KOL-ACCORDION': css_248z$24,
+    'KOL-ALERT': css_248z$23,
+    'KOL-AVATAR': css_248z$22,
+    'KOL-BADGE': css_248z$21,
+    'KOL-BREADCRUMB': css_248z$20,
+    'KOL-BUTTON': css_248z$1$,
+    'KOL-BUTTON-LINK': css_248z$1_,
+    'KOL-CARD': css_248z$1Z,
+    'KOL-COMBOBOX': css_248z$1Y,
+    'KOL-DETAILS': css_248z$1X,
+    'KOL-DRAWER': css_248z$1W,
+    'KOL-FORM': css_248z$1V,
+    'KOL-HEADING': css_248z$1U,
+    'KOL-INPUT-CHECKBOX': css_248z$1T,
+    'KOL-INPUT-COLOR': css_248z$1S,
+    'KOL-INPUT-DATE': css_248z$1R,
+    'KOL-INPUT-EMAIL': css_248z$1Q,
+    'KOL-INPUT-FILE': css_248z$1P,
+    'KOL-INPUT-NUMBER': css_248z$1O,
+    'KOL-INPUT-PASSWORD': css_248z$1N,
+    'KOL-INPUT-RADIO': css_248z$1M,
+    'KOL-INPUT-RANGE': css_248z$1L,
+    'KOL-INPUT-TEXT': css_248z$1K,
+    'KOL-KOLIBRI': css_248z$1J,
+    'KOL-LINK': css_248z$1G,
+    'KOL-LINK-BUTTON': css_248z$1I,
+    'KOL-MODAL': css_248z$1H,
+    'KOL-NAV': css_248z$1F,
+    'KOL-PAGINATION': css_248z$1E,
+    'KOL-POPOVER-BUTTON': css_248z$1D,
+    'KOL-PROGRESS': css_248z$1C,
+    'KOL-SELECT': css_248z$1B,
+    'KOL-SINGLE-SELECT': css_248z$1A,
+    'KOL-SKIP-NAV': css_248z$1z,
+    'KOL-SPLIT-BUTTON': css_248z$1y,
+    'KOL-TABLE-STATEFUL': css_248z$1x,
+    'KOL-TABLE-STATELESS': css_248z$1w,
+    'KOL-TABS': css_248z$1v,
+    'KOL-TEXTAREA': css_248z$1u,
+    'KOL-TOAST-CONTAINER': css_248z$1t,
+    'KOL-TOOLBAR': css_248z$1s,
+    'KOL-TREE': css_248z$1q,
+    'KOL-TREE-ITEM': css_248z$1r,
 });
 
-var css_248z$1l = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n}";
+var css_248z$1p = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
+
+var css_248z$1o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion {\n    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n  }\n  .kol-accordion__heading-button .kol-button {\n    text-align: left;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    display: flex;\n    place-items: center;\n    line-height: 1.2;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n    width: 100%;\n    border: none;\n  }\n  .kol-accordion__heading-button .kol-button:focus, .kol-accordion__heading-button .kol-button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -2px;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: 0;\n    margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
+
+var css_248z$1n = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$1k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion {\n    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-button {\n    text-align: left;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    display: flex;\n    place-items: center;\n    line-height: 1.2;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n    padding: calc(12rem / var(--kolibri-root-font-size, 16)) 0;\n    width: 100%;\n    border: none;\n  }\n  .kol-accordion__heading-button .kol-button:focus, .kol-accordion__heading-button .kol-button:hover {\n    background-color: var(--color-grey-25);\n  }\n  .kol-accordion__heading-button .kol-button:focus {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-bottom: calc(12rem / var(--kolibri-root-font-size, 16));\n    margin-inline-end: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: 0;\n    margin-top: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
+var css_248z$1m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1j = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1l = "@layer kol-theme-component {\n  .kol-badge {\n    font: normal normal var(--font-weight) 1em var(--font-family);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n    text-transform: uppercase;\n  }\n}";
 
-var css_248z$1i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1k = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-breadcrumb__icon::part(icon separator)::before {\n    color: var(--color-blue);\n  }\n  .kol-breadcrumb__icon[exportparts*=separator] {\n    margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding: 0;\n  }\n  .kol-breadcrumb__list-element:last-child {\n    color: var(--color-grey-75);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$1h = "@layer kol-theme-component {\n  .kol-badge {\n    font: normal normal var(--font-weight) 1em var(--font-family);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n    text-transform: uppercase;\n  }\n}";
+var css_248z$1j = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n}";
 
-var css_248z$1g = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-breadcrumb__icon::part(icon separator)::before {\n    color: var(--color-blue);\n  }\n  .kol-breadcrumb__icon[exportparts*=separator] {\n    margin-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin-inline-start: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding: 0;\n  }\n  .kol-breadcrumb__list-element:last-child {\n    color: var(--color-grey-75);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$1i = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n  .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$1f = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--primary:hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-button--normal:hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--ghost:hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$1h = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  .kol-card__headline {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75em;\n  }\n  .kol-card__header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
 
-var css_248z$1e = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n  .badge-text-hint {\n    background-color: var(--color-mute-variant);\n    border-radius: calc(3rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var css_248z$1g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .combobox:not(.combobox--disabled) .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
 
-var css_248z$1d = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  .kol-card__headline {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75em;\n  }\n  .kol-card__header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
+var css_248z$1f = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    border-end-start-radius: 0;\n    border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    margin: 0;\n  }\n}";
 
-var css_248z$1c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    display: block;\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .combobox:not(.combobox--disabled) .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$1e = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$1b = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    border-end-start-radius: 0;\n    border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    margin: 0;\n  }\n}";
+var css_248z$1d = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-end-start-radius: 0;\n    border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
 
-var css_248z$1a = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
+var css_248z$1c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.143;\n  }\n  .kol-headline--h3 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1667;\n  }\n  .kol-headline--h4 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h5 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .kol-headline--h6 {\n    color: rgb(234, 0, 255);\n  }\n}";
 
-var css_248z$19 = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    border-end-start-radius: 0;\n    border-inline-start: calc(10rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$1b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:not(:disabled):hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:not(:disabled):hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
 
-var css_248z$18 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.143;\n  }\n  .kol-headline--h3 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.1667;\n  }\n  .kol-headline--h4 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.4;\n  }\n  .kol-headline--h5 {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.5;\n  }\n  .kol-headline--h6 {\n    color: rgb(234, 0, 255);\n  }\n}";
+var css_248z$1a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-blue);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
 
-var css_248z$17 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch:hover .kol-input::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$19 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$16 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$18 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$15 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$17 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-button__text {\n    white-space: nowrap;\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue) !important;\n  }\n}";
 
-var css_248z$14 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$16 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$13 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$15 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$12 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$14 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: 2px solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
 
-var css_248z$11 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$13 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}";
 
-var css_248z$10 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
+var css_248z$12 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$$ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$11 = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$_ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$10 = "@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$Z = "@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var css_248z$$ = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$Y = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$_ = "@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$X = "@layer kol-theme-component {\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var css_248z$Z = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color) !important;\n    text-decoration: none !important;\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:focus .kol-nav__toggle-button .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    border-color: transparent;\n    border-style: solid;\n    border-width: 2px;\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
 
-var css_248z$W = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    border-color: transparent;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
+var css_248z$Y = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .kol-button {\n    appearance: none;\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n  }\n  .kol-button__text {\n    background-color: var(--color-yellow);\n    border: 2px solid var(--color-yellow);\n    color: var(--color-black);\n    font-weight: var(--font-weight-bold);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n  }\n  .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-button:focus .kol-button__text {\n    outline-offset: -4px;\n    outline: 2px solid var(--color-black);\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    opacity: 1;\n    text-decoration: underline;\n  }\n  .kol-button:disabled .kol-button__text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}";
 
-var css_248z$V = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .kol-button {\n    appearance: none;\n    background-color: none;\n    outline: none;\n    text-decoration: none;\n  }\n  .kol-button__text {\n    background-color: var(--color-yellow);\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow);\n    color: var(--color-black);\n    font-weight: var(--font-weight-bold);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n  }\n  .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .kol-button:focus .kol-button__text {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    opacity: 1;\n    text-decoration: underline;\n  }\n  .kol-button:disabled .kol-button__text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n}";
+var css_248z$X = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n}";
 
-var css_248z$U = "@layer kol-theme-component {\n  .kol-progress {\n    font-family: var(--font-family);\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-blue-130);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-grey-25);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-blue-130);\n  }\n}";
+var css_248z$W = "@layer kol-theme-component {\n  .kol-progress {\n    font-family: var(--font-family);\n  }\n  .kol-progress__bar-progress {\n    fill: var(--color-blue-130);\n  }\n  .kol-progress__cycle-background {\n    stroke: var(--color-grey-25);\n  }\n  .kol-progress__cycle-progress {\n    stroke: var(--color-blue-130);\n  }\n}";
 
-var css_248z$T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    display: block;\n    position: relative;\n  }\n  .single-select__group {\n    display: inline-flex;\n    text-align: left;\n    width: 100%;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    cursor: pointer;\n    padding-left: 1em;\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .single-select__item {\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: 1em;\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$U = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    display: block;\n    position: relative;\n  }\n  .single-select__group {\n    display: inline-flex;\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 1rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n  }\n  .single-select__item {\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: 1em;\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
 
-var css_248z$R = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    font-weight: var(--font-weight-bold);\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: 0.25em 0.75em;\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    cursor: pointer;\n  }\n}";
+var css_248z$T = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: 0.25em 0.75em;\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    cursor: pointer;\n  }\n}";
 
-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-75);\n  }\n}";
+var css_248z$S = "@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}";
 
-var css_248z$P = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button .kol-span {\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-split-button .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-split-button .kol-button:focus {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-split-button .kol-button--normal:hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button--secondary:focus .kol-split-button .kol-button__text {\n    outline-offset: calc(-6rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--ghost:focus .kol-split-button .kol-button__text {\n    outline-offset: calc(-2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$R = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button .kol-span {\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-split-button .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-split-button .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-split-button .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-split-button .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-split-button .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-split-button .kol-button--secondary:focus .kol-split-button .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-split-button .kol-button--ghost:focus .kol-split-button .kol-button__text {\n    outline-offset: -2px;\n  }\n}";
 
-var css_248z$O = "@layer kol-theme-component {\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--radio:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table-stateful {\n    font-family: var(--font-family);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    overflow-x: auto;\n    overflow-y: hidden;\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
+var css_248z$Q = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table-stateful {\n    font-family: var(--font-family);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    overflow-x: auto;\n    overflow-y: hidden;\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
 
-var css_248z$N = "@layer kol-theme-component {\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--radio:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n    border-color: var(--color-blue);\n  }\n}";
+var css_248z$P = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    background-color: var(--color-white);\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  .kol-table__cell--ascending, .kol-table__cell--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--ascending .kol-button, .kol-table__cell--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
 
-var css_248z$M = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 calc(-3rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-tabs .kol-button .kol-span {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    border-bottom: 1px solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-tabs .kol-button .kol-span {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n}";
 
-var css_248z$L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-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  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n}";
+var css_248z$M = "@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  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-toast-item .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n}";
 
-var css_248z$J = "@layer kol-theme-component {\n  .kol-toolbar {\n    padding: var(--spacing-s);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    background-color: var(--color-grey-5);\n  }\n}";
+var css_248z$L = "@layer kol-theme-component {\n  .kol-button {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-button:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-button--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-button--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-button--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-button--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-button__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button--secondary:focus .kol-button__text {\n    outline-offset: -6px;\n  }\n  .kol-button--ghost:focus .kol-button__text {\n    outline-offset: -2px;\n  }\n  .kol-link {\n    font-family: var(--font-family);\n    appearance: none;\n    outline: none;\n    text-decoration: none;\n    --text-focus-outline-color: var(--color-black);\n  }\n  .kol-link:focus {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--primary {\n    --text-background-color: var(--color-blue);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-white);\n  }\n  .kol-link--primary:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-link--primary:not(:disabled):hover {\n    --text-background-color: var(--color-blue-130);\n    --text-border-color: var(--color-blue-130);\n  }\n  .kol-link--secondary {\n    --text-background-color: var(--color-white);\n    --text-border-color: var(--color-blue);\n    --text-color: var(--color-blue);\n  }\n  .kol-link--secondary:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-link--secondary:not(:disabled):hover {\n    --text-border-color: var(--color-blue-130);\n    --text-color: var(--color-blue-130);\n  }\n  .kol-link--normal {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-link--normal:not(:disabled):hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-link--danger:focus {\n    --text-focus-outline-color: var(--color-white);\n  }\n  .kol-link--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-link--ghost {\n    --text-background-color: transparent;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue);\n  }\n  .kol-link--ghost:focus {\n    --text-focus-outline-color: var(--color-blue);\n  }\n  .kol-link--ghost:not(:disabled):hover {\n    --text-background-color: unset;\n    --text-border-color: transparent;\n    --text-color: var(--color-blue-130);\n  }\n  .kol-link__text {\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n    line-height: 1.2;\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-link--secondary:focus .kol-link__text {\n    outline-offset: -6px;\n  }\n  .kol-link--ghost:focus .kol-link__text {\n    outline-offset: -2px;\n  }\n  .kol-toolbar {\n    padding: var(--spacing-s);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    background-color: var(--color-grey-5);\n  }\n  .kol-link {\n    --text-background-color: var(--color-yellow);\n    --text-border-color: var(--color-yellow);\n    --text-color: var(--color-black);\n  }\n  .kol-link:hover {\n    --text-background-color: var(--color-yellow-120);\n    --text-border-color: var(--color-yellow-120);\n  }\n}";
 
-var css_248z$I = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\n  }\n}";
+var css_248z$K = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\n  }\n}";
 
-var css_248z$H = "@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    background-color: var(--color-sky);\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-yellow-120);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-black);\n  }\n  .kol-tree-item__link--active {\n    font-weight: 700;\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link--active .kol-link {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link .kol-link {\n    display: block;\n    color: var(--color-black);\n    text-decoration: none;\n    text-align: left;\n  }\n  .kol-tree-item__link .kol-link:focus {\n    color: var(--color-black);\n  }\n  .kol-tree-item__toggle-button {\n    display: inline-block;\n  }\n  .kol-tree-item__toggle-button:hover {\n    transform: scale(1.3);\n  }\n}";
+var css_248z$J = "@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: 2px solid transparent;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    background-color: var(--color-sky);\n    border: 2px solid var(--color-yellow-120);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-black);\n  }\n  .kol-tree-item__link--active {\n    font-weight: 700;\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link--active .kol-link {\n    color: var(--color-black);\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link .kol-link {\n    color: var(--color-black);\n    text-align: left;\n  }\n  .kol-tree-item__link .kol-link:focus {\n    color: var(--color-black);\n  }\n  .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n    transform: scale(1.3);\n  }\n  .kol-tree-item__text {\n    text-decoration: none;\n  }\n}";
 
 const ECL_EC = KoliBri.createTheme('ecl-ec', {
-    GLOBAL: css_248z$1l,
-    'KOL-HEADING': css_248z$18,
-    'KOL-ACCORDION': css_248z$1k,
-    'KOL-BUTTON': css_248z$1f,
-    'KOL-LINK-BUTTON': css_248z$Z,
-    'KOL-BADGE': css_248z$1h,
-    'KOL-ALERT': css_248z$1j,
-    'KOL-AVATAR': css_248z$1i,
-    'KOL-TABS': css_248z$M,
-    'KOL-LINK': css_248z$X,
-    'KOL-BUTTON-LINK': css_248z$1e,
-    'KOL-BREADCRUMB': css_248z$1g,
-    'KOL-DETAILS': css_248z$1b,
-    'KOL-DRAWER': css_248z$1a,
-    'KOL-PROGRESS': css_248z$U,
-    'KOL-SPIN': css_248z$Q,
-    'KOL-SINGLE-SELECT': css_248z$S,
-    'KOL-PAGINATION': css_248z$V,
-    'KOL-INPUT-CHECKBOX': css_248z$17,
-    'KOL-INPUT-COLOR': css_248z$16,
-    'KOL-CARD': css_248z$1d,
-    'KOL-COMBOBOX': css_248z$1c,
-    'KOL-INPUT-RADIO': css_248z$10,
-    'KOL-INPUT-RANGE': css_248z$$,
-    'KOL-INPUT-TEXT': css_248z$_,
-    'KOL-KOLIBRI': css_248z$Y,
-    'KOL-INPUT-PASSWORD': css_248z$11,
-    'KOL-INPUT-NUMBER': css_248z$12,
-    'KOL-INPUT-DATE': css_248z$15,
-    'KOL-INPUT-EMAIL': css_248z$14,
-    'KOL-INPUT-FILE': css_248z$13,
-    'KOL-SELECT': css_248z$T,
-    'KOL-TEXTAREA': css_248z$L,
-    'KOL-TABLE-STATEFUL': css_248z$O,
-    'KOL-TABLE-STATELESS': css_248z$N,
-    'KOL-NAV': css_248z$W,
-    'KOL-SKIP-NAV': css_248z$R,
-    'KOL-SPLIT-BUTTON': css_248z$P,
-    'KOL-TOAST-CONTAINER': css_248z$K,
-    'KOL-TOOLBAR': css_248z$J,
-    'KOL-TREE': css_248z$I,
-    'KOL-TREE-ITEM': css_248z$H,
-    'KOL-FORM': css_248z$19,
+    GLOBAL: css_248z$1p,
+    'KOL-ACCORDION': css_248z$1o,
+    'KOL-ALERT': css_248z$1n,
+    'KOL-AVATAR': css_248z$1m,
+    'KOL-BADGE': css_248z$1l,
+    'KOL-BREADCRUMB': css_248z$1k,
+    'KOL-BUTTON': css_248z$1j,
+    'KOL-BUTTON-LINK': css_248z$1i,
+    'KOL-CARD': css_248z$1h,
+    'KOL-COMBOBOX': css_248z$1g,
+    'KOL-DETAILS': css_248z$1f,
+    'KOL-DRAWER': css_248z$1e,
+    'KOL-FORM': css_248z$1d,
+    'KOL-HEADING': css_248z$1c,
+    'KOL-INPUT-CHECKBOX': css_248z$1b,
+    'KOL-INPUT-COLOR': css_248z$1a,
+    'KOL-INPUT-DATE': css_248z$19,
+    'KOL-INPUT-EMAIL': css_248z$18,
+    'KOL-INPUT-FILE': css_248z$17,
+    'KOL-INPUT-NUMBER': css_248z$16,
+    'KOL-INPUT-PASSWORD': css_248z$15,
+    'KOL-INPUT-RADIO': css_248z$14,
+    'KOL-INPUT-RANGE': css_248z$13,
+    'KOL-INPUT-TEXT': css_248z$12,
+    'KOL-KOLIBRI': css_248z$11,
+    'KOL-LINK': css_248z$$,
+    'KOL-LINK-BUTTON': css_248z$10,
+    'KOL-MODAL': css_248z$_,
+    'KOL-NAV': css_248z$Z,
+    'KOL-PAGINATION': css_248z$Y,
+    'KOL-POPOVER-BUTTON': css_248z$X,
+    'KOL-PROGRESS': css_248z$W,
+    'KOL-SELECT': css_248z$V,
+    'KOL-SINGLE-SELECT': css_248z$U,
+    'KOL-SKIP-NAV': css_248z$T,
+    'KOL-SPIN': css_248z$S,
+    'KOL-SPLIT-BUTTON': css_248z$R,
+    'KOL-TABLE-STATEFUL': css_248z$Q,
+    'KOL-TABLE-STATELESS': css_248z$P,
+    'KOL-TABS': css_248z$O,
+    'KOL-TEXTAREA': css_248z$N,
+    'KOL-TOAST-CONTAINER': css_248z$M,
+    'KOL-TOOLBAR': css_248z$L,
+    'KOL-TREE': css_248z$K,
+    'KOL-TREE-ITEM': css_248z$J,
 });
 
-var css_248z$G = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight-regular: 400;\n    --font-weight-bold: 700;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$I = "@layer kol-theme-global {\n  .kol-tooltip__arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip__content {\n    background-color: #f2f2f2;\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #0e47cb;\n    --color-blue-140: #082b7a;\n    --color-blue-130: #082b7a;\n    --color-blue-120: #0b39a2;\n    --color-blue-110: #0d40b7;\n    --color-blue-100: #0e47cb;\n    --color-blue-80: #3e6cd5;\n    --color-blue-60: #6e91e0;\n    --color-blue-40: #9fb5ea;\n    --color-blue-20: #cfdaf5;\n    --color-blue-10: #e7edfa;\n    --color-blue-5: #f3f6fc;\n    --color-yellow: #ffcc00;\n    --color-yellow-140: #997a00;\n    --color-yellow-130: #b38f00;\n    --color-yellow-120: #cca300;\n    --color-yellow-110: #e6b800;\n    --color-yellow-100: #ffcc00;\n    --color-yellow-80: #ffd633;\n    --color-yellow-60: #ffe066;\n    --color-yellow-40: #ffeb99;\n    --color-yellow-20: #fff5cc;\n    --color-yellow-10: #fffae6;\n    --color-yellow-5: #fffcf2;\n    --color-grey: #262b38;\n    --color-grey-140: #171a22;\n    --color-grey-130: #1b1e27;\n    --color-grey-120: #1e222d;\n    --color-grey-110: #222732;\n    --color-grey-100: #262b38;\n    --color-grey-80: #515560;\n    --color-grey-75: #515560;\n    --color-grey-60: #7d8088;\n    --color-grey-40: #a8aaaf;\n    --color-grey-20: #d4d5d7;\n    --color-grey-10: #e9eaeb;\n    --color-grey-5: #f4f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-orange: #ff6200;\n    --color-orange-140: #993b00;\n    --color-orange-130: #b34500;\n    --color-orange-120: #cc4e00;\n    --color-orange-110: #e65800;\n    --color-orange-100: #e65800;\n    --color-orange-80: #ff8133;\n    --color-orange-60: #ff914d;\n    --color-orange-40: #ffb180;\n    --color-orange-20: #ffd0b3;\n    --color-orange-10: #ffefe6;\n    --color-orange-5: #fff7f2;\n    --color-green: #00c991;\n    --color-green-140: #007957;\n    --color-green-130: #008d66;\n    --color-green-120: #008d66;\n    --color-green-110: #00b583;\n    --color-green-100: #00c991;\n    --color-green-80: #00c991;\n    --color-green-60: #66dfbd;\n    --color-green-40: #99e9d3;\n    --color-green-20: #ccf4e9;\n    --color-green-10: #e6faf4;\n    --color-green-5: #f2fcf9;\n    --color-red: #ef0044;\n    --color-red-140: #8f0029;\n    --color-red-130: #a70030;\n    --color-red-120: #bf0036;\n    --color-red-110: #d7003d;\n    --color-red-100: #ef0044;\n    --color-red-80: #f23369;\n    --color-red-60: #f5668f;\n    --color-red-40: #f999b4;\n    --color-red-20: #fcccda;\n    --color-red-10: #fde6ec;\n    --color-red-5: #fef2f5;\n    --color-accent-blue-100: #00e9ff;\n    --color-accent-blue-30: #b3f8ff;\n    --color-purple: #510dcd;\n    --color-purple-140: #31087b;\n    --color-purple-130: #390990;\n    --color-purple-120: #410aa4;\n    --color-purple-110: #490cb9;\n    --color-purple-100: #510dcd;\n    --color-purple-80: #743dd7;\n    --color-purple-60: #976ee1;\n    --color-purple-40: #bf9af1;\n    --color-purple-20: #dccff5;\n    --color-purple-10: #eee7fa;\n    --color-purple-5: #eee7fa;\n    --color-white: #fff;\n    --color-black: #000;\n    --font-family: Arial, sans-serif;\n    --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    --font-weight-regular: 400;\n    --font-weight-bold: 700;\n    --line-height-regular: 1.5;\n    --line-height-heading: 1.2;\n    --spacing-4xl: calc(64rem / var(--kolibri-root-font-size, 16));\n    --spacing-3xl: calc(48rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xl: calc(40rem / var(--kolibri-root-font-size, 16));\n    --spacing-xl: calc(32rem / var(--kolibri-root-font-size, 16));\n    --spacing-l: calc(24rem / var(--kolibri-root-font-size, 16));\n    --spacing-m: calc(16rem / var(--kolibri-root-font-size, 16));\n    --spacing-s: calc(12rem / var(--kolibri-root-font-size, 16));\n    --spacing-xs: calc(8rem / var(--kolibri-root-font-size, 16));\n    --spacing-2xs: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span,\n  .kol-span__container {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  p.l,\n  p.lead {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  p,\n  p.m,\n  p.medium {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  p.s,\n  p.small {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  p.xs,\n  p.extra-small {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  .badge-text-hint {\n    border-radius: 3px;\n    padding: 0 0.3em;\n  }\n}";
 
-var css_248z$F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion {\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    margin: 0;\n    overflow: hidden;\n  }\n  .kol-accordion__heading {\n    font-size: 2em;\n  }\n  .kol-accordion__heading-button .kol-button {\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    outline-offset: calc(-1rem / var(--kolibri-root-font-size, 16));\n    border: 0;\n    border-bottom-color: #cfdaf5;\n    border-bottom-style: solid;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: #171a22;\n    position: relative;\n    display: block;\n    font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    text-align: start;\n    width: 100%;\n    line-height: 1.2;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    align-items: baseline;\n  }\n  .kol-accordion__heading-button .kol-button::before {\n    background-color: #fc0;\n    border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    content: \"\";\n    height: calc(4rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    left: calc(24rem / var(--kolibri-root-font-size, 16));\n    top: 0;\n    width: 3rem 2;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-weight: 900;\n    font-family: \"Font Awesome 6 Free\";\n  }\n  .kol-accordion__content {\n    -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-margin-start: 0;\n    border-bottom: calc(2rem / var(--kolibri-root-font-size, 16)) solid #cfdaf5;\n    border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    color: #515560;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    margin-inline-start: 0;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-button {\n    border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.collapsible--open) .kol-accordion__heading-button .kol-button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
+var css_248z$H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion {\n    border-radius: 8px;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    margin: 0;\n    overflow: hidden;\n  }\n  .kol-accordion__heading {\n    font-size: 2em;\n  }\n  .kol-accordion__heading-button .kol-button {\n    border-radius: 8px;\n    outline-offset: -1px;\n    border: 0;\n    border-bottom-color: #cfdaf5;\n    border-bottom-style: solid;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: #171a22;\n    position: relative;\n    display: block;\n    font: normal normal 400 calc(18rem / var(--kolibri-root-font-size, 16))/calc(28rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n    text-align: start;\n    width: 100%;\n    line-height: 1.2;\n  }\n  .kol-accordion__heading-button .kol-button__text {\n    align-items: baseline;\n  }\n  .kol-accordion__heading-button .kol-button::before {\n    background-color: #fc0;\n    border-end-end-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(2rem / var(--kolibri-root-font-size, 16));\n    content: \"\";\n    height: calc(4rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    left: calc(24rem / var(--kolibri-root-font-size, 16));\n    top: 0;\n    width: 3rem 2;\n  }\n  .kol-accordion__heading-button .kol-icon {\n    margin-right: calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-weight: 900;\n    font-family: \"Font Awesome 6 Free\";\n  }\n  .kol-accordion__content {\n    -webkit-border-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-margin-start: 0;\n    border-bottom: 2px solid #cfdaf5;\n    border-inline-start: calc(4rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    color: #515560;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(24rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    margin-inline-start: 0;\n    padding: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-button {\n    border-start-end-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    border-start-start-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .collapsible--open .kol-accordion__heading-button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.collapsible--open) .kol-accordion__heading-button .kol-button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n}";
 
-var css_248z$E = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$G = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$C = "@layer kol-theme-component {\n  .kol-badge {\n    font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n    font-family: var(--font-family);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n    text-transform: uppercase;\n  }\n}";
+var css_248z$E = "@layer kol-theme-component {\n  .kol-badge {\n    font: normal normal var(--font-weight) calc(14rem / var(--kolibri-root-font-size, 16))/1em var(--font-family);\n    font-family: var(--font-family);\n    padding: calc(8rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16) - 1rem / var(--kolibri-root-font-size, 16));\n    text-transform: uppercase;\n  }\n}";
 
-var css_248z$B = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$D = "@layer kol-theme-component {\n  .kol-breadcrumb {\n    font-family: var(--font-family);\n  }\n  .kol-breadcrumb__link {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$A = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--secondary:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-button--normal:hover {\n    --text-background-color: #fc0;\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n  }\n  .kol-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
+var css_248z$C = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
 
-var css_248z$z = "@layer kol-theme-component {\n  .kol-button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var css_248z$B = "@layer kol-theme-component {\n  .kol-button {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-button:hover {\n    color: var(--color-blue-130);\n  }\n}";
 
-var css_248z$y = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  .kol-card__headline {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75;\n  }\n  .kol-card__header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
+var css_248z$A = "@layer kol-theme-component {\n  .kol-card {\n    font-family: var(--font-family);\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  .kol-card__headline {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75;\n  }\n  .kol-card__header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  .kol-card__content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n}";
 
-var css_248z$x = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .combobox:not(.combobox--disabled) .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    min-height: var(--a11y-min-size);\n    text-align: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .combobox__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 24rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .combobox__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .combobox__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .combobox__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .combobox__icon {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .combobox__icon:focus {\n    outline: 0;\n  }\n  .combobox__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    overflow-y: auto;\n    overflow-x: hidden;\n    box-sizing: border-box;\n    width: 100%;\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item {\n    display: flex;\n    align-items: center;\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox__item:focus {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .combobox:not(.combobox--disabled) .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
 
-var css_248z$w = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n}";
+var css_248z$y = "@layer kol-theme-component {\n  .kol-details {\n    font-family: var(--font-family);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button:focus-within {\n    cursor: pointer;\n  }\n  .kol-details__heading-button .kol-button .kol-span__label {\n    border-bottom-color: #000;\n  }\n  .kol-details__heading-button .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-details__heading-button .kol-span__container {\n    display: flex;\n    text-align: left;\n    gap: 0;\n  }\n  .kol-details__content.indented-text {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n  }\n}";
 
-var css_248z$v = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
+var css_248z$x = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$u = "@layer kol-theme-component {\n  .kol-drawer__wrapper {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
+var css_248z$w = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form {\n    font-family: var(--font-family);\n    width: 100%;\n  }\n  .kol-form__link {\n    display: inline-block;\n  }\n  .kol-form__mandatory-fields-hint {\n    font-family: var(--font-family);\n    -webkit-border-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    -webkit-padding-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-end-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-inline-start: calc(8rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n    border-start-start-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n    padding-bottom: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form__alert .kol-alert__heading {\n    display: flex;\n    place-items: center;\n  }\n}";
 
-var css_248z$t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1 {\n    font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n    line-height: 3.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.755;\n  }\n  .kol-headline--h3 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.5;\n  }\n  .kol-headline--h4 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 2;\n  }\n  .kol-headline--h5 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h6 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n    font-weight: var(--font-weight-bold);\n  }\n}";
+var css_248z$v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-headline--h1 {\n    font-size: calc(42rem / var(--kolibri-root-font-size, 16));\n    line-height: 3.25;\n  }\n  .kol-headline--h2 {\n    font-size: calc(36rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.755;\n  }\n  .kol-headline--h3 {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n    line-height: 2.5;\n  }\n  .kol-headline--h4 {\n    font-size: calc(28rem / var(--kolibri-root-font-size, 16));\n    line-height: 2;\n  }\n  .kol-headline--h5 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h6 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.75;\n  }\n  .kol-headline--h1, .kol-headline--h2, .kol-headline--h3, .kol-headline--h4, .kol-headline--h5, .kol-headline--h6 {\n    font-weight: var(--font-weight-bold);\n  }\n}";
 
-var css_248z$s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch:hover .kol-input::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control--label-align-left .kol-field-control__label {\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control--label-align-right .kol-field-control__label {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-field-control__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-checkbox .kol-input {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    border-color: var(--color-grey-75);\n    color: var(--color-grey);\n    line-height: 1.5;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-checkbox .kol-input:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-checkbox .kol-input:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-checkbox .kol-input:checked:not(:disabled):hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .kol-checkbox .kol-input--error {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red);\n  }\n  .kol-checkbox .kol-input--error:checked:not(:disabled):hover {\n    background-color: var(--color-red-120);\n    border-color: var(--color-red-120);\n  }\n  .kol-checkbox--variant-default {\n    min-width: unset;\n    width: unset;\n  }\n  .kol-checkbox--variant-default.kol-checkbox--checked .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-icon {\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch .kol-input {\n    display: block;\n  }\n  .kol-checkbox--variant-switch .kol-input::before {\n    background-color: var(--color-grey-75);\n  }\n  .kol-checkbox--variant-switch:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-blue);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-icon {\n    background-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error .kol-input::before {\n    background-color: var(--color-red);\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error.kol-checkbox--checked .kol-icon {\n    background-color: var(--color-white);\n    color: #000;\n  }\n  .kol-checkbox--variant-switch.kol-checkbox--error:hover .kol-input:not(:disabled)::before {\n    background-color: var(--color-red);\n  }\n  .kol-input-checkbox--variant-button {\n    gap: var(--spacing-xs) 0;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__input {\n    order: 1;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-input-checkbox--variant-button .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-input-checkbox--variant-button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
 
-var css_248z$r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n.kol-input-color__inputs-wrapper {\n  gap: calc(16rem / var(--kolibri-root-font-size, 16));\n}\n.kol-input-color__input--text, .kol-input-color__input--color {\n  background-color: var(--color-white);\n  border: 1px solid var(--color-blue);\n  min-height: calc(var(--a11y-min-size) - 8rem / var(--kolibri-root-font-size, 16));\n}";
 
-var css_248z$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}\n@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-button__text {\n    border-radius: 0 !important;\n    white-space: nowrap;\n  }\n  .kol-input-container--is-dragover {\n    border-color: var(--color-blue) !important;\n  }\n}";
 
-var css_248z$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
+var css_248z$n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  /**\n   * normalizes the layout of form elements.\n  */\n  .kol-form-field {\n    border: 0;\n    margin: 0;\n    padding: 0;\n    flex-wrap: wrap;\n  }\n  /**\n   * order the layout of form elements.\n  */\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__input {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__hint {\n    order: 4;\n  }\n  .kol-form-field {\n    border: 0;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n    align-items: flex-start;\n    padding: 0 calc(14rem / var(--kolibri-root-font-size, 16)) calc(10rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-form-field__input {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-field-control {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    outline: 2px solid var(--color-grey-75);\n    outline-offset: 2px;\n  }\n  .kol-input:before {\n    display: none;\n  }\n  .kol-input:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-input:focus {\n    outline-color: var(--color-blue);\n  }\n  .kol-input:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input.kol-input--error {\n    border: 2px solid var(--color-red);\n  }\n  .kol-input.kol-input--error:before {\n    display: none;\n  }\n  .kol-input.kol-input--error:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .kol-input.kol-input--error:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n}";
 
-var css_248z$k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input-range__inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
 
-var css_248z$j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$i = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$k = "@layer kol-theme-component {\n  .kol-kolibri {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$h = "@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-link--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--primary:hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-link--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--secondary:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-link--normal:hover {\n    --text-background-color: #fc0;\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-link--danger:hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-link--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-link--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link__text {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link__text:active, .kol-link__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-link--secondary .kol-link__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n  }\n  .kol-link--secondary.button:focus-visible .kol-link__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-link:focus-visible .kol-link__text {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n}";
+var css_248z$j = "@layer kol-theme-component {\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-link--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-link--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-link--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-link--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-link--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-link--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link__text:active, .kol-link__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-link--secondary .kol-link__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-link--secondary.button:focus-visible .kol-link__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-link:focus-visible .kol-link__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n}";
 
-var css_248z$g = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var css_248z$i = "@layer kol-theme-component {\n  .kol-link {\n    appearance: none;\n    color: var(--color-blue);\n    line-height: 1.2;\n  }\n  .kol-link:hover {\n    color: var(--color-blue-130);\n  }\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$f = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    border-color: transparent;\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
+var css_248z$h = "@layer kol-theme-component {\n  .kol-modal__card {\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n}";
 
-var css_248z$e = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-black);\n  }\n  .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    border-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    font-weight: bold;\n    text-decoration: underline;\n    opacity: 1;\n  }\n  .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}";
+var css_248z$g = "@layer kol-theme-component {\n  .kol-nav {\n    font-family: var(--font-family);\n  }\n  .kol-nav__navigation {\n    background-color: var(--color-blue);\n  }\n  .kol-nav__list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-nav__list--vertical {\n    flex-direction: column;\n  }\n  .kol-nav__list-item {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n  }\n  .kol-nav__list-item:not(:first-child), .kol-nav__list--nested .kol-nav__list-item {\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__entry-wrapper {\n    display: flex;\n  }\n  .kol-nav__entry {\n    flex-grow: 1;\n  }\n  .kol-nav__expand-button .kol-button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-nav__expand-button--expanded .kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n  .kol-nav__expand-button:not(.kol-nav__expand-button--expanded) .kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .kol-nav__toggle-button .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-nav__toggle-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-nav__toggle-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-nav__toggle-button .kol-button__text {\n    text-decoration: none !important;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    color: var(--text-color);\n  }\n  .kol-nav__toggle-button .kol-button__text:active, .kol-nav__toggle-button .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-nav__toggle-button .kol-button:focus-visible .kol-nav__toggle-button .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-nav__toggle-button .kol-button--hide-label .kol-nav__toggle-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    text-decoration: none;\n  }\n  .kol-span {\n    border-color: transparent;\n    border-style: solid;\n    border-width: 2px;\n    color: var(--color-white);\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    justify-items: start;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 100%;\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button, .kol-link):focus-within .kol-span, :is(.kol-button, .kol-link):hover .kol-span {\n    text-decoration: underline;\n  }\n}";
+
+var css_248z$f = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    border-radius: 4px;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) Arial, sans-serif;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: 2px solid var(--color-black);\n  }\n  .kol-button:not(:disabled):active .kol-button__text, .kol-button:not(:disabled):hover .kol-button__text {\n    background-color: #fc0;\n    border-color: #fc0;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-pagination__button--selected .kol-button__text {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    font-weight: bold;\n    text-decoration: underline;\n    opacity: 1;\n  }\n  .kol-button:disabled .kol-button__text {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n}";
+
+var css_248z$e = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
 
 var css_248z$d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
 
-var css_248z$c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    position: relative;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-grey);\n    order: 4;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 2.5rem);\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    cursor: pointer;\n    padding-left: 1em;\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    width: 100%;\n  }\n  .single-select__item {\n    display: flex;\n    align-items: flex-start;\n    justify-items: center;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: 1em;\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var css_248z$b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert {\n    font-family: var(--font-family);\n  }\n  :host .kol-alert--msg {\n    border: none;\n  }\n  :host .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  :host .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  :host .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  :host .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  :host .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  :host .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  :host .kol-alert--card :host .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--msg :host .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  :host .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--card :host .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  :host .kol-alert--msg :host .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .kol-alert--card :host .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-alert--card :host .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    position: relative;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    color: var(--color-grey);\n    order: 4;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .single-select__input {\n    border: none;\n    flex-grow: 1;\n    width: calc(100% - 2.5rem);\n    position: relative;\n  }\n  .single-select__input::placeholder {\n    color: var(--color-grey-50);\n  }\n  .single-select__input:first-child {\n    padding-left: var(--spacing);\n  }\n  .single-select__input:last-child {\n    padding-right: var(--spacing);\n  }\n  .single-select__input:not(.disabled) .single-select__input:hover {\n    border-color: var(--color-blue);\n  }\n  .single-select__button {\n    display: grid;\n    place-items: center;\n    padding-left: 1em;\n  }\n  .single-select__button:focus {\n    outline: 0;\n  }\n  .single-select__listbox {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--color-blue);\n    max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n    overflow-y: auto;\n    overflow-x: hidden;\n    width: 100%;\n  }\n  .single-select__item {\n    display: flex;\n    align-items: flex-start;\n    justify-items: center;\n    padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n  }\n  .single-select__item .radio-label {\n    align-self: center;\n    padding-left: 1em;\n  }\n  .single-select__item:focus, .single-select__item.highlighted {\n    background-color: var(--color-blue);\n    color: white;\n    outline: 0;\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n    order: 2;\n  }\n  .kol-alert {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue);\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
 
-var css_248z$a = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #0e47cb;\n    color: #fff;\n    cursor: pointer;\n  }\n}";
+var css_248z$a = "@layer kol-theme-component {\n  .kol-skip-nav {\n    font-family: var(--font-family);\n  }\n  .kol-skip-nav .kol-link__text {\n    border-radius: 4px;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    line-height: 1;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    background-color: #0e47cb;\n    color: #fff;\n    cursor: pointer;\n  }\n}";
 
 var css_248z$9 = "@layer kol-theme-component {\n  .cycle {\n    padding: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .cycle span {\n    background-color: var(--color-blue-80);\n  }\n}";
 
-var css_248z$8 = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-color: var(--color-blue);\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    text-decoration: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--primary:hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--secondary:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-split-button .kol-button--normal:hover {\n    --text-background-color: #fc0;\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--ghost:hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button__text {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-split-button .kol-button__text:active, .kol-split-button .kol-button__text:hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-split-button .kol-button--secondary .kol-split-button .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid #0e47cb;\n  }\n  .kol-split-button .kol-button--secondary.button:focus-visible .kol-split-button .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-split-button .kol-button:focus-visible .kol-split-button .kol-button__text {\n    outline-offset: calc(-4rem / var(--kolibri-root-font-size, 16));\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
+var css_248z$8 = "@layer kol-theme-component {\n  .kol-split-button {\n    font-family: var(--font-family);\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-blue);\n    border-radius: 4px;\n  }\n  .kol-split-button__horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .kol-split-button .kol-popover__content {\n    background-color: #fff;\n  }\n  .kol-split-button .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-split-button .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-split-button .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-split-button .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-split-button .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-split-button .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-split-button .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-split-button .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-split-button .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-split-button .kol-button:focus {\n    outline: none;\n  }\n  .kol-split-button .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-split-button .kol-button__text:active, .kol-split-button .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-split-button .kol-button--secondary .kol-split-button .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-split-button .kol-button--secondary.button:focus-visible .kol-split-button .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-split-button .kol-button:focus-visible .kol-split-button .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-button--hide-label .kol-split-button .kol-button__text .kol-span__label {\n    display: none;\n  }\n}";
 
-var css_248z$7 = "@layer kol-theme-component {\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--radio:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table-stateful {\n    font-family: var(--font-family);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    overflow-x: auto;\n    overflow-y: hidden;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
+var css_248z$7 = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table-stateful {\n    font-family: var(--font-family);\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-table-stateful__pagination {\n    overflow-x: auto;\n    overflow-y: hidden;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-auto-flow: column;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination .kol-table-stateful .kol-pagination {\n      display: flex;\n      gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    }\n  }\n}";
 
-var css_248z$6 = "@layer kol-theme-component {\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-style: solid;\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n    outline-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n    outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--radio:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: calc(7rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox, .kol-table__selection-input--checkbox:hover {\n    border-color: var(--color-blue);\n  }\n}";
+var css_248z$6 = "@layer kol-theme-component {\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table {\n    display: block;\n    font-family: var(--font-family);\n    overflow-x: auto;\n    overflow-y: hidden;\n    padding: 0.5em;\n  }\n  .kol-table__caption {\n    padding: 0.5em;\n  }\n  .kol-table__focus-element:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n    border-spacing: 0;\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell {\n    padding: 0.5em;\n  }\n  .kol-table__head-row:first-child .kol-table__cell--selection, .kol-table__head-row:first-child .kol-table__cell--header {\n    border-width: 0;\n    border-top-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__head-row:last-child .kol-table__cell--selection, .kol-table__head-row:last-child .kol-table__cell--header {\n    border-width: 0;\n    border-bottom-width: calc(2rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .kol-table__cell--header {\n    font-weight: normal;\n    color: var(--color-midnight);\n    background-color: var(--color-white);\n  }\n  .kol-table__cell--header--ascending, .kol-table__cell--header--descending {\n    font-weight: 700;\n  }\n  .kol-table__cell--header--ascending .kol-button, .kol-table__cell--header--descending .kol-button {\n    font-weight: 700;\n  }\n  .kol-table__row--body:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  .kol-table__selection {\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  .kol-table__selection-input:focus {\n    border-color: var(--color-blue);\n    outline-color: var(--color-blue);\n    outline-style: solid;\n    outline-offset: 2px;\n    outline-width: 2px;\n  }\n  .kol-table__selection-input--checkbox {\n    border-color: var(--color-grey-75);\n  }\n  .kol-table__selection-input--checkbox:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio {\n    display: block;\n    border-color: var(--color-grey-75);\n    outline-offset: 2px;\n  }\n  .kol-table__selection-input--radio:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-table__selection-input--radio:checked {\n    outline: 2px solid var(--color-blue);\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-input {\n    background-color: var(--color-white);\n  }\n  .kol-table__selection-icon {\n    color: var(--color-white);\n  }\n  .kol-table__selection--indeterminate .kol-table__selection-icon {\n    color: var(--color-blue);\n  }\n  .kol-icon:hover ~ .kol-table__selection-input--checkbox:not(:disabled), .kol-table__selection-input--checkbox:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n}";
 
-var css_248z$5 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: calc(1rem / var(--kolibri-root-font-size, 16));\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 calc(-3rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-tabs .kol-button .kol-span {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var css_248z$5 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs__button-group {\n    border-bottom: 1px solid var(--color-grey-25);\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button {\n    border: none;\n    margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button:hover:not(:disabled) .kol-span {\n    color: var(--color-blue-130);\n  }\n  .kol-tabs .kol-button:focus .kol-span {\n    outline: var(--color-blue-130) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tabs .kol-button.selected .kol-span {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-tabs .kol-button .kol-span {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n}";
 
-var css_248z$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n    border: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: calc(44rem / var(--kolibri-root-font-size, 16));\n    min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n    border-bottom: calc(1rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
+var css_248z$4 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-alert--msg {\n    border: none;\n  }\n  .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-alert--card .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--msg .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--card .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-alert--msg .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-alert--card .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-alert--card .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__label {\n    order: 1;\n  }\n  .kol-form-field__hint {\n    order: 2;\n  }\n  .kol-form-field__msg {\n    order: 3;\n  }\n  .kol-form-field__input {\n    order: 4;\n  }\n  .kol-form-field {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  .kol-form-field__label {\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-form-field__label-text::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n  .kol-form-field__hint {\n    font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field__msg {\n    color: var();\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-form-field__msg.kol-alert--error {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .kol-input-container {\n    min-height: var(--a11y-min-size);\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: calc(1rem / var(--kolibri-root-font-size, 16)) 0.5em;\n  }\n  .kol-input-container:focus-within {\n    box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n    outline: none;\n  }\n  .kol-input-container:focus-within, .kol-input-container:not(.kol-input-container--disabled):hover {\n    border-color: var(--color-blue);\n  }\n  .kol-input-container--disabled {\n    cursor: not-allowed;\n  }\n  .kol-input-container.kol-input-container--error {\n    border-color: var(--color-red);\n  }\n}\n@layer kol-theme-component {\n  .kol-input,\n  .kol-select,\n  .kol-textarea {\n    border: none;\n    margin: calc(1rem / var(--kolibri-root-font-size, 16));\n    outline: none;\n  }\n  .kol-input,\n  .kol-select:not([multiple]) {\n    height: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  .kol-input:focus,\n  .kol-select:focus,\n  .kol-textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  .kol-input::placeholder,\n  .kol-textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n}";
 
-var css_248z$3 = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n  .kol-toast-item .heading {\n    width: 100%;\n  }\n  .kol-toast-item .heading .heading-content {\n    flex: 1;\n  }\n}";
+var css_248z$3 = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: calc(440rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n  }\n  .kol-toast-item {\n    display: block;\n    background-color: #fff;\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert {\n    font-family: var(--font-family);\n  }\n  .kol-toast-item .kol-alert--msg {\n    border: none;\n  }\n  .kol-toast-item .kol-alert--card {\n    padding-bottom: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-inline-end: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-inline-start: calc(24rem / var(--kolibri-root-font-size, 16));\n    padding-top: calc(24rem / var(--kolibri-root-font-size, 16));\n    border-style: solid;\n    border-width: 2px;\n  }\n  .kol-toast-item .kol-alert--default {\n    --alert-accent-color: var(--color-grey);\n  }\n  .kol-toast-item .kol-alert--error {\n    --alert-accent-color: var(--color-red);\n  }\n  .kol-toast-item .kol-alert--info {\n    --alert-accent-color: var(--color-blue);\n  }\n  .kol-toast-item .kol-alert--success {\n    --alert-accent-color: var(--color-green);\n  }\n  .kol-toast-item .kol-alert--warning {\n    --alert-accent-color: var(--color-orange);\n  }\n  .kol-toast-item .kol-alert__container {\n    background-color: var(--color-white);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__container {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__container-content {\n    padding: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert__close-button .kol-button {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__close-button .kol-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert__heading-icon {\n    color: var(--alert-accent-color);\n  }\n  .kol-toast-item .kol-alert--msg .kol-toast-item .kol-alert__heading-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__heading-icon {\n    font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item .kol-alert--card .kol-toast-item .kol-alert__content {\n    margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-toast-item__alert {\n    display: block;\n  }\n  .kol-toast-item .heading {\n    width: 100%;\n  }\n  .kol-toast-item .heading .heading-content {\n    flex: 1;\n  }\n}";
 
-var css_248z$2 = "@layer kol-theme-component {\n  .kol-toolbar {\n    padding: var(--spacing-s);\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    background-color: var(--color-white);\n  }\n}";
+var css_248z$2 = "@layer kol-theme-component {\n  .kol-button {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-button--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-button--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-button--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-button--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-button--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-button--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-button--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-button--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-button:focus {\n    outline: none;\n  }\n  .kol-button__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-button__text:active, .kol-button__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-button--secondary .kol-button__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-button--secondary.button:focus-visible .kol-button__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-button:focus-visible .kol-button__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-button--hide-label .kol-button__text .kol-span__label {\n    display: none;\n  }\n  .kol-link {\n    --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n    --text-focus-outline-color: var(--color-white);\n    font-family: var(--font-family);\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  .kol-link--primary {\n    --text-background-color: #0e47cb;\n    --text-color: #fff;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--primary:not(:disabled):hover {\n    --text-background-color: #3e6cd5;\n  }\n  .kol-link--secondary {\n    --text-background-color: #fff;\n    --text-color: #0e47cb;\n    --text-border-color: #0e47cb;\n    --text-focus-outline-color: #fff;\n  }\n  .kol-link--secondary:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link--normal {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-link--normal:not(:disabled):hover {\n    --text-background-color: #fc0;\n  }\n  .kol-link--danger {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n    --text-color: var(--color-white);\n  }\n  .kol-link--danger:not(:disabled):hover {\n    --text-background-color: var(--color-red);\n    --text-border-color: var(--color-red);\n  }\n  .kol-link--ghost {\n    --text-color: #0e47cb;\n    --text-focus-outline-color: #0e47cb;\n  }\n  .kol-link--ghost:not(:disabled):hover {\n    --text-color: #0e47cb;\n  }\n  .kol-link:focus {\n    outline: none;\n  }\n  .kol-link__text {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 calc(16rem / var(--kolibri-root-font-size, 16))/calc(20rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: calc(12rem / var(--kolibri-root-font-size, 16));\n    line-height: 1.2;\n    background-color: var(--text-background-color);\n    border-color: var(--text-border-color);\n    color: var(--text-color);\n  }\n  .kol-link__text:active, .kol-link__text:not(:disabled):hover {\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n  }\n  .kol-link--secondary .kol-link__text {\n    padding: calc(12rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n    border: 2px solid #0e47cb;\n  }\n  .kol-link--secondary.button:focus-visible .kol-link__text {\n    box-shadow: inset 0 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) #0e47cb;\n  }\n  .kol-link:focus-visible .kol-link__text {\n    outline-offset: -4px;\n    outline: var(--text-focus-outline-color) solid calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-link--hide-label .kol-link__text .kol-span__label {\n    display: none;\n  }\n  .kol-toolbar {\n    padding: var(--spacing-s);\n    border-radius: 8px;\n    box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n    background-color: var(--color-white);\n  }\n  .kol-link {\n    --text-background-color: #fc0;\n    --text-color: #171a22;\n    --text-focus-outline-color: #000;\n    --text-border-color: #fc0;\n  }\n  .kol-link:hover {\n    --text-background-color: #fc0;\n  }\n}";
 
 var css_248z$1 = "@layer kol-theme-component {\n  .kol-tree__treeview-navigation {\n    display: flex;\n    flex-direction: column;\n  }\n}";
 
-var css_248z = "@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid transparent;\n    border-radius: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    background-color: var(--color-sky);\n    border: calc(2rem / var(--kolibri-root-font-size, 16)) solid var(--color-blue);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-black);\n  }\n  .kol-tree-item__link--active {\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link--active .kol-link {\n    background-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .kol-tree-item__link .kol-link {\n    display: block;\n    color: var(--color-black);\n    text-decoration: none;\n    text-align: left;\n  }\n  .kol-tree-item__link .kol-link:focus {\n    color: var(--color-black);\n  }\n  .kol-tree-item__toggle-button {\n    display: inline-block;\n    color: var(--color-blue);\n  }\n  .kol-tree-item__toggle-button:hover {\n    transform: scale(1.3);\n  }\n}";
+var css_248z = "@layer kol-theme-component {\n  .kol-tree-item__children {\n    display: flex;\n    flex-direction: column;\n  }\n  .kol-tree-item__link {\n    display: block;\n    border: 2px solid transparent;\n    border-radius: 4px;\n  }\n  .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n    background-color: var(--color-sky);\n    border: 2px solid var(--color-blue);\n  }\n  .kol-tree-item__link:hover .kol-link, .kol-tree-item__link:focus-within .kol-link {\n    color: var(--color-black);\n  }\n  .kol-tree-item__link--active {\n    background-color: var(--color-yellow);\n  }\n  .kol-tree-item__link--active .kol-link {\n    background-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .kol-tree-item__link .kol-link {\n    color: var(--color-black);\n    text-align: left;\n  }\n  .kol-tree-item__link .kol-link:focus {\n    color: var(--color-black);\n  }\n  .kol-tree-item__toggle-button {\n    color: var(--color-blue);\n  }\n  .kol-tree-item__toggle-button:hover .kol-tree-item__toggle-button-icon::part(icon) {\n    transform: scale(1.3);\n  }\n  .kol-tree-item__text {\n    text-decoration: none;\n  }\n}";
 
 const ECL_EU = KoliBri.createTheme('ecl-eu', {
-    GLOBAL: css_248z$G,
-    'KOL-HEADING': css_248z$t,
-    'KOL-ACCORDION': css_248z$F,
-    'KOL-BUTTON': css_248z$A,
-    'KOL-LINK-BUTTON': css_248z$h,
-    'KOL-PAGINATION': css_248z$e,
+    GLOBAL: css_248z$I,
+    'KOL-ACCORDION': css_248z$H,
+    'KOL-ALERT': css_248z$G,
+    'KOL-AVATAR': css_248z$F,
+    'KOL-BADGE': css_248z$E,
+    'KOL-BREADCRUMB': css_248z$D,
+    'KOL-BUTTON': css_248z$C,
+    'KOL-BUTTON-LINK': css_248z$B,
+    'KOL-CARD': css_248z$A,
+    'KOL-COMBOBOX': css_248z$z,
+    'KOL-DETAILS': css_248z$y,
+    'KOL-DRAWER': css_248z$x,
+    'KOL-FORM': css_248z$w,
+    'KOL-HEADING': css_248z$v,
+    'KOL-INPUT-CHECKBOX': css_248z$u,
+    'KOL-INPUT-COLOR': css_248z$t,
+    'KOL-INPUT-DATE': css_248z$s,
+    'KOL-INPUT-EMAIL': css_248z$r,
+    'KOL-INPUT-FILE': css_248z$q,
+    'KOL-INPUT-NUMBER': css_248z$p,
+    'KOL-INPUT-PASSWORD': css_248z$o,
+    'KOL-INPUT-RADIO': css_248z$n,
+    'KOL-INPUT-RANGE': css_248z$m,
+    'KOL-INPUT-TEXT': css_248z$l,
+    'KOL-KOLIBRI': css_248z$k,
+    'KOL-LINK': css_248z$i,
+    'KOL-LINK-BUTTON': css_248z$j,
+    'KOL-MODAL': css_248z$h,
+    'KOL-NAV': css_248z$g,
+    'KOL-PAGINATION': css_248z$f,
+    'KOL-POPOVER-BUTTON': css_248z$e,
     'KOL-PROGRESS': css_248z$d,
-    'KOL-NAV': css_248z$f,
-    'KOL-BADGE': css_248z$C,
-    'KOL-ALERT': css_248z$E,
-    'KOL-CARD': css_248z$y,
-    'KOL-COMBOBOX': css_248z$x,
-    'KOL-INPUT-CHECKBOX': css_248z$s,
-    'KOL-INPUT-COLOR': css_248z$r,
-    'KOL-INPUT-FILE': css_248z$o,
-    'KOL-INPUT-EMAIL': css_248z$p,
-    'KOL-INPUT-NUMBER': css_248z$n,
-    'KOL-INPUT-DATE': css_248z$q,
-    'KOL-INPUT-PASSWORD': css_248z$m,
-    'KOL-INPUT-TEXT': css_248z$j,
-    'KOL-KOLIBRI': css_248z$i,
     'KOL-SELECT': css_248z$c,
     'KOL-SINGLE-SELECT': css_248z$b,
-    'KOL-TEXTAREA': css_248z$4,
+    'KOL-SKIP-NAV': css_248z$a,
+    'KOL-SPIN': css_248z$9,
+    'KOL-SPLIT-BUTTON': css_248z$8,
     'KOL-TABLE-STATEFUL': css_248z$7,
     'KOL-TABLE-STATELESS': css_248z$6,
-    'KOL-AVATAR': css_248z$D,
     'KOL-TABS': css_248z$5,
-    'KOL-LINK': css_248z$g,
-    'KOL-BUTTON-LINK': css_248z$z,
-    'KOL-BREADCRUMB': css_248z$B,
-    'KOL-DETAILS': css_248z$w,
-    'KOL-DRAWER': css_248z$u,
-    'KOL-SPIN': css_248z$9,
-    'KOL-INPUT-RADIO': css_248z$l,
-    'KOL-INPUT-RANGE': css_248z$k,
-    'KOL-SKIP-NAV': css_248z$a,
-    'KOL-SPLIT-BUTTON': css_248z$8,
+    'KOL-TEXTAREA': css_248z$4,
     'KOL-TOAST-CONTAINER': css_248z$3,
     'KOL-TOOLBAR': css_248z$2,
     'KOL-TREE': css_248z$1,
     'KOL-TREE-ITEM': css_248z,
-    'KOL-FORM': css_248z$v,
 });
 
 exports.DEFAULT = DEFAULT;