@public-ui/themes 2.2.7 → 2.2.8-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.cjs +155 -152
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.mjs +155 -152
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +8 -8
package/dist/index.cjs CHANGED
@@ -364,7 +364,7 @@ var loglevel = {exports: {}};
364
364
  }));
365
365
  }(loglevel));
366
366
 
367
- 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);}}
367
+ 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===void 0)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);}}
368
368
 
369
369
  /*!
370
370
  * KoliBri - The accessible HTML-Standard
@@ -461,148 +461,151 @@ var TagEnum;
461
461
 
462
462
  const KoliBri = new re('kol', KeyEnum, TagEnum);
463
463
 
464
- var css_248z$3z = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) 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 --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\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-visible,\n button[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: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}\n@layer kol-component {\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n}";
464
+ var css_248z$3A = "@layer kol-theme-global {\n :root {\n --blue: #6495ed;\n --white: #faf0e6;\n background-color: var(--blue);\n }\n :host {\n --label-weight: 700;\n --label-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n --label-color: #000000;\n --box-shadow-inputs: calc(0rem / var(--kolibri-root-font-size, 16)) 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 --page-bg: #ffffff;\n --element-bg: #eee;\n --border-radius: 4px;\n --font-family: \"Noto Sans Regular\", Arial, helvetica, sans-serif;\n --font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n --spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n --border-width: 1px;\n --color-primary: #156570;\n --color-primary-light: #1a7a87;\n --color-primary-variant: #207a8b;\n --color-primary-focus: hsl(from var(--color-primary-variant) h calc(s - 10) l);\n --color-danger: #ca0101;\n --color-warning: #c44931;\n --color-success: #005c45;\n --color-subtle: #576164;\n --color-light: #ffffff;\n --color-text: #000000;\n --color-mute: #f2f3f4;\n --color-mute-variant: #bec5c9;\n --visited: var(--color-primary-light);\n --border-color: #ededed;\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n --button-font-weight: 400;\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-visible,\n button[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: 2px;\n transition: outline-offset 0.2s linear;\n }\n .kol-heading-wc {\n font-weight: 700;\n }\n .kol-tooltip-wc .tooltip-floating {\n border: var(--border-width) solid var(--color-subtle);\n border-radius: var(--border-radius);\n }\n .kol-tooltip-wc .tooltip-arrow {\n border: var(--border-width) solid var(--color-subtle);\n }\n .kol-tooltip-wc .tooltip-area {\n background-color: var(--color-light);\n }\n .kol-tooltip-wc .tooltip-content {\n border-radius: var(--border-radius);\n line-height: 1.5;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .kol-span-wc,\n .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a:is(:focus, :hover):not([aria-disabled]),\n button:is(:focus, :hover):not([disabled]) {\n text-decoration-thickness: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n @keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n }\n}\n@layer kol-component {\n input:not([type=checkbox], [type=radio]),\n select:not([multiple], [size]) {\n border-radius: var(--border-radius);\n border-width: var(--border-width);\n }\n}";
465
465
 
466
- var css_248z$3y = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none !important;\n }\n}";
466
+ var css_248z$3z = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none !important;\n }\n}";
467
467
 
468
- var css_248z$3x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .accordion__content {\n padding-left: calc(36rem / var(--kolibri-root-font-size, 16));\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-span-wc > span {\n display: flex;\n place-items: baseline center;\n }\n :host > div > .kol-heading-wc button {\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > .kol-heading-wc button .kol-span-wc {\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > .kol-heading-wc button .kol-span-wc > span {\n gap: 0.5em;\n }\n button:focus {\n outline: none;\n }\n :host > .accordion: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 .icon {\n color: var(--color-primary);\n }\n}";
468
+ var css_248z$3y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .accordion__content {\n padding-left: calc(36rem / var(--kolibri-root-font-size, 16));\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-span-wc > span {\n display: flex;\n place-items: baseline center;\n }\n :host > div > .kol-heading-wc button {\n border-radius: var(--border-radius);\n min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n padding: calc(12rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > .kol-heading-wc button .kol-span-wc {\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > .kol-heading-wc button .kol-span-wc > span {\n gap: 0.5em;\n }\n button:focus {\n outline: none;\n }\n :host > .accordion: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 .icon {\n color: var(--color-primary);\n }\n}";
469
469
 
470
- var css_248z$3w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
470
+ var css_248z$3x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
471
471
 
472
- var css_248z$3v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .initials {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n}";
472
+ var css_248z$3w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .initials {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n}";
473
473
 
474
- var css_248z$3u = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-size: inherit;\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span .kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span .kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n :host > span .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc > span {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
474
+ var css_248z$3v = "@layer kol-theme-component {\n :host {\n display: inline-block;\n font-family: var(--font-family);\n font-size: inherit;\n }\n :host > span {\n border-radius: var(--border-radius);\n display: inline-flex;\n font-style: normal;\n }\n :host > span.smart-button {\n align-items: center;\n }\n :host > span .kol-button-wc:hover > button {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n :host > span .kol-button-wc > button {\n color: inherit;\n border-top-right-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n :host > span .kol-span-wc {\n padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc {\n align-items: center;\n font-style: normal;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > span > .kol-span-wc > span {\n display: flex;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
475
475
 
476
- var css_248z$3t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li > :is(span, .kol-link) {\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
476
+ var css_248z$3u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li > :is(span, .kol-link) {\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
477
477
 
478
- var css_248z$3s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
478
+ var css_248z$3t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
479
479
 
480
- var css_248z$3r = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
480
+ var css_248z$3s = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
481
481
 
482
- var css_248z$3q = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
482
+ var css_248z$3r = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
483
483
 
484
- var css_248z$3p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .kol-heading-wc {\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
484
+ var css_248z$3q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n border-radius: var(--border-radius);\n border: 1px solid var(--color-subtle);\n }\n :host .kol-heading-wc {\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
485
485
 
486
- var css_248z$3o = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\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}";
486
+ var css_248z$3p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\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}";
487
487
 
488
- var css_248z$3n = "@layer kol-theme-component {\n .details {\n font-family: var(--font-family);\n }\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\n 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 outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
488
+ var css_248z$3o = "@layer kol-theme-component {\n .details {\n font-family: var(--font-family);\n }\n .details__heading {\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__heading-button .kol-span-wc > span {\n gap: 0;\n }\n .details__heading-button .span-label {\n border-bottom-color: var(--color-subtle);\n }\n .details__heading-button .button:not(:disabled):is(:hover, :focus) .span-label, .details.open .details__heading-button .span-label {\n border-bottom-color: var(--color-primary);\n }\n .details .button:not(:disabled):focus {\n 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 outline-width: 2px;\n border-radius: calc(var(--border-radius) / 2);\n }\n .details__content {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n width: unset;\n margin: calc(8rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n}";
489
489
 
490
- var css_248z$3m = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n :host {\n display: block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
490
+ var css_248z$3n = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n :host {\n display: block;\n }\n .mandatory-fields-hint {\n font-family: var(--font-family);\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
491
491
 
492
- var css_248z$3l = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n}";
492
+ var css_248z$3m = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2,\n .headline-h3,\n .headline-h4,\n .headline-h5,\n .headline-h6 {\n color: inherit;\n font-style: normal;\n font-family: var(--font-family);\n }\n .headline-h1,\n .headline-h2,\n .headline-h3 {\n font-weight: 700;\n }\n .headline-h1 {\n font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h2 {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n }\n .headline-h3 {\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n}";
493
493
 
494
- var css_248z$3k = "@layer kol-theme-component {\n :host {\n width: 1em;\n height: 1em;\n }\n :host > i {\n width: 1em;\n height: 1em;\n }\n}";
494
+ var css_248z$3l = "@layer kol-theme-component {\n :host {\n width: 1em;\n height: 1em;\n }\n :host > i {\n width: 1em;\n height: 1em;\n }\n}";
495
495
 
496
- var css_248z$3j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-indented-text-wc > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
496
+ var css_248z$3k = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n kol-indented-text-wc > div {\n background-color: var(--color-light);\n border-left: none;\n box-shadow: -2px 0 0 var(--color-primary-variant);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
497
497
 
498
- var css_248z$3i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :host .kol-input:is(.default, .switch) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n grid-template-areas: unset;\n }\n :host .kol-input:is(.default, .switch) .input,\n :host .kol-input:is(.default, .switch) .input-label {\n grid-area: unset;\n }\n :host .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2;\n }\n :host .kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n :host input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n 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 :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n display: block;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n position: relative;\n width: calc(56rem / var(--kolibri-root-font-size, 16));\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n }\n .switch .icon {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto 0;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .kol-input:not(.checkbox.switch, .radio) .input:focus,\n .kol-input:not(.checkbox) .input:focus,\n .kol-input:is(.checkbox.switch, .radio) input:focus,\n .kol-input:is(.checkbox) input:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n}";
498
+ var css_248z$3j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n :host .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :host .kol-input:is(.default, .switch) {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n grid-template-areas: unset;\n }\n :host .kol-input:is(.default, .switch) .input,\n :host .kol-input:is(.default, .switch) .input-label {\n grid-area: unset;\n }\n :host .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n :host .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n :host .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n :host .kol-input > div.input input {\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n :host .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2;\n }\n :host .kol-input.error {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.error input:focus,\n .kol-input.error select:focus,\n .kol-input.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n :host .kol-input.error .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n :host input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n :host input:focus:hover {\n box-shadow: none;\n }\n :host input:active {\n box-shadow: none;\n }\n :host .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n :host .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .required label > span::after {\n content: \"*\";\n padding-left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n :host .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n :host .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n 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 :host .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n :host .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n border-width: 0;\n display: block;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n min-width: calc(56rem / var(--kolibri-root-font-size, 16));\n position: relative;\n width: calc(56rem / var(--kolibri-root-font-size, 16));\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :host .kol-input.switch input[type=checkbox]:before {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(4rem / var(--kolibri-root-font-size, 16) - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: calc(20rem / var(--kolibri-root-font-size, 16));\n background-color: white;\n position: absolute;\n }\n :host .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n :host .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(calc(32rem / var(--kolibri-root-font-size, 16)));\n }\n :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(calc(16rem / var(--kolibri-root-font-size, 16)));\n }\n .switch .icon {\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(calc(32rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto 0;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .kol-input:not(.checkbox.switch, .radio) .input:focus,\n .kol-input:not(.checkbox) .input:focus,\n .kol-input:is(.checkbox.switch, .radio) input:focus,\n .kol-input:is(.checkbox) input:focus {\n cursor: pointer;\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n transition: outline-offset 0.2s linear;\n }\n}";
499
499
 
500
- var css_248z$3h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16)) !important;\n }\n input[type=color] {\n background-color: transparent;\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: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
500
+ var css_248z$3i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16)) !important;\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: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
501
501
 
502
- var css_248z$3g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
502
+ var css_248z$3h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
503
503
 
504
- var css_248z$3f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
504
+ var css_248z$3g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
505
505
 
506
- var css_248z$3e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input {\n border: none;\n }\n input[type=file] {\n background-color: transparent;\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: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
506
+ var css_248z$3f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
507
507
 
508
- var css_248z$3d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
508
+ var css_248z$3e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
509
509
 
510
- var css_248z$3c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
510
+ var css_248z$3d = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
511
511
 
512
- var css_248z$3b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0px;\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n padding: calc(0rem / var(--kolibri-root-font-size, 16));\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert-wc.error {\n order: 1;\n }\n fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset .kol-input {\n order: 3;\n }\n fieldset.error {\n border-left: 3px solid var(--color-danger);\n color: var(--color-danger);\n font-weight: 700;\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n fieldset.error input:focus,\n fieldset.error select:focus,\n fieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n fieldset.error .kol-alert-wc.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
512
+ var css_248z$3c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0px;\n margin: calc(0rem / var(--kolibri-root-font-size, 16));\n padding: calc(0rem / var(--kolibri-root-font-size, 16));\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert-wc.error {\n order: 1;\n }\n fieldset legend {\n order: 2;\n display: contents;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n fieldset .kol-input {\n order: 3;\n }\n fieldset.error {\n border-left: 3px solid var(--color-danger);\n color: var(--color-danger);\n font-weight: 700;\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n fieldset.error input:focus,\n fieldset.error select:focus,\n fieldset.error textarea:focus {\n outline-color: var(--color-danger) !important;\n }\n fieldset.error .kol-alert-wc.error {\n margin-left: -0.25em;\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
513
513
 
514
- var css_248z$3a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n /*.input {\n \tbackground-color: var(--color-light);\n \tborder-color: var(--color-subtle);\n \tborder-radius: var(--border-radius);\n \tborder-style: solid;\n \tborder-width: var(--border-width);\n \tpadding: 0 rem(calc(0.5*16));\n }*/\n .input {\n border-radius: var(--border-radius);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input input[type=range] {\n appearance: none;\n background-color: var(--color-mute-variant);\n border: 1px solid var(--border-color);\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 2);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input input[type=range]::-webkit-slider-thumb {\n appearance: none;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n background: var(--color-primary);\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n .kol-input input[type=range]::-moz-range-thumb {\n appearance: none;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n background: var(--color-primary);\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n /*\t.kol-input input[type=range]::-webkit-slider-runnable-track {\n \tappearance: none;\n \tbox-shadow: none;\n \tborder: none;\n \tbackground: transparent;\n }*/\n}";
514
+ var css_248z$3b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input input[type=range] {\n appearance: none;\n background-color: var(--color-mute-variant);\n border: 1px solid var(--border-color);\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 2);\n line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input input[type=range]::-webkit-slider-thumb {\n appearance: none;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n background: var(--color-primary);\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n .kol-input input[type=range]::-moz-range-thumb {\n appearance: none;\n height: calc(20rem / var(--kolibri-root-font-size, 16));\n width: calc(20rem / var(--kolibri-root-font-size, 16));\n border-radius: 50%;\n background: var(--color-primary);\n cursor: ew-resize;\n transition: background 0.3s ease-in-out;\n }\n /*\t.kol-input input[type=range]::-webkit-slider-runnable-track {\n \tappearance: none;\n \tbox-shadow: none;\n \tborder: none;\n \tbackground: transparent;\n }*/\n}";
515
515
 
516
- var css_248z$39 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
516
+ var css_248z$3a = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .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 input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
517
517
 
518
- var css_248z$38 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
518
+ var css_248z$39 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
519
519
 
520
- var css_248z$37 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
520
+ var css_248z$38 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: calc(var(--border-width) * 2);\n transition: outline-offset 0.2s linear;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n outline-width: calc(var(--border-width) * 2);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
521
521
 
522
- var css_248z$36 = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n}";
522
+ var css_248z$37 = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus kol-span-wc {\n border-radius: calc(var(--border-radius) / 2);\n outline: var(--border-width) solid;\n outline-offset: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .hidden {\n display: none;\n visibility: hidden;\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1em;\n }\n .skip:focus {\n background: white;\n left: unset;\n position: unset;\n }\n .external-link-icon {\n margin-left: 0;\n }\n}";
523
523
 
524
- var css_248z$35 = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32rem / var(--kolibri-root-font-size, 16));\n }\n}";
524
+ var css_248z$36 = "@layer kol-theme-component {\n :host .overlay .modal {\n max-height: calc(100% - 32rem / var(--kolibri-root-font-size, 16));\n }\n}";
525
525
 
