@public-ui/theme-ecl 4.2.1 → 4.3.0-4ee0734eadda2c69344a4386b7d580fd54e4ddca.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 (21) hide show
  1. package/assets/ecl-icons/ecl-icons.eot +0 -0
  2. package/assets/ecl-icons/ecl-icons.ttf +0 -0
  3. package/assets/ecl-icons/ecl-icons.woff +0 -0
  4. package/assets/ecl-icons/ecl-icons.woff2 +0 -0
  5. package/assets/ecl-icons/style.css +6 -6
  6. package/assets/kolicons/kolicons.eot +0 -0
  7. package/assets/kolicons/kolicons.ttf +0 -0
  8. package/assets/kolicons/kolicons.woff +0 -0
  9. package/assets/kolicons/kolicons.woff2 +0 -0
  10. package/assets/kolicons/style.css +6 -6
  11. package/assets/variants/inject-variants_ecl-ec.json +22 -0
  12. package/dist/ecl-ec/index.d.ts +1 -1
  13. package/dist/ecl-eu/index.d.ts +1 -1
  14. package/dist/index.cjs +45 -33
  15. package/dist/index.cjs.map +1 -1
  16. package/dist/index.d.ts +1 -0
  17. package/dist/index.mjs +46 -34
  18. package/dist/index.mjs.map +1 -1
  19. package/dist/variants/button.d.ts +8 -0
  20. package/dist/variants/index.d.ts +1 -0
  21. package/package.json +13 -16
package/dist/index.cjs CHANGED
@@ -373,7 +373,7 @@ function requireLoglevel () {
373
373
 
374
374
  requireLoglevel();
375
375
 
376
- const j=(t,e)=>s=>s(t,e),F=(t,e)=>s=>s(t,e,{append:false}),Y=()=>{const t=typeof process<"u"&&process.env?process.env:{},e=t.NODE_ENV==="test",s="VITEST"in t,a="JEST_WORKER_ID"in t,o="PLAYWRIGHT_TEST_BASE_URL"in t,r=t.CI==="true",i=t.TEST==="true"||t.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===true,u=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return e||s||a||o||r||i||c||u},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,IS_TEST_ENVIRONMENT:Y(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,showAverageTimes:()=>{const t={};for(const[s,a]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())t[s]=[a.totalTime/a.count,a.count];const e=Object.entries(t).sort((s,a)=>a[1][0]-s[1][0]);return console.table(Object.fromEntries(e.map(([s,[a,o]])=>[s,{"avg (ms)":parseFloat(a.toFixed(2)),count:o}]))),t}}};const v=new Set,N=new Map,ee=/--[^;]+/g,te=/:/,se=typeof MutationObserver<"u";let R=()=>{Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const ae=(t,e)=>{let s=e.match(ee);if(Array.isArray(s)){s=s.filter(o=>te.test(o));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}v.add(t);},y=(t,e)=>{const s=n$1.A11yUi.THEMES.get(t);if(s instanceof Map){const a=s.get(e);if(a!==void 0)return a}return ""},oe=t=>{const e=t.firstChild;if(!(!(e instanceof HTMLStyleElement)||e.dataset.themingFallback!==void 0))for(const s of Array.from(t.childNodes))if(s instanceof HTMLStyleElement&&s.tagName==="STYLE"&&s.dataset.themingFallback===void 0)t.removeChild(s);else break},ne=(t,e)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=e.filter(a=>typeof a=="string"&&a.length>0).map(a=>{let o=N.get(a);return o||(o=new CSSStyleSheet,o.replaceSync(a),N.set(a,o)),o});t.adoptedStyleSheets=s;}catch{for(let a=e.length-1;a>=0;a--){const o=e[a];if(typeof o!="string"||o.length===0)continue;const r=e.length-1-a,i=document.createElement("style");switch(i.dataset.themingFallback="",r){case 4:i.dataset.themingBaseA11y="";break;case 3:i.dataset.themingBaseGlobal="";break;case 2:i.dataset.themingBaseComponent="";break;case 1:i.dataset.themingCustomGlobal="";break;case 0:i.dataset.themingCustomComponent="";break;default:i.dataset.themingUnknown="";break}i.innerHTML=o,t.insertBefore(i,t.firstChild);}}},re=(t,e,s)=>{if(s===false||s?.mode!=="before"&&s?.mode!=="after")return;const a=Array.from(t.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE");let o;try{o=Array.from(t.adoptedStyleSheets);}catch{o=[];}if(!(a.length===0&&o.length===0))if(s.mode==="before"){const r=[...o.map(i=>Array.from(i.cssRules).map(c=>c.cssText).join("")),...a.map(i=>i.innerHTML)];e.unshift(...r);}else a.forEach(r=>e.push(r.innerHTML)),o.forEach(r=>e.push(Array.from(r.cssRules).map(i=>i.cssText).join("")));},ie=(t,e,s)=>{const a=e.name||"default";let o;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");o=t.shadowRoot;}catch{o=t;}const r=n$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName);if(r)_(t,o,r,s);else {const i=y(a,"PROPERTIES"),c=y(a,"GLOBAL"),u=y(a,t.tagName);v.has(a)===false&&ae(a,c);const p=[i,c,u];if(re(o,p,e.encroachCss),e.cache===true){let m=n$1.A11yUi.CSS_STYLE_CACHE.get(a);m||(m=new Map,n$1.A11yUi.CSS_STYLE_CACHE.set(a,m)),m.set(t.tagName,p);}_(t,o,p,s);}},_=(t,e,s,a)=>{const o=n$1.A11yUi.Theme?.loglevel==="debug",r=o?performance.now():0;if(oe(e),ne(e,s),fe(t),requestAnimationFrame(a),o){const i=performance.now()-r,c=n$1.A11yUi.PERFORMANCE_MEASURES.get(t.tagName);c?(c.count+=1,c.totalTime+=i):n$1.A11yUi.PERFORMANCE_MEASURES.set(t.tagName,{count:1,totalTime:i});}},O=t=>{const e=n$1.A11yUi.STYLING_TASK_QUEUE.get(t);if(e){const{resetCss:s,themeDetails:a}=e;ie(t,a,s);}};const me={attributes:true,attributeFilter:[],childList:false,subtree:false},I=se?new MutationObserver((t,e)=>{const s=[];for(const a of t){const o=a.target;o.classList.contains("hydrated")&&n$1.A11yUi.STYLING_TASK_QUEUE.has(o)&&(O(o),s.push(o));}for(const a of s)e.observe(a,me);}):null;I&&(R=()=>{});const fe=t=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(t),R();};class ye{Prefix;Key;Tag;createTheme=(e,s)=>F(e,s);createTranslation=(e,s)=>j(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
376
+ const k=(e,t)=>s=>s(e,t),G=(e,t,s)=>o=>o(e,t,{append:false},s),x=()=>{const e=typeof process<"u"&&process.env?process.env:{},t=e.NODE_ENV==="test",s="VITEST"in e,o="JEST_WORKER_ID"in e,a="PLAYWRIGHT_TEST_BASE_URL"in e,r=e.CI==="true",i=e.TEST==="true"||e.IS_TEST==="true",c=typeof navigator<"u"&&navigator.webdriver===true,m=typeof navigator<"u"&&/playwright|puppeteer|webdriver|selenium|testcafe/i.test(navigator.userAgent);return t||s||o||a||r||i||c||m},n$1={A11yUi:{CSS_STYLE_CACHE:new Map,FEATURES:{},IS_TEST_ENVIRONMENT:x(),PERFORMANCE_MEASURES:new Map,STYLING_TASK_QUEUE:new Map,THEMES:new Map,THEME_FEATURES:{},showAverageTimes:()=>{const e={};for(const[s,o]of n$1.A11yUi.PERFORMANCE_MEASURES.entries())e[s]=[o.totalTime/o.count,o.count];const t=Object.entries(e).sort((s,o)=>o[1][0]-s[1][0]);return console.table(Object.fromEntries(t.map(([s,[o,a]])=>[s,{"avg (ms)":parseFloat(o.toFixed(2)),count:a}]))),e}}};const _=new Set,L=new Map,oe=/--[^;]+/g,ae=/:/,ne=typeof MutationObserver<"u";let H=()=>{Math.min(25+Math.log2(n$1.A11yUi.STYLING_TASK_QUEUE.size+1)*20,250);};const re=(e,t)=>{let s=t.match(oe);if(Array.isArray(s)){s=s.filter(a=>ae.test(a));const o=document.createElement("style");o.innerHTML=`.${e} {${s.join(";")}}`,document.querySelector("head")?.appendChild(o);}_.add(e);},T=(e,t)=>{const s=n$1.A11yUi.THEMES.get(e);if(s instanceof Map){const o=s.get(t);if(o!==void 0)return o}return ""},ie=e=>{const t=e.firstChild;if(!(!(t instanceof HTMLStyleElement)||t.dataset.themingFallback!==void 0))for(const s of Array.from(e.childNodes))if(s instanceof HTMLStyleElement&&s.tagName==="STYLE"&&s.dataset.themingFallback===void 0)e.removeChild(s);else break},ce=(e,t)=>{try{if(n$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=t.filter(o=>typeof o=="string"&&o.length>0).map(o=>{let a=L.get(o);return a||(a=new CSSStyleSheet,a.replaceSync(o),L.set(o,a)),a});e.adoptedStyleSheets=s;}catch{for(let o=t.length-1;o>=0;o--){const a=t[o];if(typeof a!="string"||a.length===0)continue;const r=t.length-1-o,i=document.createElement("style");switch(i.dataset.themingFallback="",r){case 4:i.dataset.themingBaseA11y="";break;case 3:i.dataset.themingBaseGlobal="";break;case 2:i.dataset.themingBaseComponent="";break;case 1:i.dataset.themingCustomGlobal="";break;case 0:i.dataset.themingCustomComponent="";break;default:i.dataset.themingUnknown="";break}i.innerHTML=a,e.insertBefore(i,e.firstChild);}}},le=(e,t,s)=>{if(s===false||s?.mode!=="before"&&s?.mode!=="after")return;const o=Array.from(e.childNodes).filter(r=>r instanceof HTMLStyleElement&&r.tagName==="STYLE");let a;try{a=Array.from(e.adoptedStyleSheets);}catch{a=[];}if(!(o.length===0&&a.length===0))if(s.mode==="before"){const r=[...a.map(i=>Array.from(i.cssRules).map(c=>c.cssText).join("")),...o.map(i=>i.innerHTML)];t.unshift(...r);}else o.forEach(r=>t.push(r.innerHTML)),a.forEach(r=>t.push(Array.from(r.cssRules).map(i=>i.cssText).join("")));},me=(e,t,s)=>{const o=t.name||"default";let a;try{if(e.shadowRoot===null)throw new Error("ShadowRoot is null");a=e.shadowRoot;}catch{a=e;}const r=n$1.A11yUi.CSS_STYLE_CACHE.get(o)?.get(e.tagName);if(r)O(e,a,r,s);else {const i=T(o,"PROPERTIES"),c=T(o,"GLOBAL"),m=T(o,e.tagName);_.has(o)===false&&re(o,c);const d=[i,c,m];if(le(a,d,t.encroachCss),t.cache===true){let h=n$1.A11yUi.CSS_STYLE_CACHE.get(o);h||(h=new Map,n$1.A11yUi.CSS_STYLE_CACHE.set(o,h)),h.set(e.tagName,d);}O(e,a,d,s);}},O=(e,t,s,o)=>{const a=n$1.A11yUi.Theme?.loglevel==="debug",r=a?performance.now():0;if(ie(t),ce(t,s),Te(e),requestAnimationFrame(o),a){const i=performance.now()-r,c=n$1.A11yUi.PERFORMANCE_MEASURES.get(e.tagName);c?(c.count+=1,c.totalTime+=i):n$1.A11yUi.PERFORMANCE_MEASURES.set(e.tagName,{count:1,totalTime:i});}},I=e=>{const t=n$1.A11yUi.STYLING_TASK_QUEUE.get(e);if(t){const{resetCss:s,themeDetails:o}=t;me(e,o,s);}};const ue={attributes:true,attributeFilter:[],childList:false,subtree:false},P=ne?new MutationObserver((e,t)=>{const s=[];for(const o of e){const a=o.target;a.classList.contains("hydrated")&&n$1.A11yUi.STYLING_TASK_QUEUE.has(a)&&(I(a),s.push(a));}for(const o of s)t.observe(o,ue);}):null;P&&(H=()=>{});const Te=e=>{n$1.A11yUi.STYLING_TASK_QUEUE.delete(e),H();};class Ee{Prefix;Key;Tag;createTheme=(t,s,o)=>G(t,s,o);createTranslation=(t,s)=>k(t,s);constructor(t,s,o){this.Prefix=t,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(o);}}
377
377
 
378
378
  var KeyEnum;
379
379
  (function (KeyEnum) {
@@ -807,9 +807,11 @@ var KolEvent;
807
807
  KolEvent["click"] = "click";
808
808
  KolEvent["close"] = "close";
809
809
  KolEvent["create"] = "create";
810
+ KolEvent["error"] = "error";
810
811
  KolEvent["focus"] = "focus";
811
812
  KolEvent["input"] = "input";
812
813
  KolEvent["keydown"] = "keydown";
814
+ KolEvent["load"] = "load";
813
815
  KolEvent["mousedown"] = "mousedown";
814
816
  KolEvent["reset"] = "reset";
815
817
  KolEvent["select"] = "select";
@@ -823,7 +825,7 @@ var KolEvent;
823
825
  * KoliBri - The accessible HTML-Standard
824
826
  */
825
827
 
826
- const KoliBri = new ye('kol', KeyEnum, TagEnum);
828
+ const KoliBri = new Ee('kol', KeyEnum, TagEnum);
827
829
 
828
830
  var Bundesministerium;
829
831
  (function (Bundesministerium) {
@@ -994,7 +996,7 @@ BUND_LOGO_TEXT_MAP.set(Bundesanstalt['Bundesinstitut für Sportwissenschaft'], [
994
996
 
995
997
  var css_248z$1m = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-accordion {\n border-top: var(--ecl-color-neutral) solid 1px;\n }\n .kol-accordion:focus-visible {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-accordion__heading-button .kol-button {\n padding: var(--ecl-spacing-xl);\n }\n .kol-accordion__heading-button .kol-button:hover {\n background-color: var(--ecl-color-neutral-60);\n }\n .kol-accordion__heading-button .kol-button:focus {\n outline: none;\n }\n .kol-accordion__heading-button .kol-button .kol-icon {\n font-family: ecl-icons;\n }\n .kol-accordion__heading-button .kol-button .kol-icon::before {\n content: \"\\ea46\";\n }\n .kol-accordion__heading-button .kol-button[aria-expanded=true] {\n padding-bottom: var(--ecl-spacing-l);\n }\n .kol-accordion__heading-button .kol-button[aria-expanded=true] .kol-icon {\n font-family: ecl-icons;\n }\n .kol-accordion__heading-button .kol-button[aria-expanded=true] .kol-icon::before {\n content: \"\\ea38\";\n }\n .kol-accordion__heading-button .kol-span__container {\n width: 100%;\n flex-direction: row-reverse;\n justify-content: space-between;\n }\n .kol-accordion__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n}";
996
998
 
997
- var css_248z$1l = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
999
+ var css_248z$1l = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
998
1000
 
999
1001
  var css_248z$1k = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-badge {\n border-radius: 12px;\n padding: var(--ecl-spacing-2xs) var(--ecl-spacing-s);\n font-size: var(--ecl-font-size-s);\n }\n .kol-badge__smart-button {\n --a11y-min-size: 26px;\n margin-top: -2px;\n margin-bottom: -2px;\n margin-left: var(--ecl-spacing-2xs);\n }\n .kol-badge__smart-button .kol-button .kol-icon::before {\n content: \"\\ea0e\";\n }\n .kol-badge__smart-button .kol-button:hover {\n color: var(--ecl-color-white);\n background-color: var(--ecl-color-primary);\n }\n}";
1000
1002
 
@@ -1002,79 +1004,79 @@ var css_248z$1j = "/* forward the rem function */\n@layer kol-theme-component {\
1002
1004
 
1003
1005
  var css_248z$1i = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-button {\n color: var(--ecl-color-primary);\n }\n .kol-button .kol-span__label {\n text-decoration-thickness: from-font;\n text-underline-offset: clamp(3px, 0.245em, 10px);\n }\n .kol-button:hover {\n color: var(--ecl-color-primary-140);\n }\n .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n border-radius: 1px;\n outline-offset: 2px;\n }\n}";
1004
1006
 
1005
- var css_248z$1h = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n}";
1007
+ var css_248z$1h = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n}";
1006
1008
 
1007
- var css_248z$1g = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-card .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-card .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-card .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-card .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-card .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-card .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-card .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-card {\n background-color: var(--ecl-color-white);\n box-shadow: var(--ecl-shadow-1);\n border-radius: 0 0 2px 2px;\n border: 1px solid var(--ecl-color-stroke);\n border-bottom: 4px solid var(--ecl-color-primary);\n }\n .kol-card__header {\n display: block;\n padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n font-size: var(--ecl-font-size-l);\n font-weight: 400;\n line-height: var(--ecl-line-height-l);\n }\n .kol-card__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n .kol-card__close-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card__close-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card__close-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n}";
1009
+ var css_248z$1g = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-card .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-card .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-card .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-card .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-card .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-card .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-card .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-card .kol-close-button {\n align-self: self-start;\n }\n .kol-card .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-card {\n background-color: var(--ecl-color-white);\n box-shadow: var(--ecl-shadow-1);\n border-radius: 0 0 2px 2px;\n border: 1px solid var(--ecl-color-stroke);\n border-bottom: 4px solid var(--ecl-color-primary);\n }\n .kol-card__header {\n display: block;\n padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n font-size: var(--ecl-font-size-l);\n font-weight: 400;\n line-height: var(--ecl-line-height-l);\n }\n .kol-card__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n}";
1008
1010
 
1009
- var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .kol-custom-suggestions-option[aria-selected] {\n background-color: var(--ecl-color-neutral-80);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--ecl-color-neutral-60);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-color: var(--ecl-color-primary);\n border-style: solid;\n width: 100%;\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n .kol-combobox__group {\n display: inline-flex;\n width: 100%;\n align-items: center;\n }\n .kol-combobox__delete {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}";
1011
+ var css_248z$1f = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .kol-custom-suggestions-option[aria-selected] {\n background-color: var(--ecl-color-neutral-80);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--ecl-color-neutral-60);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-color: var(--ecl-color-primary);\n border-style: solid;\n width: 100%;\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n .kol-combobox__group {\n display: inline-flex;\n width: 100%;\n align-items: center;\n }\n .kol-combobox__delete {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}";
1010
1012
 
1011
- var css_248z$1e = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-details {\n --detail-icon-rotate: rotate(180deg);\n }\n .kol-details__heading-button .kol-button {\n width: -moz-max-content;\n width: max-content;\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-details__heading-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-details__heading-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-details__heading-button .kol-button .kol-span__container {\n flex-direction: row-reverse;\n }\n .kol-details__heading-button .kol-button .kol-span__icon--left {\n transform: var(--detail-icon-rotate);\n transition: transform 0.3s ease-in-out;\n }\n .kol-details.collapsible--open {\n --detail-icon-rotate: rotate(0);\n }\n .kol-details__content {\n margin-top: var(--ecl-spacing-s);\n padding-inline-start: var(--ecl-spacing-m);\n }\n}";
1013
+ var css_248z$1e = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-details {\n --detail-icon-rotate: rotate(180deg);\n }\n .kol-details__heading-button .kol-button {\n width: -moz-max-content;\n width: max-content;\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-details__heading-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-details__heading-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-details__heading-button .kol-button .kol-span__container {\n flex-direction: row-reverse;\n }\n .kol-details__heading-button .kol-button .kol-span__icon--left {\n transform: var(--detail-icon-rotate);\n transition: transform 0.3s ease-in-out;\n }\n .kol-details.collapsible--open {\n --detail-icon-rotate: rotate(0);\n }\n .kol-details__content {\n margin-top: var(--ecl-spacing-s);\n padding-inline-start: var(--ecl-spacing-m);\n }\n}";
1012
1014
 
1013
- var css_248z$1d = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-card .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-card .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-card .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-card .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-card .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-card .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-card .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-card {\n background-color: var(--ecl-color-white);\n box-shadow: var(--ecl-shadow-1);\n border-radius: 0 0 2px 2px;\n border: 1px solid var(--ecl-color-stroke);\n border-bottom: 4px solid var(--ecl-color-primary);\n }\n .kol-card__header {\n display: block;\n padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n font-size: var(--ecl-font-size-l);\n font-weight: 400;\n line-height: var(--ecl-line-height-l);\n }\n .kol-card__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n .kol-card__close-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card__close-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card__close-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-dialog__card,\n .kol-modal__card {\n box-shadow: var(--ecl-shadow-16);\n padding: var(--ecl-spacing-m);\n }\n .kol-dialog .kol-card,\n .kol-modal .kol-card {\n box-shadow: none;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: var(--ecl-color-overlay-light);\n }\n}";
1015
+ var css_248z$1d = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-card .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-card .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-card .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-card .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-card .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-card .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-card .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-card .kol-close-button {\n align-self: self-start;\n }\n .kol-card .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-card {\n background-color: var(--ecl-color-white);\n box-shadow: var(--ecl-shadow-1);\n border-radius: 0 0 2px 2px;\n border: 1px solid var(--ecl-color-stroke);\n border-bottom: 4px solid var(--ecl-color-primary);\n }\n .kol-card__header {\n display: block;\n padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n font-size: var(--ecl-font-size-l);\n font-weight: 400;\n line-height: var(--ecl-line-height-l);\n }\n .kol-card__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n .kol-dialog__card,\n .kol-modal__card {\n box-shadow: var(--ecl-shadow-16);\n padding: var(--ecl-spacing-m);\n }\n .kol-dialog .kol-card,\n .kol-modal .kol-card {\n box-shadow: none;\n border: 0;\n }\n .kol-dialog::backdrop,\n .kol-modal::backdrop {\n background-color: var(--ecl-color-overlay-light);\n }\n}";
1014
1016
 
1015
- var css_248z$1c = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-card .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-card .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-card .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-card .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-card .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-card .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-card .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-card {\n background-color: var(--ecl-color-white);\n box-shadow: var(--ecl-shadow-1);\n border-radius: 0 0 2px 2px;\n border: 1px solid var(--ecl-color-stroke);\n border-bottom: 4px solid var(--ecl-color-primary);\n }\n .kol-card__header {\n display: block;\n padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n font-size: var(--ecl-font-size-l);\n font-weight: 400;\n line-height: var(--ecl-line-height-l);\n }\n .kol-card__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n .kol-card__close-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card__close-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card__close-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-drawer__card {\n box-shadow: var(--ecl-shadow-16);\n padding: var(--ecl-spacing-m);\n }\n .kol-drawer .kol-card {\n box-shadow: none;\n border: 0;\n }\n .kol-drawer__dialog::backdrop {\n background-color: var(--ecl-color-overlay-light);\n }\n}";
1017
+ var css_248z$1c = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-card .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-card .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-card .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-card .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-card .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-card .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-card .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-card .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-card .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-card .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-card .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-card .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-card .kol-close-button {\n align-self: self-start;\n }\n .kol-card .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-card .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-card .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-card .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-card {\n background-color: var(--ecl-color-white);\n box-shadow: var(--ecl-shadow-1);\n border-radius: 0 0 2px 2px;\n border: 1px solid var(--ecl-color-stroke);\n border-bottom: 4px solid var(--ecl-color-primary);\n }\n .kol-card__header {\n display: block;\n padding: var(--ecl-spacing-xl) var(--ecl-spacing-m) var(--ecl-spacing-s) var(--ecl-spacing-xl);\n font-size: var(--ecl-font-size-l);\n font-weight: 400;\n line-height: var(--ecl-line-height-l);\n }\n .kol-card__content {\n padding: 0 var(--ecl-spacing-xl) var(--ecl-spacing-xl);\n }\n .kol-card__content ::slotted(p:first-child) {\n margin-top: 0;\n }\n .kol-card__content ::slotted(p:last-child) {\n margin-bottom: 0;\n }\n .kol-drawer__card {\n box-shadow: var(--ecl-shadow-16);\n padding: var(--ecl-spacing-m);\n }\n .kol-drawer .kol-card {\n box-shadow: none;\n border: 0;\n }\n .kol-drawer__dialog::backdrop {\n background-color: var(--ecl-color-overlay-light);\n }\n}";
1016
1018
 
1017
- var css_248z$1b = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-link {\n color: var(--ecl-color-primary);\n }\n .kol-link .kol-span__label {\n text-decoration-thickness: from-font;\n text-underline-offset: clamp(3px, 0.245em, 10px);\n }\n .kol-link:hover {\n color: var(--ecl-color-primary-140);\n }\n .kol-link:focus {\n outline: 2px solid var(--ecl-color-primary);\n border-radius: 1px;\n outline-offset: 2px;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form {\n width: 100%;\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__mandatory-fields-hint {\n margin: 0;\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-start-start-radius: 0;\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
1019
+ var css_248z$1b = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-link {\n color: var(--ecl-color-primary);\n }\n .kol-link .kol-span__label {\n text-decoration-thickness: from-font;\n text-underline-offset: clamp(3px, 0.245em, 10px);\n }\n .kol-link:hover {\n color: var(--ecl-color-primary-140);\n }\n .kol-link:focus {\n outline: 2px solid var(--ecl-color-primary);\n border-radius: 1px;\n outline-offset: 2px;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form {\n width: 100%;\n }\n .kol-form__link {\n display: inline-block;\n }\n .kol-form__mandatory-fields-hint {\n margin: 0;\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-bottom: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n border-end-start-radius: 0;\n border-start-start-radius: 0;\n padding-inline-start: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form__alert .kol-alert__heading {\n display: flex;\n place-items: center;\n }\n}";
1018
1020
 
1019
1021
  var css_248z$1a = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-headline--h1 {\n font-size: var(--ecl-font-size-3xl);\n line-height: var(--ecl-line-height-3xl);\n }\n @media (min-width: 768px) {\n .kol-headline--h1 {\n font-size: var(--ecl-font-size-4xl);\n line-height: var(--ecl-line-height-4xl);\n }\n }\n .kol-headline--h2 {\n font-size: var(--ecl-font-size-2xl);\n line-height: var(--ecl-line-height-2xl);\n }\n @media (min-width: 768px) {\n .kol-headline--h2 {\n font-size: var(--ecl-font-size-3xl);\n line-height: var(--ecl-line-height-3xl);\n }\n }\n .kol-headline--h3 {\n font-size: var(--ecl-font-size-xl);\n line-height: var(--ecl-line-height-xl);\n }\n @media (min-width: 768px) {\n .kol-headline--h3 {\n font-size: var(--ecl-font-size-2xl);\n line-height: var(--ecl-line-height-2xl);\n }\n }\n .kol-headline--h4 {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n @media (min-width: 768px) {\n .kol-headline--h4 {\n font-size: var(--ecl-font-size-xl);\n line-height: var(--ecl-line-height-xl);\n }\n }\n .kol-headline--h5 {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-headline--h6 {\n font-size: var(--ecl-font-size-m);\n font-weight: var(--ecl-font-weight-bold);\n line-height: var(--ecl-line-height-m);\n }\n}";
1020
1022
 
1021
- var css_248z$19 = "@layer kol-theme-component {\n @font-face {\n font-family: \"ecl-icons\";\n src: url(\"ecl-icons.eot?t=1780571705367\"); /* IE9*/\n src: url(\"ecl-icons.eot?t=1780571705367#iefix\") format(\"embedded-opentype\"), url(\"ecl-icons.woff2?t=1780571705367\") format(\"woff2\"), url(\"ecl-icons.woff?t=1780571705367\") format(\"woff\"), url(\"ecl-icons.ttf?t=1780571705367\") format(\"truetype\"), url(\"ecl-icons.svg?t=1780571705367#ecl-icons\") format(\"svg\"); /* iOS 4.1- */\n }\n [class^=ecl-icons-], [class*=\" ecl-icons-\"] {\n font-family: \"ecl-icons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .ecl-icons-arrow-left::before {\n content: \"\\ea01\";\n }\n .ecl-icons-audio::before {\n content: \"\\ea02\";\n }\n .ecl-icons-book::before {\n content: \"\\ea03\";\n }\n .ecl-icons-brochure::before {\n content: \"\\ea04\";\n }\n .ecl-icons-budget::before {\n content: \"\\ea05\";\n }\n .ecl-icons-calendar::before {\n content: \"\\ea06\";\n }\n .ecl-icons-camera::before {\n content: \"\\ea07\";\n }\n .ecl-icons-chain::before {\n content: \"\\ea08\";\n }\n .ecl-icons-check-filled::before {\n content: \"\\ea09\";\n }\n .ecl-icons-check::before {\n content: \"\\ea0a\";\n }\n .ecl-icons-clock-filled::before {\n content: \"\\ea0b\";\n }\n .ecl-icons-clock::before {\n content: \"\\ea0c\";\n }\n .ecl-icons-close-filled::before {\n content: \"\\ea0d\";\n }\n .ecl-icons-close-outline::before {\n content: \"\\ea0e\";\n }\n .ecl-icons-close::before {\n content: \"\\ea0f\";\n }\n .ecl-icons-copy::before {\n content: \"\\ea10\";\n }\n .ecl-icons-corner-arrow::before {\n content: \"\\ea11\";\n }\n .ecl-icons-data::before {\n content: \"\\ea12\";\n }\n .ecl-icons-digital::before {\n content: \"\\ea13\";\n }\n .ecl-icons-document::before {\n content: \"\\ea14\";\n }\n .ecl-icons-download::before {\n content: \"\\ea15\";\n }\n .ecl-icons-edit::before {\n content: \"\\ea16\";\n }\n .ecl-icons-email::before {\n content: \"\\ea17\";\n }\n .ecl-icons-energy::before {\n content: \"\\ea18\";\n }\n .ecl-icons-error-outline::before {\n content: \"\\ea19\";\n }\n .ecl-icons-error::before {\n content: \"\\ea1a\";\n }\n .ecl-icons-euro::before {\n content: \"\\ea1b\";\n }\n .ecl-icons-event::before {\n content: \"\\ea1c\";\n }\n .ecl-icons-external-events::before {\n content: \"\\ea1d\";\n }\n .ecl-icons-external::before {\n content: \"\\ea1e\";\n }\n .ecl-icons-eye::before {\n content: \"\\ea1f\";\n }\n .ecl-icons-faq::before {\n content: \"\\ea20\";\n }\n .ecl-icons-feedback::before {\n content: \"\\ea21\";\n }\n .ecl-icons-file-blank::before {\n content: \"\\ea22\";\n }\n .ecl-icons-file::before {\n content: \"\\ea23\";\n }\n .ecl-icons-folder::before {\n content: \"\\ea24\";\n }\n .ecl-icons-fullscreen::before {\n content: \"\\ea25\";\n }\n .ecl-icons-global::before {\n content: \"\\ea26\";\n }\n .ecl-icons-growth::before {\n content: \"\\ea27\";\n }\n .ecl-icons-hamburger::before {\n content: \"\\ea28\";\n }\n .ecl-icons-image::before {\n content: \"\\ea29\";\n }\n .ecl-icons-infographic::before {\n content: \"\\ea2a\";\n }\n .ecl-icons-information-outline::before {\n content: \"\\ea2b\";\n }\n .ecl-icons-information-round::before {\n content: \"\\ea2c\";\n }\n .ecl-icons-information::before {\n content: \"\\ea2d\";\n }\n .ecl-icons-laco-filled::before {\n content: \"\\ea2e\";\n }\n .ecl-icons-laco::before {\n content: \"\\ea2f\";\n }\n .ecl-icons-list::before {\n content: \"\\ea30\";\n }\n .ecl-icons-livestreaming::before {\n content: \"\\ea31\";\n }\n .ecl-icons-location-filled::before {\n content: \"\\ea32\";\n }\n .ecl-icons-location::before {\n content: \"\\ea33\";\n }\n .ecl-icons-log-in-outline::before {\n content: \"\\ea34\";\n }\n .ecl-icons-log-in::before {\n content: \"\\ea35\";\n }\n .ecl-icons-logged-in::before {\n content: \"\\ea36\";\n }\n .ecl-icons-minus-outline::before {\n content: \"\\ea37\";\n }\n .ecl-icons-minus::before {\n content: \"\\ea38\";\n }\n .ecl-icons-multiple-files::before {\n content: \"\\ea39\";\n }\n .ecl-icons-notification-active::before {\n content: \"\\ea3a\";\n }\n .ecl-icons-notification::before {\n content: \"\\ea3b\";\n }\n .ecl-icons-organigram::before {\n content: \"\\ea3c\";\n }\n .ecl-icons-package::before {\n content: \"\\ea3d\";\n }\n .ecl-icons-pause-filled::before {\n content: \"\\ea3e\";\n }\n .ecl-icons-pause-outline::before {\n content: \"\\ea3f\";\n }\n .ecl-icons-pause::before {\n content: \"\\ea40\";\n }\n .ecl-icons-play-filled::before {\n content: \"\\ea41\";\n }\n .ecl-icons-play-outline::before {\n content: \"\\ea42\";\n }\n .ecl-icons-play::before {\n content: \"\\ea43\";\n }\n .ecl-icons-plus-filled::before {\n content: \"\\ea44\";\n }\n .ecl-icons-plus-outline::before {\n content: \"\\ea45\";\n }\n .ecl-icons-plus::before {\n content: \"\\ea46\";\n }\n .ecl-icons-presentation::before {\n content: \"\\ea47\";\n }\n .ecl-icons-print::before {\n content: \"\\ea48\";\n }\n .ecl-icons-regulation::before {\n content: \"\\ea49\";\n }\n .ecl-icons-rss::before {\n content: \"\\ea4a\";\n }\n .ecl-icons-search::before {\n content: \"\\ea4b\";\n }\n .ecl-icons-settings::before {\n content: \"\\ea4c\";\n }\n .ecl-icons-share-filled::before {\n content: \"\\ea4d\";\n }\n .ecl-icons-share::before {\n content: \"\\ea4e\";\n }\n .ecl-icons-shopping-bag::before {\n content: \"\\ea4f\";\n }\n .ecl-icons-solid-arrow::before {\n content: \"\\ea50\";\n }\n .ecl-icons-sort-carets::before {\n content: \"\\ea51\";\n }\n .ecl-icons-spinner::before {\n content: \"\\ea52\";\n }\n .ecl-icons-spreadsheet::before {\n content: \"\\ea53\";\n }\n .ecl-icons-star-filled::before {\n content: \"\\ea54\";\n }\n .ecl-icons-star-outline::before {\n content: \"\\ea55\";\n }\n .ecl-icons-tag::before {\n content: \"\\ea56\";\n }\n .ecl-icons-trash::before {\n content: \"\\ea57\";\n }\n .ecl-icons-upload::before {\n content: \"\\ea58\";\n }\n .ecl-icons-warning-outline::before {\n content: \"\\ea59\";\n }\n .ecl-icons-warning-round::before {\n content: \"\\ea5a\";\n }\n .ecl-icons-warning::before {\n content: \"\\ea5b\";\n }\n}\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n}";
1023
+ var css_248z$19 = "@layer kol-theme-component {\n @font-face {\n font-family: \"ecl-icons\";\n src: url(\"ecl-icons.eot?t=1785502897793\"); /* IE9*/\n src: url(\"ecl-icons.eot?t=1785502897793#iefix\") format(\"embedded-opentype\"), url(\"ecl-icons.woff2?t=1785502897793\") format(\"woff2\"), url(\"ecl-icons.woff?t=1785502897793\") format(\"woff\"), url(\"ecl-icons.ttf?t=1785502897793\") format(\"truetype\"), url(\"ecl-icons.svg?t=1785502897793#ecl-icons\") format(\"svg\"); /* iOS 4.1- */\n }\n [class^=ecl-icons-], [class*=\" ecl-icons-\"] {\n font-family: \"ecl-icons\";\n font-style: normal;\n font-weight: 400;\n line-height: 1em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .ecl-icons-arrow-left::before {\n content: \"\\ea01\";\n }\n .ecl-icons-audio::before {\n content: \"\\ea02\";\n }\n .ecl-icons-book::before {\n content: \"\\ea03\";\n }\n .ecl-icons-brochure::before {\n content: \"\\ea04\";\n }\n .ecl-icons-budget::before {\n content: \"\\ea05\";\n }\n .ecl-icons-calendar::before {\n content: \"\\ea06\";\n }\n .ecl-icons-camera::before {\n content: \"\\ea07\";\n }\n .ecl-icons-chain::before {\n content: \"\\ea08\";\n }\n .ecl-icons-check-filled::before {\n content: \"\\ea09\";\n }\n .ecl-icons-check::before {\n content: \"\\ea0a\";\n }\n .ecl-icons-clock-filled::before {\n content: \"\\ea0b\";\n }\n .ecl-icons-clock::before {\n content: \"\\ea0c\";\n }\n .ecl-icons-close-filled::before {\n content: \"\\ea0d\";\n }\n .ecl-icons-close-outline::before {\n content: \"\\ea0e\";\n }\n .ecl-icons-close::before {\n content: \"\\ea0f\";\n }\n .ecl-icons-copy::before {\n content: \"\\ea10\";\n }\n .ecl-icons-corner-arrow::before {\n content: \"\\ea11\";\n }\n .ecl-icons-data::before {\n content: \"\\ea12\";\n }\n .ecl-icons-digital::before {\n content: \"\\ea13\";\n }\n .ecl-icons-document::before {\n content: \"\\ea14\";\n }\n .ecl-icons-download::before {\n content: \"\\ea15\";\n }\n .ecl-icons-edit::before {\n content: \"\\ea16\";\n }\n .ecl-icons-email::before {\n content: \"\\ea17\";\n }\n .ecl-icons-energy::before {\n content: \"\\ea18\";\n }\n .ecl-icons-error-outline::before {\n content: \"\\ea19\";\n }\n .ecl-icons-error::before {\n content: \"\\ea1a\";\n }\n .ecl-icons-euro::before {\n content: \"\\ea1b\";\n }\n .ecl-icons-event::before {\n content: \"\\ea1c\";\n }\n .ecl-icons-external-events::before {\n content: \"\\ea1d\";\n }\n .ecl-icons-external::before {\n content: \"\\ea1e\";\n }\n .ecl-icons-eye::before {\n content: \"\\ea1f\";\n }\n .ecl-icons-faq::before {\n content: \"\\ea20\";\n }\n .ecl-icons-feedback::before {\n content: \"\\ea21\";\n }\n .ecl-icons-file-blank::before {\n content: \"\\ea22\";\n }\n .ecl-icons-file::before {\n content: \"\\ea23\";\n }\n .ecl-icons-folder::before {\n content: \"\\ea24\";\n }\n .ecl-icons-fullscreen::before {\n content: \"\\ea25\";\n }\n .ecl-icons-global::before {\n content: \"\\ea26\";\n }\n .ecl-icons-growth::before {\n content: \"\\ea27\";\n }\n .ecl-icons-hamburger::before {\n content: \"\\ea28\";\n }\n .ecl-icons-image::before {\n content: \"\\ea29\";\n }\n .ecl-icons-infographic::before {\n content: \"\\ea2a\";\n }\n .ecl-icons-information-outline::before {\n content: \"\\ea2b\";\n }\n .ecl-icons-information-round::before {\n content: \"\\ea2c\";\n }\n .ecl-icons-information::before {\n content: \"\\ea2d\";\n }\n .ecl-icons-laco-filled::before {\n content: \"\\ea2e\";\n }\n .ecl-icons-laco::before {\n content: \"\\ea2f\";\n }\n .ecl-icons-list::before {\n content: \"\\ea30\";\n }\n .ecl-icons-livestreaming::before {\n content: \"\\ea31\";\n }\n .ecl-icons-location-filled::before {\n content: \"\\ea32\";\n }\n .ecl-icons-location::before {\n content: \"\\ea33\";\n }\n .ecl-icons-log-in-outline::before {\n content: \"\\ea34\";\n }\n .ecl-icons-log-in::before {\n content: \"\\ea35\";\n }\n .ecl-icons-logged-in::before {\n content: \"\\ea36\";\n }\n .ecl-icons-minus-outline::before {\n content: \"\\ea37\";\n }\n .ecl-icons-minus::before {\n content: \"\\ea38\";\n }\n .ecl-icons-multiple-files::before {\n content: \"\\ea39\";\n }\n .ecl-icons-notification-active::before {\n content: \"\\ea3a\";\n }\n .ecl-icons-notification::before {\n content: \"\\ea3b\";\n }\n .ecl-icons-organigram::before {\n content: \"\\ea3c\";\n }\n .ecl-icons-package::before {\n content: \"\\ea3d\";\n }\n .ecl-icons-pause-filled::before {\n content: \"\\ea3e\";\n }\n .ecl-icons-pause-outline::before {\n content: \"\\ea3f\";\n }\n .ecl-icons-pause::before {\n content: \"\\ea40\";\n }\n .ecl-icons-play-filled::before {\n content: \"\\ea41\";\n }\n .ecl-icons-play-outline::before {\n content: \"\\ea42\";\n }\n .ecl-icons-play::before {\n content: \"\\ea43\";\n }\n .ecl-icons-plus-filled::before {\n content: \"\\ea44\";\n }\n .ecl-icons-plus-outline::before {\n content: \"\\ea45\";\n }\n .ecl-icons-plus::before {\n content: \"\\ea46\";\n }\n .ecl-icons-presentation::before {\n content: \"\\ea47\";\n }\n .ecl-icons-print::before {\n content: \"\\ea48\";\n }\n .ecl-icons-regulation::before {\n content: \"\\ea49\";\n }\n .ecl-icons-rss::before {\n content: \"\\ea4a\";\n }\n .ecl-icons-search::before {\n content: \"\\ea4b\";\n }\n .ecl-icons-settings::before {\n content: \"\\ea4c\";\n }\n .ecl-icons-share-filled::before {\n content: \"\\ea4d\";\n }\n .ecl-icons-share::before {\n content: \"\\ea4e\";\n }\n .ecl-icons-shopping-bag::before {\n content: \"\\ea4f\";\n }\n .ecl-icons-solid-arrow::before {\n content: \"\\ea50\";\n }\n .ecl-icons-sort-carets::before {\n content: \"\\ea51\";\n }\n .ecl-icons-spinner::before {\n content: \"\\ea52\";\n }\n .ecl-icons-spreadsheet::before {\n content: \"\\ea53\";\n }\n .ecl-icons-star-filled::before {\n content: \"\\ea54\";\n }\n .ecl-icons-star-outline::before {\n content: \"\\ea55\";\n }\n .ecl-icons-tag::before {\n content: \"\\ea56\";\n }\n .ecl-icons-trash::before {\n content: \"\\ea57\";\n }\n .ecl-icons-upload::before {\n content: \"\\ea58\";\n }\n .ecl-icons-warning-outline::before {\n content: \"\\ea59\";\n }\n .ecl-icons-warning-round::before {\n content: \"\\ea5a\";\n }\n .ecl-icons-warning::before {\n content: \"\\ea5b\";\n }\n}\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n}";
1022
1024
 
1023
- var css_248z$18 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n --kol-checkbox-color: var(--ecl-color-primary);\n }\n .kol-form-field__input {\n order: 2;\n }\n .kol-form-field__hint {\n order: 1;\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox:focus-within::before, .kol-input-checkbox__field-control--variant-default .kol-checkbox:hover:not(:has(input:disabled))::before {\n background-color: var(--ecl-color-primary-20);\n border-radius: 100%;\n position: absolute;\n width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon {\n color: var(--ecl-color-white);\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox input {\n border-color: var(--kol-checkbox-color);\n border-radius: 2px;\n position: relative;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox input:checked, .kol-input-checkbox__field-control--variant-default .kol-checkbox input:indeterminate {\n background-color: var(--kol-checkbox-color);\n border-color: var(--kol-checkbox-color);\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox input:focus {\n outline: transparent;\n }\n .kol-field-control--label-align-left .kol-field-control__label {\n padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control--label-align-right .kol-field-control__label {\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control--error {\n --kol-checkbox-color: var(--ecl-color-error);\n }\n .kol-checkbox--variant-switch .kol-input {\n border-color: var(--kol-checkbox-color);\n border-radius: 16px;\n }\n .kol-checkbox--variant-switch .kol-input::before {\n background-color: var(--ecl-color-white);\n border-radius: 50%;\n }\n .kol-checkbox--variant-switch .kol-icon {\n color: var(--kol-checkbox-color);\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-input::before {\n background-color: var(--kol-checkbox-color);\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n color: var(--ecl-color-white);\n }\n .kol-checkbox--variant-switch:hover .kol-input:not(:disabled) {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n .kol-input-checkbox--variant-button {\n gap: var(--spacing-xs) 0;\n }\n .kol-input-checkbox--variant-button:focus-within {\n outline-color: var(--ecl-color-primary-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
1025
+ var css_248z$18 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n --kol-checkbox-color: var(--ecl-color-primary);\n }\n .kol-form-field__input {\n order: 2;\n }\n .kol-form-field__hint {\n order: 1;\n font-size: calc(14 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field__msg {\n order: 3;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox:focus-within::before, .kol-input-checkbox__field-control--variant-default .kol-checkbox:hover:not(:has(input:disabled))::before {\n background-color: var(--ecl-color-primary-20);\n border-radius: 100%;\n position: absolute;\n width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox__icon,\n .kol-input-checkbox__field-control--variant-default .kol-checkbox .kol-checkbox-icon {\n color: var(--ecl-color-white);\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox input {\n border-color: var(--kol-checkbox-color);\n border-radius: 2px;\n position: relative;\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox input:checked, .kol-input-checkbox__field-control--variant-default .kol-checkbox input:indeterminate {\n background-color: var(--kol-checkbox-color);\n border-color: var(--kol-checkbox-color);\n }\n .kol-input-checkbox__field-control--variant-default .kol-checkbox input:focus {\n outline: transparent;\n }\n .kol-field-control--label-align-left .kol-field-control__label {\n padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control--label-align-right .kol-field-control__label {\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control--error {\n --kol-checkbox-color: var(--ecl-color-error);\n }\n .kol-checkbox--variant-switch .kol-input {\n border-color: var(--kol-checkbox-color);\n border-radius: 16px;\n }\n .kol-checkbox--variant-switch .kol-input::before {\n background-color: var(--ecl-color-white);\n border-radius: 50%;\n }\n .kol-checkbox--variant-switch .kol-icon {\n color: var(--kol-checkbox-color);\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-input::before {\n background-color: var(--kol-checkbox-color);\n }\n .kol-checkbox--variant-switch.kol-checkbox--checked .kol-icon {\n color: var(--ecl-color-white);\n }\n .kol-checkbox--variant-switch:hover .kol-input:not(:disabled) {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n .kol-input-checkbox--variant-button {\n gap: var(--spacing-xs) 0;\n }\n .kol-input-checkbox--variant-button:focus-within {\n outline-color: var(--ecl-color-primary-130);\n outline-style: solid;\n outline-width: 2px;\n }\n}";
1024
1026
 
1025
- var css_248z$17 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-color__inputs-wrapper {\n height: 100%;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-color__input--text, .kol-input-color__input--color {\n background-color: var(--ecl-color-white);\n min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 0;\n }\n}";
1027
+ var css_248z$17 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-color__inputs-wrapper {\n height: 100%;\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-color__input--text, .kol-input-color__input--color {\n background-color: var(--ecl-color-white);\n min-height: calc(var(--a11y-min-size) - 8 * 1rem / var(--kolibri-root-font-size, 16));\n border: 0;\n }\n}";
1026
1028
 
1027
- var css_248z$16 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1029
+ var css_248z$16 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1028
1030
 
1029
- var css_248z$15 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1031
+ var css_248z$15 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1030
1032
 
1031
- var css_248z$14 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text {\n white-space: nowrap;\n }\n .kol-input-container {\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n -moz-column-gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--is-dragover {\n border-color: var(--ecl-color-primary);\n }\n}";
1033
+ var css_248z$14 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text {\n white-space: nowrap;\n }\n .kol-input-container {\n padding-left: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n -moz-column-gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n column-gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container--is-dragover {\n border-color: var(--ecl-color-primary);\n }\n}";
1032
1034
 
1033
- var css_248z$13 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-input-number .kol-input-number__step-button {\n color: var(--ecl-color-primary);\n font-weight: 700;\n transition-duration: 0.3s;\n transition-property: background-color, color;\n }\n .kol-input-number .kol-input-number__step-button:focus {\n outline: 0;\n }\n .kol-input-number .kol-input-number__step-button:hover {\n color: var(--ecl-color-white);\n background-color: var(--ecl-color-primary-140);\n }\n .kol-input-number .kol-input {\n min-width: calc(3 * var(--a11y-min-size) + 8px);\n }\n}";
1035
+ var css_248z$13 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-input-number .kol-input-number__step-button {\n color: var(--ecl-color-primary);\n font-weight: 700;\n transition-duration: 0.3s;\n transition-property: background-color, color;\n }\n .kol-input-number .kol-input-number__step-button:focus {\n outline: 0;\n }\n .kol-input-number .kol-input-number__step-button:hover {\n color: var(--ecl-color-white);\n background-color: var(--ecl-color-primary-140);\n }\n .kol-input-number .kol-input {\n min-width: calc(3 * var(--a11y-min-size) + 8px);\n }\n}";
1034
1036
 
1035
- var css_248z$12 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1037
+ var css_248z$12 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1036
1038
 
1037
- var css_248z$11 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control .kol-input-radio {\n width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: 0;\n }\n .kol-field-control input {\n background-color: var(--ecl-color-white);\n border-color: var(--kol-radio-color);\n position: relative;\n border-width: 1px;\n }\n .kol-field-control input:checked::before {\n background-color: var(--kol-radio-color);\n inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control:not(:has(input:disabled)):hover input {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n .kol-form-field {\n --kol-radio-color: var(--ecl-color-primary);\n margin: 0;\n padding: 0;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n border: 0;\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__input {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n order: 3;\n align-items: flex-start;\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__hint {\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-field-control {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input--error {\n --kol-radio-color: var(--ecl-color-error);\n }\n}";
1039
+ var css_248z$11 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control .kol-input-radio {\n width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: 0;\n }\n .kol-field-control input {\n background-color: var(--ecl-color-white);\n border-color: var(--kol-radio-color);\n position: relative;\n border-width: 1px;\n }\n .kol-field-control input:checked::before {\n background-color: var(--kol-radio-color);\n inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-field-control:not(:has(input:disabled)):hover input {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n .kol-form-field {\n --kol-radio-color: var(--ecl-color-primary);\n margin: 0;\n padding: 0;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n flex-wrap: wrap;\n align-items: flex-start;\n border: 0;\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__input {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n order: 3;\n align-items: flex-start;\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__hint {\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-field-control {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input--error {\n --kol-radio-color: var(--ecl-color-error);\n }\n}";
1038
1040
 
1039
- var css_248z$10 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container {\n border-width: 0;\n }\n .kol-input-container:has(.kol-input:focus) {\n outline-width: 0;\n }\n .kol-input-container:has(.kol-input:focus) ::-webkit-slider-thumb {\n outline: 8px solid var(--ecl-color-primary-20);\n outline-offset: 0;\n }\n .kol-input-range__inputs-wrapper {\n flex-direction: column;\n align-items: stretch;\n }\n .kol-input-range__input--number {\n font-weight: bold;\n border: 0;\n text-align: left;\n }\n .kol-input-range__input--range {\n background-color: var(--ecl-color-neutral);\n width: 100%;\n height: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n margin: calc(20 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0;\n border-width: 0;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n background-color: var(--ecl-color-primary);\n width: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-range__input--range::-webkit-slider-thumb:hover {\n outline: 4px solid var(--ecl-color-primary);\n outline-offset: -1px;\n }\n}";
1041
+ var css_248z$10 = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container {\n border-width: 0;\n }\n .kol-input-container:has(.kol-input:focus) {\n outline-width: 0;\n }\n .kol-input-container:has(.kol-input:focus) ::-webkit-slider-thumb {\n outline: 8px solid var(--ecl-color-primary-20);\n outline-offset: 0;\n }\n .kol-input-range__inputs-wrapper {\n flex-direction: column;\n align-items: stretch;\n }\n .kol-input-range__input--number {\n font-weight: bold;\n border: 0;\n text-align: left;\n }\n .kol-input-range__input--range {\n background-color: var(--ecl-color-neutral);\n width: 100%;\n height: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n margin: calc(20 * 1rem / var(--kolibri-root-font-size, 16)) 0 calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0;\n border-width: 0;\n }\n .kol-input-range__input--range::-webkit-slider-thumb {\n background-color: var(--ecl-color-primary);\n width: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-range__input--range::-webkit-slider-thumb:hover {\n outline: 4px solid var(--ecl-color-primary);\n outline-offset: -1px;\n }\n}";
1040
1042
 
1041
- var css_248z$$ = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1043
+ var css_248z$$ = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1042
1044
 
1043
- var css_248z$_ = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-link {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-link:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-link--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-link--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-link--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-link--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-link__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-link__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n}";
1045
+ var css_248z$_ = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-link {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-link:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-link--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-link--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-link--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-link--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-link__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-link__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-link--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-link--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-link--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-link--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n}";
1044
1046
 
1045
1047
  var css_248z$Z = "@layer kol-theme-component {\n .kol-link {\n color: var(--ecl-color-primary);\n }\n .kol-link .kol-span__label {\n text-decoration-thickness: from-font;\n text-underline-offset: clamp(3px, 0.245em, 10px);\n }\n .kol-link:hover {\n color: var(--ecl-color-primary-140);\n }\n .kol-link:focus {\n outline: 2px solid var(--ecl-color-primary);\n border-radius: 1px;\n outline-offset: 2px;\n }\n}";
1046
1048
 
1047
- var css_248z$Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-nav {\n --kol-nav-item-padding-left: -24;\n --kol-nav-item-padding-right: 8;\n }\n .kol-nav__list {\n list-style: none;\n --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 12);\n }\n .kol-nav__list-item {\n --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 12);\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-nav__entry .kol-link .kol-span__icon--right,\n .kol-nav__entry .kol-button .kol-span__icon--right {\n transform: rotate(180deg);\n }\n .kol-nav__entry .kol-link .kol-span__icon--right::before,\n .kol-nav__entry .kol-button .kol-span__icon--right::before {\n content: \"\\ea11\";\n }\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__list-item--expanded {\n background-color: var(--ecl-color-neutral-60);\n position: relative;\n }\n .kol-nav__list-item--expanded::before {\n background-color: var(--ecl-color-primary);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 4px;\n content: \"\";\n }\n .kol-nav__list-item--expanded > .kol-nav__entry-wrapper .kol-span__icon--right {\n transform: rotate(0);\n }\n .kol-nav__list--nested .kol-link,\n .kol-nav__list--nested .kol-button {\n padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__list--nested .kol-link .kol-span__container,\n .kol-nav__list--nested .kol-button .kol-span__container {\n display: grid;\n gap: 0;\n justify-content: flex-start;\n grid-template-areas: \"expander deco label\";\n grid-template-columns: 24px min-content 1fr;\n }\n .kol-nav__list--nested .kol-link .kol-span__icon--left,\n .kol-nav__list--nested .kol-button .kol-span__icon--left {\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-area: deco;\n }\n .kol-nav__list--nested .kol-link .kol-span__icon--right,\n .kol-nav__list--nested .kol-button .kol-span__icon--right {\n transform: rotate(90deg);\n width: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-area: expander;\n }\n .kol-nav__list--nested .kol-link .kol-span__icon--right::before,\n .kol-nav__list--nested .kol-button .kol-span__icon--right::before {\n content: \"\\ea50\";\n }\n .kol-nav__list--nested .kol-link .kol-span__label,\n .kol-nav__list--nested .kol-button .kol-span__label {\n grid-area: label;\n }\n .kol-nav__list--nested .kol-nav__list-item--expanded > .kol-nav__entry-wrapper .kol-span__icon--right {\n transform: rotate(180deg);\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-nav__toggle-button .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-nav__toggle-button .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-nav__toggle-button .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-nav__toggle-button .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-nav__toggle-button .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-nav__toggle-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-nav__toggle-button .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-nav__toggle-button .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-nav__toggle-button .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-nav__toggle-button .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-nav__toggle-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n}";
1049
+ var css_248z$Y = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-nav {\n --kol-nav-item-padding-left: -24;\n --kol-nav-item-padding-right: 8;\n }\n .kol-nav__list {\n list-style: none;\n --kol-nav-nested-padding-left: calc(var(--kol-nav-item-padding-left) + 12);\n }\n .kol-nav__list-item {\n --kol-nav-item-padding-left: calc(var(--kol-nav-nested-padding-left) + 12);\n }\n .kol-nav__entry--link {\n display: flex;\n }\n .kol-nav__entry .kol-link,\n .kol-nav__entry .kol-button {\n display: flex;\n min-height: var(--a11y-min-size);\n padding-right: calc(var(--kol-nav-item-padding-right) * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n text-decoration: none;\n }\n .kol-nav__entry .kol-link .kol-span__icon--right,\n .kol-nav__entry .kol-button .kol-span__icon--right {\n transform: rotate(180deg);\n }\n .kol-nav__entry .kol-link .kol-span__icon--right::before,\n .kol-nav__entry .kol-button .kol-span__icon--right::before {\n content: \"\\ea11\";\n }\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-link,\n .kol-nav__list-item--active > .kol-nav__entry-wrapper .kol-nav__entry .kol-button {\n font-weight: bold;\n }\n .kol-nav__list-item--expanded {\n background-color: var(--ecl-color-neutral-60);\n position: relative;\n }\n .kol-nav__list-item--expanded::before {\n background-color: var(--ecl-color-primary);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 4px;\n content: \"\";\n }\n .kol-nav__list-item--expanded > .kol-nav__entry-wrapper .kol-span__icon--right {\n transform: rotate(0);\n }\n .kol-nav__list--nested .kol-link,\n .kol-nav__list--nested .kol-button {\n padding-left: calc(var(--kol-nav-item-padding-left) * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__list--nested .kol-link .kol-span__container,\n .kol-nav__list--nested .kol-button .kol-span__container {\n display: grid;\n gap: 0;\n justify-content: flex-start;\n grid-template-areas: \"expander deco label\";\n grid-template-columns: 24px min-content 1fr;\n }\n .kol-nav__list--nested .kol-link .kol-span__icon--left,\n .kol-nav__list--nested .kol-button .kol-span__icon--left {\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-area: deco;\n }\n .kol-nav__list--nested .kol-link .kol-span__icon--right,\n .kol-nav__list--nested .kol-button .kol-span__icon--right {\n transform: rotate(90deg);\n width: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n margin-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n grid-area: expander;\n }\n .kol-nav__list--nested .kol-link .kol-span__icon--right::before,\n .kol-nav__list--nested .kol-button .kol-span__icon--right::before {\n content: \"\\ea50\";\n }\n .kol-nav__list--nested .kol-link .kol-span__label,\n .kol-nav__list--nested .kol-button .kol-span__label {\n grid-area: label;\n }\n .kol-nav__list--nested .kol-nav__list-item--expanded > .kol-nav__entry-wrapper .kol-span__icon--right {\n transform: rotate(180deg);\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-nav__toggle-button .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-nav__toggle-button .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-nav__toggle-button .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-nav__toggle-button .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-nav__toggle-button .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-nav__toggle-button .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-nav__toggle-button .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-nav__toggle-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-nav__toggle-button .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-nav__toggle-button .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-nav__toggle-button .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-nav__toggle-button .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-nav__toggle-button .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-nav__toggle-button .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-nav__toggle-button .kol-close-button {\n align-self: self-start;\n }\n .kol-nav__toggle-button .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-nav__toggle-button .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-nav__toggle-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-nav__toggle-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-nav__toggle-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n}";
1048
1050
 
1049
- var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-pagination .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-pagination .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-pagination .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-pagination .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-pagination .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-pagination .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-pagination {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination__navigation-list {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination__button--selected .kol-button {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-white);\n }\n}";
1051
+ var css_248z$X = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-pagination .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-pagination .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-pagination .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-pagination .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-pagination .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-pagination .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-pagination .kol-close-button {\n align-self: self-start;\n }\n .kol-pagination .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-pagination {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination__navigation-list {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination__button--selected .kol-button {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-white);\n }\n}";
1050
1052
 
1051
- var css_248z$W = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n}";
1053
+ var css_248z$W = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n}";
1052
1054
 
1053
1055
  var css_248z$V = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-progress__bar-progress {\n fill: var(--ecl-color-primary);\n }\n .kol-progress__bar-background {\n fill: var(--ecl-color-neutral);\n }\n .kol-progress__bar-border {\n stroke: transparent;\n }\n .kol-progress__cycle-background {\n stroke: var(--ecl-color-neutral);\n }\n .kol-progress__cycle-progress {\n stroke: var(--ecl-color-primary);\n }\n .kol-progress__cycle-border {\n stroke: transparent;\n }\n}";
1054
1056
 
1055
1057
  var css_248z$U = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-quote--block {\n box-shadow: var(--ecl-shadow-1);\n border-radius: 2px;\n display: block;\n padding: var(--ecl-spacing-3xl);\n border-inline-start: 4px solid var(--ecl-color-primary);\n }\n .kol-quote--block .kol-quote__blockquote {\n margin: 0;\n font-size: var(--ecl-font-size-l);\n }\n .kol-quote--block .kol-quote__cite {\n display: inline-block;\n margin-top: var(--ecl-spacing-m);\n font-weight: 700;\n }\n .kol-quote--block .kol-quote__cite::before {\n display: none;\n }\n}";
1056
1058
 
1057
- var css_248z$T = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-select {\n border: none;\n }\n .kol-select[multiple] {\n overflow: auto;\n }\n .kol-select__option {\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n color: var(--ecl-color-white);\n background-color: var(--ecl-color-dark);\n }\n .kol-select:not([multiple]) .kol-select__option {\n padding: 0.5em;\n }\n .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])) {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1059
+ var css_248z$T = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-select {\n border: none;\n }\n .kol-select[multiple] {\n overflow: auto;\n }\n .kol-select__option {\n margin: calc(1 * 1rem / var(--kolibri-root-font-size, 16)) 0;\n }\n .kol-select__option:active:not(:disabled), .kol-select__option:checked:not(:disabled), .kol-select__option:focus:not(:disabled), .kol-select__option:hover:not(:disabled) {\n color: var(--ecl-color-white);\n background-color: var(--ecl-color-dark);\n }\n .kol-select:not([multiple]) .kol-select__option {\n padding: 0.5em;\n }\n .kol-select[multiple][size=\"1\"], .kol-select:not([multiple], [size]) {\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]),\n .kol-input-container:has(:not(.kol-select[multiple])) {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-input-container__adornment,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment {\n position: absolute;\n top: calc(-2 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-input-container__adornment--start,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-input-container__adornment--start > .kol-icon,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--start > .kol-icon {\n margin-left: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-input-container__adornment--end,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-input-container__adornment--end > .kol-icon,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__adornment--end > .kol-icon {\n margin-right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-select,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-select {\n border-left: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n border-right: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) solid transparent;\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]):has(.kol-input-container__adornment--start:not(:empty)) .kol-select,\n .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--start:not(:empty)) .kol-select {\n border-left-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]):has(.kol-input-container__adornment--end:not(:empty)) .kol-select,\n .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end:not(:empty)) .kol-select {\n border-right-width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select,\n .kol-input-container:has(:not(.kol-select[multiple])):has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-select {\n border-right-width: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-select[multiple][size=\"1\"]) .kol-input-container__container,\n .kol-input-container:has(:not(.kol-select[multiple])) .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1058
1060
 
1059
- var css_248z$S = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .kol-custom-suggestions-option[aria-selected] {\n background-color: var(--ecl-color-neutral-80);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--ecl-color-neutral-60);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-color: var(--ecl-color-primary);\n border-style: solid;\n width: 100%;\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-single-select__group {\n display: inline-flex;\n width: 100%;\n align-items: center;\n }\n .kol-single-select__delete {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}";
1061
+ var css_248z$S = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-custom-suggestions-option {\n display: flex;\n min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(10 * 1rem / var(--kolibri-root-font-size, 16)) calc(12 * 1rem / var(--kolibri-root-font-size, 16));\n align-items: center;\n line-height: 1.2;\n }\n .kol-custom-suggestions-option[aria-selected] {\n background-color: var(--ecl-color-neutral-80);\n }\n .kol-custom-suggestions-option:focus {\n background-color: var(--ecl-color-neutral-60);\n outline: 0;\n }\n .kol-custom-suggestions-options-group {\n border-color: var(--ecl-color-primary);\n border-style: solid;\n width: 100%;\n max-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16) * 5 + 2 * 1rem / var(--kolibri-root-font-size, 16));\n border-width: 1px;\n }\n .kol-custom-suggestions-toggle {\n display: grid;\n padding-right: 1em;\n padding-left: 1em;\n place-items: center;\n }\n .kol-custom-suggestions-toggle:focus {\n outline: 0;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-single-select__group {\n display: inline-flex;\n width: 100%;\n align-items: center;\n }\n .kol-single-select__delete {\n margin-top: -2px;\n margin-bottom: -2px;\n }\n}";
1060
1062
 
1061
1063
  var css_248z$R = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-skip-nav .kol-link__text {\n color: var(--ecl-color-white);\n background-color: var(--ecl-color-primary);\n border-color: var(--ecl-color-primary);\n border-style: solid;\n border-radius: 0;\n padding: 0.25em 0.75em;\n border-width: 2px;\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: 1;\n cursor: pointer;\n }\n}";
1062
1064
 
1063
1065
  var css_248z$Q = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-spin__spinner {\n background-color: var(--ecl-color-primary);\n }\n}";
1064
1066
 
1065
- var css_248z$P = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-split-button .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-split-button .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-split-button .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-split-button .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-split-button .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-split-button .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-split-button .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-split-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-split-button .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-split-button .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-split-button .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-split-button .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-split-button .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-split-button .kol-button--standalone {\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-split-button__button .kol-button__text {\n border-radius: 2px 0 0 2px;\n border-right-width: 0;\n }\n .kol-split-button__secondary-button .kol-button__text {\n border-radius: 0 2px 2px 0;\n }\n}";
1067
+ var css_248z$P = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-split-button .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-split-button .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-split-button .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-split-button .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-split-button .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-split-button .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-split-button .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-split-button .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-split-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-split-button .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-split-button .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-split-button .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-split-button .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-split-button .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-split-button .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-split-button .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-split-button .kol-close-button {\n align-self: self-start;\n }\n .kol-split-button .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-split-button .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-split-button .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-split-button .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-split-button .kol-button--standalone {\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-split-button__button .kol-button__text {\n border-radius: 2px 0 0 2px;\n border-right-width: 0;\n }\n .kol-split-button__secondary-button .kol-button__text {\n border-radius: 0 2px 2px 0;\n }\n}";
1066
1068
 
1067
- var css_248z$O = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-pagination .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-pagination .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-pagination .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-pagination .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-pagination .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-pagination .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-pagination {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination__navigation-list {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination__button--selected .kol-button {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings {\n display: flex;\n position: static;\n justify-content: flex-end;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table-settings .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table-settings .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table-settings .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table-settings .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table-settings .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table-settings .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table-settings .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table-settings .kol-popover-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-popover-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-popover-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__caption {\n color: var(--ecl-color-dark-80);\n min-height: 0;\n margin-top: var(--ecl-spacing-xs);\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n caption-side: bottom;\n }\n .kol-table__table {\n border: 1px solid var(--ecl-color-neutral-60);\n border-spacing: 0;\n }\n .kol-table__row .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__head-row:not(:first-child) .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-160);\n }\n .kol-table__cell {\n padding: var(--ecl-spacing-m);\n }\n .kol-table__cell:not(:last-child) {\n border-right: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__cell--header {\n background-color: var(--ecl-color-neutral);\n }\n .kol-table__cell--header:has(.kol-button) {\n padding: 0;\n }\n .kol-table__cell--header .kol-table__sort {\n display: flex;\n height: 100%;\n align-items: stretch;\n }\n .kol-table__cell--header .kol-table__sort-button {\n flex: 1 0 100%;\n }\n .kol-table__cell--header .kol-button {\n padding: var(--ecl-spacing-m);\n font-weight: 700;\n }\n .kol-table__head-row .kol-table__cell--header:not(:last-child) {\n border-right-color: var(--ecl-color-neutral-160);\n }\n .kol-table__row--body .kol-table__cell--header {\n border-right: 2px solid var(--ecl-color-neutral-160);\n }\n .kol-table__row--body:not(:first-child) .kol-table__cell--header {\n border-top-color: var(--ecl-color-neutral-160);\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table__cell-actions .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table__cell-actions .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table__cell-actions .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table__cell-actions .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table__cell-actions .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) {\n --kol-checkbox-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:focus-within::before, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:hover:not(:has(input:disabled))::before {\n background-color: var(--ecl-color-primary-20);\n border-radius: 100%;\n position: absolute;\n width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon {\n color: var(--ecl-color-white);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input {\n border-color: var(--kol-checkbox-color);\n border-radius: 2px;\n position: relative;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:checked, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:indeterminate {\n background-color: var(--kol-checkbox-color);\n border-color: var(--kol-checkbox-color);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:focus {\n outline: transparent;\n }\n .kol-table:has(.kol-table__selection-input--radio) {\n --kol-radio-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection .kol-input-radio {\n width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: 0;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input {\n background-color: var(--ecl-color-white);\n border-color: var(--kol-radio-color);\n position: relative;\n border-width: 1px;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input:checked::before {\n background-color: var(--kol-radio-color);\n inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection:not(:has(input:disabled)):hover input {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n}";
1069
+ var css_248z$O = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-pagination .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-pagination .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-pagination .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-pagination .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-pagination .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-pagination .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-pagination .kol-close-button {\n align-self: self-start;\n }\n .kol-pagination .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-pagination {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination__navigation-list {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination__button--selected .kol-button {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings {\n display: flex;\n position: static;\n justify-content: flex-end;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table-settings .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table-settings .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table-settings .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table-settings .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table-settings .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table-settings .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table-settings .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table-settings .kol-close-button {\n align-self: self-start;\n }\n .kol-table-settings .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings .kol-popover-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-popover-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-popover-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__caption {\n color: var(--ecl-color-dark-80);\n min-height: 0;\n margin-top: var(--ecl-spacing-xs);\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n caption-side: bottom;\n }\n .kol-table__table {\n border: 1px solid var(--ecl-color-neutral-60);\n border-spacing: 0;\n }\n .kol-table__row .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__head-row:not(:first-child) .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-160);\n }\n .kol-table__cell {\n padding: var(--ecl-spacing-m);\n }\n .kol-table__cell:not(:last-child) {\n border-right: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__cell--header {\n background-color: var(--ecl-color-neutral);\n }\n .kol-table__cell--header:has(.kol-button) {\n padding: 0;\n }\n .kol-table__cell--header .kol-table__sort {\n display: flex;\n height: 100%;\n align-items: stretch;\n }\n .kol-table__cell--header .kol-table__sort-button {\n flex: 1 0 100%;\n }\n .kol-table__cell--header .kol-button {\n padding: var(--ecl-spacing-m);\n font-weight: 700;\n }\n .kol-table__head-row .kol-table__cell--header:not(:last-child) {\n border-right-color: var(--ecl-color-neutral-160);\n }\n .kol-table__row--body .kol-table__cell--header {\n border-right: 2px solid var(--ecl-color-neutral-160);\n }\n .kol-table__row--body:not(:first-child) .kol-table__cell--header {\n border-top-color: var(--ecl-color-neutral-160);\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table__cell-actions .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table__cell-actions .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table__cell-actions .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table__cell-actions .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table__cell-actions .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table__cell-actions .kol-close-button {\n align-self: self-start;\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) {\n --kol-checkbox-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:focus-within::before, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:hover:not(:has(input:disabled))::before {\n background-color: var(--ecl-color-primary-20);\n border-radius: 100%;\n position: absolute;\n width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon {\n color: var(--ecl-color-white);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input {\n border-color: var(--kol-checkbox-color);\n border-radius: 2px;\n position: relative;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:checked, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:indeterminate {\n background-color: var(--kol-checkbox-color);\n border-color: var(--kol-checkbox-color);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:focus {\n outline: transparent;\n }\n .kol-table:has(.kol-table__selection-input--radio) {\n --kol-radio-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection .kol-input-radio {\n width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: 0;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input {\n background-color: var(--ecl-color-white);\n border-color: var(--kol-radio-color);\n position: relative;\n border-width: 1px;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input:checked::before {\n background-color: var(--kol-radio-color);\n inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection:not(:has(input:disabled)):hover input {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n}";
1068
1070
 
1069
- var css_248z$N = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-pagination .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-pagination .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-pagination .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-pagination .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-pagination .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-pagination .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-pagination {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination__navigation-list {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination__button--selected .kol-button {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings {\n display: flex;\n position: static;\n justify-content: flex-end;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table-settings .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table-settings .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table-settings .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table-settings .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table-settings .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table-settings .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table-settings .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table-settings .kol-popover-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-popover-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-popover-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__caption {\n color: var(--ecl-color-dark-80);\n min-height: 0;\n margin-top: var(--ecl-spacing-xs);\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n caption-side: bottom;\n }\n .kol-table__table {\n border: 1px solid var(--ecl-color-neutral-60);\n border-spacing: 0;\n }\n .kol-table__row .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__head-row:not(:first-child) .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-160);\n }\n .kol-table__cell {\n padding: var(--ecl-spacing-m);\n }\n .kol-table__cell:not(:last-child) {\n border-right: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__cell--header {\n background-color: var(--ecl-color-neutral);\n }\n .kol-table__cell--header:has(.kol-button) {\n padding: 0;\n }\n .kol-table__cell--header .kol-table__sort {\n display: flex;\n height: 100%;\n align-items: stretch;\n }\n .kol-table__cell--header .kol-table__sort-button {\n flex: 1 0 100%;\n }\n .kol-table__cell--header .kol-button {\n padding: var(--ecl-spacing-m);\n font-weight: 700;\n }\n .kol-table__head-row .kol-table__cell--header:not(:last-child) {\n border-right-color: var(--ecl-color-neutral-160);\n }\n .kol-table__row--body .kol-table__cell--header {\n border-right: 2px solid var(--ecl-color-neutral-160);\n }\n .kol-table__row--body:not(:first-child) .kol-table__cell--header {\n border-top-color: var(--ecl-color-neutral-160);\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table__cell-actions .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table__cell-actions .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table__cell-actions .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table__cell-actions .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table__cell-actions .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) {\n --kol-checkbox-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:focus-within::before, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:hover:not(:has(input:disabled))::before {\n background-color: var(--ecl-color-primary-20);\n border-radius: 100%;\n position: absolute;\n width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon {\n color: var(--ecl-color-white);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input {\n border-color: var(--kol-checkbox-color);\n border-radius: 2px;\n position: relative;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:checked, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:indeterminate {\n background-color: var(--kol-checkbox-color);\n border-color: var(--kol-checkbox-color);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:focus {\n outline: transparent;\n }\n .kol-table:has(.kol-table__selection-input--radio) {\n --kol-radio-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection .kol-input-radio {\n width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: 0;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input {\n background-color: var(--ecl-color-white);\n border-color: var(--kol-radio-color);\n position: relative;\n border-width: 1px;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input:checked::before {\n background-color: var(--kol-radio-color);\n inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection:not(:has(input:disabled)):hover input {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n}";
1071
+ var css_248z$N = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-pagination .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-pagination .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-pagination .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-pagination .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-pagination .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-pagination .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-pagination .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-pagination .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-pagination .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-pagination .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-pagination .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-pagination .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-pagination .kol-close-button {\n align-self: self-start;\n }\n .kol-pagination .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-pagination {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination__navigation-list {\n gap: var(--ecl-spacing-m);\n }\n .kol-pagination .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-pagination .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-pagination .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-pagination__button--selected .kol-button {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings {\n display: flex;\n position: static;\n justify-content: flex-end;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table-settings .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table-settings .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table-settings .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table-settings .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table-settings .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table-settings .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table-settings .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table-settings .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table-settings .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table-settings .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table-settings .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table-settings .kol-close-button {\n align-self: self-start;\n }\n .kol-table-settings .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-table-settings .kol-popover-button .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table-settings .kol-popover-button .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table-settings .kol-popover-button .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table-settings__content {\n padding: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__error-message {\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__columns {\n padding: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table-settings__actions {\n display: flex;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n padding-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n justify-content: flex-end;\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__caption {\n color: var(--ecl-color-dark-80);\n min-height: 0;\n margin-top: var(--ecl-spacing-xs);\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n caption-side: bottom;\n }\n .kol-table__table {\n border: 1px solid var(--ecl-color-neutral-60);\n border-spacing: 0;\n }\n .kol-table__row .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__head-row:not(:first-child) .kol-table__cell {\n border-top: 1px solid var(--ecl-color-neutral-160);\n }\n .kol-table__cell {\n padding: var(--ecl-spacing-m);\n }\n .kol-table__cell:not(:last-child) {\n border-right: 1px solid var(--ecl-color-neutral-60);\n }\n .kol-table__cell--header {\n background-color: var(--ecl-color-neutral);\n }\n .kol-table__cell--header:has(.kol-button) {\n padding: 0;\n }\n .kol-table__cell--header .kol-table__sort {\n display: flex;\n height: 100%;\n align-items: stretch;\n }\n .kol-table__cell--header .kol-table__sort-button {\n flex: 1 0 100%;\n }\n .kol-table__cell--header .kol-button {\n padding: var(--ecl-spacing-m);\n font-weight: 700;\n }\n .kol-table__head-row .kol-table__cell--header:not(:last-child) {\n border-right-color: var(--ecl-color-neutral-160);\n }\n .kol-table__row--body .kol-table__cell--header {\n border-right: 2px solid var(--ecl-color-neutral-160);\n }\n .kol-table__row--body:not(:first-child) .kol-table__cell--header {\n border-top-color: var(--ecl-color-neutral-160);\n }\n .kol-table__cell-actions {\n gap: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table__cell-actions .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table__cell-actions .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-table__cell-actions .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-table__cell-actions .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-table__cell-actions .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-table__cell-actions .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-table__cell-actions .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-table__cell-actions .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-table__cell-actions .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-table__cell-actions .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table__cell-actions .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-table__cell-actions .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-table__cell-actions .kol-close-button {\n align-self: self-start;\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-table__cell-actions .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-table__selection {\n display: flex;\n gap: 0.5em;\n align-items: center;\n grid-template-columns: 1fr auto;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) {\n --kol-checkbox-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection {\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n justify-content: center;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:focus-within::before, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection:hover:not(:has(input:disabled))::before {\n background-color: var(--ecl-color-primary-20);\n border-radius: 100%;\n position: absolute;\n width: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n height: calc(38 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection__icon,\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection .kol-table__selection-icon {\n color: var(--ecl-color-white);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input {\n border-color: var(--kol-checkbox-color);\n border-radius: 2px;\n position: relative;\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:checked, .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:indeterminate {\n background-color: var(--kol-checkbox-color);\n border-color: var(--kol-checkbox-color);\n }\n .kol-table:has(.kol-table__selection-input--checkbox) .kol-table__selection input:focus {\n outline: transparent;\n }\n .kol-table:has(.kol-table__selection-input--radio) {\n --kol-radio-color: var(--ecl-color-primary);\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection .kol-input-radio {\n width: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n min-width: 0;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input {\n background-color: var(--ecl-color-white);\n border-color: var(--kol-radio-color);\n position: relative;\n border-width: 1px;\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection input:checked::before {\n background-color: var(--kol-radio-color);\n inset: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-table:has(.kol-table__selection-input--radio) .kol-table__selection:not(:has(input:disabled)):hover input {\n outline: var(--ecl-color-primary-20) 8px solid;\n }\n}";
1070
1072
 
1071
1073
  var css_248z$M = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tabs__button-group {\n border-bottom: 2px solid var(--ecl-color-neutral-60);\n }\n .kol-tabs .kol-button {\n margin-bottom: -2px;\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border: none;\n border-bottom: solid 2px transparent;\n }\n .kol-tabs .kol-button:hover:not(:disabled) {\n border-bottom-color: var(--ecl-color-dark-80);\n }\n .kol-tabs .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n border-radius: 1px;\n outline-offset: -2px;\n }\n .kol-tabs .kol-button.selected {\n border-bottom-color: var(--ecl-color-primary);\n font-weight: var(--ecl-font-weight-bold);\n }\n}";
1072
1074
 
1073
- var css_248z$L = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n}";
1075
+ var css_248z$L = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-alert {\n align-items: center;\n }\n .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-form-field {\n gap: var(--ecl-spacing-xs);\n }\n .kol-form-field__label {\n order: 1;\n }\n .kol-form-field__label-text::after {\n color: var(--ecl-color-error);\n margin-left: var(--ecl-spacing-2xs);\n vertical-align: text-bottom;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__label__read-only {\n display: none;\n }\n .kol-form-field__hint {\n margin-top: calc(-4 * 1rem / var(--kolibri-root-font-size, 16));\n order: 2;\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-font-size-s);\n }\n .kol-form-field__msg {\n order: 4;\n }\n .kol-form-field__input {\n order: 3;\n }\n .kol-form-field__counter--exceeded {\n color: var(--ecl-color-error);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-input-container {\n background-color: var(--ecl-color-white);\n align-items: center;\n border: 1px solid var(--ecl-color-dark-80);\n }\n .kol-input-container:has(.kol-input:focus, .kol-select:focus, .kol-textarea:focus) {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: -2px;\n }\n .kol-input-container--error {\n border-color: var(--ecl-color-error);\n }\n .kol-input-container--disabled {\n opacity: 0.5;\n }\n .kol-input-container__smart-button {\n position: relative;\n z-index: 2;\n }\n .kol-input-container__smart-button .kol-button:focus {\n outline: 2px solid var(--ecl-color-primary);\n outline-offset: 0;\n }\n .kol-input-container__adornment {\n min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start > .kol-icon:first-child {\n margin-left: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--end > .kol-icon:last-child {\n margin-right: calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input {\n background-color: transparent;\n height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: 0 calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-input::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input::placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-input--disabled {\n opacity: 1;\n }\n .kol-input-container {\n padding: 0;\n gap: 0;\n grid-template-columns: auto max-content min-content;\n }\n .kol-input-container__adornment {\n position: absolute;\n top: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n bottom: calc(-1 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__adornment--start {\n left: 0;\n }\n .kol-input-container__adornment--end {\n right: 0;\n }\n .kol-input-container:has(.kol-input-container__adornment--start:not(:empty)) .kol-input {\n padding-left: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--start .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-left: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end:not(:empty)) .kol-input {\n padding-right: calc(48 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__icon + .kol-input-container__smart-button) .kol-input, .kol-input-container:has(.kol-input-container__adornment--end .kol-input-container__smart-button + .kol-input-container__icon) .kol-input {\n padding-right: calc(76 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-input-container__container {\n position: relative;\n z-index: 1;\n }\n .kol-textarea {\n background-color: transparent;\n min-height: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n padding: calc(2 * 1rem / var(--kolibri-root-font-size, 16)) calc(15 * 1rem / var(--kolibri-root-font-size, 16));\n border: none;\n }\n .kol-textarea::-moz-placeholder {\n color: var(--ecl-color-dark-60);\n }\n .kol-textarea::placeholder {\n color: var(--ecl-color-dark-60);\n }\n}";
1074
1076
 
1075
- var css_248z$K = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-toast-item .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-toast-item .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-toast-item .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-toast-item .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-toast-item .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-toast-item .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-toast-item .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-toast-item .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-toast-item .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-toast-item .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-toast-item .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-toast-item .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-toast-item .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-toast-item .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-msg .kol-alert__container {\n line-height: var(--ecl-line-height-s);\n }\n .kol-toast-item .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-toast-item .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-card .kol-alert__content {\n margin-left: calc(40 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-toast-item .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-toast-item .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-toast-item .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-toast-item .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-toast-item .kol-alert__closer .kol-button {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-toast-item .kol-alert__closer .kol-button:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert__closer .kol-button:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-toast-item .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item {\n background-color: #fff;\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item__alert {\n display: block;\n }\n}";
1077
+ var css_248z$K = "/* forward the rem function */\n@layer kol-theme-component {\n :host {\n top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n right: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n width: calc(440 * 1rem / var(--kolibri-root-font-size, 16));\n max-width: 100%;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-toast-item .kol-alert .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-toast-item .kol-alert .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-toast-item .kol-alert .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-toast-item .kol-alert .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-toast-item .kol-alert .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-toast-item .kol-alert .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-toast-item .kol-alert .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-toast-item .kol-alert .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-toast-item .kol-alert .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-toast-item .kol-alert .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-toast-item .kol-alert .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-toast-item .kol-alert .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-toast-item .kol-alert .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-toast-item .kol-alert .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-toast-item .kol-alert .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-toast-item .kol-alert .kol-close-button {\n align-self: self-start;\n }\n .kol-toast-item .kol-alert .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-toast-item .kol-alert .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-toast-item .kol-alert .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-toast-item .kol-alert {\n align-items: center;\n }\n .kol-toast-item .kol-alert--variant-msg {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-msg .kol-alert__icon {\n margin-right: var(--ecl-spacing-2xs);\n font-size: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n line-height: calc(20 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert--variant-msg .kol-alert__content {\n font-size: var(--ecl-font-size-s);\n line-height: var(--ecl-line-height-s);\n }\n .kol-toast-item .kol-alert--variant-card {\n background-color: var(--ecl-color-neutral-20);\n padding: var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-m) var(--ecl-spacing-s);\n border: solid 1px var(--ecl-color-neutral);\n border-inline-start: 4px solid var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert--variant-card .kol-alert__icon {\n margin-right: var(--ecl-spacing-xs);\n align-self: flex-start;\n font-size: calc(32 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item .kol-alert:not(:has(.kol-alert__heading)) {\n grid-template-areas: \"icon content close\";\n grid-template-rows: min-content;\n }\n .kol-toast-item .kol-alert--type-default {\n --alert-accent-color: var(--ecl-color-dark);\n }\n .kol-toast-item .kol-alert--type-error {\n --alert-accent-color: var(--ecl-color-error);\n }\n .kol-toast-item .kol-alert--type-info {\n --alert-accent-color: var(--ecl-color-info);\n }\n .kol-toast-item .kol-alert--type-success {\n --alert-accent-color: var(--ecl-color-success);\n }\n .kol-toast-item .kol-alert--type-warning {\n --alert-accent-color: var(--ecl-color-warning);\n }\n .kol-toast-item .kol-alert__icon {\n color: var(--alert-accent-color);\n }\n .kol-toast-item .kol-alert__heading {\n font-size: var(--ecl-font-size-l);\n line-height: var(--ecl-line-height-l);\n }\n .kol-toast-item .kol-alert__closer .kol-button {\n height: var(--a11y-min-size);\n }\n .kol-toast-item .kol-alert__closer .kol-button .kol-icon {\n font-size: calc(24 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-toast-item {\n background-color: #fff;\n display: block;\n margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n}";
1076
1078
 
1077
- var css_248z$J = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-link {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-link:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-link--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-link--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-link--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-link--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-link__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-link__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n}";
1079
+ var css_248z$J = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-button {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-button:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-button--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-button--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-button--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-button--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-button--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-button--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-button--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-button--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-button--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-button__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-button__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-button__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-button__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-button--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-button--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-button--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-button--normal {\n --kol-focus-outline-offset: -2px;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-down::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left {\n transform: rotate(-90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-left::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right {\n transform: rotate(90deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-right::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-chevron-up::before {\n content: \"\\ea11\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-eye::before {\n content: \"\\ea1f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link-external::before {\n content: \"\\ea1e\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-link::before {\n content: \"\\ea08\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-plus::before {\n content: \"\\ea46\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-minus::before {\n content: \"\\ea38\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-warning::before {\n content: \"\\ea5b\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-error::before {\n content: \"\\ea1a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-success::before {\n content: \"\\ea09\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-alert-info::before {\n content: \"\\ea2d\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-check::before {\n content: \"\\ea0a\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cross::before {\n content: \"\\ea0f\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-cogwheel::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-settings::before {\n content: \"\\ea4c\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-asc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc {\n transform: rotate(180deg);\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-desc::before {\n content: \"\\ea50\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-sort-neutral::before {\n content: \"\\ea51\";\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up {\n font-family: ecl-icons;\n }\n .kol-icon[class*=\" kolicon-\"].kolicon-up::before {\n content: \"\\ea58\";\n }\n .kol-link {\n --button-border-width: 2px;\n --button-focus-outline-color: var(--ecl-color-dark);\n --button-focus-outline-offset: -3px;\n --button-focus-outline-width: 1px;\n }\n .kol-link:focus {\n outline: var(--button-focus-outline-color) solid var(--button-focus-outline-width);\n outline-offset: var(--button-focus-outline-offset);\n }\n .kol-link--primary {\n --button-background-color: var(--ecl-color-primary);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--primary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--primary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n }\n .kol-link--secondary {\n --button-background-color: var(--ecl-color-white);\n --button-border-color: var(--ecl-color-primary);\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--secondary:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--secondary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-140);\n --button-border-color: var(--ecl-color-primary-140);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--tertiary {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--tertiary:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--tertiary:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--normal {\n --button-background-color: var(--ecl-color-white);\n --button-text-color: var(--ecl-color-dark);\n --button-border-color: transparent;\n --button-border-width: 1px;\n }\n .kol-link--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n }\n .kol-link--call-to-action {\n --button-background-color: var(--ecl-color-secondary);\n --button-border-color: var(--ecl-color-secondary);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link--call-to-action:not(:disabled):hover {\n --button-background-color: var(--ecl-color-secondary-120);\n --button-border-color: var(--ecl-color-secondary-120);\n }\n .kol-link--danger {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-error);\n --button-text-color: var(--ecl-color-white);\n }\n .kol-link--danger:focus {\n --button-focus-outline-color: var(--ecl-color-white);\n }\n .kol-link--danger:not(:disabled):hover {\n --button-background-color: var(--ecl-color-error);\n --button-border-color: var(--ecl-color-dark);\n }\n .kol-link--ghost {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-link--ghost:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-link--ghost:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-link__text {\n color: var(--button-text-color);\n background-color: var(--button-background-color);\n border-color: var(--button-border-color);\n border-style: solid;\n border-radius: 2px;\n min-width: var(--a11y-min-size);\n min-height: var(--a11y-min-size);\n padding: var(--ecl-spacing-xs) var(--ecl-spacing-m);\n border-width: var(--button-border-width);\n line-height: 1.2;\n }\n .kol-link__text .kol-span__container {\n gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-link__text .kol-span__label {\n word-break: keep-all;\n }\n .kol-link__text.kol-span--hide-label {\n padding: var(--ecl-spacing-xs);\n }\n .kol-close-button {\n align-self: self-start;\n }\n .kol-close-button .kol-link--normal {\n --button-background-color: transparent;\n --button-border-color: transparent;\n --button-border-width: 1px;\n --button-text-color: var(--ecl-color-primary);\n }\n .kol-close-button .kol-link--normal:focus {\n --button-focus-outline-color: var(--ecl-color-primary);\n --button-focus-outline-offset: 0;\n --button-focus-outline-width: 2px;\n }\n .kol-close-button .kol-link--normal:not(:disabled):hover {\n --button-background-color: var(--ecl-color-primary-20);\n --button-border-color: var(--ecl-color-dark-80);\n --button-text-color: var(--ecl-color-dark);\n }\n .kol-close-button .kol-link--normal {\n --kol-focus-outline-offset: -2px;\n }\n}";
1078
1080
 
1079
1081
  var css_248z$I = "/* forward the rem function */\n@layer kol-theme-component {\n .kol-tree-item {\n --indentation: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tree-item__children {\n display: flex;\n flex-direction: column;\n }\n .kol-tree-item__link {\n display: block;\n position: relative;\n }\n .kol-tree-item__link:hover, .kol-tree-item__link:focus-within {\n background-color: var(--ecl-color-neutral-60);\n }\n .kol-tree-item__link--active::before {\n background-color: var(--ecl-color-primary);\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: calc(4 * 1rem / var(--kolibri-root-font-size, 16));\n content: \"\";\n }\n .kol-tree-item__link .kol-link {\n padding-right: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n padding-left: max(var(--indentation) * var(--level));\n }\n .kol-tree-item__text {\n text-decoration: none;\n }\n}";
1080
1082
 
@@ -1259,6 +1261,16 @@ const ECL_EU = KoliBri.createTheme('ecl-eu', {
1259
1261
  'KOL-TREE-ITEM': css_248z$2,
1260
1262
  });
1261
1263
 
1264
+ exports.ButtonVariantsEnum = void 0;
1265
+ (function (ButtonVariantsEnum) {
1266
+ ButtonVariantsEnum["Primary"] = "primary";
1267
+ ButtonVariantsEnum["Secondary"] = "secondary";
1268
+ ButtonVariantsEnum["Tertiary"] = "tertiary";
1269
+ ButtonVariantsEnum["Danger"] = "danger";
1270
+ ButtonVariantsEnum["Ghost"] = "ghost";
1271
+ ButtonVariantsEnum["Normal"] = "normal";
1272
+ })(exports.ButtonVariantsEnum || (exports.ButtonVariantsEnum = {}));
1273
+
1262
1274
  exports.ECL_EC = ECL_EC;
1263
1275
  exports.ECL_EU = ECL_EU;
1264
1276
  //# sourceMappingURL=index.cjs.map