526
- var css_248z$34 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: 2px solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n}";
526
+ var css_248z$35 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n nav {\n background-color: var(--color-mute);\n }\n ul {\n list-style: none;\n }\n .kol-link-wc {\n display: flex;\n }\n .entry-item a,\n .entry-item .button {\n align-items: center;\n color: var(--color-primary);\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n text-decoration: none;\n }\n .vertical .entry-item a,\n .vertical .entry-item .button {\n border-left: 2px solid transparent;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .horizontal .entry-item a,\n .horizontal .entry-item .button {\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .vertical .active .entry-item a,\n .vertical .active .entry-item .button {\n border-left-color: var(--color-primary);\n }\n .entry-item a:focus-visible,\n .entry-item .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .entry-item a:hover {\n text-decoration: underline;\n }\n .list .list {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .active .entry-item a,\n .active .entry-item .button {\n font-weight: bold;\n }\n .active .list .entry-item a,\n .active .list .entry-item .button {\n font-weight: normal;\n border-left-color: transparent;\n }\n .expand-button {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .expand-button .button:hover {\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .expand-button .button:focus-visible {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .expand-button .button-inner {\n justify-content: center;\n }\n}";
527
527
 
528
- var css_248z$33 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected .button-inner {\n background-color: var(--color-mute-variant);\n border-radius: var(--a11y-min-size);\n border: 0;\n }\n}";
528
+ var css_248z$34 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected .button-inner {\n background-color: var(--color-mute-variant);\n border-radius: var(--a11y-min-size);\n border: 0;\n }\n}";
529
529
 
530
- var css_248z$32 = "@layer kol-theme-component {\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n}";
530
+ var css_248z$33 = "@layer kol-theme-component {\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n}";
531
531
 
532
- var css_248z$31 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
532
+ var css_248z$32 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: calc(0rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n width: calc(0rem / var(--kolibri-root-font-size, 16));\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n .bar .progress {\n fill: var(--color-primary-variant);\n }\n}";
533
533
 
534
- var css_248z$30 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-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 select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\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}";
534
+ var css_248z$31 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n select {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input select {\n background-color: var(--color-light);\n }\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-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 select:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n option:active:not(:disabled),\n option:checked:not(:disabled),\n option:focus:not(:disabled),\n option:hover:not(:disabled) {\n background: var(--color-primary-variant);\n color: var(--color-light);\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}";
535
535
 
536
- var css_248z$2$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\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}";
536
+ var css_248z$30 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\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}";
537
537
 
538
- var css_248z$2_ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\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}";
538
+ var css_248z$2$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: calc(16rem / var(--kolibri-root-font-size, 16));\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}";
539
539
 
540
- var css_248z$2Z = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n background-color: #fc0;\n }\n .dot > span:nth-child(2) {\n background-color: red;\n }\n .dot > span:nth-child(4) {\n background-color: #666;\n }\n /* Override colors for cycle animation */\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #fc0;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: red;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n}";
540
+ var css_248z$2_ = "@layer kol-theme-component {\n .dot > span:nth-child(1) {\n background-color: #fc0;\n }\n .dot > span:nth-child(2) {\n background-color: red;\n }\n .dot > span:nth-child(4) {\n background-color: #666;\n }\n /* Override colors for cycle animation */\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #fc0;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: red;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n}";
541
541
 
542
- var css_248z$2Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background: var(--color-light);\n top: calc(100% + 4rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
542
+ var css_248z$2Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background: var(--color-light);\n top: calc(100% + 4rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .main-button :is(a, button) > .kol-span-wc {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button :is(a, button) > .kol-span-wc {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
543
+
544
+ var css_248z$2Y = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\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 tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n}";
543
545
 
544
546
  var css_248z$2X = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\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 tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n}";
545
547
 
546
- var css_248z$2W = "@layer kol-theme-component {\n :host * {\n hyphens: var(--hyphens);\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n font-weight: bold;\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n :host table thead tr:first-child th,\n :host table thead tr:first-child td {\n border-width: 0;\n border-top-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n table {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .head-spacer {\n display: table-row;\n }\n .head-spacer td {\n padding: 0;\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-style: solid;\n border-color: var(--color-primary-variant);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th div {\n width: 100%;\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 tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n}";
548
+ var css_248z$2W = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-button-group-wc {\n display: inline-flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 400;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n transition: all 0.2s linear;\n }\n button.selected,\n button .primary {\n color: var(--color-primary);\n }\n button.selected:hover {\n color: var(--color-light);\n }\n button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n *[tabindex]:is(.kol-button-group-wc button) {\n width: 100%;\n padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n border: var(--border-width) solid transparent;\n border-radius: var(--border-radius);\n border-bottom-width: var(--border-width);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n position: relative;\n top: var(--border-width);\n box-shadow: none;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected) {\n border-color: var(--color-primary);\n border-bottom-color: var(--page-bg);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n border-bottom-color: var(--color-primary);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):before {\n position: absolute;\n top: 0;\n content: \"\";\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n background-color: var(--color-primary);\n border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n left: 0;\n right: 0;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):after {\n content: \" \";\n background-color: var(--page-bg);\n height: calc(6rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n left: calc(-5rem / var(--kolibri-root-font-size, 16));\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .kol-button-group-wc {\n border-bottom: 1px solid var(--color-primary);\n }\n}";
547
549
 
548
- var css_248z$2V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .kol-button-group-wc {\n display: inline-flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 400;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: calc(19.2rem / var(--kolibri-root-font-size, 16));\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n transition: all 0.2s linear;\n }\n button.selected,\n button .primary {\n color: var(--color-primary);\n }\n button.selected:hover {\n color: var(--color-light);\n }\n button:hover {\n color: var(--color-light);\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n *[tabindex]:is(.kol-button-group-wc button) {\n width: 100%;\n padding: 0 calc(4rem / var(--kolibri-root-font-size, 16));\n border: var(--border-width) solid transparent;\n border-radius: var(--border-radius);\n border-bottom-width: var(--border-width);\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n position: relative;\n top: var(--border-width);\n box-shadow: none;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected) {\n border-color: var(--color-primary);\n border-bottom-color: var(--page-bg);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):hover {\n border-bottom-color: var(--color-primary);\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):before {\n position: absolute;\n top: 0;\n content: \"\";\n height: calc(16rem / var(--kolibri-root-font-size, 16) / 4);\n background-color: var(--color-primary);\n border-top-right-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n border-top-left-radius: calc(16rem / var(--kolibri-root-font-size, 16) / 8);\n left: 0;\n right: 0;\n }\n *[tabindex]:is(.kol-button-group-wc button.selected):after {\n content: \" \";\n background-color: var(--page-bg);\n height: calc(6rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n width: calc(100% + 10rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-7rem / var(--kolibri-root-font-size, 16));\n left: calc(-5rem / var(--kolibri-root-font-size, 16));\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .kol-button-group-wc {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .kol-button-group-wc {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .kol-button-group-wc {\n order: 2;\n }\n :host > .tabs-align-bottom .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-top .kol-button-group-wc > div {\n display: flex;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .kol-button-group-wc > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-top .kol-button-group-wc {\n order: 0;\n }\n :host > .tabs-align-bottom .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n order: 1;\n }\n :host > .tabs-align-left .kol-button-group-wc,\n :host > .tabs-align-right .kol-button-group-wc {\n gap: inherit;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div,\n :host > div.tabs-align-left .kol-button-group-wc > div > div,\n :host > div.tabs-align-right .kol-button-group-wc > div,\n :host > div.tabs-align-right .kol-button-group-wc > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .kol-button-group-wc div,\n :host > div.tabs-align-top .kol-button-group-wc div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .kol-button-group-wc {\n border-bottom: 1px solid var(--color-primary);\n }\n}";
550
+ var css_248z$2V = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
549
551
 
550
- var css_248z$2U = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0 !important;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error {\n order: 1;\n }\n .kol-input label {\n order: 2;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-weight: 700;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
552
+ var css_248z$2U = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
551
553
 
552
- var css_248z$2T = "@layer kol-theme-component {\n .msg {\n border-width: 0 !important;\n }\n .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .msg {\n align-items: start;\n }\n .default {\n border-color: var(--color-subtle);\n }\n .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .error {\n border-color: var(--color-danger);\n }\n .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .info {\n border-color: var(--color-primary);\n }\n .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .success {\n border-color: var(--color-success);\n }\n .success.msg .heading-icon {\n color: var(--color-success);\n }\n .warning {\n border-color: var(--color-warning);\n }\n .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .heading-icon {\n color: var(--color-light);\n }\n .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .msg.error .close .icon {\n color: var(--color-danger);\n }\n .msg.info .close .icon {\n color: var(--color-primary);\n }\n .msg.success .close .icon {\n color: var(--color-success);\n }\n .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(calc(0rem / var(--kolibri-root-font-size, 16)) calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .card.error > .heading {\n background-color: var(--color-danger);\n }\n .card.info > .heading {\n background-color: var(--color-primary);\n }\n .card.success > .heading {\n background-color: var(--color-success);\n }\n .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .card.default .close {\n background-color: var(--color-subtle);\n }\n .card.error .close {\n background-color: var(--color-danger);\n }\n .card.info .close {\n background-color: var(--color-primary);\n }\n .card.success .close {\n background-color: var(--color-success);\n }\n .card.warning .close {\n background-color: var(--color-warning);\n }\n .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .close > button:active {\n box-shadow: none;\n outline: none;\n }\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
554
+ var css_248z$2T = "@layer kol-theme-component {\n .tree ul {\n border: 2px solid transparent;\n border-radius: var(--border-radius);\n }\n .tree:focus-within {\n outline: 0;\n }\n .tree:focus-within ul {\n border: 2px solid var(--color-primary);\n }\n}";
553
555
 
554
- var css_248z$2S = "@layer kol-theme-component {\n .tree ul {\n border: 2px solid transparent;\n border-radius: var(--border-radius);\n }\n .tree:focus-within {\n outline: 0;\n }\n .tree:focus-within ul {\n border: 2px solid var(--color-primary);\n }\n}";
556
+ var css_248z$2S = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: 1px solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: 1px solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n text-align: left;\n }\n .tree-link a .toggle-button {\n display: inline-block;\n }\n .tree-link a .toggle-button:hover {\n transform: scale(1.3);\n }\n .tree-link > a {\n padding-left: max(30rem / var(--kolibri-root-font-size, 16) * var(--level), 8rem / var(--kolibri-root-font-size, 16));\n }\n}";
555
557
 
556
- var css_248z$2R = "@layer kol-theme-component {\n .tree-link {\n display: block;\n border: 1px solid transparent;\n }\n .tree-link:hover, .tree-link:focus-within {\n border: 1px solid var(--color-primary);\n background-color: var(--color-primary-variant);\n }\n .tree-link:hover > a, .tree-link:focus-within > a {\n outline-offset: 0;\n }\n .tree-link:hover > a,\n .tree-link:hover .toggle-button, .tree-link:focus-within > a,\n .tree-link:focus-within .toggle-button {\n color: var(--color-light);\n }\n .tree-link.active {\n background-color: var(--color-primary);\n }\n .tree-link.active a,\n .tree-link.active .toggle-button {\n color: var(--color-light);\n }\n .tree-link a {\n display: block;\n color: var(--color-text);\n text-decoration: none;\n text-align: left;\n }\n .tree-link a .toggle-button {\n display: inline-block;\n }\n .tree-link a .toggle-button:hover {\n transform: scale(1.3);\n }\n .tree-link > a {\n padding-left: max(30rem / var(--kolibri-root-font-size, 16) * var(--level), 8rem / var(--kolibri-root-font-size, 16));\n }\n}";
558
+ var css_248z$2R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 400;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.2s;\n transition-property: background-color, color, border-color;\n }\n .kol-link-wc > a {\n text-decoration: none;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .badge-text-hint {\n background: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
557
559
 
558
560
  const BWSt = KoliBri.createTheme('bwst', {
559
- GLOBAL: css_248z$3z,
560
- 'KOL-ABBR': css_248z$3y,
561
- 'KOL-ACCORDION': css_248z$3x,
562
- 'KOL-ALERT': css_248z$3w,
563
- 'KOL-AVATAR': css_248z$3v,
564
- 'KOL-BADGE': css_248z$3u,
565
- 'KOL-BREADCRUMB': css_248z$3t,
566
- 'KOL-BUTTON': css_248z$3s,
567
- 'KOL-BUTTON-GROUP': css_248z$3r,
568
- 'KOL-BUTTON-LINK': css_248z$3q,
569
- 'KOL-CARD': css_248z$3p,
570
- 'KOL-COMBOBOX': css_248z$3o,
571
- 'KOL-DETAILS': css_248z$3n,
572
- 'KOL-FORM': css_248z$3m,
573
- 'KOL-HEADING': css_248z$3l,
574
- 'KOL-ICON': css_248z$3k,
575
- 'KOL-INDENTED-TEXT': css_248z$3j,
576
- 'KOL-INPUT-CHECKBOX': css_248z$3i,
577
- 'KOL-INPUT-COLOR': css_248z$3h,
578
- 'KOL-INPUT-DATE': css_248z$3g,
579
- 'KOL-INPUT-EMAIL': css_248z$3f,
580
- 'KOL-INPUT-FILE': css_248z$3e,
581
- 'KOL-INPUT-NUMBER': css_248z$3d,
582
- 'KOL-INPUT-PASSWORD': css_248z$3c,
583
- 'KOL-INPUT-RADIO': css_248z$3b,
584
- 'KOL-INPUT-RANGE': css_248z$3a,
585
- 'KOL-INPUT-TEXT': css_248z$39,
586
- 'KOL-KOLIBRI': css_248z$38,
587
- 'KOL-LINK': css_248z$36,
588
- 'KOL-LINK-BUTTON': css_248z$37,
589
- 'KOL-MODAL': css_248z$35,
590
- 'KOL-NAV': css_248z$34,
591
- 'KOL-PAGINATION': css_248z$33,
592
- 'KOL-POPOVER-BUTTON': css_248z$32,
593
- 'KOL-PROGRESS': css_248z$31,
594
- 'KOL-SELECT': css_248z$30,
595
- 'KOL-SINGLE-SELECT': css_248z$2$,
596
- 'KOL-SKIP-NAV': css_248z$2_,
597
- 'KOL-SPIN': css_248z$2Z,
598
- 'KOL-SPLIT-BUTTON': css_248z$2Y,
599
- 'KOL-TABLE-STATEFUL': css_248z$2X,
600
- 'KOL-TABLE-STATELESS': css_248z$2W,
601
- 'KOL-TABS': css_248z$2V,
602
- 'KOL-TEXTAREA': css_248z$2U,
603
- 'KOL-TOAST-CONTAINER': css_248z$2T,
604
- 'KOL-TREE': css_248z$2S,
605
- 'KOL-TREE-ITEM': css_248z$2R,
561
+ GLOBAL: css_248z$3A,
562
+ 'KOL-ABBR': css_248z$3z,
563
+ 'KOL-ACCORDION': css_248z$3y,
564
+ 'KOL-ALERT': css_248z$3x,
565
+ 'KOL-AVATAR': css_248z$3w,
566
+ 'KOL-BADGE': css_248z$3v,
567
+ 'KOL-BREADCRUMB': css_248z$3u,
568
+ 'KOL-BUTTON': css_248z$3t,
569
+ 'KOL-BUTTON-GROUP': css_248z$3s,
570
+ 'KOL-BUTTON-LINK': css_248z$3r,
571
+ 'KOL-CARD': css_248z$3q,
572
+ 'KOL-COMBOBOX': css_248z$3p,
573
+ 'KOL-DETAILS': css_248z$3o,
574
+ 'KOL-FORM': css_248z$3n,
575
+ 'KOL-HEADING': css_248z$3m,
576
+ 'KOL-ICON': css_248z$3l,
577
+ 'KOL-INDENTED-TEXT': css_248z$3k,
578
+ 'KOL-INPUT-CHECKBOX': css_248z$3j,
579
+ 'KOL-INPUT-COLOR': css_248z$3i,
580
+ 'KOL-INPUT-DATE': css_248z$3h,
581
+ 'KOL-INPUT-EMAIL': css_248z$3g,
582
+ 'KOL-INPUT-FILE': css_248z$3f,
583
+ 'KOL-INPUT-NUMBER': css_248z$3e,
584
+ 'KOL-INPUT-PASSWORD': css_248z$3d,
585
+ 'KOL-INPUT-RADIO': css_248z$3c,
586
+ 'KOL-INPUT-RANGE': css_248z$3b,
587
+ 'KOL-INPUT-TEXT': css_248z$3a,
588
+ 'KOL-KOLIBRI': css_248z$39,
589
+ 'KOL-LINK': css_248z$37,
590
+ 'KOL-LINK-BUTTON': css_248z$38,
591
+ 'KOL-MODAL': css_248z$36,
592
+ 'KOL-NAV': css_248z$35,
593
+ 'KOL-PAGINATION': css_248z$34,
594
+ 'KOL-POPOVER-BUTTON': css_248z$33,
595
+ 'KOL-PROGRESS': css_248z$32,
596
+ 'KOL-SELECT': css_248z$31,
597
+ 'KOL-SINGLE-SELECT': css_248z$30,
598
+ 'KOL-SKIP-NAV': css_248z$2$,
599
+ 'KOL-SPIN': css_248z$2_,
600
+ 'KOL-SPLIT-BUTTON': css_248z$2Z,
601
+ 'KOL-TABLE-STATEFUL': css_248z$2Y,
602
+ 'KOL-TABLE-STATELESS': css_248z$2X,
603
+ 'KOL-TABS': css_248z$2W,
604
+ 'KOL-TEXTAREA': css_248z$2V,
605
+ 'KOL-TOAST-CONTAINER': css_248z$2U,
606
+ 'KOL-TOOLBAR': css_248z$2R,
607
+ 'KOL-TREE': css_248z$2T,
608
+ 'KOL-TREE-ITEM': css_248z$2S,
606
609
  });
607
610
 
608
611
  var css_248z$2Q = "@layer kol-theme-component {\n abbr {\n border-bottom: dashed var(--color-text) calc(1rem / var(--kolibri-root-font-size, 16));\n text-decoration: none;\n }\n}";
@@ -617,15 +620,15 @@ var css_248z$2M = "@layer kol-theme-component {\n :host {\n display: inline-
617
620
 
618
621
  var css_248z$2L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n color: var(--color-subtle);\n }\n .kol-link::part(icon) {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n ul li:last-child > span {\n color: var(--color-subtle);\n }\n .kol-link {\n font-family: var(--font-family);\n }\n}";
619
622
 
620
- var css_248z$2K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
623
+ var css_248z$2K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\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 :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
621
624
 
622
625
  var css_248z$2J = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing);\n }\n}";
623
626
 
624
- var css_248z$2I = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
627
+ var css_248z$2I = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n a:hover:not([aria-disabled]) .kol-span-wc .span-label,\n button:hover:not([disabled]) .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .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}";
625
628
 
626
629
  var css_248z$2H = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: var(--color-light);\n grid-template-rows: min-content 2fr min-content;\n box-shadow: 0 0 4px color-mix(in srgb, black 80%, var(--color-subtle));\n border-radius: var(--border-radius);\n }\n :host .kol-heading-wc {\n line-height: 1.75;\n }\n :host div.header {\n padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host div.content {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n }\n :host div.footer {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
627
630
 
628
- var css_248z$2G = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
631
+ var css_248z$2G = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n display: inline-flex;\n align-items: center;\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__input {\n flex-grow: 1;\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .combobox__input::placeholder {\n color: var(--color-subtle);\n }\n .combobox__input:first-child {\n padding-left: var(--spacing);\n }\n .combobox__input:last-child {\n padding-right: var(--spacing);\n }\n .combobox__icon {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__icon:focus {\n outline: 0;\n }\n .combobox__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n width: 100%;\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item {\n display: flex;\n align-items: center;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .combobox__item:focus {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
629
632
 
630
633
  var css_248z$2F = "@layer kol-theme-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .details {\n width: 100%;\n height: 100%;\n display: grid;\n }\n .details__content.indented-text {\n font-family: var(--font-family);\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading {\n margin: 0;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .details__heading-button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n cursor: pointer;\n }\n}";
631
634
 
@@ -639,25 +642,25 @@ var css_248z$2B = "@layer kol-theme-component {\n .headline-h1,\n .headline-h2
639
642
 
640
643
  var css_248z$2A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-indented-text-wc > div {\n font-family: var(--font-family);\n border-left: 2px solid var(--color-primary-variant);\n padding: 0 calc(18rem / var(--kolibri-root-font-size, 16)) 0 calc(8rem / var(--kolibri-root-font-size, 16));\n margin-left: calc(-2rem / var(--kolibri-root-font-size, 16));\n width: 100%;\n }\n}";
641
644
 
642
- var css_248z$2z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: 1px 1px 1px 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: 1px 0 1px 1px;\n }\n}";
645
+ var css_248z$2z = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n display: grid;\n align-items: center;\n justify-items: left;\n width: 100%;\n min-height: var(--a11y-min-size);\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default {\n grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.default[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(24rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch {\n grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n }\n .kol-input.switch[data-label-align=left]:not(.hide-label) {\n grid-template-columns: auto calc(56rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.button {\n gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .kol-input > div.input {\n display: inherit;\n min-height: var(--a11y-min-size);\n order: 2;\n }\n .kol-input > div.input input {\n margin: 0;\n }\n kol-input > label {\n order: 3;\n }\n .disabled .input-label,\n .disabled .checkbox-container {\n cursor: not-allowed;\n }\n .kol-input > .kol-alert-wc.error {\n order: 1;\n padding-top: calc(var(--spacing) / 2);\n grid-column: span 2/auto;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.error:not(.hidden-error) input:focus,\n .kol-input.error:not(.hidden-error) select:focus,\n .kol-input.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n input {\n cursor: pointer;\n order: 1;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: var(--border-radius);\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:active {\n box-shadow: none;\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n /* CHECKBOX */\n .kol-input label span {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input input[type=checkbox] {\n appearance: none;\n background-color: white;\n cursor: pointer;\n transition: 0.5s;\n }\n .kol-input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .kol-input.default input[type=checkbox] {\n border-radius: var(--border-radius);\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.default input[type=checkbox]:indeterminate {\n background-color: var(--color-primary);\n }\n .kol-input.default .icon {\n color: var(--color-light);\n margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox] {\n background-color: var(--color-subtle);\n border-radius: 1.25em;\n border-width: 0;\n display: block;\n height: 1.5em;\n min-width: 3.5em;\n position: relative;\n width: 3.5em;\n /* Visible with forced colors */\n outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.switch input[type=checkbox]:before {\n width: 1.25em;\n height: 1.25em;\n left: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n top: calc(0.25em - 2rem / var(--kolibri-root-font-size, 16));\n border-radius: 1.25em;\n background-color: white;\n position: absolute;\n }\n .kol-input.switch input[type=checkbox]:checked {\n background-color: var(--color-primary);\n }\n .kol-input.switch input[type=checkbox]:checked:before {\n transform: translateX(2em);\n }\n .kol-input.switch input[type=checkbox]:indeterminate:before {\n transform: translateX(1em);\n }\n .kol-input input[type=checkbox]:focus {\n outline-color: var(--color-primary);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n .switch .icon {\n width: 1.25em;\n height: 1.25em;\n left: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .switch.checked .icon {\n transform: translate(2em, -50%);\n }\n .switch.indeterminate .icon {\n transform: translate(1em, -50%);\n }\n .button .input {\n border-top-width: 1px;\n border-left-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-left-style: solid;\n border-bottom-style: solid;\n }\n .button.hide-label .input {\n border-right-width: 1px;\n border-right-style: solid;\n }\n .button .input-label {\n border-top-width: 1px;\n border-right-width: 1px;\n border-bottom-width: 1px;\n border-top-style: solid;\n border-right-style: solid;\n border-bottom-style: solid;\n justify-self: stretch;\n align-self: stretch;\n display: flex;\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button .input-label .input-label-span {\n margin: auto auto;\n font-weight: 700;\n }\n .button:focus-within {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button .input,\n .button .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-light);\n color: var(--color-primary);\n }\n .button.indeterminate .input,\n .button.indeterminate .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-mute);\n color: var(--color-primary);\n }\n .button.checked .input,\n .button.checked .input-label {\n border-color: var(--color-primary);\n background-color: var(--color-primary);\n color: var(--color-light);\n }\n .button:is(:active, :hover):not(.disabled) .input,\n .button:is(:active, :hover):not(.disabled) .input-label {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n .button.disabled .input {\n opacity: 0.5;\n outline: none;\n }\n .button[data-label-align=left]:not(.hide-label) {\n column-gap: 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input {\n border-style: solid;\n border-width: 1px 1px 1px 0;\n }\n .button[data-label-align=left]:not(.hide-label) .input-label {\n border-style: solid;\n border-width: 1px 0 1px 1px;\n }\n}";
643
646
 
644
- var css_248z$2y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n input[type=color] {\n background-color: transparent;\n }\n}";
647
+ var css_248z$2y = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n input[type=color] {\n border: none;\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n}";
645
648
 
646
- var css_248z$2x = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
649
+ var css_248z$2x = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
647
650
 
648
- var css_248z$2w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
651
+ var css_248z$2w = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
649
652
 
650
- var css_248z$2v = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n .kol-input .input input[type=file] {\n padding-top: calc(0.5em + 2rem / var(--kolibri-root-font-size, 16));\n }\n input[type=file] {\n background-color: transparent;\n }\n}";
653
+ var css_248z$2v = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
651
654
 
652
- var css_248z$2u = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
655
+ var css_248z$2u = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
653
656
 
654
- var css_248z$2t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
657
+ var css_248z$2t = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
655
658
 
656
659
  var css_248z$2s = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n label {\n cursor: pointer;\n display: grid;\n line-height: 1.25;\n gap: calc(var(--spacing) * 2);\n width: 100%;\n }\n input {\n cursor: pointer;\n width: 100%;\n border-color: var(--color-subtle);\n border-width: 2px;\n border-style: solid;\n border-radius: 5px;\n line-height: 1.5;\n }\n input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n input:focus:hover {\n box-shadow: none;\n }\n input:hover {\n border-color: var(--color-primary);\n }\n .kol-alert-wc {\n display: block;\n width: 100%;\n }\n .required legend > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n /* RADIO */\n fieldset {\n border: 0;\n margin: 0;\n padding: 0;\n display: grid;\n gap: 0.25em;\n }\n .radio-input-wrapper {\n align-items: center;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-input-wrapper label {\n cursor: pointer;\n display: flex;\n padding-left: calc(var(--spacing) / 2);\n width: 100%;\n }\n .radio-input-wrapper label span {\n margin-top: 0.125em;\n }\n .radio-input-wrapper input[type=radio] {\n appearance: none;\n transition: 0.5s;\n border-radius: 100%;\n height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n }\n .radio-input-wrapper input[type=radio]:before {\n content: \"\";\n cursor: pointer;\n border-radius: 100%;\n display: block;\n }\n .radio-input-wrapper input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n .radio-input-wrapper input[type=radio]:disabled {\n cursor: not-allowed;\n background-color: var(--color-mute-variant);\n }\n .kol-alert-wc.error {\n order: 3;\n }\n .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset legend {\n order: 2;\n display: contents;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n fieldset.error:not(.hidden-error) input:focus,\n fieldset.error:not(.hidden-error) select:focus,\n fieldset.error:not(.hidden-error) textarea:focus {\n outline-color: var(--color-danger);\n }\n fieldset.error:not(.hidden-error) .kol-alert-wc.error {\n margin-left: -0.25em;\n }\n fieldset.horizontal {\n display: flex;\n flex-wrap: wrap;\n gap: var(--spacing) calc(var(--spacing) * 2);\n align-items: flex-start;\n }\n fieldset.horizontal legend {\n display: inline-block;\n margin-bottom: calc(var(--spacing) / 2);\n }\n fieldset .input-slot {\n gap: var(--spacing);\n }\n .radio-input-wrapper label {\n padding-left: 0;\n }\n}";
657
660
 
658
- var css_248z$2r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
661
+ var css_248z$2r = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-left > .kol-icon:first-child {\n margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input.icon-right > .kol-icon:last-child {\n margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n input:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
659
662
 
660
- var css_248z$2q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
663
+ var css_248z$2q = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}";
661
664
 
662
665
  var css_248z$2p = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
663
666
 
@@ -669,17 +672,17 @@ var css_248z$2m = "@layer kol-theme-component {\n :host {\n font-family: var
669
672
 
670
673
  var css_248z$2l = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n background-color: var(--color-light);\n border-radius: var(--border-radius);\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n font-weight: 700;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .button:focus .button-inner {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .button:is(:active, :hover):not(:disabled) .button-inner {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .button:active .button-inner {\n color: var(--color-light);\n outline: none;\n }\n .selected button {\n opacity: 1;\n }\n .selected .button-inner {\n background-color: var(--color-primary);\n color: var(--color-light);\n border: 0;\n }\n}";
671
674
 
672
- var css_248z$2k = "@layer kol-theme-component {\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n .kol-popover-button__popover {\n border: var(--border-width) solid var(--color-primary);\n padding: var(--spacing);\n }\n}";
675
+ var css_248z$2k = "@layer kol-theme-component {\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 :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .kol-popover-button__popover {\n border: var(--border-width) solid var(--color-primary);\n padding: var(--spacing);\n }\n}";
673
676
 
674
677
  var css_248z$2j = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n :host svg line:first-child,\n :host svg circle:first-child {\n fill: transparent;\n stroke: var(--color-mute-variant);\n }\n :host svg line:last-child,\n :host svg circle:last-child {\n fill: transparent;\n stroke: var(--color-primary);\n }\n .cycle .progress {\n stroke: var(--color-primary-variant);\n }\n}";
675
678
 
676
- var css_248z$2i = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n .input > .kol-icon {\n width: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
679
+ var css_248z$2i = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .kol-input .kol-alert-wc {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .input > input:first-child {\n padding-left: var(--spacing);\n }\n .kol-input .input > input:last-child {\n padding-right: var(--spacing);\n }\n .kol-input .input input {\n border: none;\n }\n .kol-input .input input::placeholder {\n color: var(--color-subtle);\n }\n .kol-input .input input:disabled {\n cursor: not-allowed;\n }\n .kol-input .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n}\n@layer kol-theme-component {\n select {\n border: none;\n }\n select[multiple] {\n overflow: auto;\n }\n select option {\n margin: calc(1rem / var(--kolibri-root-font-size, 16)) 0;\n border-radius: var(--border-radius);\n cursor: pointer;\n }\n select option:disabled {\n cursor: not-allowed;\n }\n select option:active:not(:disabled), select option:checked:not(:disabled), select option:focus:not(:disabled), select option:hover:not(:disabled) {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n }\n select:not([multiple]) option {\n padding: 0.5em;\n }\n}";
677
680
 
678
- var css_248z$2h = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
681
+ var css_248z$2h = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .single-select__group {\n width: 100%;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__input {\n border: none;\n width: calc(100% - 40rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .single-select__input::placeholder {\n color: var(--color-subtle);\n }\n .single-select__input:first-child {\n padding-left: var(--spacing);\n }\n .single-select__input:last-child {\n padding-right: var(--spacing);\n }\n .single-select__input:not(.disabled) .single-select__input:hover {\n border-color: var(--color-primary);\n }\n .single-select__button {\n display: grid;\n place-items: center;\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__button:focus {\n outline: 0;\n }\n .single-select__listbox {\n border-style: solid;\n border-width: 1px;\n border-radius: var(--border-radius);\n border-color: var(--color-subtle);\n max-height: calc(40rem / var(--kolibri-root-font-size, 16) * 5 + 2rem / var(--kolibri-root-font-size, 16));\n overflow-y: auto;\n overflow-x: hidden;\n width: 100%;\n }\n .single-select__item {\n min-height: calc(40rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n padding: calc(10rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item .radio-label {\n align-self: center;\n padding-left: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .single-select__item:focus, .single-select__item.highlighted {\n background-color: var(--color-primary-variant);\n color: var(--color-light);\n outline: 0;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n padding: 0;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
679
682
 
680
683
  var css_248z$2g = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\n border-radius: var(--a11y-min-size);\n border-style: solid;\n border-width: var(--border-width);\n gap: calc(var(--spacing) * 2);\n line-height: 1;\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n color: var(--color-light);\n cursor: pointer;\n }\n}";
681
684
 
682
- var css_248z$2f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-top-left-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
685
+ var css_248z$2f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-primary);\n }\n .popover {\n background-color: #fff;\n }\n .secondary-button button {\n height: 100%;\n }\n .horizontal-line {\n background-color: var(--color-primary);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .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 :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n :is(a, button) {\n height: 100%;\n }\n :is(a, button) > .kol-span-wc {\n border-style: none;\n height: 100%;\n }\n .main-button :is(a, button) > .kol-span-wc {\n border-right: none;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n }\n .secondary-button :is(a, button) > .kol-span-wc {\n border-left: none;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n}";
683
686
 
684
687
  var css_248z$2e = "@layer kol-theme-component {\n :host * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n @media (min-width: 1024px) {\n div.pagination .kol-pagination {\n display: flex;\n align-items: center;\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc * {\n font-family: var(--font-family);\n line-height: var(--line-height);\n word-break: break-word;\n }\n :host > div,\n kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th {\n font-weight: normal;\n color: var(--color-primary);\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: table-row;\n height: calc(24rem / var(--kolibri-root-font-size, 16));\n }\n tr.foot-spacer td,\n tr.head-spacer td {\n border-width: 0;\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n tr.foot-spacer td {\n border-bottom-width: calc(var(--border-width) * 2);\n }\n tr.head-spacer td {\n border-top-width: calc(var(--border-width) * 2);\n }\n .table {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-primary-variant);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table,\n table caption {\n border-width: 0;\n border-bottom-width: calc(var(--border-width) * 2);\n border-color: var(--color-primary-variant);\n border-style: solid;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n th {\n background-color: var(--color-light);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n table tbody tr:nth-child(even) {\n background-color: var(--color-mute);\n }\n th,\n td {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:hover {\n border-color: var(--color-primary);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n }\n .input input:focus {\n border-color: var(--color-primary);\n outline-color: var(--color-primary-variant);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input input:focus:hover {\n box-shadow: none;\n }\n .input input[type=checkbox] {\n border-color: var(--color-subtle);\n border-radius: 5px;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input .icon {\n color: var(--color-light);\n }\n .input.indeterminate input {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-primary);\n }\n .input input[type=radio] {\n display: flex;\n border-color: var(--color-subtle);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-primary);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-primary);\n }\n}";
685
688
 
@@ -687,11 +690,11 @@ var css_248z$2d = "@layer kol-theme-component {\n :host,\n .kol-table-stateles
687
690
 
688
691
  var css_248z$2c = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .tabs-button-group {\n display: inline-flex;\n gap: calc(32rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n }\n button {\n box-sizing: border-box;\n background-color: transparent;\n border: 0;\n border-radius: var(--border-radius);\n font-style: normal;\n font-weight: 700;\n font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n line-height: 1.2;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n color: var(--color-subtle);\n padding: 0;\n }\n button:hover {\n color: var(--color-primary);\n }\n button.primary,\n button.selected {\n color: var(--color-primary);\n }\n button:not(.selected) .kol-span-wc > span {\n padding-bottom: 0.25em;\n }\n button.selected .kol-span-wc > span {\n border-bottom: 0.25em solid;\n }\n button .kol-span-wc > span {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-content {\n padding: 0.25em 0;\n }\n div[role=tabpanel] {\n height: 100%;\n }\n div.grid {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n display: grid;\n order: 2;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n display: grid;\n order: 0;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-bottom > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div:first-child {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16)) 0 0;\n }\n :host > .tabs-align-top > .tabs-button-group > div > div {\n margin: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n :host > div.tabs-align-left {\n grid-template-columns: auto 1fr;\n }\n :host > div.tabs-align-right {\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-bottom .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n order: 1;\n }\n :host > .tabs-align-left .tabs-button-group,\n :host > .tabs-align-right .tabs-button-group {\n gap: inherit;\n }\n :host > div.tabs-align-left .tabs-button-group > div,\n :host > div.tabs-align-left .tabs-button-group > div > div,\n :host > div.tabs-align-right .tabs-button-group > div,\n :host > div.tabs-align-right .tabs-button-group > div > div {\n display: grid;\n }\n :host > div.tabs-align-left .tabs-button-group > div > div .kol-button-wc,\n :host > div.tabs-align-right .tabs-button-group > div > div .kol-button-wc {\n width: 100%;\n }\n :host > div.tabs-align-bottom .tabs-button-group div,\n :host > div.tabs-align-top .tabs-button-group div {\n display: flex;\n flex-wrap: wrap;\n }\n :host .tabs-button-group button {\n border: none;\n }\n}";
689
692
 
690
- var css_248z$2b = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > .kol-icon {\n width: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
693
+ var css_248z$2b = "@layer kol-theme-component {\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 :host {\n font-family: var(--font-family);\n }\n :host .msg {\n border-width: 0;\n }\n :host .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n :host .kol-alert-wc.msg {\n border-width: 0;\n }\n :host .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n :host .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n :host .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n :host .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n :host .msg {\n align-items: start;\n }\n :host .default {\n border-color: var(--color-subtle);\n }\n :host .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n :host .error {\n border-color: var(--color-danger);\n }\n :host .error.msg .heading-icon {\n color: var(--color-danger);\n }\n :host .info {\n border-color: var(--color-primary);\n }\n :host .info.msg .heading-icon {\n color: var(--color-primary);\n }\n :host .success {\n border-color: var(--color-success);\n }\n :host .success.msg .heading-icon {\n color: var(--color-success);\n }\n :host .warning {\n border-color: var(--color-warning);\n }\n :host .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n :host .heading-icon {\n color: var(--color-light);\n }\n :host .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n :host .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n :host .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n :host .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n :host .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n :host .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n :host .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n :host .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n :host .msg.default .close .icon {\n color: var(--color-subtle);\n }\n :host .msg.error .close .icon {\n color: var(--color-danger);\n }\n :host .msg.info .close .icon {\n color: var(--color-primary);\n }\n :host .msg.success .close .icon {\n color: var(--color-success);\n }\n :host .msg.warning .close .icon {\n color: var(--color-warning);\n }\n :host .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n :host .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n :host .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n :host .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n :host .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host .card.default > .heading {\n background-color: var(--color-subtle);\n }\n :host .card.error > .heading {\n background-color: var(--color-danger);\n }\n :host .card.info > .heading {\n background-color: var(--color-primary);\n }\n :host .card.success > .heading {\n background-color: var(--color-success);\n }\n :host .card.warning > .heading {\n background-color: var(--color-warning);\n }\n :host :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n :host .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n :host .card.default .close {\n background-color: var(--color-subtle);\n }\n :host .card.error .close {\n background-color: var(--color-danger);\n }\n :host .card.info .close {\n background-color: var(--color-primary);\n }\n :host .card.success .close {\n background-color: var(--color-success);\n }\n :host .card.warning .close {\n background-color: var(--color-warning);\n }\n :host .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n :host .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n :host .close > button:active {\n box-shadow: none;\n outline: none;\n }\n .kol-input {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input .error:not(.hidden-error) {\n order: 1;\n }\n .kol-input label {\n order: 2;\n }\n .kol-input .input {\n order: 3;\n }\n .kol-input .counter {\n order: 4;\n }\n .kol-input .hint {\n order: 5;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n textarea {\n border: none;\n }\n input::placeholder {\n color: var(--color-subtle);\n }\n .input {\n background-color: var(--color-light);\n border-color: var(--color-subtle);\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: 2px;\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) {\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .input:is(.icon-left, .icon-right) input {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .input > input:first-child {\n padding-left: var(--spacing);\n }\n .input > input:last-child {\n padding-right: var(--spacing);\n }\n :not(.disabled) .input:hover {\n border-color: var(--color-primary);\n }\n textarea:disabled {\n cursor: not-allowed;\n }\n .required label > span::after {\n content: \"*\";\n padding-left: 0.125em;\n }\n .kol-input.error:not(.hidden-error) {\n border-left: 3px solid var(--color-danger);\n padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input.error:not(.hidden-error) .input:focus-within {\n outline-color: var(--color-danger);\n }\n .kol-input.error:not(.hidden-error) .kol-alert-wc.error {\n color: var(--color-danger);\n font-weight: 700;\n }\n select[multiple],\n textarea {\n overflow: auto;\n }\n textarea {\n display: block;\n }\n .input {\n position: relative;\n }\n .kol-input.disabled .input {\n background-color: var(--color-mute);\n border-color: var(--color-mute-variant);\n color: var(--color-text);\n }\n}";
691
694
 
692
695
  var css_248z$2a = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n }\n .toast {\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .msg {\n border-width: 0;\n }\n .toast .kol-alert-wc {\n border-width: var(--border-width);\n border-style: solid;\n border-radius: var(--border-radius);\n display: flex;\n width: 100%;\n overflow: unset;\n border-color: transparent;\n background-color: var(--color-light);\n }\n .toast .kol-alert-wc.msg {\n border-width: 0;\n }\n .toast .kol-alert-wc > .heading {\n display: flex;\n gap: 0.5em;\n place-items: center;\n }\n .toast .kol-alert-wc > .heading > div {\n display: grid;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n .toast .msg > .heading > .kol-icon {\n place-self: baseline;\n }\n .toast .kol-alert-wc > .heading > .kol-button-wc.close {\n place-self: center;\n }\n .toast .msg {\n align-items: start;\n }\n .toast .default {\n border-color: var(--color-subtle);\n }\n .toast .default.msg .heading-icon {\n color: var(--color-subtle);\n }\n .toast .error {\n border-color: var(--color-danger);\n }\n .toast .error.msg .heading-icon {\n color: var(--color-danger);\n }\n .toast .info {\n border-color: var(--color-primary);\n }\n .toast .info.msg .heading-icon {\n color: var(--color-primary);\n }\n .toast .success {\n border-color: var(--color-success);\n }\n .toast .success.msg .heading-icon {\n color: var(--color-success);\n }\n .toast .warning {\n border-color: var(--color-warning);\n }\n .toast .warning.msg .heading-icon {\n color: var(--color-warning);\n }\n .toast .heading-icon {\n color: var(--color-light);\n }\n .toast .kol-alert-wc .heading .heading-icon {\n padding: 0;\n }\n .toast .msg > .heading > .heading-icon {\n padding-top: 0;\n place-items: baseline;\n }\n .toast .msg > .heading > div > .kol-heading-wc {\n padding-top: calc(--var-spacing / 2);\n }\n .toast .msg.default .heading > div > .kol-heading-wc {\n color: var(--color-subtle);\n }\n .toast .msg.error .heading > div > .kol-heading-wc {\n color: var(--color-danger);\n }\n .toast .msg.info .heading > div > .kol-heading-wc {\n color: var(--color-primary);\n }\n .toast .msg.success .heading > div > .kol-heading-wc {\n color: var(--color-success);\n }\n .toast .msg.warning .heading > div > .kol-heading-wc {\n color: var(--color-warning);\n }\n .toast .msg.default .close .icon {\n color: var(--color-subtle);\n }\n .toast .msg.error .close .icon {\n color: var(--color-danger);\n }\n .toast .msg.info .close .icon {\n color: var(--color-primary);\n }\n .toast .msg.success .close .icon {\n color: var(--color-success);\n }\n .toast .msg.warning .close .icon {\n color: var(--color-warning);\n }\n .toast .card {\n border-width: var(--border-width);\n border-style: solid;\n filter: drop-shadow(0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(8, 35, 48, 0.24));\n flex-direction: column;\n }\n .toast .card > .heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card[_has-closer] > .heading {\n padding-top: 0;\n padding-bottom: 0;\n padding-right: 0;\n }\n .toast .card > .heading > div {\n width: 100%;\n min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card > .heading .heading-icon {\n justify-self: right;\n margin-top: calc(-4rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card > .heading .kol-heading-wc {\n width: 100%;\n color: var(--color-light);\n display: flex;\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n }\n .toast .card > .heading .kol-heading-wc > * {\n margin: auto 0;\n }\n .toast .card > .content {\n padding: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card.default > .heading {\n background-color: var(--color-subtle);\n }\n .toast .card.error > .heading {\n background-color: var(--color-danger);\n }\n .toast .card.info > .heading {\n background-color: var(--color-primary);\n }\n .toast .card.success > .heading {\n background-color: var(--color-success);\n }\n .toast .card.warning > .heading {\n background-color: var(--color-warning);\n }\n .toast :is(.error, .info, .success, .warning) .heading-icon {\n font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card > div > .content {\n grid-row: 2;\n grid-column: 1/span 2;\n }\n .toast .card.default .close {\n background-color: var(--color-subtle);\n }\n .toast .card.error .close {\n background-color: var(--color-danger);\n }\n .toast .card.info .close {\n background-color: var(--color-primary);\n }\n .toast .card.success .close {\n background-color: var(--color-success);\n }\n .toast .card.warning .close {\n background-color: var(--color-warning);\n }\n .toast .close > button {\n border-radius: 50%;\n /* visible on focus */\n color: var(--color-light);\n cursor: pointer;\n height: var(--a11y-min-size);\n width: var(--a11y-min-size);\n }\n .toast .close > button.hide-label .kol-icon {\n display: flex;\n width: 1em;\n height: 1em;\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .toast .close > button:active {\n box-shadow: none;\n outline: none;\n }\n}";
693
696
 
694
- var css_248z$29 = "@layer kol-theme-component {\n .toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n background-color: var(--color-light);\n border-width: var(--border-width);\n border-style: solid;\n }\n}";
697
+ var css_248z$29 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n border-radius: var(--border-radius);\n background-color: var(--color-light);\n border-width: var(--border-width);\n border-style: solid;\n }\n .kol-link-wc > a {\n text-decoration: none;\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 :is(a, button) > .kol-span-wc {\n font-weight: 700;\n border-radius: var(--border-radius);\n border-style: solid;\n border-width: var(--border-width);\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(14rem / var(--kolibri-root-font-size, 16));\n text-align: center;\n transition-duration: 0.5s;\n transition-property: background-color, color, border-color;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline-offset: 2px;\n outline: var(--color-primary-variant) solid calc(3rem / var(--kolibri-root-font-size, 16));\n transition: 200ms outline-offset linear;\n }\n .primary :is(a, button) > .kol-span-wc,\n .primary :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-primary);\n border-color: var(--color-primary);\n color: var(--color-light);\n }\n .secondary :is(a, button) > .kol-span-wc,\n .secondary :is(a, button):disabled:hover > .kol-span-wc,\n .normal :is(a, button) > .kol-span-wc,\n .normal :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-light);\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n .danger :is(a, button) > .kol-span-wc,\n .danger :is(a, button):disabled:hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n color: var(--color-light);\n }\n .ghost :is(a, button) > .kol-span-wc,\n .ghost :is(a, button):disabled:hover > .kol-span-wc {\n border-color: var(--color-light);\n background-color: var(--color-light);\n box-shadow: none;\n color: var(--color-primary);\n }\n /*-----------*/\n .primary :is(a, button):active > .kol-span-wc,\n .primary :is(a, button):hover > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):hover > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):hover > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n .danger :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):hover > .kol-span-wc {\n background-color: var(--color-danger);\n border-color: var(--color-danger);\n }\n :is(a, button):disabled:hover > .kol-span-wc,\n :is(a, button):focus:hover > .kol-span-wc {\n box-shadow: none;\n }\n .primary :is(a, button):active > .kol-span-wc,\n .secondary :is(a, button):active > .kol-span-wc,\n .normal :is(a, button):active > .kol-span-wc,\n .danger :is(a, button):active > .kol-span-wc,\n .ghost :is(a, button):active > .kol-span-wc {\n border-color: var(--color-light);\n box-shadow: none;\n outline: none;\n }\n :is(a, button).hide-label > .kol-span-wc {\n padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n width: unset;\n }\n :is(a, button).hide-label > .kol-span-wc > span > span {\n display: none;\n }\n :is(a, button).loading > .kol-span-wc .kol-icon {\n animation: spin 5s infinite linear;\n }\n /** small ghost button */\n .ghost :is(a, button).small > .kol-span-wc {\n border: none;\n background-color: transparent;\n box-shadow: none;\n }\n .ghost :is(a, button).small > .kol-span-wc > span {\n border-radius: 1.5em;\n border-style: solid;\n border-width: var(--border-width);\n border-color: var(--color-light);\n background-color: var(--color-light);\n }\n .ghost :is(a, button).small:active > .kol-span-wc > span,\n .ghost :is(a, button).small:hover > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n background-color: var(--color-primary-variant);\n border-color: var(--color-primary-variant);\n box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n color: var(--color-light);\n }\n /** :is(a,button) with transparent background */\n :is(a, button).transparent > .kol-span-wc > span,\n .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n :is(a, button).transparent > .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n }\n}";
695
698
 
696
699
  var css_248z$28 = "@layer kol-theme-component {\n .tree ul {\n border: 2px solid transparent;\n border-radius: var(--border-radius);\n }\n .tree:focus-within {\n outline: 0;\n }\n .tree:focus-within ul {\n border: 2px solid var(--color-primary);\n }\n}";
697
700
 
@@ -758,15 +761,15 @@ var css_248z$22 = "@layer kol-theme-component {\n :host > span {\n font: nor
758
761
 
759
762
  var css_248z$21 = "@layer kol-theme-component {\n :host {\n font: normal normal 400 calc(14rem / var(--kolibri-root-font-size, 16))/calc(16rem / var(--kolibri-root-font-size, 16)) arial, sans-serif;\n font-weight: var(--font-weight-bold);\n }\n .kol-icon::part(icon separator)::before {\n color: var(--color-blue);\n }\n li:last-child {\n color: var(--color-grey-75);\n }\n .kol-icon[exportparts*=separator] {\n 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-link {\n font-family: var(--font-family);\n }\n}";
760
763
 
761
- var css_248z$20 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a .kol-span-wc,\n button .kol-span-wc {\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 a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
764
+ var css_248z$20 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a .kol-span-wc,\n button .kol-span-wc {\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 a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
762
765
 
763
766
  var css_248z$1$ = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--spacing-2xs);\n }\n}";
764
767
 
765
- var css_248z$1_ = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n :is(a, button):hover .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .access-key-hint {\n background-color: var(--color-mute-variant);\n border-radius: 3px;\n color: var(--color-text);\n padding: 0 0.3em;\n }\n}";
768
+ var css_248z$1_ = "@layer kol-theme-component {\n :is(a, button) {\n color: var(--color-primary);\n font-style: normal;\n font-weight: 400;\n text-decoration-line: underline;\n font-size: inherit;\n }\n :is(a, button):focus {\n outline: none;\n }\n :is(a, button):focus .kol-span-wc {\n border-radius: var(--border-radius);\n outline: calc(var(--border-width) * 2) solid;\n }\n :is(a, button):hover .kol-span-wc .span-label {\n text-decoration-thickness: 0.25em;\n }\n :is(a, button):visited {\n color: var(--visited);\n }\n .skip {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n }\n .skip:focus {\n background-color: white;\n left: unset;\n position: unset;\n }\n .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}";
766
769
 
767
770
  var css_248z$1Z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: 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 :host .kol-heading-wc {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75em;\n }\n :host div.header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n :host div.content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n :host div.footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > div.content + div.footer {\n border-top: 2px solid var(--color-blue);\n }\n}";
768
771
 
769
- var css_248z$1Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n 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: 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-wc {\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}";
772
+ var css_248z$1Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .combobox {\n display: block;\n position: relative;\n }\n .combobox__group {\n 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-wc {\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}";
770
773
 
771
774
  var css_248z$1X = "@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 .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .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}";
772
775
 
@@ -780,23 +783,23 @@ var css_248z$1T = "@layer kol-theme-component {\n :host {\n font-family: var
780
783
 
781
784
  var css_248z$1S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: 2px;\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input kol-alert-wc.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert-wc {\n grid-column: span 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n}";
782
785
 
783
- var css_248z$1R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
786
+ var css_248z$1R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
784
787
 
785
- var css_248z$1Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
788
+ var css_248z$1Q = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
786
789
 
787
- var css_248z$1P = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
790
+ var css_248z$1P = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
788
791
 
789
- var css_248z$1O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
792
+ var css_248z$1O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
790
793
 
791
- var css_248z$1N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
794
+ var css_248z$1N = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
792
795
 
793
- var css_248z$1M = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
796
+ var css_248z$1M = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
794
797
 
795
798
  var css_248z$1L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n .input-slot {\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n fieldset .kol-alert-wc {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert-wc {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n border: 2px solid var(--color-grey-75);\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n input[type=radio]:focus {\n outline: 2px solid var(--color-blue);\n outline-offset: 2px;\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: 2px solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: 7px;\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
796
799
 
797
- var css_248z$1K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
800
+ var css_248z$1K = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
798
801
 
799
- var css_248z$1J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
802
+ var css_248z$1J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
800
803
 
801
804
  var css_248z$1I = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
802
805
 
@@ -808,31 +811,31 @@ var css_248z$1F = "@layer kol-theme-component {\n :host {\n font-family: var
808
811
 
809
812
  var css_248z$1E = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n .button-inner {\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 .button:not(:disabled):hover .button-inner {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .button:focus .button-inner {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\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}";
810
813
 
811
- var css_248z$1D = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n button .kol-span-wc {\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}";
814
+ var css_248z$1D = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n button .kol-span-wc {\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: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0.25em 0.75em;\n line-height: 1.2;\n }\n}";
812
815
 
813
816
  var css_248z$1C = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-grey-25);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-blue-130);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
814
817
 
815
- var css_248z$1B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
818
+ var css_248z$1B = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\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}";
816
819
 
817
- var css_248z$1A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n 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: 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-wc {\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}";
820
+ var css_248z$1A = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n display: block;\n position: relative;\n }\n .single-select__group {\n 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 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: 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-wc {\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}";
818
821
 
819
822
  var css_248z$1z = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\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}";
820
823
 
821
824
  var css_248z$1y = "@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}";
822
825
 
823
- var css_248z$1x = "@layer kol-theme-component {\n :host {\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 .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n 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 a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
826
+ var css_248z$1x = "@layer kol-theme-component {\n :host {\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 .popover {\n background-color: #fff;\n }\n .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n a .kol-span-wc,\n button .kol-span-wc {\n 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 a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
824
827
 
825
828
  var css_248z$1w = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-family: var(--font-family);\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n 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 .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
826
829
 
827
830
  var css_248z$1v = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-family: var(--font-family);\n }\n :host > div,\n .kol-table-stateless-wc > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n 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 .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n border-color: var(--color-grey-75);\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
828
831
 
829
- var css_248z$1u = "@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 .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 .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\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 .tabs-button-group button.selected .kol-span-wc {\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 .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
832
+ var css_248z$1u = "@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 .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 .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\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 .tabs-button-group button.selected .kol-span-wc {\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 .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
830
833
 
831
- var css_248z$1t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
834
+ var css_248z$1t = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading .kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\n outline: none;\n }\n input,\n select:not([multiple]) {\n min-height: var(--a11y-min-size);\n }\n input:not([type=range]):focus,\n select:focus,\n textarea:focus {\n border-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-wc {\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)) 0.5em;\n }\n input::placeholder,\n textarea::placeholder {\n color: var(--color-grey-50);\n }\n .input:focus-within {\n box-shadow: inset calc(1rem / var(--kolibri-root-font-size, 16)) calc(1rem / var(--kolibri-root-font-size, 16)) var(--color-blue), inset calc(-1rem / var(--kolibri-root-font-size, 16)) calc(-1rem / var(--kolibri-root-font-size, 16)) var(--color-blue);\n outline: none;\n }\n .input:focus-within,\n .input:hover {\n border-color: var(--color-blue);\n }\n .error .input {\n border-color: var(--color-red);\n }\n}";
832
835
 
833
836
  var css_248z$1s = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .toast div {\n background-color: var(--color-white);\n }\n .toast div.card {\n border-style: solid;\n border-width: 2px;\n }\n .toast div.msg {\n border: none;\n }\n .toast .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n .toast .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 }\n .toast .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .default {\n border-color: var(--color-grey);\n }\n .toast .default .heading .kol-icon {\n color: var(--color-grey);\n }\n .toast .error {\n border-color: var(--color-red);\n }\n .toast .error .heading .kol-icon {\n color: var(--color-red);\n }\n .toast .info {\n border-color: var(--color-blue);\n }\n .toast .info .heading .kol-icon {\n color: var(--color-blue);\n }\n .toast .success {\n border-color: var(--color-green);\n }\n .toast .success .heading .kol-icon {\n color: var(--color-green);\n }\n .toast .warning {\n border-color: var(--color-orange);\n }\n .toast .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .alert {\n display: block;\n }\n}";
834
837
 
835
- var css_248z$1r = "@layer kol-theme-component {\n .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}";
838
+ var css_248z$1r = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .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 a .kol-span-wc,\n button .kol-span-wc {\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 a,\n button {\n appearance: none;\n background-color: none;\n outline: none;\n text-decoration: none;\n }\n a:focus .kol-span-wc,\n button:focus .kol-span-wc {\n outline-offset: -4px;\n outline-width: 2px;\n outline-style: solid;\n }\n button.ghost:focus .kol-span-wc {\n outline-offset: -2px;\n }\n .primary a .kol-span-wc,\n .primary button .kol-span-wc {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n color: var(--color-white);\n }\n .primary a:focus .kol-span-wc,\n .primary button:focus .kol-span-wc {\n outline-color: var(--color-white);\n }\n .primary a:hover .kol-span-wc,\n .primary button:hover .kol-span-wc {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .secondary a .kol-span-wc,\n .secondary button .kol-span-wc {\n background-color: var(--color-white);\n border-color: var(--color-blue);\n color: var(--color-blue);\n }\n .secondary a:focus .kol-span-wc,\n .secondary button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n outline-offset: -6px;\n }\n .secondary a:hover .kol-span-wc,\n .secondary button:hover .kol-span-wc {\n border-color: var(--color-blue-130);\n color: var(--color-blue-130);\n }\n .normal a .kol-span-wc,\n .normal button .kol-span-wc {\n background-color: var(--color-yellow);\n border-color: var(--color-yellow);\n color: var(--color-black);\n }\n .normal a:hover .kol-span-wc,\n .normal button:hover .kol-span-wc {\n background-color: var(--color-yellow-120);\n border-color: var(--color-yellow-120);\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a .kol-span-wc,\n .ghost button .kol-span-wc {\n background-color: transparent;\n border-color: transparent;\n color: var(--color-blue);\n }\n .ghost a:focus .kol-span-wc,\n .ghost button:focus .kol-span-wc {\n outline-color: var(--color-blue);\n }\n .ghost a:hover .kol-span-wc,\n .ghost button:hover .kol-span-wc {\n color: var(--color-blue-130);\n }\n}";
836
839
 
837
840
  var css_248z$1q = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n }\n}";
838
841
 
@@ -899,7 +902,7 @@ var css_248z$1k = "@layer kol-theme-component {\n :host {\n font-family: var
899
902
 
900
903
  var css_248z$1j = "@layer kol-theme-component {\n :host,\n .kol-link {\n font-family: var(--font-family);\n }\n}";
901
904
 
902
- var css_248z$1i = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
905
+ var css_248z$1i = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
903
906
 
904
907
  var css_248z$1h = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n gap: var(--spacing-2xs);\n }\n}";
905
908
 
@@ -907,7 +910,7 @@ var css_248z$1g = "@layer kol-theme-component {\n a,\n button {\n appearanc
907
910
 
908
911
  var css_248z$1f = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n display: grid;\n width: 100%;\n height: 100%;\n background-color: 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 :host .kol-heading-wc {\n display: inline-flex;\n font-style: normal;\n font-weight: 700;\n font-size: 1.25em;\n line-height: 1.75;\n }\n :host div.header {\n padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n }\n :host div.content {\n padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n overflow: hidden;\n }\n :host div.footer {\n padding: var(--spacing-xs) var(--spacing-m);\n }\n :host > div > div.content + div.footer {\n border-top: 2px solid var(--color-blue);\n }\n}";
909
912
 
910
- var css_248z$1e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n 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: 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: 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-wc {\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: 1pxlid 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}";
913
+ var css_248z$1e = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n .kol-input .error {\n order: 1;\n }\n label {\n 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-wc {\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: 1pxlid 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}";
911
914
 
912
915
  var css_248z$1d = "@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 .details__heading-button:focus-within {\n cursor: pointer;\n }\n .details__heading-button button .kol-span-wc .span-label {\n border-bottom-color: #000;\n }\n .details__heading-button .kol-icon {\n font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n }\n .details__heading-button .kol-span-wc > span {\n display: flex;\n text-align: left;\n gap: 0;\n }\n .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}";
913
916
 
@@ -921,27 +924,27 @@ var css_248z$19 = "@layer kol-theme-component {\n :host {\n font-family: var
921
924
 
922
925
  var css_248z$18 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .checkbox-container {\n justify-content: flex-start;\n }\n .default[data-label-align=left]:not(.hide-label) .checkbox-container {\n justify-content: flex-end;\n }\n input[type=checkbox] {\n background-color: var(--color-white);\n border-width: 2px;\n border-style: solid;\n color: var(--color-grey);\n line-height: 1.5;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n input[type=checkbox]:focus {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n input[type=checkbox]:checked:hover {\n background-color: var(--color-blue-130);\n border-color: var(--color-blue-130);\n }\n .error input[type=checkbox] {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:hover {\n border-color: var(--color-red);\n }\n .error input[type=checkbox]:checked:hover {\n background-color: var(--color-red-1xx);\n border-color: var(--color-red-1xx);\n }\n .error.required label > span::after {\n color: var(--color-red);\n }\n .default .icon {\n margin-left: calc(3.2rem / var(--kolibri-root-font-size, 16));\n }\n .default.checked .icon {\n color: var(--color-white);\n }\n .switch input[type=checkbox] {\n display: block;\n }\n .switch input[type=checkbox]::before,\n .switch input[type=checkbox]:indeterminate::before {\n background-color: var(--color-grey-75);\n }\n .switch input[type=checkbox]:hover::before,\n .switch input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-blue);\n }\n .switch input[type=checkbox]:checked::before,\n .switch input[type=checkbox]:checked:hover::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]::before {\n background-color: var(--color-red);\n }\n .switch.error input[type=checkbox]:checked::before {\n background-color: var(--color-white);\n }\n .switch.error input[type=checkbox]:indeterminate:hover::before {\n background-color: var(--color-red-1xx);\n }\n .button {\n gap: var(--spacing-xs) 0;\n grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n }\n .button[data-label-align=left]:not(.hide-label) {\n grid-template-areas: \"label input\" \"hint hint\" \"error error\";\n }\n .kol-input .kol-alert-wc.error {\n order: 3;\n }\n .kol-input .hint,\n .kol-input.error > .kol-alert-wc {\n grid-column: span 2;\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n }\n .hint {\n font-size: calc(14rem / var(--kolibri-root-font-size, 16));\n }\n .button:focus-within {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
923
926
 
924
- var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
927
+ var css_248z$17 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
925
928
 
926
- var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
929
+ var css_248z$16 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
927
930
 
928
- var css_248z$15 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
931
+ var css_248z$15 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
929
932
 
930
- var css_248z$14 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
933
+ var css_248z$14 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
931
934
 
932
- var css_248z$13 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
935
+ var css_248z$13 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
933
936
 
934
- var css_248z$12 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
937
+ var css_248z$12 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
935
938
 
936
939
  var css_248z$11 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n fieldset {\n border: 0;\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n }\n fieldset .kol-alert-wc {\n order: 1;\n }\n fieldset .hint {\n order: 4;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n fieldset .kol-alert-wc {\n order: 3;\n }\n fieldset .kol-input {\n display: grid;\n order: 2;\n }\n fieldset .kol-input .hint {\n order: 3;\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n font-style: italic;\n }\n .radio-input-wrapper {\n display: flex;\n align-items: center;\n display: flex;\n flex-direction: row;\n margin: 0;\n min-height: var(--a11y-min-size);\n position: relative;\n }\n .radio-label {\n padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n input[type=radio] {\n outline: 2px solid var(--color-grey-75);\n outline-offset: 2px;\n }\n input[type=radio]:before {\n display: none;\n }\n input[type=radio]:checked {\n border-color: var(--color-blue);\n border-width: 7px;\n }\n input[type=radio]:focus {\n outline-color: var(--color-blue);\n }\n input[type=radio]:not(:disabled):hover {\n border-color: var(--color-blue);\n }\n label,\n legend {\n color: var(--color-grey);\n }\n legend {\n font-weight: var(--font-weight-bold);\n }\n .error input[type=radio] {\n border: 2px solid var(--color-red);\n }\n .error input[type=radio]:before {\n display: none;\n }\n .error input[type=radio]:checked {\n border-color: var(--color-red);\n border-width: 7px;\n }\n .error input[type=radio]:not(:disabled):hover {\n border-color: var(--color-red-1xx);\n }\n .kol-alert-wc {\n color: var(--color-red);\n font-size: 0.875em;\n margin-left: calc(-1 * var(--spacing-2xs));\n order: 1;\n width: 100%;\n }\n .hint {\n font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n order: 4;\n }\n}";
937
940
 
938
941
  var css_248z$10 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .inputs-wrapper {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
939
942
 
940
- var css_248z$$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
943
+ var css_248z$$ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
941
944
 
942
945
  var css_248z$_ = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
943
946
 
944
- var css_248z$Z = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
947
+ var css_248z$Z = "@layer kol-theme-component {\n :host {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
945
948
 
946
949
  var css_248z$Y = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n a,\n button {\n appearance: none;\n color: var(--color-blue);\n line-height: 1.2;\n }\n a:hover,\n button:hover {\n color: var(--color-blue-130);\n }\n}";
947
950
 
@@ -949,31 +952,31 @@ var css_248z$X = "@layer kol-theme-component {\n :host {\n font-family: var(
949
952
 
950
953
  var css_248z$W = "@layer kol-theme-component {\n :host {\n display: grid;\n font-family: var(--font-family);\n }\n .button {\n --kolibri-spacing: calc(4rem / var(--kolibri-root-font-size, 16));\n border-radius: 4px;\n }\n .button:focus {\n outline: none;\n }\n .button-inner {\n 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 .button:focus-visible .button-inner {\n outline-offset: -4px;\n outline: 2px solid var(--color-black);\n }\n button:not(:disabled):active .button-inner,\n button:not(:disabled):hover .button-inner {\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 .button:disabled .button-inner {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .selected .button-inner {\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}";
951
954
 
952
- var css_248z$V = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
955
+ var css_248z$V = "@layer kol-theme-component {\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
953
956
 
954
957
  var css_248z$U = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n}";
955
958
 
956
- var css_248z$T = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
959
+ var css_248z$T = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
957
960
 
958
- var css_248z$S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n 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: 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: 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-wc {\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: 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}";
961
+ var css_248z$S = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .single-select {\n position: relative;\n }\n .single-select__group {\n 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 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: 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-wc {\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}";
959
962
 
960
963
  var css_248z$R = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .kol-link-wc > a > .kol-span-wc {\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}";
961
964
 
962
965
  var css_248z$Q = "@layer kol-theme-component {\n .cycle {\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .cycle span {\n background-color: var(--color-blue-80);\n }\n}";
963
966
 
964
- var css_248z$P = "@layer kol-theme-component {\n :host {\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 .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
967
+ var css_248z$P = "@layer kol-theme-component {\n :host {\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 .horizontal-line {\n border: 0;\n border-top: 1px solid var(--color-blue);\n }\n .popover {\n background-color: #fff;\n }\n a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
965
968
 
966
969
  var css_248z$O = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n .pagination {\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n @media (min-width: 1024px) {\n :host > div:last-child,\n :host > div:last-child > div:last-child {\n grid-auto-flow: column;\n }\n :host > div:last-child .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n font-family: var(--font-family);\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n 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 .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: 2px solid var(--color-grey-75);\n outline-offset: 2px;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
967
970
 
968
971
  var css_248z$N = "@layer kol-theme-component {\n :host,\n .kol-table-stateless-wc {\n font-family: var(--font-family);\n display: block;\n }\n caption {\n padding: 0.5em;\n }\n th {\n font-weight: normal;\n color: var(--color-midnight);\n }\n table thead tr:first-child th,\n table thead tr:first-child td {\n border-width: 0;\n border-top-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-blue);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 2px;\n }\n table {\n width: 100%;\n border-spacing: 0;\n }\n table,\n table thead tr:last-child th,\n table thead tr:last-child td {\n border-width: 0;\n border-bottom-width: 2px;\n border-style: solid;\n border-color: var(--color-ice);\n }\n th {\n background-color: var(--color-white);\n }\n th[aria-sort=ascending] .button,\n th[aria-sort=descending] .button {\n font-weight: 700;\n }\n th div {\n display: flex;\n gap: 0.5em;\n grid-template-columns: 1fr auto;\n align-items: center;\n }\n tbody tr:nth-child(odd) {\n background-color: var(--color-grey-10);\n }\n th,\n td {\n padding: 0.5em;\n }\n th[aria-sort=ascending],\n th[aria-sort=descending] {\n font-weight: 700;\n }\n .input input:focus {\n 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 .input input[type=checkbox] {\n border-color: var(--color-grey-75);\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-blue);\n border-color: var(--color-blue);\n }\n .input .icon {\n color: var(--color-white);\n }\n .input.indeterminate input {\n background-color: var(--color-white);\n }\n .input.indeterminate .icon {\n color: var(--color-blue);\n }\n .input kol-icon:hover ~ input[type=checkbox],\n .input input[type=checkbox]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio] {\n display: block;\n outline: 2px solid var(--color-grey-75);\n outline-offset: 2px;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-blue);\n }\n .input input[type=radio]:checked {\n outline: 2px solid var(--color-blue);\n border-color: var(--color-blue);\n border-width: 7px;\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-white);\n }\n}";
969
972
 
970
- 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 .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 .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\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 .tabs-button-group button.selected .kol-span-wc {\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 -3 px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
973
+ 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 .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 .tabs-button-group button {\n border: none;\n margin-bottom: calc(-1rem / var(--kolibri-root-font-size, 16));\n }\n .tabs-button-group button .kol-span-wc {\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 .tabs-button-group button.selected .kol-span-wc {\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 -3 px var(--color-blue);\n font-weight: var(--font-weight-bold);\n color: var(--color-blue);\n }\n .tabs-button-group button:hover:not(:disabled) .kol-span-wc {\n color: var(--color-blue-130);\n }\n .tabs-button-group button:focus .kol-span-wc {\n outline-color: var(--color-blue-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
971
974
 
972
- var css_248z$L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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: 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 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}";
975
+ var css_248z$L = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n font-family: var(--font-family);\n }\n :host div {\n background-color: var(--color-white);\n }\n :host div.card {\n border-style: solid;\n border-width: 2px;\n }\n :host div.msg {\n border: none;\n }\n :host .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n :host .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n :host .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 }\n :host .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n :host .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n :host .default {\n border-color: var(--color-grey);\n }\n :host .default .heading kol-icon {\n color: var(--color-grey);\n }\n :host .error {\n border-color: var(--color-red);\n }\n :host .error .heading .kol-icon {\n color: var(--color-red);\n }\n :host .info {\n border-color: var(--color-blue);\n }\n :host .info .heading .kol-icon {\n color: var(--color-blue);\n }\n :host .success {\n border-color: var(--color-green);\n }\n :host .success .heading .kol-icon {\n color: var(--color-green);\n }\n :host .warning {\n border-color: var(--color-orange);\n }\n :host .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .kol-input {\n color: var(--color-grey);\n gap: var(--spacing-xs);\n }\n input,\n select,\n textarea {\n border: none;\n margin: calc(1rem / var(--kolibri-root-font-size, 16));\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 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-wc {\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)) 0.5em;\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}";
973
976
 
974
977
  var css_248z$K = "@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n right: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(440rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .toast {\n display: block;\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n font-family: var(--font-family);\n }\n .toast div {\n background-color: var(--color-white);\n }\n .toast div.card {\n border-style: solid;\n border-width: 2px;\n }\n .toast div.msg {\n border: none;\n }\n .toast .msg .heading .kol-icon {\n font-size: 1.5em;\n margin: var(--spacing-2xs);\n }\n .toast .msg .heading > div {\n padding: var(--spacing-2xs);\n }\n .toast .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 }\n .toast .card .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .content {\n margin-left: calc(40rem / var(--kolibri-root-font-size, 16));\n }\n .toast .card .heading .kol-icon {\n font-size: calc(32rem / var(--kolibri-root-font-size, 16));\n }\n .toast .default {\n border-color: var(--color-grey);\n }\n .toast .default .heading kol-icon {\n color: var(--color-grey);\n }\n .toast .error {\n border-color: var(--color-red);\n }\n .toast .error .heading .kol-icon {\n color: var(--color-red);\n }\n .toast .info {\n border-color: var(--color-blue);\n }\n .toast .info .heading .kol-icon {\n color: var(--color-blue);\n }\n .toast .success {\n border-color: var(--color-green);\n }\n .toast .success .heading .kol-icon {\n color: var(--color-green);\n }\n .toast .warning {\n border-color: var(--color-orange);\n }\n .toast .warning .heading .kol-icon {\n color: var(--color-orange);\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n .alert {\n display: block;\n }\n}";
975
978
 
976
- var css_248z$J = "@layer kol-theme-component {\n .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}";
979
+ var css_248z$J = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .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 a,\n button {\n appearance: none;\n border-radius: 4px;\n text-decoration: none;\n }\n a:focus,\n button:focus {\n outline: none;\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\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 }\n a:focus-visible > .kol-span-wc,\n button:focus-visible > .kol-span-wc {\n outline-offset: -4px;\n outline-style: solid;\n outline-width: 2px;\n }\n a:active > .kol-span-wc,\n button:active > .kol-span-wc,\n a:hover > .kol-span-wc,\n button:hover > .kol-span-wc {\n box-shadow: 0 calc(2rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.08), 0 0 calc(10rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(4rem / var(--kolibri-root-font-size, 16)) calc(5rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04), 0 calc(-4rem / var(--kolibri-root-font-size, 16)) calc(4rem / var(--kolibri-root-font-size, 16)) rgba(9, 49, 142, 0.04);\n }\n .primary a > .kol-span-wc,\n .primary button > .kol-span-wc {\n background-color: #0e47cb;\n color: #fff;\n }\n .primary a:focus-visible > .kol-span-wc,\n .primary button:focus-visible > .kol-span-wc {\n outline-color: #fff;\n }\n .primary a:hover > .kol-span-wc,\n .primary button:hover > .kol-span-wc {\n background-color: #3e6cd5;\n }\n .secondary a > .kol-span-wc,\n .secondary button > .kol-span-wc {\n background-color: #fff;\n border: 2px solid #0e47cb;\n color: #0e47cb;\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 }\n .secondary a:focus-visible > .kol-span-wc,\n .secondary button:focus-visible > .kol-span-wc {\n box-shadow: inset 0 0 0 4px #0e47cb;\n outline-color: #fff;\n }\n .secondary a:hover > .kol-span-wc,\n .secondary button:hover > .kol-span-wc {\n border-color: #0e47cb;\n color: #0e47cb;\n }\n .normal a > .kol-span-wc,\n .normal button > .kol-span-wc {\n background-color: #fc0;\n color: #171a22;\n }\n .normal a:focus-visible > .kol-span-wc,\n .normal button:focus-visible > .kol-span-wc {\n outline-color: #000;\n }\n .normal a:hover > .kol-span-wc,\n .normal button:hover > .kol-span-wc {\n background-color: #fc0;\n border-color: #fc0;\n }\n .danger a .kol-span-wc,\n .danger button .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n color: var(--color-white);\n }\n .danger a:hover .kol-span-wc,\n .danger button:hover .kol-span-wc {\n background-color: var(--color-red);\n border-color: var(--color-red);\n }\n .ghost a > .kol-span-wc,\n .ghost button > .kol-span-wc {\n color: #0e47cb;\n }\n .ghost a:focus-visible > .kol-span-wc,\n .ghost button:focus-visible > .kol-span-wc {\n outline-color: #0e47cb;\n }\n .ghost a:hover > .kol-span-wc,\n .ghost button:hover > .kol-span-wc {\n color: #0e47cb;\n }\n}";
977
980
 
978
981
  var css_248z$I = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n }\n}";
979
982
 
@@ -1038,11 +1041,11 @@ var css_248z$D = "@layer kol-theme-component {\n :host {\n display: inline-b
1038
1041
 
1039
1042
  var css_248z$C = "@layer kol-theme-component {\n li > span {\n font-weight: bold;\n /* text-transform: uppercase; */\n }\n}";
1040
1043
 
1041
- var css_248z$B = "@layer kol-theme-component {\n a,\n button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 32px;\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1044
+ var css_248z$B = "@layer kol-theme-component {\n a,\n button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 32px;\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1042
1045
 
1043
1046
  var css_248z$A = "@layer kol-theme-component {\n :host > .kol-button-group-wc {\n display: inline-flex;\n flex-wrap: wrap;\n gap: calc(4rem / var(--kolibri-root-font-size, 16));\n }\n}";
1044
1047
 
1045
- var css_248z$z = "@layer kol-theme-component {\n a,\n button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 32px;\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1048
+ var css_248z$z = "@layer kol-theme-component {\n a,\n button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 32px;\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1046
1049
 
1047
1050
  var css_248z$y = "@layer kol-theme-component {\n :host > div {\n background-color: white;\n border-color: var(--border-color);\n border-style: solid;\n border-width: 1px;\n border-radius: calc(2 * var(--border-radius));\n width: 100%;\n height: 100%;\n }\n .kol-heading {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n display: block;\n border-bottom-style: solid;\n border-bottom-color: var(--border-color);\n border-bottom-width: 1px;\n }\n :host > div > div {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n :host > div > div:last-child {\n display: block;\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-top-style: solid;\n border-top-color: var(--color-achat);\n border-top-width: 1px;\n }\n}";
1048
1051
 
@@ -1084,7 +1087,7 @@ var css_248z$g = "@layer kol-theme-component {\n :host > div > nav ul {\n li
1084
1087
 
1085
1088
  var css_248z$f = "@layer kol-theme-component {\n .button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n }\n .button-inner {\n background-color: var(--color-weiss);\n border-radius: 32px;\n border: var(--spacing) solid var(--color-anthrazit);\n color: var(--color-anthrazit);\n font-size: inherit;\n gap: 0.25em;\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n transition-timing-function: ease-in-out;\n }\n .hide-label .button-inner {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .button:not(:disabled):hover .button-inner,\n .button:focus .button-inner {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .button:disabled .button-inner {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .selected .button-inner {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n color: var(--color-weiss);\n font-weight: bold;\n opacity: 1;\n text-decoration: underline;\n }\n}";
1086
1089
 
1087
- var css_248z$e = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n button > .kol-span-wc {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n border-width: var(--spacing);\n font-size: inherit;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
1090
+ var css_248z$e = "@layer kol-theme-component {\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n button > .kol-span-wc {\n border-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--spacing);\n font-size: inherit;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n}";
1088
1091
 
1089
1092
  var css_248z$d = "@layer kol-theme-component {\n :host {\n --kolibri-text-label-padding: calc(60rem / var(--kolibri-root-font-size, 16));\n }\n :host progress,\n :host span {\n display: block;\n height: 0;\n overflow: hidden;\n width: 0;\n }\n svg line:first-child,\n svg circle:first-child {\n fill: transparent;\n stroke: var(--color-fluorit);\n }\n svg line:last-child,\n svg circle:last-child {\n stroke: var(--color-achat);\n fill: transparent;\n }\n progress {\n display: none;\n }\n}";
1090
1093
 
@@ -1096,7 +1099,7 @@ var css_248z$a = "@layer kol-theme-component {\n .kol-link-wc > a > .kol-span-w
1096
1099
 
1097
1100
  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: #fc0;\n }\n}";
1098
1101
 
1099
- var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-radius: 32px;\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button > button > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :active > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :focus > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > a,\n .secondary-button > button {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a,\n button {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-size: inherit;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: calc(44rem / var(--kolibri-root-font-size, 16));\n min-height: calc(44rem / var(--kolibri-root-font-size, 16));\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1102
+ var css_248z$8 = "@layer kol-theme-component {\n :host {\n border-radius: 32px;\n border-style: solid;\n border-width: var(--spacing);\n }\n .popover {\n background-color: #fff;\n }\n .horizontal-line {\n background-color: var(--border-color);\n border-radius: 2px;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n }\n .secondary-button button {\n height: 100%;\n }\n .secondary-button > button > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :active > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > button > :focus > .kol-span-wc {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n .secondary-button > a,\n .secondary-button > button {\n border-top-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-right-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a,\n button {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-top-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n border-bottom-left-radius: calc(32rem / var(--kolibri-root-font-size, 16));\n font-size: inherit;\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1100
1103
 
1101
1104
  var css_248z$7 = "@layer kol-theme-component {\n :host > div {\n overflow-x: auto;\n overflow-y: hidden;\n }\n :host > div:last-child {\n border-style: solid;\n border-width: 1px;\n border-color: var(--border-color);\n }\n @media (min-width: 1024px) {\n :host > div.pagination,\n :host > div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n :host > div.pagination .kol-pagination {\n display: flex;\n gap: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n }\n}\n@layer kol-theme-component {\n .table {\n padding: 0.5em;\n }\n .table:has(.focus-element:focus) {\n outline-color: var(--color-petrol);\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 3px;\n transition: outline-offset 0.2s linear;\n }\n table {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n border: 1px solid var(--color-petrol);\n border-width: 0 1px 1px 1px;\n }\n tr {\n border-top: 1px solid var(--color-petrol);\n }\n th,\n td {\n border-right: 1px solid var(--color-petrol);\n }\n th:last-child,\n td:last-child {\n border-right-width: 0;\n }\n tr:nth-child(even) {\n background-color: #f2f2f2;\n }\n th,\n td {\n padding: 0.25em 0.5em;\n }\n th {\n background-color: #eee;\n }\n .table-sort-button .button {\n font-weight: bold;\n }\n .input input[type=checkbox]:checked {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n }\n .input input[type=checkbox]:focus {\n border-color: var(--color-petrol);\n outline-color: var(--color-petrol);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 3px;\n }\n .input .icon {\n color: var(--color-weiss);\n }\n .input.indeterminate input {\n background-color: var(--color-weiss);\n }\n .input.indeterminate .icon {\n color: var(--color-petrol);\n }\n .input input[type=radio] {\n display: flex;\n }\n .input input[type=radio]:hover {\n border-color: var(--color-achat);\n }\n .input input[type=radio]:checked {\n border-color: var(--color-anthrazit);\n }\n .input input[type=radio]:checked:before {\n background-color: var(--color-petrol);\n }\n .input input[type=radio]:focus {\n border-color: var(--color-petrol);\n border-color: var(--color-anthrazit);\n outline-style: solid;\n outline-offset: 2px;\n outline-width: 2px;\n }\n}";
1102
1105
 
@@ -1108,7 +1111,7 @@ var css_248z$4 = "@layer kol-theme-component {\n label {\n font-size: calc(1
1108
1111
 
1109
1112
  var css_248z$3 = "@layer kol-theme-component {\n .default {\n border-color: var(--color-anthrazit);\n }\n .heading {\n gap: calc(8rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert-wc .heading {\n display: flex;\n place-items: center;\n }\n .default .heading-icon {\n background-color: var(--color-anthrazit);\n }\n .error {\n border-color: var(--color-rotton);\n }\n .error .heading-icon {\n background-color: var(--color-rotton);\n }\n .info {\n border-color: var(--color-petrol);\n }\n .info .heading-icon {\n background-color: var(--color-petrol);\n }\n .success {\n border-color: var(--color-gras);\n }\n .success .heading-icon {\n background-color: var(--color-gras);\n }\n .warning {\n border-color: var(--color-warn);\n }\n .warning .heading-icon {\n background-color: var(--color-warn);\n }\n}\n@layer kol-theme-component {\n :host {\n top: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(750rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n left: 50%;\n transform: translateX(-50%);\n }\n .toast {\n background-color: #fff;\n margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .toast .heading {\n width: 100%;\n }\n .toast .heading .heading-content {\n flex: 1;\n }\n}";
1110
1113
 
1111
- var css_248z$2 = "@layer kol-theme-component {\n .toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n border-color: var(--kolibri-border-color);\n background-color: var(--color-white);\n }\n}";
1114
+ var css_248z$2 = "@layer kol-theme-component {\n :host {\n font-family: var(--font-family);\n }\n .toolbar {\n padding: calc(8rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n border-style: solid;\n border-radius: 4px;\n border-color: var(--kolibri-border-color);\n background-color: var(--color-white);\n }\n a,\n button {\n border-radius: 32px;\n font-family: var(--font-family-sans);\n /* text-transform: uppercase; */\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n border-radius: 32px;\n border-style: solid;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n border-width: var(--spacing);\n font-size: inherit;\n /*line-height: 1.25em;*/\n /*padding: calc(4 * var(--spacing));*/\n padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link-wc > a {\n text-decoration: none;\n }\n button {\n background-color: transparent;\n }\n .button a.hide-label > .kol-span-wc,\n .button button.hide-label > .kol-span-wc {\n padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n }\n a > .kol-span-wc,\n button > .kol-span-wc {\n gap: 0.25em;\n transition-delay: 0;\n transition-timing-function: ease-in-out;\n transition-duration: 0.5s;\n transition-property: background, color, border-color;\n }\n .kol-link-wc.primary > a > .kol-span-wc,\n .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n button.primary > .kol-span-wc,\n button.primary:disabled:hover > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.primary > a:hover > .kol-span-wc,\n .kol-link-wc.primary > a:focus > .kol-span-wc,\n button.primary:hover > .kol-span-wc,\n button.primary:focus > .kol-span-wc {\n background-color: var(--color-achat);\n border-color: var(--color-achat);\n }\n .kol-link-wc.secondary > a > .kol-span-wc,\n .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n button.secondary > .kol-span-wc,\n button.secondary:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-petrol);\n color: var(--color-petrol);\n }\n .kol-link-wc.secondary > a:hover > .kol-span-wc,\n .kol-link-wc.secondary > a:focus > .kol-span-wc,\n button.secondary:hover > .kol-span-wc,\n button.secondary:focus > .kol-span-wc {\n background-color: var(--color-petrol);\n border-color: var(--color-petrol);\n color: var(--color-weiss);\n }\n .kol-link-wc.normal > a > .kol-span-wc,\n .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n button.normal > .kol-span-wc,\n button.normal:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-anthrazit);\n color: var(--color-anthrazit);\n }\n .kol-link-wc.normal > a:hover > .kol-span-wc,\n .kol-link-wc.normal > a:focus > .kol-span-wc,\n button.normal:hover > .kol-span-wc,\n button.normal:focus > .kol-span-wc {\n background-color: var(--color-anthrazit);\n border-color: var(--color-anthrazit);\n color: var(--color-weiss);\n }\n .kol-link-wc.danger > a > .kol-span-wc,\n .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n button.danger > .kol-span-wc,\n button.danger:disabled:hover > .kol-span-wc {\n background-color: var(--color-weiss);\n border-color: var(--color-blut);\n color: var(--color-blut);\n }\n .kol-link-wc.danger > a:hover > .kol-span-wc,\n .kol-link-wc.danger > a:focus > .kol-span-wc,\n button.danger:hover > .kol-span-wc,\n button.danger:focus > .kol-span-wc {\n background-color: var(--color-blut);\n border-color: var(--color-blut);\n color: var(--color-weiss);\n }\n .kol-link-wc.ghost > a > .kol-span-wc,\n .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n button.ghost > .kol-span-wc,\n button.ghost:disabled:hover > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: transparent;\n color: var(--color-anthrazit);\n }\n .kol-link-wc.ghost > a:hover > .kol-span-wc,\n .kol-link-wc.ghost > a:focus > .kol-span-wc,\n button.ghost:hover > .kol-span-wc,\n button.ghost:focus > .kol-span-wc {\n background-color: var(--color-ghost);\n border-color: var(--color-ghost);\n color: var(--color-anthrazit);\n }\n}";
1112
1115
 
1113
1116
  var css_248z$1 = "@layer kol-theme-component {\n .tree ul {\n display: flex;\n flex-direction: column;\n border: 2px solid transparent;\n border-radius: 4px;\n }\n .tree:focus-within {\n outline: 0;\n }\n .tree:focus-within ul {\n border: 2px solid var(--color-petrol);\n }\n}";
1114
1117