@public-ui/themes 2.0.15 → 2.1.0

package/dist/index.mjs

@@ -1,724 +1,966 @@
-import { KoliBri } from '@public-ui/schema';
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var commonjsGlobal="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},loglevel={exports:{}};!function(e){var t,o;t=commonjsGlobal,o=function(){var e=function(){},t="undefined",o=typeof window!==t&&typeof window.navigator!==t&&/Trident\/|MSIE /.test(window.navigator.userAgent),n=["trace","debug","info","warn","error"],l={},s=null;function r(e,t){var o=e[t];if("function"==typeof o.bind)return o.bind(e);try{return Function.prototype.bind.call(o,e)}catch(t){return function(){return Function.prototype.apply.apply(o,[e,arguments])}}}function i(){console.log&&(console.log.apply?console.log.apply(console,arguments):Function.prototype.apply.apply(console.log,[console,arguments])),console.trace&&console.trace();}function a(){for(var o=this.getLevel(),l=0;l<n.length;l++){var s=n[l];this[s]=l<o?e:this.methodFactory(s,o,this.name);}if(this.log=this.debug,typeof console===t&&o<this.levels.SILENT)return "No console available for logging"}function c(e){return function(){typeof console!==t&&(a.call(this),this[e].apply(this,arguments));}}function h(n,l,s){return function(n){return "debug"===n&&(n="log"),typeof console!==t&&("trace"===n&&o?i:void 0!==console[n]?r(console,n):void 0!==console.log?r(console,"log"):e)}(n)||c.apply(this,arguments)}function f(e,o){var r,i,c,f=this,y="loglevel";function u(){var e;if(typeof window!==t&&y){try{e=window.localStorage[y];}catch(e){}if(typeof e===t)try{var o=window.document.cookie,n=encodeURIComponent(y),l=o.indexOf(n+"=");-1!==l&&(e=/^([^;]+)/.exec(o.slice(l+n.length+1))[1]);}catch(e){}return void 0===f.levels[e]&&(e=void 0),e}}function m(e){var t=e;if("string"==typeof t&&void 0!==f.levels[t.toUpperCase()]&&(t=f.levels[t.toUpperCase()]),"number"==typeof t&&t>=0&&t<=f.levels.SILENT)return t;throw new TypeError("log.setLevel() called with invalid level: "+e)}"string"==typeof e?y+=":"+e:"symbol"==typeof e&&(y=void 0),f.name=e,f.levels={TRACE:0,DEBUG:1,INFO:2,WARN:3,ERROR:4,SILENT:5},f.methodFactory=o||h,f.getLevel=function(){return null!=c?c:null!=i?i:r},f.setLevel=function(e,o){return c=m(e),!1!==o&&function(e){var o=(n[e]||"silent").toUpperCase();if(typeof window!==t&&y){try{return void(window.localStorage[y]=o)}catch(e){}try{window.document.cookie=encodeURIComponent(y)+"="+o+";";}catch(e){}}}(c),a.call(f)},f.setDefaultLevel=function(e){i=m(e),u()||f.setLevel(e,!1);},f.resetLevel=function(){c=null,function(){if(typeof window!==t&&y){try{window.localStorage.removeItem(y);}catch(e){}try{window.document.cookie=encodeURIComponent(y)+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC";}catch(e){}}}(),a.call(f);},f.enableAll=function(e){f.setLevel(f.levels.TRACE,e);},f.disableAll=function(e){f.setLevel(f.levels.SILENT,e);},f.rebuild=function(){if(s!==f&&(r=m(s.getLevel())),a.call(f),s===f)for(var e in l)l[e].rebuild();},r=m(s?s.getLevel():"WARN");var p=u();null!=p&&(c=m(p)),a.call(f);}(s=new f).getLogger=function(e){if("symbol"!=typeof e&&"string"!=typeof e||""===e)throw new TypeError("You must supply a name when creating a logger.");var t=l[e];return t||(t=l[e]=new f(e,s.methodFactory)),t};var y=typeof window!==t?window.log:void 0;return s.noConflict=function(){return typeof window!==t&&window.log===s&&(window.log=y),s},s.getLoggers=function(){return l},s.default=s,s},e.exports?e.exports=o():t.log=o();}(loglevel);const H=(e,t)=>o=>o(e,t),P=(e,t)=>o=>o(e,t,{append:!1}),o={};const c=new Map,v=[],L=new Set,h=new Map,B=/--[^;]+/g,G=/:/;("object"!=typeof o.A11yUi||null===o.A11yUi)&&(o.A11yUi={CSS_STYLE_CACHE:h,HYDRATED_HISTORY:v,STYLING_TASK_QUEUE:c});const K=(e,t)=>{let o=t.match(B);if(Array.isArray(o)){o=o.filter((e=>G.test(e)));const t=document.createElement("style");t.innerHTML=`.${e} {${o.join(";")}}`,document.querySelector("head")?.appendChild(t);}L.add(e);},T=(e,t)=>"object"==typeof o.A11yUi&&null!==o.A11yUi&&"object"==typeof o.A11yUi.Themes&&null!==o.A11yUi.Themes&&"object"==typeof o.A11yUi.Themes[e]&&null!==o.A11yUi.Themes[e]&&"string"==typeof o.A11yUi.Themes[e][t]?o.A11yUi.Themes[e][t].replace(/\r?\n/g,""):"",q=e=>{for(const t of Array.from(e.childNodes)){if(!(t instanceof HTMLStyleElement&&"STYLE"===t.tagName))break;e.removeChild(t);}},F=(e,t)=>{try{const o=[];t.forEach((e=>{const t=new CSSStyleSheet;t.replaceSync(e),o.push(t);})),e.adoptedStyleSheets=o;}catch{t.reverse().forEach((t=>{const o=document.createElement("style");o.innerHTML=t,e.insertBefore(o,e.firstChild);}));}},Q=(e,t,o)=>{if(!1!==o){const n=[...Array.from(e.childNodes).filter((e=>e instanceof HTMLStyleElement&&"STYLE"===e.tagName))];let l;try{l=[...Array.from(e.adoptedStyleSheets)];}catch{l=[];}"before"===o?.mode?(n.reverse().forEach((e=>t.unshift(e.innerHTML))),l.reverse().forEach((e=>t.unshift(Array.from(e.cssRules).map((e=>e.cssText)).join(""))))):"after"===o?.mode&&(n.forEach((e=>t.push(e.innerHTML))),l.forEach((e=>t.push(Array.from(e.cssRules).map((e=>e.cssText)).join("")))));}},M=(e,t,o)=>{const n=t.name||"default";let l;try{if(null===e.shadowRoot)throw new Error("ShadowRoot is null");l=e.shadowRoot;}catch{l=e;}if(h.get(n)?.has(e.tagName))$(e,l,h.get(n)?.get(e.tagName),o);else {const s=T(n,"PROPERTIES"),r=T(n,"GLOBAL"),i=T(n,e.tagName);!1===L.has(n)&&K(n,r);const a=[s,r,i];Q(l,a,t.encroachCss),"debug"===t.loglevel&&console.log(e.tagName,a),!0===t.cache&&(!1===h.has(n)&&h.set(n,new Map),h.get(n)?.set(e.tagName,a)),$(e,l,a,o);}},$=(e,t,o,n)=>{q(t),F(t,o),e.style.display=n;},O=e=>{"debug"===e.loglevel&&v.push({timestamp:Date.now(),numberOfTasks:c.size});},W=e=>{c.delete(e);},R=(e,t)=>{W(e),O(t);},X=e=>{for(const t of e)if(c.has(t.target)&&t.target.classList.contains("hydrated")){const{styleDisplay:e,themeDetails:o}=c.get(t.target);M(t.target,o,e),R(t.target,o);}};let p;try{p=new MutationObserver(X);}catch{p=null;}class te{constructor(e,t,o){this.createTheme=(e,t)=>P(e,t),this.createTranslation=(e,t)=>H(e,t),this.Prefix=e,this.Key=Object.getOwnPropertyNames(t),this.Tag=Object.getOwnPropertyNames(o);}}
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+var KeyEnum,TagEnum;!function(e){e[e.error=0]="error",e[e.warning=1]="warning",e[e.info=2]="info",e[e.success=3]="success",e[e.message=4]="message",e[e.close=5]="close",e[e["form-description"]=6]="form-description",e[e.of=7]="of",e[e.characters=8]="characters",e[e.new=9]="new",e[e["no-entries"]=10]="no-entries",e[e["change-order"]=11]="change-order",e[e["action-running"]=12]="action-running",e[e["action-done"]=13]="action-done",e[e["page-first"]=14]="page-first",e[e["page-back"]=15]="page-back",e[e["page-next"]=16]="page-next",e[e["page-last"]=17]="page-last",e[e["entries-per-site"]=18]="entries-per-site",e[e["page-current"]=19]="page-current",e[e["page-selected"]=20]="page-selected",e[e["page-per-site"]=21]="page-per-site",e[e["logo-description"]=22]="logo-description",e[e["open-link-in-tab"]=23]="open-link-in-tab",e[e["kolibri-logo"]=24]="kolibri-logo";}(KeyEnum||(KeyEnum={})),function(e){e[e.abbr=0]="abbr",e[e.accordion=1]="accordion",e[e["accordion-group"]=2]="accordion-group",e[e.alert=3]="alert",e[e.avatar=4]="avatar",e[e.badge=5]="badge",e[e.breadcrumb=6]="breadcrumb",e[e.button=7]="button",e[e["button-group"]=8]="button-group",e[e["button-link"]=9]="button-link",e[e.card=10]="card",e[e.details=11]="details",e[e.form=12]="form",e[e.heading=13]="heading",e[e.icon=14]="icon",e[e.image=15]="image",e[e["indented-text"]=16]="indented-text",e[e["input-checkbox"]=17]="input-checkbox",e[e["input-color"]=18]="input-color",e[e["input-date"]=19]="input-date",e[e["input-email"]=20]="input-email",e[e["input-file"]=21]="input-file",e[e["input-number"]=22]="input-number",e[e["input-password"]=23]="input-password",e[e["input-radio"]=24]="input-radio",e[e["input-range"]=25]="input-range",e[e["input-text"]=26]="input-text",e[e.kolibri=27]="kolibri",e[e.link=28]="link",e[e["link-button"]=29]="link-button",e[e["link-group"]=30]="link-group",e[e.logo=31]="logo",e[e.modal=32]="modal",e[e.nav=33]="nav",e[e.pagination=34]="pagination",e[e.progress=35]="progress",e[e.select=36]="select",e[e.separator=37]="separator",e[e["skip-nav"]=38]="skip-nav",e[e.spin=39]="spin",e[e["split-button"]=40]="split-button",e[e.symbol=41]="symbol",e[e.table=42]="table",e[e["table-stateless"]=43]="table-stateless",e[e["table-stateful"]=44]="table-stateful",e[e.tabs=45]="tabs",e[e.textarea=46]="textarea",e[e["toast-container"]=47]="toast-container",e[e.toolbar=48]="toolbar",e[e.tooltip=49]="tooltip",e[e.tree=50]="tree",e[e["tree-item"]=51]="tree-item";}(TagEnum||(TagEnum={}));const KoliBri=new te("kol",KeyEnum,TagEnum);
 
 var css_248z$3F = "@layer kol-theme-global {\n  /* Design Tokens */\n  :host {\n    --border-radius: 5px;\n    --color-midnight: #004b76;\n    --color-ocean: #0077b6;\n    --color-sky: #99c9e2;\n    --color-ice: #cce4f0;\n    --color-crystal: #f0f7fb;\n    --color-crimson: #780f2d;\n    --color-red: #c0003c;\n    --color-pink: #f2ccd8;\n    --color-blossom: #fbf0f3;\n    --color-olive: #004d38;\n    --color-green: #005c45;\n    --color-jungle: #00854a;\n    --color-lime: #c1ca31;\n    --color-mint: #ccdeda;\n    --color-haze: #f0f5f4;\n    --color-fire: #7a2e1f;\n    --color-orange: #c44931;\n    --color-coral: #f5dcd7;\n    --color-peach: #fdf6f5;\n    --color-bronze: #6a4a06;\n    --color-yellow: #f9e03a;\n    --color-ivory: #fdf3b0;\n    --color-wine: #3f1d4a;\n    --color-purple: #6b4479;\n    --color-lavender: #dfd6de;\n    --color-black: #202020;\n    --color-metal: #454d4f;\n    --color-grey: #576164;\n    --color-granite: #bec5c9;\n    --color-silver: #e5e8e9;\n    --color-smoke: #f2f3f4;\n    --color-cloud: #f6f7f7;\n    --color-white: #ffffff;\n    --font-family: BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif;\n    --font-size: 16px;\n    --spacing: 0.25em;\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n    color: var(--color-black);\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-ocean);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: 1px solid var(--color-metal);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: 1px solid var(--color-metal);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-white);\n    color: var(--color-black);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5em;\n    padding: 0.5rem 0.75rem;\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.5em;\n  }\n}";
+var globalCss$4 = css_248z$3F;
 
 var css_248z$3E = "@layer kol-theme-component {\n  abbr {\n    border-bottom: dotted var(--color-black) 1px;\n    text-decoration: none !important;\n  }\n  abbr:focus {\n    border-radius: 5px;\n  }\n}";
+var abbrCss$2 = css_248z$3E;
 
 var css_248z$3D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-span-wc > span {\n    display: flex;\n    align-items: center;\n    text-align: left;\n  }\n  :host > div > .kol-heading-wc button {\n    border-radius: var(--border-radius);\n    min-height: 24px;\n    padding: 10px 8px;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc {\n    font-weight: 700;\n    font-size: 1.125rem;\n    line-height: 24px;\n    gap: 0.5rem;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc > span {\n    gap: 0.25rem;\n  }\n  :host > div > .kol-heading-wc button .kol-icon {\n    font-size: 1.5rem;\n  }\n  :host > div > .kol-heading-wc button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 400;\n    color: var(--color-midnight);\n  }\n  .kol-icon::part(icon)::before {\n    content: \"arrow_forward_ios\";\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  :host > div.open > .kol-heading-wc button .kol-icon::part(icon)::before {\n    transform: rotate(90deg);\n  }\n  :host > div {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  :host > div div[class=header],\n  :host > div[class*=open] div[class=content] {\n    margin: 0;\n  }\n  :host > div div[class=content] {\n    padding-left: 2.25em;\n    padding-bottom: 12px;\n    padding-right: 8px;\n  }\n  button:focus {\n    outline: none;\n  }\n  :host > .accordion:hover > kol-heading-wc {\n    background-color: var(--color-smoke);\n  }\n  :host > .accordion:focus-within > kol-heading-wc {\n    border-radius: var(--border-radius);\n    cursor: pointer;\n    outline-color: var(--color-ocean);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.2s linear;\n  }\n}";
+var accordionCss$5 = css_248z$3D;
 
 var css_248z$3C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading .heading-icon {\n    padding: 0;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0;\n  }\n  .msg {\n    background-color: transparent;\n    align-items: start;\n    border-width: 0 !important;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div {\n    display: grid;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg > .heading .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .heading-icon {\n    color: white;\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-heading-wc .headline {\n    font-size: 1rem;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close .icon, .card.error .close .icon, .card.info .close .icon, .card.success .close .icon, .card.warning .close .icon {\n    color: var(--color-white);\n  }\n  .card.default > .heading,\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error > .heading,\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info > .heading,\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success > .heading,\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning > .heading,\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .error .heading-icon,\n  .info .heading-icon,\n  .success .heading-icon,\n  .warning .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon),\n  .info .heading-icon::part(icon),\n  .success .heading-icon::part(icon),\n  .warning .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n}";
+var alertCss$5 = css_248z$3C;
 
 var css_248z$3B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var avatarCss$4 = css_248z$3B;
 
 var css_248z$3A = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n  }\n  :host > span {\n    border-radius: 0.3125rem;\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-ocean);\n    color: var(--color-white);\n  }\n  :host > span .kol-button-wc > button {\n    color: inherit;\n    font-size: 1rem;\n    border-top-right-radius: 0.3125rem;\n    border-bottom-right-radius: 0.3125rem;\n    padding: 2px;\n  }\n  :host > span .kol-span-wc {\n    padding: 0.25rem 0.75rem;\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: 0.5rem;\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: 0.25rem;\n  }\n}";
+var badgeCss$5 = css_248z$3A;
 
 var css_248z$3z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: 1.5rem;\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 400;\n    color: var(--color-grey);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon::part(icon)::before {\n    content: \"chevron_right\";\n  }\n  .kol-link::part(icon) {\n    font-size: 1.25rem;\n  }\n  ul li > :is(span, .kol-link) {\n    line-height: 1.25rem;\n  }\n  ul li:last-child > span {\n    color: var(--color-grey);\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var breadcrumbCss$5 = css_248z$3z;
 
 var css_248z$3y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-ocean);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: 2px;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button) {\n    font-size: 1.125em;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-midnight);\n    border-color: var(--color-midnight);\n    color: var(--color-white);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-midnight);\n    color: var(--color-midnight);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .success :is(a, button) > .kol-span-wc,\n  .success :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-green);\n    border-color: var(--color-green);\n    color: var(--color-white);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-white);\n    background-color: var(--color-white);\n    box-shadow: none;\n    color: var(--color-midnight);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .success :is(a, button):active > .kol-span-wc,\n  .success :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-ocean);\n    border-color: var(--color-ocean);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-white);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-crimson);\n    border-color: var(--color-crimson);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .success :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-white);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 8px;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** button with inline focus */\n  :is(a, button).focus-inline:focus > .kol-span-wc {\n    outline-offset: -2px;\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: block;\n  }\n}";
+var buttonCss$5 = css_248z$3y;
 
 var css_248z$3x = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n  }\n}";
+var buttonGroupCss$5 = css_248z$3x;
 
 var css_248z$3w = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-midnight);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: 2px solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n}";
+var buttonLinkCss$5 = css_248z$3w;
 
 var css_248z$3v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 0.25rem var(--color-grey);\n    border-radius: 0.25rem;\n  }\n  :host .kol-heading-wc {\n    line-height: 1.75rem;\n  }\n  :host div.header {\n    padding: 1rem 1rem 0.5rem 1rem;\n  }\n  :host div.content {\n    padding: 0.5rem 1rem 1rem;\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: 0.5rem 1rem;\n  }\n  :host > div > div.content + div.footer {\n    border-top: 2px solid var(--color-ice);\n  }\n}";
+var cardCss$5 = css_248z$3v;
 
 var css_248z$3u = "@layer kol-theme-component {\n  details > summary {\n    min-height: 2.75rem;\n    display: flex;\n    border-radius: var(--border-radius);\n    font-family: var(--font-family);\n    color: var(--color-midnight);\n    gap: 0.25rem;\n  }\n  details > summary > span {\n    border: none;\n  }\n  details > summary > span:hover {\n    box-shadow: 0 3px var(--color-ocean);\n  }\n  details .kol-indented-text-wc {\n    margin: 0.25em 0 0 0.65em;\n  }\n  details .kol-icon {\n    font-size: 1rem;\n  }\n  details .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 400;\n    color: var(--color-midnight);\n  }\n  details .kol-icon::part(icon):before {\n    content: \"chevron_right\";\n  }\n}";
+var detailsCss$4 = css_248z$3u;
 
 var css_248z$3t = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    margin: 0;\n    padding: 0;\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: 1.5rem;\n    line-height: 1.75rem;\n  }\n  .headline-h2 {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .headline-h3 {\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n  }\n}";
+var headingCss$5 = css_248z$3t;
 
 var css_248z$3s = "@layer kol-theme-component {\n  @font-face {\n    font-family: \"Material Symbols Outlined\";\n    font-style: normal;\n    font-weight: 100 700;\n    font-display: block;\n    src: url(\"./material-symbols-outlined.woff2\") format(\"woff2\");\n  }\n  :host > i.outlined {\n    font-family: \"Material Symbols Outlined\";\n  }\n  @font-face {\n    font-family: \"Material Symbols Rounded\";\n    font-style: normal;\n    font-weight: 100 700;\n    font-display: block;\n    src: url(\"./material-symbols-rounded.woff2\") format(\"woff2\");\n  }\n  :host > i.rounded {\n    font-family: \"Material Symbols Rounded\";\n  }\n  @font-face {\n    font-family: \"Material Symbols Sharp\";\n    font-style: normal;\n    font-weight: 100 700;\n    font-display: block;\n    src: url(\"./material-symbols-sharp.woff2\") format(\"woff2\");\n  }\n  :host > i.sharp {\n    font-family: \"Material Symbols Sharp\";\n  }\n  :host {\n    display: flex;\n    place-items: center;\n    width: 1em;\n    height: 1em;\n  }\n  :host > i::before {\n    display: block;\n  }\n  :host > i {\n    width: 1em;\n    height: 1em;\n    font-family: \"Material Symbols Rounded\";\n    font-weight: normal;\n    font-style: normal;\n    font-size: 24px;\n    line-height: 1;\n    letter-spacing: normal;\n    text-transform: none;\n    display: inline-block;\n    white-space: nowrap;\n    word-wrap: normal;\n    direction: ltr;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    text-rendering: optimizeLegibility;\n    font-feature-settings: \"liga\";\n    font-variation-settings: \"FILL\" 1;\n  }\n  :host > i.transition {\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n  }\n  :host > i.fill {\n    font-variation-settings: \"FILL\" 1;\n  }\n  :host > i.unfill {\n    font-variation-settings: \"FILL\" 0;\n  }\n  :host > i.rotate-90 {\n    transform: rotate(90deg);\n  }\n  :host > i.rotate-180 {\n    transform: rotate(180deg);\n  }\n  :host > i.rotate-270 {\n    transform: rotate(270deg);\n  }\n  /* https://github.com/google/material-design-icons/blob/master/variablefont/MaterialSymbolsOutlined%5BFILL%2CGRAD%2Copsz%2Cwght%5D.codepoints */\n  :host > i.\\31 0k:before {\n    content: \"10k\";\n  }\n  :host > i.\\31 0mp:before {\n    content: \"10mp\";\n  }\n  :host > i.\\31 1mp:before {\n    content: \"11mp\";\n  }\n  :host > i.\\31 23:before {\n    content: \"123\";\n  }\n  :host > i.\\31 2mp:before {\n    content: \"12mp\";\n  }\n  :host > i.\\31 3mp:before {\n    content: \"13mp\";\n  }\n  :host > i.\\31 4mp:before {\n    content: \"14mp\";\n  }\n  :host > i.\\31 5mp:before {\n    content: \"15mp\";\n  }\n  :host > i.\\31 6mp:before {\n    content: \"16mp\";\n  }\n  :host > i.\\31 7mp:before {\n    content: \"17mp\";\n  }\n  :host > i.\\31 8_up_rating:before {\n    content: \"18_up_rating\";\n  }\n  :host > i.\\31 8mp:before {\n    content: \"18mp\";\n  }\n  :host > i.\\31 9mp:before {\n    content: \"19mp\";\n  }\n  :host > i.\\31 k:before {\n    content: \"1k\";\n  }\n  :host > i.\\31 k_plus:before {\n    content: \"1k_plus\";\n  }\n  :host > i.\\31 x_mobiledata:before {\n    content: \"1x_mobiledata\";\n  }\n  :host > i.\\31 x_mobiledata_badge:before {\n    content: \"1x_mobiledata_badge\";\n  }\n  :host > i.\\32 0mp:before {\n    content: \"20mp\";\n  }\n  :host > i.\\32 1mp:before {\n    content: \"21mp\";\n  }\n  :host > i.\\32 2mp:before {\n    content: \"22mp\";\n  }\n  :host > i.\\32 3mp:before {\n    content: \"23mp\";\n  }\n  :host > i.\\32 4mp:before {\n    content: \"24mp\";\n  }\n  :host > i.\\32 d:before {\n    content: \"2d\";\n  }\n  :host > i.\\32 k:before {\n    content: \"2k\";\n  }\n  :host > i.\\32 k_plus:before {\n    content: \"2k_plus\";\n  }\n  :host > i.\\32 mp:before {\n    content: \"2mp\";\n  }\n  :host > i.\\33 0fps:before {\n    content: \"30fps\";\n  }\n  :host > i.\\33 0fps_select:before {\n    content: \"30fps_select\";\n  }\n  :host > i.\\33 60:before {\n    content: \"360\";\n  }\n  :host > i.\\33 d_rotation:before {\n    content: \"3d_rotation\";\n  }\n  :host > i.\\33 g_mobiledata:before {\n    content: \"3g_mobiledata\";\n  }\n  :host > i.\\33 g_mobiledata_badge:before {\n    content: \"3g_mobiledata_badge\";\n  }\n  :host > i.\\33 k:before {\n    content: \"3k\";\n  }\n  :host > i.\\33 k_plus:before {\n    content: \"3k_plus\";\n  }\n  :host > i.\\33 mp:before {\n    content: \"3mp\";\n  }\n  :host > i.\\33 p:before {\n    content: \"3p\";\n  }\n  :host > i.\\34 g_mobiledata:before {\n    content: \"4g_mobiledata\";\n  }\n  :host > i.\\34 g_mobiledata_badge:before {\n    content: \"4g_mobiledata_badge\";\n  }\n  :host > i.\\34 g_plus_mobiledata:before {\n    content: \"4g_plus_mobiledata\";\n  }\n  :host > i.\\34 k:before {\n    content: \"4k\";\n  }\n  :host > i.\\34 k_plus:before {\n    content: \"4k_plus\";\n  }\n  :host > i.\\34 mp:before {\n    content: \"4mp\";\n  }\n  :host > i.\\35 0mp:before {\n    content: \"50mp\";\n  }\n  :host > i.\\35 g:before {\n    content: \"5g\";\n  }\n  :host > i.\\35 g_mobiledata_badge:before {\n    content: \"5g_mobiledata_badge\";\n  }\n  :host > i.\\35 k:before {\n    content: \"5k\";\n  }\n  :host > i.\\35 k_plus:before {\n    content: \"5k_plus\";\n  }\n  :host > i.\\35 mp:before {\n    content: \"5mp\";\n  }\n  :host > i.\\36 0fps:before {\n    content: \"60fps\";\n  }\n  :host > i.\\36 0fps_select:before {\n    content: \"60fps_select\";\n  }\n  :host > i.\\36 _ft_apart:before {\n    content: \"6_ft_apart\";\n  }\n  :host > i.\\36 k:before {\n    content: \"6k\";\n  }\n  :host > i.\\36 k_plus:before {\n    content: \"6k_plus\";\n  }\n  :host > i.\\36 mp:before {\n    content: \"6mp\";\n  }\n  :host > i.\\37 k:before {\n    content: \"7k\";\n  }\n  :host > i.\\37 k_plus:before {\n    content: \"7k_plus\";\n  }\n  :host > i.\\37 mp:before {\n    content: \"7mp\";\n  }\n  :host > i.\\38 k:before {\n    content: \"8k\";\n  }\n  :host > i.\\38 k_plus:before {\n    content: \"8k_plus\";\n  }\n  :host > i.\\38 mp:before {\n    content: \"8mp\";\n  }\n  :host > i.\\39 k:before {\n    content: \"9k\";\n  }\n  :host > i.\\39 k_plus:before {\n    content: \"39k_plus\";\n  }\n  :host > i.\\39 mp:before {\n    content: \"9mp\";\n  }\n  :host > i.abc:before {\n    content: \"abc\";\n  }\n  :host > i.ac_unit:before {\n    content: \"ac_unit\";\n  }\n  :host > i.access_alarm:before {\n    content: \"access_alarm\";\n  }\n  :host > i.access_alarms:before {\n    content: \"access_alarms\";\n  }\n  :host > i.access_time:before {\n    content: \"access_time\";\n  }\n  :host > i.access_time_filled:before {\n    content: \"access_time_filled\";\n  }\n  :host > i.accessibility:before {\n    content: \"accessibility\";\n  }\n  :host > i.accessibility_new:before {\n    content: \"accessibility_new\";\n  }\n  :host > i.accessible:before {\n    content: \"accessible\";\n  }\n  :host > i.accessible_forward:before {\n    content: \"accessible_forward\";\n  }\n  :host > i.account_balance:before {\n    content: \"account_balance\";\n  }\n  :host > i.account_balance_wallet:before {\n    content: \"account_balance_wallet\";\n  }\n  :host > i.account_box:before {\n    content: \"account_box\";\n  }\n  :host > i.account_child:before {\n    content: \"account_child\";\n  }\n  :host > i.account_child_invert:before {\n    content: \"account_child_invert\";\n  }\n  :host > i.account_circle:before {\n    content: \"account_circle\";\n  }\n  :host > i.account_circle_filled:before {\n    content: \"account_circle_filled\";\n  }\n  :host > i.account_circle_off:before {\n    content: \"account_circle_off\";\n  }\n  :host > i.account_tree:before {\n    content: \"account_tree\";\n  }\n  :host > i.action_key:before {\n    content: \"action_key\";\n  }\n  :host > i.activity_zone:before {\n    content: \"activity_zone\";\n  }\n  :host > i.acute:before {\n    content: \"acute\";\n  }\n  :host > i.ad:before {\n    content: \"ad\";\n  }\n  :host > i.ad_group:before {\n    content: \"ad_group\";\n  }\n  :host > i.ad_group_off:before {\n    content: \"ad_group_off\";\n  }\n  :host > i.ad_off:before {\n    content: \"ad_off\";\n  }\n  :host > i.ad_units:before {\n    content: \"ad_units\";\n  }\n  :host > i.adb:before {\n    content: \"adb\";\n  }\n  :host > i.add:before {\n    content: \"add\";\n  }\n  :host > i.add_a_photo:before {\n    content: \"add_a_photo\";\n  }\n  :host > i.add_ad:before {\n    content: \"add_ad\";\n  }\n  :host > i.add_alarm:before {\n    content: \"add_alarm\";\n  }\n  :host > i.add_alert:before {\n    content: \"add_alert\";\n  }\n  :host > i.add_box:before {\n    content: \"add_box\";\n  }\n  :host > i.add_business:before {\n    content: \"add_business\";\n  }\n  :host > i.add_call:before {\n    content: \"add_call\";\n  }\n  :host > i.add_card:before {\n    content: \"add_card\";\n  }\n  :host > i.add_chart:before {\n    content: \"add_chart\";\n  }\n  :host > i.add_circle:before {\n    content: \"add_circle\";\n  }\n  :host > i.add_circle_outline:before {\n    content: \"add_circle_outline\";\n  }\n  :host > i.add_comment:before {\n    content: \"add_comment\";\n  }\n  :host > i.add_home:before {\n    content: \"add_home\";\n  }\n  :host > i.add_home_work:before {\n    content: \"add_home_work\";\n  }\n  :host > i.add_ic_call:before {\n    content: \"add_ic_call\";\n  }\n  :host > i.add_link:before {\n    content: \"add_link\";\n  }\n  :host > i.add_location:before {\n    content: \"add_location\";\n  }\n  :host > i.add_location_alt:before {\n    content: \"add_location_alt\";\n  }\n  :host > i.add_moderator:before {\n    content: \"add_moderator\";\n  }\n  :host > i.add_notes:before {\n    content: \"add_notes\";\n  }\n  :host > i.add_photo_alternate:before {\n    content: \"add_photo_alternate\";\n  }\n  :host > i.add_reaction:before {\n    content: \"add_reaction\";\n  }\n  :host > i.add_road:before {\n    content: \"add_road\";\n  }\n  :host > i.add_shopping_cart:before {\n    content: \"add_shopping_cart\";\n  }\n  :host > i.add_task:before {\n    content: \"add_task\";\n  }\n  :host > i.add_to_drive:before {\n    content: \"add_to_drive\";\n  }\n  :host > i.add_to_home_screen:before {\n    content: \"add_to_home_screen\";\n  }\n  :host > i.add_to_photos:before {\n    content: \"add_to_photos\";\n  }\n  :host > i.add_to_queue:before {\n    content: \"add_to_queue\";\n  }\n  :host > i.addchart:before {\n    content: \"addchart\";\n  }\n  :host > i.adf_scanner:before {\n    content: \"adf_scanner\";\n  }\n  :host > i.adjust:before {\n    content: \"adjust\";\n  }\n  :host > i.admin_meds:before {\n    content: \"admin_meds\";\n  }\n  :host > i.admin_panel_settings:before {\n    content: \"admin_panel_settings\";\n  }\n  :host > i.ads_click:before {\n    content: \"ads_click\";\n  }\n  :host > i.agender:before {\n    content: \"agender\";\n  }\n  :host > i.agriculture:before {\n    content: \"agriculture\";\n  }\n  :host > i.air:before {\n    content: \"air\";\n  }\n  :host > i.air_freshener:before {\n    content: \"air_freshener\";\n  }\n  :host > i.air_purifier:before {\n    content: \"air_purifier\";\n  }\n  :host > i.air_purifier_gen:before {\n    content: \"air_purifier_gen\";\n  }\n  :host > i.airline_seat_flat:before {\n    content: \"airline_seat_flat\";\n  }\n  :host > i.airline_seat_flat_angled:before {\n    content: \"airline_seat_flat_angled\";\n  }\n  :host > i.airline_seat_individual_suite:before {\n    content: \"airline_seat_individual_suite\";\n  }\n  :host > i.airline_seat_legroom_extra:before {\n    content: \"airline_seat_legroom_extra\";\n  }\n  :host > i.airline_seat_legroom_normal:before {\n    content: \"airline_seat_legroom_normal\";\n  }\n  :host > i.airline_seat_legroom_reduced:before {\n    content: \"airline_seat_legroom_reduced\";\n  }\n  :host > i.airline_seat_recline_extra:before {\n    content: \"airline_seat_recline_extra\";\n  }\n  :host > i.airline_seat_recline_normal:before {\n    content: \"airline_seat_recline_normal\";\n  }\n  :host > i.airline_stops:before {\n    content: \"airline_stops\";\n  }\n  :host > i.airlines:before {\n    content: \"airlines\";\n  }\n  :host > i.airplane_ticket:before {\n    content: \"airplane_ticket\";\n  }\n  :host > i.airplanemode_active:before {\n    content: \"airplanemode_active\";\n  }\n  :host > i.airplanemode_inactive:before {\n    content: \"airplanemode_inactive\";\n  }\n  :host > i.airplay:before {\n    content: \"airplay\";\n  }\n  :host > i.airport_shuttle:before {\n    content: \"airport_shuttle\";\n  }\n  :host > i.airware:before {\n    content: \"airware\";\n  }\n  :host > i.airwave:before {\n    content: \"airwave\";\n  }\n  :host > i.alarm:before {\n    content: \"alarm\";\n  }\n  :host > i.alarm_add:before {\n    content: \"alarm_add\";\n  }\n  :host > i.alarm_off:before {\n    content: \"alarm_off\";\n  }\n  :host > i.alarm_on:before {\n    content: \"alarm_on\";\n  }\n  :host > i.alarm_smart_wake:before {\n    content: \"alarm_smart_wake\";\n  }\n  :host > i.album:before {\n    content: \"album\";\n  }\n  :host > i.align_center:before {\n    content: \"align_center\";\n  }\n  :host > i.align_end:before {\n    content: \"align_end\";\n  }\n  :host > i.align_flex_center:before {\n    content: \"align_flex_center\";\n  }\n  :host > i.align_flex_end:before {\n    content: \"align_flex_end\";\n  }\n  :host > i.align_flex_start:before {\n    content: \"align_flex_start\";\n  }\n  :host > i.align_horizontal_center:before {\n    content: \"align_horizontal_center\";\n  }\n  :host > i.align_horizontal_left:before {\n    content: \"align_horizontal_left\";\n  }\n  :host > i.align_horizontal_right:before {\n    content: \"align_horizontal_right\";\n  }\n  :host > i.align_items_stretch:before {\n    content: \"align_items_stretch\";\n  }\n  :host > i.align_justify_center:before {\n    content: \"align_justify_center\";\n  }\n  :host > i.align_justify_flex_end:before {\n    content: \"align_justify_flex_end\";\n  }\n  :host > i.align_justify_flex_start:before {\n    content: \"align_justify_flex_start\";\n  }\n  :host > i.align_justify_space_around:before {\n    content: \"align_justify_space_around\";\n  }\n  :host > i.align_justify_space_between:before {\n    content: \"align_justify_space_between\";\n  }\n  :host > i.align_justify_space_even:before {\n    content: \"align_justify_space_even\";\n  }\n  :host > i.align_justify_stretch:before {\n    content: \"align_justify_stretch\";\n  }\n  :host > i.align_self_stretch:before {\n    content: \"align_self_stretch\";\n  }\n  :host > i.align_space_around:before {\n    content: \"align_space_around\";\n  }\n  :host > i.align_space_between:before {\n    content: \"align_space_between\";\n  }\n  :host > i.align_space_even:before {\n    content: \"align_space_even\";\n  }\n  :host > i.align_start:before {\n    content: \"align_start\";\n  }\n  :host > i.align_stretch:before {\n    content: \"align_stretch\";\n  }\n  :host > i.align_vertical_bottom:before {\n    content: \"align_vertical_bottom\";\n  }\n  :host > i.align_vertical_center:before {\n    content: \"align_vertical_center\";\n  }\n  :host > i.align_vertical_top:before {\n    content: \"align_vertical_top\";\n  }\n  :host > i.all_inbox:before {\n    content: \"all_inbox\";\n  }\n  :host > i.all_inclusive:before {\n    content: \"all_inclusive\";\n  }\n  :host > i.all_match:before {\n    content: \"all_match\";\n  }\n  :host > i.all_out:before {\n    content: \"all_out\";\n  }\n  :host > i.allergies:before {\n    content: \"allergies\";\n  }\n  :host > i.allergy:before {\n    content: \"allergy\";\n  }\n  :host > i.alt_route:before {\n    content: \"alt_route\";\n  }\n  :host > i.alternate_email:before {\n    content: \"alternate_email\";\n  }\n  :host > i.altitude:before {\n    content: \"altitude\";\n  }\n  :host > i.ambient_screen:before {\n    content: \"ambient_screen\";\n  }\n  :host > i.ambulance:before {\n    content: \"ambulance\";\n  }\n  :host > i.amend:before {\n    content: \"amend\";\n  }\n  :host > i.amp_stories:before {\n    content: \"amp_stories\";\n  }\n  :host > i.analytics:before {\n    content: \"analytics\";\n  }\n  :host > i.anchor:before {\n    content: \"anchor\";\n  }\n  :host > i.android:before {\n    content: \"android\";\n  }\n  :host > i.animation:before {\n    content: \"animation\";\n  }\n  :host > i.announcement:before {\n    content: \"announcement\";\n  }\n  :host > i.aod:before {\n    content: \"aod\";\n  }\n  :host > i.aod_tablet:before {\n    content: \"aod_tablet\";\n  }\n  :host > i.aod_watch:before {\n    content: \"aod_watch\";\n  }\n  :host > i.apartment:before {\n    content: \"apartment\";\n  }\n  :host > i.api:before {\n    content: \"api\";\n  }\n  :host > i.apk_document:before {\n    content: \"apk_document\";\n  }\n  :host > i.apk_install:before {\n    content: \"apk_install\";\n  }\n  :host > i.app_badging:before {\n    content: \"app_badging\";\n  }\n  :host > i.app_blocking:before {\n    content: \"app_blocking\";\n  }\n  :host > i.app_promo:before {\n    content: \"app_promo\";\n  }\n  :host > i.app_registration:before {\n    content: \"app_registration\";\n  }\n  :host > i.app_settings_alt:before {\n    content: \"app_settings_alt\";\n  }\n  :host > i.app_shortcut:before {\n    content: \"app_shortcut\";\n  }\n  :host > i.apparel:before {\n    content: \"apparel\";\n  }\n  :host > i.approval:before {\n    content: \"approval\";\n  }\n  :host > i.approval_delegation:before {\n    content: \"approval_delegation\";\n  }\n  :host > i.apps:before {\n    content: \"apps\";\n  }\n  :host > i.apps_outage:before {\n    content: \"apps_outage\";\n  }\n  :host > i.aq:before {\n    content: \"aq\";\n  }\n  :host > i.aq_indoor:before {\n    content: \"aq_indoor\";\n  }\n  :host > i.ar_on_you:before {\n    content: \"ar_on_you\";\n  }\n  :host > i.ar_stickers:before {\n    content: \"ar_stickers\";\n  }\n  :host > i.architecture:before {\n    content: \"architecture\";\n  }\n  :host > i.archive:before {\n    content: \"archive\";\n  }\n  :host > i.area_chart:before {\n    content: \"area_chart\";\n  }\n  :host > i.arming_countdown:before {\n    content: \"arming_countdown\";\n  }\n  :host > i.arrow_and_edge:before {\n    content: \"arrow_and_edge\";\n  }\n  :host > i.arrow_back:before {\n    content: \"arrow_back\";\n  }\n  :host > i.arrow_back_ios:before {\n    content: \"arrow_back_ios\";\n  }\n  :host > i.arrow_back_ios_new:before {\n    content: \"arrow_back_ios_new\";\n  }\n  :host > i.arrow_circle_down:before {\n    content: \"arrow_circle_down\";\n  }\n  :host > i.arrow_circle_left:before {\n    content: \"arrow_circle_left\";\n  }\n  :host > i.arrow_circle_right:before {\n    content: \"arrow_circle_right\";\n  }\n  :host > i.arrow_circle_up:before {\n    content: \"arrow_circle_up\";\n  }\n  :host > i.arrow_downward:before {\n    content: \"arrow_downward\";\n  }\n  :host > i.arrow_downward_alt:before {\n    content: \"arrow_downward_alt\";\n  }\n  :host > i.arrow_drop_down:before {\n    content: \"arrow_drop_down\";\n  }\n  :host > i.arrow_drop_down_circle:before {\n    content: \"arrow_drop_down_circle\";\n  }\n  :host > i.arrow_drop_up:before {\n    content: \"arrow_drop_up\";\n  }\n  :host > i.arrow_forward:before {\n    content: \"arrow_forward\";\n  }\n  :host > i.arrow_forward_ios:before {\n    content: \"arrow_forward_ios\";\n  }\n  :host > i.arrow_insert:before {\n    content: \"arrow_insert\";\n  }\n  :host > i.arrow_left:before {\n    content: \"arrow_left\";\n  }\n  :host > i.arrow_left_alt:before {\n    content: \"arrow_left_alt\";\n  }\n  :host > i.arrow_or_edge:before {\n    content: \"arrow_or_edge\";\n  }\n  :host > i.arrow_outward:before {\n    content: \"arrow_outward\";\n  }\n  :host > i.arrow_range:before {\n    content: \"arrow_range\";\n  }\n  :host > i.arrow_right:before {\n    content: \"arrow_right\";\n  }\n  :host > i.arrow_right_alt:before {\n    content: \"arrow_right_alt\";\n  }\n  :host > i.arrow_selector_tool:before {\n    content: \"arrow_selector_tool\";\n  }\n  :host > i.arrow_split:before {\n    content: \"arrow_split\";\n  }\n  :host > i.arrow_top_left:before {\n    content: \"arrow_top_left\";\n  }\n  :host > i.arrow_top_right:before {\n    content: \"arrow_top_right\";\n  }\n  :host > i.arrow_upward:before {\n    content: \"arrow_upward\";\n  }\n  :host > i.arrow_upward_alt:before {\n    content: \"arrow_upward_alt\";\n  }\n  :host > i.arrows_more_down:before {\n    content: \"arrows_more_down\";\n  }\n  :host > i.arrows_more_up:before {\n    content: \"arrows_more_up\";\n  }\n  :host > i.arrows_outward:before {\n    content: \"arrows_outward\";\n  }\n  :host > i.art_track:before {\n    content: \"art_track\";\n  }\n  :host > i.article:before {\n    content: \"article\";\n  }\n  :host > i.article_shortcut:before {\n    content: \"article_shortcut\";\n  }\n  :host > i.artist:before {\n    content: \"artist\";\n  }\n  :host > i.aspect_ratio:before {\n    content: \"aspect_ratio\";\n  }\n  :host > i.assessment:before {\n    content: \"assessment\";\n  }\n  :host > i.assignment:before {\n    content: \"assignment\";\n  }\n  :host > i.assignment_add:before {\n    content: \"assignment_add\";\n  }\n  :host > i.assignment_ind:before {\n    content: \"assignment_ind\";\n  }\n  :host > i.assignment_late:before {\n    content: \"assignment_late\";\n  }\n  :host > i.assignment_return:before {\n    content: \"assignment_return\";\n  }\n  :host > i.assignment_returned:before {\n    content: \"assignment_returned\";\n  }\n  :host > i.assignment_turned_in:before {\n    content: \"assignment_turned_in\";\n  }\n  :host > i.assist_walker:before {\n    content: \"assist_walker\";\n  }\n  :host > i.assistant:before {\n    content: \"assistant\";\n  }\n  :host > i.assistant_device:before {\n    content: \"assistant_device\";\n  }\n  :host > i.assistant_direction:before {\n    content: \"assistant_direction\";\n  }\n  :host > i.assistant_navigation:before {\n    content: \"assistant_navigation\";\n  }\n  :host > i.assistant_on_hub:before {\n    content: \"assistant_on_hub\";\n  }\n  :host > i.assistant_photo:before {\n    content: \"assistant_photo\";\n  }\n  :host > i.assured_workload:before {\n    content: \"assured_workload\";\n  }\n  :host > i.asterisk:before {\n    content: \"asterisk\";\n  }\n  :host > i.astrophotography_auto:before {\n    content: \"astrophotography_auto\";\n  }\n  :host > i.astrophotography_off:before {\n    content: \"astrophotography_off\";\n  }\n  :host > i.atm:before {\n    content: \"atm\";\n  }\n  :host > i.atr:before {\n    content: \"atr\";\n  }\n  :host > i.attach_email:before {\n    content: \"attach_email\";\n  }\n  :host > i.attach_file:before {\n    content: \"attach_file\";\n  }\n  :host > i.attach_file_add:before {\n    content: \"attach_file_add\";\n  }\n  :host > i.attach_money:before {\n    content: \"attach_money\";\n  }\n  :host > i.attachment:before {\n    content: \"attachment\";\n  }\n  :host > i.attractions:before {\n    content: \"attractions\";\n  }\n  :host > i.attribution:before {\n    content: \"attribution\";\n  }\n  :host > i.audio_description:before {\n    content: \"audio_description\";\n  }\n  :host > i.audio_file:before {\n    content: \"audio_file\";\n  }\n  :host > i.audio_video_receiver:before {\n    content: \"audio_video_receiver\";\n  }\n  :host > i.audiotrack:before {\n    content: \"audiotrack\";\n  }\n  :host > i.auto_activity_zone:before {\n    content: \"auto_activity_zone\";\n  }\n  :host > i.auto_awesome:before {\n    content: \"auto_awesome\";\n  }\n  :host > i.auto_awesome_mosaic:before {\n    content: \"auto_awesome_mosaic\";\n  }\n  :host > i.auto_awesome_motion:before {\n    content: \"auto_awesome_motion\";\n  }\n  :host > i.auto_delete:before {\n    content: \"auto_delete\";\n  }\n  :host > i.auto_detect_voice:before {\n    content: \"auto_detect_voice\";\n  }\n  :host > i.auto_draw_solid:before {\n    content: \"auto_draw_solid\";\n  }\n  :host > i.auto_fix:before {\n    content: \"auto_fix\";\n  }\n  :host > i.auto_fix_high:before {\n    content: \"auto_fix_high\";\n  }\n  :host > i.auto_fix_normal:before {\n    content: \"auto_fix_normal\";\n  }\n  :host > i.auto_fix_off:before {\n    content: \"auto_fix_off\";\n  }\n  :host > i.auto_graph:before {\n    content: \"auto_graph\";\n  }\n  :host > i.auto_label:before {\n    content: \"auto_label\";\n  }\n  :host > i.auto_meeting_room:before {\n    content: \"auto_meeting_room\";\n  }\n  :host > i.auto_mode:before {\n    content: \"auto_mode\";\n  }\n  :host > i.auto_read_pause:before {\n    content: \"auto_read_pause\";\n  }\n  :host > i.auto_read_play:before {\n    content: \"auto_read_play\";\n  }\n  :host > i.auto_schedule:before {\n    content: \"auto_schedule\";\n  }\n  :host > i.auto_stories:before {\n    content: \"auto_stories\";\n  }\n  :host > i.auto_timer:before {\n    content: \"auto_timer\";\n  }\n  :host > i.auto_towing:before {\n    content: \"auto_towing\";\n  }\n  :host > i.auto_transmission:before {\n    content: \"auto_transmission\";\n  }\n  :host > i.auto_videocam:before {\n    content: \"auto_videocam\";\n  }\n  :host > i.autofps_select:before {\n    content: \"autofps_select\";\n  }\n  :host > i.autopause:before {\n    content: \"autopause\";\n  }\n  :host > i.autopay:before {\n    content: \"autopay\";\n  }\n  :host > i.autoplay:before {\n    content: \"autoplay\";\n  }\n  :host > i.autorenew:before {\n    content: \"autorenew\";\n  }\n  :host > i.autostop:before {\n    content: \"autostop\";\n  }\n  :host > i.av_timer:before {\n    content: \"av_timer\";\n  }\n  :host > i.avg_pace:before {\n    content: \"avg_pace\";\n  }\n  :host > i.avg_time:before {\n    content: \"avg_time\";\n  }\n  :host > i.award_star:before {\n    content: \"award_star\";\n  }\n  :host > i.azm:before {\n    content: \"azm\";\n  }\n  :host > i.baby_changing_station:before {\n    content: \"baby_changing_station\";\n  }\n  :host > i.back_hand:before {\n    content: \"back_hand\";\n  }\n  :host > i.back_to_tab:before {\n    content: \"back_to_tab\";\n  }\n  :host > i.background_dot_large:before {\n    content: \"background_dot_large\";\n  }\n  :host > i.background_dot_small:before {\n    content: \"background_dot_small\";\n  }\n  :host > i.background_grid_small:before {\n    content: \"background_grid_small\";\n  }\n  :host > i.background_replace:before {\n    content: \"background_replace\";\n  }\n  :host > i.backlight_high:before {\n    content: \"backlight_high\";\n  }\n  :host > i.backlight_high_off:before {\n    content: \"backlight_high_off\";\n  }\n  :host > i.backlight_low:before {\n    content: \"backlight_low\";\n  }\n  :host > i.backpack:before {\n    content: \"backpack\";\n  }\n  :host > i.backspace:before {\n    content: \"backspace\";\n  }\n  :host > i.backup:before {\n    content: \"backup\";\n  }\n  :host > i.backup_table:before {\n    content: \"backup_table\";\n  }\n  :host > i.badge:before {\n    content: \"badge\";\n  }\n  :host > i.badge_critical_battery:before {\n    content: \"badge_critical_battery\";\n  }\n  :host > i.bakery_dining:before {\n    content: \"bakery_dining\";\n  }\n  :host > i.balance:before {\n    content: \"balance\";\n  }\n  :host > i.balcony:before {\n    content: \"balcony\";\n  }\n  :host > i.ballot:before {\n    content: \"ballot\";\n  }\n  :host > i.bar_chart:before {\n    content: \"bar_chart\";\n  }\n  :host > i.bar_chart_4_bars:before {\n    content: \"bar_chart_4_bars\";\n  }\n  :host > i.barcode:before {\n    content: \"barcode\";\n  }\n  :host > i.barcode_reader:before {\n    content: \"barcode_reader\";\n  }\n  :host > i.barcode_scanner:before {\n    content: \"barcode_scanner\";\n  }\n  :host > i.barefoot:before {\n    content: \"barefoot\";\n  }\n  :host > i.batch_prediction:before {\n    content: \"batch_prediction\";\n  }\n  :host > i.bath_outdoor:before {\n    content: \"bath_outdoor\";\n  }\n  :host > i.bath_private:before {\n    content: \"bath_private\";\n  }\n  :host > i.bath_public_large:before {\n    content: \"bath_public_large\";\n  }\n  :host > i.bathroom:before {\n    content: \"bathroom\";\n  }\n  :host > i.bathtub:before {\n    content: \"bathtub\";\n  }\n  :host > i.battery_0_bar:before {\n    content: \"battery_0_bar\";\n  }\n  :host > i.battery_1_bar:before {\n    content: \"battery_1_bar\";\n  }\n  :host > i.battery_20:before {\n    content: \"battery_20\";\n  }\n  :host > i.battery_2_bar:before {\n    content: \"battery_2_bar\";\n  }\n  :host > i.battery_30:before {\n    content: \"battery_30\";\n  }\n  :host > i.battery_3_bar:before {\n    content: \"battery_3_bar\";\n  }\n  :host > i.battery_4_bar:before {\n    content: \"battery_4_bar\";\n  }\n  :host > i.battery_50:before {\n    content: \"battery_50\";\n  }\n  :host > i.battery_5_bar:before {\n    content: \"battery_5_bar\";\n  }\n  :host > i.battery_60:before {\n    content: \"battery_60\";\n  }\n  :host > i.battery_6_bar:before {\n    content: \"battery_6_bar\";\n  }\n  :host > i.battery_80:before {\n    content: \"battery_80\";\n  }\n  :host > i.battery_90:before {\n    content: \"battery_90\";\n  }\n  :host > i.battery_alert:before {\n    content: \"battery_alert\";\n  }\n  :host > i.battery_change:before {\n    content: \"battery_change\";\n  }\n  :host > i.battery_charging_20:before {\n    content: \"battery_charging_20\";\n  }\n  :host > i.battery_charging_30:before {\n    content: \"battery_charging_30\";\n  }\n  :host > i.battery_charging_50:before {\n    content: \"battery_charging_50\";\n  }\n  :host > i.battery_charging_60:before {\n    content: \"battery_charging_60\";\n  }\n  :host > i.battery_charging_80:before {\n    content: \"battery_charging_80\";\n  }\n  :host > i.battery_charging_90:before {\n    content: \"battery_charging_90\";\n  }\n  :host > i.battery_charging_full:before {\n    content: \"battery_charging_full\";\n  }\n  :host > i.battery_error:before {\n    content: \"battery_error\";\n  }\n  :host > i.battery_full:before {\n    content: \"battery_full\";\n  }\n  :host > i.battery_full_alt:before {\n    content: \"battery_full_alt\";\n  }\n  :host > i.battery_horiz_000:before {\n    content: \"battery_horiz_000\";\n  }\n  :host > i.battery_horiz_050:before {\n    content: \"battery_horiz_050\";\n  }\n  :host > i.battery_horiz_075:before {\n    content: \"battery_horiz_075\";\n  }\n  :host > i.battery_low:before {\n    content: \"battery_low\";\n  }\n  :host > i.battery_plus:before {\n    content: \"battery_plus\";\n  }\n  :host > i.battery_profile:before {\n    content: \"battery_profile\";\n  }\n  :host > i.battery_saver:before {\n    content: \"battery_saver\";\n  }\n  :host > i.battery_share:before {\n    content: \"battery_share\";\n  }\n  :host > i.battery_status_good:before {\n    content: \"battery_status_good\";\n  }\n  :host > i.battery_std:before {\n    content: \"battery_std\";\n  }\n  :host > i.battery_unknown:before {\n    content: \"battery_unknown\";\n  }\n  :host > i.battery_vert_005:before {\n    content: \"battery_vert_005\";\n  }\n  :host > i.battery_vert_020:before {\n    content: \"battery_vert_020\";\n  }\n  :host > i.battery_vert_050:before {\n    content: \"battery_vert_050\";\n  }\n  :host > i.battery_very_low:before {\n    content: \"battery_very_low\";\n  }\n  :host > i.beach_access:before {\n    content: \"beach_access\";\n  }\n  :host > i.bed:before {\n    content: \"bed\";\n  }\n  :host > i.bedroom_baby:before {\n    content: \"bedroom_baby\";\n  }\n  :host > i.bedroom_child:before {\n    content: \"bedroom_child\";\n  }\n  :host > i.bedroom_parent:before {\n    content: \"bedroom_parent\";\n  }\n  :host > i.bedtime:before {\n    content: \"bedtime\";\n  }\n  :host > i.bedtime_off:before {\n    content: \"bedtime_off\";\n  }\n  :host > i.beenhere:before {\n    content: \"beenhere\";\n  }\n  :host > i.bento:before {\n    content: \"bento\";\n  }\n  :host > i.bia:before {\n    content: \"bia\";\n  }\n  :host > i.bid_landscape:before {\n    content: \"bid_landscape\";\n  }\n  :host > i.bid_landscape_disabled:before {\n    content: \"bid_landscape_disabled\";\n  }\n  :host > i.bigtop_updates:before {\n    content: \"bigtop_updates\";\n  }\n  :host > i.bike_scooter:before {\n    content: \"bike_scooter\";\n  }\n  :host > i.biotech:before {\n    content: \"biotech\";\n  }\n  :host > i.blanket:before {\n    content: \"blanket\";\n  }\n  :host > i.blender:before {\n    content: \"blender\";\n  }\n  :host > i.blind:before {\n    content: \"blind\";\n  }\n  :host > i.blinds:before {\n    content: \"blinds\";\n  }\n  :host > i.blinds_closed:before {\n    content: \"blinds_closed\";\n  }\n  :host > i.block:before {\n    content: \"block\";\n  }\n  :host > i.blood_pressure:before {\n    content: \"blood_pressure\";\n  }\n  :host > i.bloodtype:before {\n    content: \"bloodtype\";\n  }\n  :host > i.bluetooth:before {\n    content: \"bluetooth\";\n  }\n  :host > i.bluetooth_audio:before {\n    content: \"bluetooth_audio\";\n  }\n  :host > i.bluetooth_connected:before {\n    content: \"bluetooth_connected\";\n  }\n  :host > i.bluetooth_disabled:before {\n    content: \"bluetooth_disabled\";\n  }\n  :host > i.bluetooth_drive:before {\n    content: \"bluetooth_drive\";\n  }\n  :host > i.bluetooth_searching:before {\n    content: \"bluetooth_searching\";\n  }\n  :host > i.blur_circular:before {\n    content: \"blur_circular\";\n  }\n  :host > i.blur_linear:before {\n    content: \"blur_linear\";\n  }\n  :host > i.blur_medium:before {\n    content: \"blur_medium\";\n  }\n  :host > i.blur_off:before {\n    content: \"blur_off\";\n  }\n  :host > i.blur_on:before {\n    content: \"blur_on\";\n  }\n  :host > i.blur_short:before {\n    content: \"blur_short\";\n  }\n  :host > i.body_fat:before {\n    content: \"body_fat\";\n  }\n  :host > i.body_system:before {\n    content: \"body_system\";\n  }\n  :host > i.bolt:before {\n    content: \"bolt\";\n  }\n  :host > i.bomb:before {\n    content: \"bomb\";\n  }\n  :host > i.book:before {\n    content: \"book\";\n  }\n  :host > i.book_2:before {\n    content: \"book_2\";\n  }\n  :host > i.book_3:before {\n    content: \"book_3\";\n  }\n  :host > i.book_4:before {\n    content: \"book_4\";\n  }\n  :host > i.book_5:before {\n    content: \"book_5\";\n  }\n  :host > i.book_online:before {\n    content: \"book_online\";\n  }\n  :host > i.bookmark:before {\n    content: \"bookmark\";\n  }\n  :host > i.bookmark_add:before {\n    content: \"bookmark_add\";\n  }\n  :host > i.bookmark_added:before {\n    content: \"bookmark_added\";\n  }\n  :host > i.bookmark_border:before {\n    content: \"bookmark_border\";\n  }\n  :host > i.bookmark_manager:before {\n    content: \"bookmark_manager\";\n  }\n  :host > i.bookmark_remove:before {\n    content: \"bookmark_remove\";\n  }\n  :host > i.bookmarks:before {\n    content: \"bookmarks\";\n  }\n  :host > i.border_all:before {\n    content: \"border_all\";\n  }\n  :host > i.border_bottom:before {\n    content: \"border_bottom\";\n  }\n  :host > i.border_clear:before {\n    content: \"border_clear\";\n  }\n  :host > i.border_color:before {\n    content: \"border_color\";\n  }\n  :host > i.border_horizontal:before {\n    content: \"border_horizontal\";\n  }\n  :host > i.border_inner:before {\n    content: \"border_inner\";\n  }\n  :host > i.border_left:before {\n    content: \"border_left\";\n  }\n  :host > i.border_outer:before {\n    content: \"border_outer\";\n  }\n  :host > i.border_right:before {\n    content: \"border_right\";\n  }\n  :host > i.border_style:before {\n    content: \"border_style\";\n  }\n  :host > i.border_top:before {\n    content: \"border_top\";\n  }\n  :host > i.border_vertical:before {\n    content: \"border_vertical\";\n  }\n  :host > i.bottom_app_bar:before {\n    content: \"bottom_app_bar\";\n  }\n  :host > i.bottom_drawer:before {\n    content: \"bottom_drawer\";\n  }\n  :host > i.bottom_navigation:before {\n    content: \"bottom_navigation\";\n  }\n  :host > i.bottom_panel_close:before {\n    content: \"bottom_panel_close\";\n  }\n  :host > i.bottom_panel_open:before {\n    content: \"bottom_panel_open\";\n  }\n  :host > i.bottom_right_click:before {\n    content: \"bottom_right_click\";\n  }\n  :host > i.bottom_sheets:before {\n    content: \"bottom_sheets\";\n  }\n  :host > i.box:before {\n    content: \"box\";\n  }\n  :host > i.box_add:before {\n    content: \"box_add\";\n  }\n  :host > i.box_edit:before {\n    content: \"box_edit\";\n  }\n  :host > i.boy:before {\n    content: \"boy\";\n  }\n  :host > i.brand_awareness:before {\n    content: \"brand_awareness\";\n  }\n  :host > i.brand_family:before {\n    content: \"brand_family\";\n  }\n  :host > i.branding_watermark:before {\n    content: \"branding_watermark\";\n  }\n  :host > i.breakfast_dining:before {\n    content: \"breakfast_dining\";\n  }\n  :host > i.breaking_news:before {\n    content: \"breaking_news\";\n  }\n  :host > i.breaking_news_alt_1:before {\n    content: \"breaking_news_alt_1\";\n  }\n  :host > i.breastfeeding:before {\n    content: \"breastfeeding\";\n  }\n  :host > i.brightness_1:before {\n    content: \"brightness_1\";\n  }\n  :host > i.brightness_2:before {\n    content: \"brightness_2\";\n  }\n  :host > i.brightness_3:before {\n    content: \"brightness_3\";\n  }\n  :host > i.brightness_4:before {\n    content: \"brightness_4\";\n  }\n  :host > i.brightness_5:before {\n    content: \"brightness_5\";\n  }\n  :host > i.brightness_6:before {\n    content: \"brightness_6\";\n  }\n  :host > i.brightness_7:before {\n    content: \"brightness_7\";\n  }\n  :host > i.brightness_alert:before {\n    content: \"brightness_alert\";\n  }\n  :host > i.brightness_auto:before {\n    content: \"brightness_auto\";\n  }\n  :host > i.brightness_empty:before {\n    content: \"brightness_empty\";\n  }\n  :host > i.brightness_high:before {\n    content: \"brightness_high\";\n  }\n  :host > i.brightness_low:before {\n    content: \"brightness_low\";\n  }\n  :host > i.brightness_medium:before {\n    content: \"brightness_medium\";\n  }\n  :host > i.bring_your_own_ip:before {\n    content: \"bring_your_own_ip\";\n  }\n  :host > i.broadcast_on_home:before {\n    content: \"broadcast_on_home\";\n  }\n  :host > i.broadcast_on_personal:before {\n    content: \"broadcast_on_personal\";\n  }\n  :host > i.broken_image:before {\n    content: \"broken_image\";\n  }\n  :host > i.browse:before {\n    content: \"browse\";\n  }\n  :host > i.browse_activity:before {\n    content: \"browse_activity\";\n  }\n  :host > i.browse_gallery:before {\n    content: \"browse_gallery\";\n  }\n  :host > i.browser_not_supported:before {\n    content: \"browser_not_supported\";\n  }\n  :host > i.browser_updated:before {\n    content: \"browser_updated\";\n  }\n  :host > i.brunch_dining:before {\n    content: \"brunch_dining\";\n  }\n  :host > i.brush:before {\n    content: \"brush\";\n  }\n  :host > i.bubble:before {\n    content: \"bubble\";\n  }\n  :host > i.bubble_chart:before {\n    content: \"bubble_chart\";\n  }\n  :host > i.bubbles:before {\n    content: \"bubbles\";\n  }\n  :host > i.bug_report:before {\n    content: \"bug_report\";\n  }\n  :host > i.build:before {\n    content: \"build\";\n  }\n  :host > i.build_circle:before {\n    content: \"build_circle\";\n  }\n  :host > i.bungalow:before {\n    content: \"bungalow\";\n  }\n  :host > i.burst_mode:before {\n    content: \"burst_mode\";\n  }\n  :host > i.bus_alert:before {\n    content: \"bus_alert\";\n  }\n  :host > i.business:before {\n    content: \"business\";\n  }\n  :host > i.business_center:before {\n    content: \"business_center\";\n  }\n  :host > i.business_chip:before {\n    content: \"business_chip\";\n  }\n  :host > i.business_messages:before {\n    content: \"business_messages\";\n  }\n  :host > i.buttons_alt:before {\n    content: \"buttons_alt\";\n  }\n  :host > i.cabin:before {\n    content: \"cabin\";\n  }\n  :host > i.cable:before {\n    content: \"cable\";\n  }\n  :host > i.cached:before {\n    content: \"cached\";\n  }\n  :host > i.cake:before {\n    content: \"cake\";\n  }\n  :host > i.cake_add:before {\n    content: \"cake_add\";\n  }\n  :host > i.calculate:before {\n    content: \"calculate\";\n  }\n  :host > i.calendar_add_on:before {\n    content: \"calendar_add_on\";\n  }\n  :host > i.calendar_apps_script:before {\n    content: \"calendar_apps_script\";\n  }\n  :host > i.calendar_clock:before {\n    content: \"calendar_clock\";\n  }\n  :host > i.calendar_month:before {\n    content: \"calendar_month\";\n  }\n  :host > i.calendar_today:before {\n    content: \"calendar_today\";\n  }\n  :host > i.calendar_view_day:before {\n    content: \"calendar_view_day\";\n  }\n  :host > i.calendar_view_month:before {\n    content: \"calendar_view_month\";\n  }\n  :host > i.calendar_view_week:before {\n    content: \"calendar_view_week\";\n  }\n  :host > i.call:before {\n    content: \"call\";\n  }\n  :host > i.call_end:before {\n    content: \"call_end\";\n  }\n  :host > i.call_end_alt:before {\n    content: \"call_end_alt\";\n  }\n  :host > i.call_log:before {\n    content: \"call_log\";\n  }\n  :host > i.call_made:before {\n    content: \"call_made\";\n  }\n  :host > i.call_merge:before {\n    content: \"call_merge\";\n  }\n  :host > i.call_missed:before {\n    content: \"call_missed\";\n  }\n  :host > i.call_missed_outgoing:before {\n    content: \"call_missed_outgoing\";\n  }\n  :host > i.call_quality:before {\n    content: \"call_quality\";\n  }\n  :host > i.call_received:before {\n    content: \"call_received\";\n  }\n  :host > i.call_split:before {\n    content: \"call_split\";\n  }\n  :host > i.call_to_action:before {\n    content: \"call_to_action\";\n  }\n  :host > i.camera:before {\n    content: \"camera\";\n  }\n  :host > i.camera_alt:before {\n    content: \"camera_alt\";\n  }\n  :host > i.camera_enhance:before {\n    content: \"camera_enhance\";\n  }\n  :host > i.camera_front:before {\n    content: \"camera_front\";\n  }\n  :host > i.camera_indoor:before {\n    content: \"camera_indoor\";\n  }\n  :host > i.camera_outdoor:before {\n    content: \"camera_outdoor\";\n  }\n  :host > i.camera_rear:before {\n    content: \"camera_rear\";\n  }\n  :host > i.camera_roll:before {\n    content: \"camera_roll\";\n  }\n  :host > i.camera_video:before {\n    content: \"camera_video\";\n  }\n  :host > i.cameraswitch:before {\n    content: \"cameraswitch\";\n  }\n  :host > i.campaign:before {\n    content: \"campaign\";\n  }\n  :host > i.camping:before {\n    content: \"camping\";\n  }\n  :host > i.cancel:before {\n    content: \"cancel\";\n  }\n  :host > i.cancel_presentation:before {\n    content: \"cancel_presentation\";\n  }\n  :host > i.cancel_schedule_send:before {\n    content: \"cancel_schedule_send\";\n  }\n  :host > i.candle:before {\n    content: \"candle\";\n  }\n  :host > i.candlestick_chart:before {\n    content: \"candlestick_chart\";\n  }\n  :host > i.captive_portal:before {\n    content: \"captive_portal\";\n  }\n  :host > i.capture:before {\n    content: \"capture\";\n  }\n  :host > i.car_crash:before {\n    content: \"car_crash\";\n  }\n  :host > i.car_rental:before {\n    content: \"car_rental\";\n  }\n  :host > i.car_repair:before {\n    content: \"car_repair\";\n  }\n  :host > i.car_tag:before {\n    content: \"car_tag\";\n  }\n  :host > i.card_giftcard:before {\n    content: \"card_giftcard\";\n  }\n  :host > i.card_membership:before {\n    content: \"card_membership\";\n  }\n  :host > i.card_travel:before {\n    content: \"card_travel\";\n  }\n  :host > i.cardiology:before {\n    content: \"cardiology\";\n  }\n  :host > i.cards:before {\n    content: \"cards\";\n  }\n  :host > i.carpenter:before {\n    content: \"carpenter\";\n  }\n  :host > i.carry_on_bag:before {\n    content: \"carry_on_bag\";\n  }\n  :host > i.carry_on_bag_checked:before {\n    content: \"carry_on_bag_checked\";\n  }\n  :host > i.carry_on_bag_inactive:before {\n    content: \"carry_on_bag_inactive\";\n  }\n  :host > i.carry_on_bag_question:before {\n    content: \"carry_on_bag_question\";\n  }\n  :host > i.cases:before {\n    content: \"cases\";\n  }\n  :host > i.casino:before {\n    content: \"casino\";\n  }\n  :host > i.cast:before {\n    content: \"cast\";\n  }\n  :host > i.cast_connected:before {\n    content: \"cast_connected\";\n  }\n  :host > i.cast_for_education:before {\n    content: \"cast_for_education\";\n  }\n  :host > i.cast_pause:before {\n    content: \"cast_pause\";\n  }\n  :host > i.cast_warning:before {\n    content: \"cast_warning\";\n  }\n  :host > i.castle:before {\n    content: \"castle\";\n  }\n  :host > i.category:before {\n    content: \"category\";\n  }\n  :host > i.celebration:before {\n    content: \"celebration\";\n  }\n  :host > i.cell_merge:before {\n    content: \"cell_merge\";\n  }\n  :host > i.cell_tower:before {\n    content: \"cell_tower\";\n  }\n  :host > i.cell_wifi:before {\n    content: \"cell_wifi\";\n  }\n  :host > i.center_focus_strong:before {\n    content: \"center_focus_strong\";\n  }\n  :host > i.center_focus_weak:before {\n    content: \"center_focus_weak\";\n  }\n  :host > i.chair:before {\n    content: \"chair\";\n  }\n  :host > i.chair_alt:before {\n    content: \"chair_alt\";\n  }\n  :host > i.chalet:before {\n    content: \"chalet\";\n  }\n  :host > i.change_circle:before {\n    content: \"change_circle\";\n  }\n  :host > i.change_history:before {\n    content: \"change_history\";\n  }\n  :host > i.charger:before {\n    content: \"charger\";\n  }\n  :host > i.charging_station:before {\n    content: \"charging_station\";\n  }\n  :host > i.chart_data:before {\n    content: \"chart_data\";\n  }\n  :host > i.chat:before {\n    content: \"chat\";\n  }\n  :host > i.chat_add_on:before {\n    content: \"chat_add_on\";\n  }\n  :host > i.chat_apps_script:before {\n    content: \"chat_apps_script\";\n  }\n  :host > i.chat_bubble:before {\n    content: \"chat_bubble\";\n  }\n  :host > i.chat_bubble_outline:before {\n    content: \"chat_bubble_outline\";\n  }\n  :host > i.chat_error:before {\n    content: \"chat_error\";\n  }\n  :host > i.chat_info:before {\n    content: \"chat_info\";\n  }\n  :host > i.chat_paste_go:before {\n    content: \"chat_paste_go\";\n  }\n  :host > i.check:before {\n    content: \"check\";\n  }\n  :host > i.check_box:before {\n    content: \"check_box\";\n  }\n  :host > i.check_box_outline_blank:before {\n    content: \"check_box_outline_blank\";\n  }\n  :host > i.check_circle:before {\n    content: \"check_circle\";\n  }\n  :host > i.check_circle_filled:before {\n    content: \"check_circle_filled\";\n  }\n  :host > i.check_circle_outline:before {\n    content: \"check_circle_outline\";\n  }\n  :host > i.check_in_out:before {\n    content: \"check_in_out\";\n  }\n  :host > i.check_indeterminate_small:before {\n    content: \"check_indeterminate_small\";\n  }\n  :host > i.check_small:before {\n    content: \"check_small\";\n  }\n  :host > i.checkbook:before {\n    content: \"checkbook\";\n  }\n  :host > i.checked_bag:before {\n    content: \"checked_bag\";\n  }\n  :host > i.checked_bag_question:before {\n    content: \"checked_bag_question\";\n  }\n  :host > i.checklist:before {\n    content: \"checklist\";\n  }\n  :host > i.checklist_rtl:before {\n    content: \"checklist_rtl\";\n  }\n  :host > i.checkroom:before {\n    content: \"checkroom\";\n  }\n  :host > i.cheer:before {\n    content: \"cheer\";\n  }\n  :host > i.chess:before {\n    content: \"chess\";\n  }\n  :host > i.chevron_left:before {\n    content: \"chevron_left\";\n  }\n  :host > i.chevron_right:before {\n    content: \"chevron_right\";\n  }\n  :host > i.child_care:before {\n    content: \"child_care\";\n  }\n  :host > i.child_friendly:before {\n    content: \"child_friendly\";\n  }\n  :host > i.chip_extraction:before {\n    content: \"chip_extraction\";\n  }\n  :host > i.chips:before {\n    content: \"chips\";\n  }\n  :host > i.chrome_reader_mode:before {\n    content: \"chrome_reader_mode\";\n  }\n  :host > i.chromecast_2:before {\n    content: \"chromecast_2\";\n  }\n  :host > i.chromecast_device:before {\n    content: \"chromecast_device\";\n  }\n  :host > i.chronic:before {\n    content: \"chronic\";\n  }\n  :host > i.church:before {\n    content: \"church\";\n  }\n  :host > i.cinematic_blur:before {\n    content: \"cinematic_blur\";\n  }\n  :host > i.circle:before {\n    content: \"circle\";\n  }\n  :host > i.circle_notifications:before {\n    content: \"circle_notifications\";\n  }\n  :host > i.circles:before {\n    content: \"circles\";\n  }\n  :host > i.circles_ext:before {\n    content: \"circles_ext\";\n  }\n  :host > i.clarify:before {\n    content: \"clarify\";\n  }\n  :host > i.class:before {\n    content: \"class\";\n  }\n  :host > i.clean_hands:before {\n    content: \"clean_hands\";\n  }\n  :host > i.cleaning:before {\n    content: \"cleaning\";\n  }\n  :host > i.cleaning_bucket:before {\n    content: \"cleaning_bucket\";\n  }\n  :host > i.cleaning_services:before {\n    content: \"cleaning_services\";\n  }\n  :host > i.clear:before {\n    content: \"clear\";\n  }\n  :host > i.clear_all:before {\n    content: \"clear_all\";\n  }\n  :host > i.clear_day:before {\n    content: \"clear_day\";\n  }\n  :host > i.clear_night:before {\n    content: \"clear_night\";\n  }\n  :host > i.climate_mini_split:before {\n    content: \"climate_mini_split\";\n  }\n  :host > i.clinical_notes:before {\n    content: \"clinical_notes\";\n  }\n  :host > i.clock_loader_10:before {\n    content: \"clock_loader_10\";\n  }\n  :host > i.clock_loader_20:before {\n    content: \"clock_loader_20\";\n  }\n  :host > i.clock_loader_40:before {\n    content: \"clock_loader_40\";\n  }\n  :host > i.clock_loader_60:before {\n    content: \"clock_loader_60\";\n  }\n  :host > i.clock_loader_80:before {\n    content: \"clock_loader_80\";\n  }\n  :host > i.clock_loader_90:before {\n    content: \"clock_loader_90\";\n  }\n  :host > i.close:before {\n    content: \"close\";\n  }\n  :host > i.close_fullscreen:before {\n    content: \"close_fullscreen\";\n  }\n  :host > i.close_small:before {\n    content: \"close_small\";\n  }\n  :host > i.closed_caption:before {\n    content: \"closed_caption\";\n  }\n  :host > i.closed_caption_disabled:before {\n    content: \"closed_caption_disabled\";\n  }\n  :host > i.closed_caption_off:before {\n    content: \"closed_caption_off\";\n  }\n  :host > i.cloud:before {\n    content: \"cloud\";\n  }\n  :host > i.cloud_circle:before {\n    content: \"cloud_circle\";\n  }\n  :host > i.cloud_done:before {\n    content: \"cloud_done\";\n  }\n  :host > i.cloud_download:before {\n    content: \"cloud_download\";\n  }\n  :host > i.cloud_off:before {\n    content: \"cloud_off\";\n  }\n  :host > i.cloud_queue:before {\n    content: \"cloud_queue\";\n  }\n  :host > i.cloud_sync:before {\n    content: \"cloud_sync\";\n  }\n  :host > i.cloud_upload:before {\n    content: \"cloud_upload\";\n  }\n  :host > i.cloudy:before {\n    content: \"cloudy\";\n  }\n  :host > i.cloudy_filled:before {\n    content: \"cloudy_filled\";\n  }\n  :host > i.cloudy_snowing:before {\n    content: \"cloudy_snowing\";\n  }\n  :host > i.co2:before {\n    content: \"co2\";\n  }\n  :host > i.co_present:before {\n    content: \"co_present\";\n  }\n  :host > i.code:before {\n    content: \"code\";\n  }\n  :host > i.code_blocks:before {\n    content: \"code_blocks\";\n  }\n  :host > i.code_off:before {\n    content: \"code_off\";\n  }\n  :host > i.coffee:before {\n    content: \"coffee\";\n  }\n  :host > i.coffee_maker:before {\n    content: \"coffee_maker\";\n  }\n  :host > i.cognition:before {\n    content: \"cognition\";\n  }\n  :host > i.collapse_all:before {\n    content: \"collapse_all\";\n  }\n  :host > i.collapse_content:before {\n    content: \"collapse_content\";\n  }\n  :host > i.collections:before {\n    content: \"collections\";\n  }\n  :host > i.collections_bookmark:before {\n    content: \"collections_bookmark\";\n  }\n  :host > i.color_lens:before {\n    content: \"color_lens\";\n  }\n  :host > i.colorize:before {\n    content: \"colorize\";\n  }\n  :host > i.colors:before {\n    content: \"colors\";\n  }\n  :host > i.comic_bubble:before {\n    content: \"comic_bubble\";\n  }\n  :host > i.comment:before {\n    content: \"comment\";\n  }\n  :host > i.comment_bank:before {\n    content: \"comment_bank\";\n  }\n  :host > i.comments_disabled:before {\n    content: \"comments_disabled\";\n  }\n  :host > i.commit:before {\n    content: \"commit\";\n  }\n  :host > i.communication:before {\n    content: \"communication\";\n  }\n  :host > i.communities:before {\n    content: \"communities\";\n  }\n  :host > i.communities_filled:before {\n    content: \"communities_filled\";\n  }\n  :host > i.commute:before {\n    content: \"commute\";\n  }\n  :host > i.compare:before {\n    content: \"compare\";\n  }\n  :host > i.compare_arrows:before {\n    content: \"compare_arrows\";\n  }\n  :host > i.compass_calibration:before {\n    content: \"compass_calibration\";\n  }\n  :host > i.component_exchange:before {\n    content: \"component_exchange\";\n  }\n  :host > i.compost:before {\n    content: \"compost\";\n  }\n  :host > i.compress:before {\n    content: \"compress\";\n  }\n  :host > i.computer:before {\n    content: \"computer\";\n  }\n  :host > i.concierge:before {\n    content: \"concierge\";\n  }\n  :host > i.conditions:before {\n    content: \"conditions\";\n  }\n  :host > i.confirmation_number:before {\n    content: \"confirmation_number\";\n  }\n  :host > i.congenital:before {\n    content: \"congenital\";\n  }\n  :host > i.connect_without_contact:before {\n    content: \"connect_without_contact\";\n  }\n  :host > i.connected_tv:before {\n    content: \"connected_tv\";\n  }\n  :host > i.connecting_airports:before {\n    content: \"connecting_airports\";\n  }\n  :host > i.construction:before {\n    content: \"construction\";\n  }\n  :host > i.contact_emergency:before {\n    content: \"contact_emergency\";\n  }\n  :host > i.contact_mail:before {\n    content: \"contact_mail\";\n  }\n  :host > i.contact_page:before {\n    content: \"contact_page\";\n  }\n  :host > i.contact_phone:before {\n    content: \"contact_phone\";\n  }\n  :host > i.contact_phone_filled:before {\n    content: \"contact_phone_filled\";\n  }\n  :host > i.contact_support:before {\n    content: \"contact_support\";\n  }\n  :host > i.contactless:before {\n    content: \"contactless\";\n  }\n  :host > i.contactless_off:before {\n    content: \"contactless_off\";\n  }\n  :host > i.contacts:before {\n    content: \"contacts\";\n  }\n  :host > i.contacts_product:before {\n    content: \"contacts_product\";\n  }\n  :host > i.content_copy:before {\n    content: \"content_copy\";\n  }\n  :host > i.content_cut:before {\n    content: \"content_cut\";\n  }\n  :host > i.content_paste:before {\n    content: \"content_paste\";\n  }\n  :host > i.content_paste_go:before {\n    content: \"content_paste_go\";\n  }\n  :host > i.content_paste_off:before {\n    content: \"content_paste_off\";\n  }\n  :host > i.content_paste_search:before {\n    content: \"content_paste_search\";\n  }\n  :host > i.contract:before {\n    content: \"contract\";\n  }\n  :host > i.contract_delete:before {\n    content: \"contract_delete\";\n  }\n  :host > i.contract_edit:before {\n    content: \"contract_edit\";\n  }\n  :host > i.contrast:before {\n    content: \"contrast\";\n  }\n  :host > i.contrast_rtl_off:before {\n    content: \"contrast_rtl_off\";\n  }\n  :host > i.control_camera:before {\n    content: \"control_camera\";\n  }\n  :host > i.control_point:before {\n    content: \"control_point\";\n  }\n  :host > i.control_point_duplicate:before {\n    content: \"control_point_duplicate\";\n  }\n  :host > i.controller_gen:before {\n    content: \"controller_gen\";\n  }\n  :host > i.conversion_path:before {\n    content: \"conversion_path\";\n  }\n  :host > i.conversion_path_off:before {\n    content: \"conversion_path_off\";\n  }\n  :host > i.conveyor_belt:before {\n    content: \"conveyor_belt\";\n  }\n  :host > i.cookie:before {\n    content: \"cookie\";\n  }\n  :host > i.cookie_off:before {\n    content: \"cookie_off\";\n  }\n  :host > i.cooking:before {\n    content: \"cooking\";\n  }\n  :host > i.cool_to_dry:before {\n    content: \"cool_to_dry\";\n  }\n  :host > i.copy_all:before {\n    content: \"copy_all\";\n  }\n  :host > i.copyright:before {\n    content: \"copyright\";\n  }\n  :host > i.coronavirus:before {\n    content: \"coronavirus\";\n  }\n  :host > i.corporate_fare:before {\n    content: \"corporate_fare\";\n  }\n  :host > i.cottage:before {\n    content: \"cottage\";\n  }\n  :host > i.counter_0:before {\n    content: \"counter_0\";\n  }\n  :host > i.counter_1:before {\n    content: \"counter_1\";\n  }\n  :host > i.counter_2:before {\n    content: \"counter_2\";\n  }\n  :host > i.counter_3:before {\n    content: \"counter_3\";\n  }\n  :host > i.counter_4:before {\n    content: \"counter_4\";\n  }\n  :host > i.counter_5:before {\n    content: \"counter_5\";\n  }\n  :host > i.counter_6:before {\n    content: \"counter_6\";\n  }\n  :host > i.counter_7:before {\n    content: \"counter_7\";\n  }\n  :host > i.counter_8:before {\n    content: \"counter_8\";\n  }\n  :host > i.counter_9:before {\n    content: \"counter_9\";\n  }\n  :host > i.countertops:before {\n    content: \"countertops\";\n  }\n  :host > i.create:before {\n    content: \"create\";\n  }\n  :host > i.create_new_folder:before {\n    content: \"create_new_folder\";\n  }\n  :host > i.credit_card:before {\n    content: \"credit_card\";\n  }\n  :host > i.credit_card_gear:before {\n    content: \"credit_card_gear\";\n  }\n  :host > i.credit_card_heart:before {\n    content: \"credit_card_heart\";\n  }\n  :host > i.credit_card_off:before {\n    content: \"credit_card_off\";\n  }\n  :host > i.credit_score:before {\n    content: \"credit_score\";\n  }\n  :host > i.crib:before {\n    content: \"crib\";\n  }\n  :host > i.crisis_alert:before {\n    content: \"crisis_alert\";\n  }\n  :host > i.crop:before {\n    content: \"crop\";\n  }\n  :host > i.crop_16_9:before {\n    content: \"crop_16_9\";\n  }\n  :host > i.crop_3_2:before {\n    content: \"crop_3_2\";\n  }\n  :host > i.crop_5_4:before {\n    content: \"crop_5_4\";\n  }\n  :host > i.crop_7_5:before {\n    content: \"crop_7_5\";\n  }\n  :host > i.crop_9_16:before {\n    content: \"crop_9_16\";\n  }\n  :host > i.crop_din:before {\n    content: \"crop_din\";\n  }\n  :host > i.crop_free:before {\n    content: \"crop_free\";\n  }\n  :host > i.crop_landscape:before {\n    content: \"crop_landscape\";\n  }\n  :host > i.crop_original:before {\n    content: \"crop_original\";\n  }\n  :host > i.crop_portrait:before {\n    content: \"crop_portrait\";\n  }\n  :host > i.crop_rotate:before {\n    content: \"crop_rotate\";\n  }\n  :host > i.crop_square:before {\n    content: \"crop_square\";\n  }\n  :host > i.crossword:before {\n    content: \"crossword\";\n  }\n  :host > i.crowdsource:before {\n    content: \"crowdsource\";\n  }\n  :host > i.cruelty_free:before {\n    content: \"cruelty_free\";\n  }\n  :host > i.css:before {\n    content: \"css\";\n  }\n  :host > i.csv:before {\n    content: \"csv\";\n  }\n  :host > i.currency_bitcoin:before {\n    content: \"currency_bitcoin\";\n  }\n  :host > i.currency_exchange:before {\n    content: \"currency_exchange\";\n  }\n  :host > i.currency_franc:before {\n    content: \"currency_franc\";\n  }\n  :host > i.currency_lira:before {\n    content: \"currency_lira\";\n  }\n  :host > i.currency_pound:before {\n    content: \"currency_pound\";\n  }\n  :host > i.currency_ruble:before {\n    content: \"currency_ruble\";\n  }\n  :host > i.currency_rupee:before {\n    content: \"currency_rupee\";\n  }\n  :host > i.currency_yen:before {\n    content: \"currency_yen\";\n  }\n  :host > i.currency_yuan:before {\n    content: \"currency_yuan\";\n  }\n  :host > i.curtains:before {\n    content: \"curtains\";\n  }\n  :host > i.curtains_closed:before {\n    content: \"curtains_closed\";\n  }\n  :host > i.custom_typography:before {\n    content: \"custom_typography\";\n  }\n  :host > i.cut:before {\n    content: \"cut\";\n  }\n  :host > i.cycle:before {\n    content: \"cycle\";\n  }\n  :host > i.cyclone:before {\n    content: \"cyclone\";\n  }\n  :host > i.dangerous:before {\n    content: \"dangerous\";\n  }\n  :host > i.dark_mode:before {\n    content: \"dark_mode\";\n  }\n  :host > i.dashboard:before {\n    content: \"dashboard\";\n  }\n  :host > i.dashboard_customize:before {\n    content: \"dashboard_customize\";\n  }\n  :host > i.data_alert:before {\n    content: \"data_alert\";\n  }\n  :host > i.data_array:before {\n    content: \"data_array\";\n  }\n  :host > i.data_check:before {\n    content: \"data_check\";\n  }\n  :host > i.data_exploration:before {\n    content: \"data_exploration\";\n  }\n  :host > i.data_info_alert:before {\n    content: \"data_info_alert\";\n  }\n  :host > i.data_loss_prevention:before {\n    content: \"data_loss_prevention\";\n  }\n  :host > i.data_object:before {\n    content: \"data_object\";\n  }\n  :host > i.data_saver_off:before {\n    content: \"data_saver_off\";\n  }\n  :host > i.data_saver_on:before {\n    content: \"data_saver_on\";\n  }\n  :host > i.data_table:before {\n    content: \"data_table\";\n  }\n  :host > i.data_thresholding:before {\n    content: \"data_thresholding\";\n  }\n  :host > i.data_usage:before {\n    content: \"data_usage\";\n  }\n  :host > i.database:before {\n    content: \"database\";\n  }\n  :host > i.dataset:before {\n    content: \"dataset\";\n  }\n  :host > i.dataset_linked:before {\n    content: \"dataset_linked\";\n  }\n  :host > i.date_range:before {\n    content: \"date_range\";\n  }\n  :host > i.deblur:before {\n    content: \"deblur\";\n  }\n  :host > i.deceased:before {\n    content: \"deceased\";\n  }\n  :host > i.decimal_decrease:before {\n    content: \"decimal_decrease\";\n  }\n  :host > i.decimal_increase:before {\n    content: \"decimal_increase\";\n  }\n  :host > i.deck:before {\n    content: \"deck\";\n  }\n  :host > i.dehaze:before {\n    content: \"dehaze\";\n  }\n  :host > i.delete:before {\n    content: \"delete\";\n  }\n  :host > i.delete_forever:before {\n    content: \"delete_forever\";\n  }\n  :host > i.delete_history:before {\n    content: \"delete_history\";\n  }\n  :host > i.delete_outline:before {\n    content: \"delete_outline\";\n  }\n  :host > i.delete_sweep:before {\n    content: \"delete_sweep\";\n  }\n  :host > i.demography:before {\n    content: \"demography\";\n  }\n  :host > i.density_large:before {\n    content: \"density_large\";\n  }\n  :host > i.density_medium:before {\n    content: \"density_medium\";\n  }\n  :host > i.density_small:before {\n    content: \"density_small\";\n  }\n  :host > i.dentistry:before {\n    content: \"dentistry\";\n  }\n  :host > i.departure_board:before {\n    content: \"departure_board\";\n  }\n  :host > i.deployed_code:before {\n    content: \"deployed_code\";\n  }\n  :host > i.deployed_code_account:before {\n    content: \"deployed_code_account\";\n  }\n  :host > i.deployed_code_alert:before {\n    content: \"deployed_code_alert\";\n  }\n  :host > i.deployed_code_history:before {\n    content: \"deployed_code_history\";\n  }\n  :host > i.deployed_code_update:before {\n    content: \"deployed_code_update\";\n  }\n  :host > i.dermatology:before {\n    content: \"dermatology\";\n  }\n  :host > i.description:before {\n    content: \"description\";\n  }\n  :host > i.deselect:before {\n    content: \"deselect\";\n  }\n  :host > i.design_services:before {\n    content: \"design_services\";\n  }\n  :host > i.desk:before {\n    content: \"desk\";\n  }\n  :host > i.deskphone:before {\n    content: \"deskphone\";\n  }\n  :host > i.desktop_access_disabled:before {\n    content: \"desktop_access_disabled\";\n  }\n  :host > i.desktop_mac:before {\n    content: \"desktop_mac\";\n  }\n  :host > i.desktop_windows:before {\n    content: \"desktop_windows\";\n  }\n  :host > i.destruction:before {\n    content: \"destruction\";\n  }\n  :host > i.details:before {\n    content: \"details\";\n  }\n  :host > i.detection_and_zone:before {\n    content: \"detection_and_zone\";\n  }\n  :host > i.detector:before {\n    content: \"detector\";\n  }\n  :host > i.detector_alarm:before {\n    content: \"detector_alarm\";\n  }\n  :host > i.detector_battery:before {\n    content: \"detector_battery\";\n  }\n  :host > i.detector_co:before {\n    content: \"detector_co\";\n  }\n  :host > i.detector_offline:before {\n    content: \"detector_offline\";\n  }\n  :host > i.detector_smoke:before {\n    content: \"detector_smoke\";\n  }\n  :host > i.detector_status:before {\n    content: \"detector_status\";\n  }\n  :host > i.developer_board:before {\n    content: \"developer_board\";\n  }\n  :host > i.developer_board_off:before {\n    content: \"developer_board_off\";\n  }\n  :host > i.developer_guide:before {\n    content: \"developer_guide\";\n  }\n  :host > i.developer_mode:before {\n    content: \"developer_mode\";\n  }\n  :host > i.developer_mode_tv:before {\n    content: \"developer_mode_tv\";\n  }\n  :host > i.device_hub:before {\n    content: \"device_hub\";\n  }\n  :host > i.device_reset:before {\n    content: \"device_reset\";\n  }\n  :host > i.device_thermostat:before {\n    content: \"device_thermostat\";\n  }\n  :host > i.device_unknown:before {\n    content: \"device_unknown\";\n  }\n  :host > i.devices:before {\n    content: \"devices\";\n  }\n  :host > i.devices_fold:before {\n    content: \"devices_fold\";\n  }\n  :host > i.devices_off:before {\n    content: \"devices_off\";\n  }\n  :host > i.devices_other:before {\n    content: \"devices_other\";\n  }\n  :host > i.devices_wearables:before {\n    content: \"devices_wearables\";\n  }\n  :host > i.dew_point:before {\n    content: \"dew_point\";\n  }\n  :host > i.diagnosis:before {\n    content: \"diagnosis\";\n  }\n  :host > i.dialer_sip:before {\n    content: \"dialer_sip\";\n  }\n  :host > i.dialogs:before {\n    content: \"dialogs\";\n  }\n  :host > i.dialpad:before {\n    content: \"dialpad\";\n  }\n  :host > i.diamond:before {\n    content: \"diamond\";\n  }\n  :host > i.dictionary:before {\n    content: \"dictionary\";\n  }\n  :host > i.difference:before {\n    content: \"difference\";\n  }\n  :host > i.digital_out_of_home:before {\n    content: \"digital_out_of_home\";\n  }\n  :host > i.digital_wellbeing:before {\n    content: \"digital_wellbeing\";\n  }\n  :host > i.dining:before {\n    content: \"dining\";\n  }\n  :host > i.dinner_dining:before {\n    content: \"dinner_dining\";\n  }\n  :host > i.directions:before {\n    content: \"directions\";\n  }\n  :host > i.directions_alt:before {\n    content: \"directions_alt\";\n  }\n  :host > i.directions_alt_off:before {\n    content: \"directions_alt_off\";\n  }\n  :host > i.directions_bike:before {\n    content: \"directions_bike\";\n  }\n  :host > i.directions_boat:before {\n    content: \"directions_boat\";\n  }\n  :host > i.directions_boat_filled:before {\n    content: \"directions_boat_filled\";\n  }\n  :host > i.directions_bus:before {\n    content: \"directions_bus\";\n  }\n  :host > i.directions_bus_filled:before {\n    content: \"directions_bus_filled\";\n  }\n  :host > i.directions_car:before {\n    content: \"directions_car\";\n  }\n  :host > i.directions_car_filled:before {\n    content: \"directions_car_filled\";\n  }\n  :host > i.directions_off:before {\n    content: \"directions_off\";\n  }\n  :host > i.directions_railway:before {\n    content: \"directions_railway\";\n  }\n  :host > i.directions_railway_filled:before {\n    content: \"directions_railway_filled\";\n  }\n  :host > i.directions_run:before {\n    content: \"directions_run\";\n  }\n  :host > i.directions_subway:before {\n    content: \"directions_subway\";\n  }\n  :host > i.directions_subway_filled:before {\n    content: \"directions_subway_filled\";\n  }\n  :host > i.directions_transit:before {\n    content: \"directions_transit\";\n  }\n  :host > i.directions_transit_filled:before {\n    content: \"directions_transit_filled\";\n  }\n  :host > i.directions_walk:before {\n    content: \"directions_walk\";\n  }\n  :host > i.directory_sync:before {\n    content: \"directory_sync\";\n  }\n  :host > i.dirty_lens:before {\n    content: \"dirty_lens\";\n  }\n  :host > i.disabled_by_default:before {\n    content: \"disabled_by_default\";\n  }\n  :host > i.disabled_visible:before {\n    content: \"disabled_visible\";\n  }\n  :host > i.disc_full:before {\n    content: \"disc_full\";\n  }\n  :host > i.discover_tune:before {\n    content: \"discover_tune\";\n  }\n  :host > i.dishwasher:before {\n    content: \"dishwasher\";\n  }\n  :host > i.dishwasher_gen:before {\n    content: \"dishwasher_gen\";\n  }\n  :host > i.display_external_input:before {\n    content: \"display_external_input\";\n  }\n  :host > i.display_settings:before {\n    content: \"display_settings\";\n  }\n  :host > i.distance:before {\n    content: \"distance\";\n  }\n  :host > i.diversity_1:before {\n    content: \"diversity_1\";\n  }\n  :host > i.diversity_2:before {\n    content: \"diversity_2\";\n  }\n  :host > i.diversity_3:before {\n    content: \"diversity_3\";\n  }\n  :host > i.diversity_4:before {\n    content: \"diversity_4\";\n  }\n  :host > i.dns:before {\n    content: \"dns\";\n  }\n  :host > i.do_disturb:before {\n    content: \"do_disturb\";\n  }\n  :host > i.do_disturb_alt:before {\n    content: \"do_disturb_alt\";\n  }\n  :host > i.do_disturb_off:before {\n    content: \"do_disturb_off\";\n  }\n  :host > i.do_disturb_on:before {\n    content: \"do_disturb_on\";\n  }\n  :host > i.do_not_disturb:before {\n    content: \"do_not_disturb\";\n  }\n  :host > i.do_not_disturb_alt:before {\n    content: \"do_not_disturb_alt\";\n  }\n  :host > i.do_not_disturb_off:before {\n    content: \"do_not_disturb_off\";\n  }\n  :host > i.do_not_disturb_on:before {\n    content: \"do_not_disturb_on\";\n  }\n  :host > i.do_not_disturb_on_total_silence:before {\n    content: \"do_not_disturb_on_total_silence\";\n  }\n  :host > i.do_not_step:before {\n    content: \"do_not_step\";\n  }\n  :host > i.do_not_touch:before {\n    content: \"do_not_touch\";\n  }\n  :host > i.dock:before {\n    content: \"dock\";\n  }\n  :host > i.dock_to_bottom:before {\n    content: \"dock_to_bottom\";\n  }\n  :host > i.dock_to_left:before {\n    content: \"dock_to_left\";\n  }\n  :host > i.dock_to_right:before {\n    content: \"dock_to_right\";\n  }\n  :host > i.docs_add_on:before {\n    content: \"docs_add_on\";\n  }\n  :host > i.docs_apps_script:before {\n    content: \"docs_apps_script\";\n  }\n  :host > i.document_scanner:before {\n    content: \"document_scanner\";\n  }\n  :host > i.domain:before {\n    content: \"domain\";\n  }\n  :host > i.domain_add:before {\n    content: \"domain_add\";\n  }\n  :host > i.domain_disabled:before {\n    content: \"domain_disabled\";\n  }\n  :host > i.domain_verification:before {\n    content: \"domain_verification\";\n  }\n  :host > i.domain_verification_off:before {\n    content: \"domain_verification_off\";\n  }\n  :host > i.domino_mask:before {\n    content: \"domino_mask\";\n  }\n  :host > i.done:before {\n    content: \"done\";\n  }\n  :host > i.done_all:before {\n    content: \"done_all\";\n  }\n  :host > i.done_outline:before {\n    content: \"done_outline\";\n  }\n  :host > i.donut_large:before {\n    content: \"donut_large\";\n  }\n  :host > i.donut_small:before {\n    content: \"donut_small\";\n  }\n  :host > i.door_back:before {\n    content: \"door_back\";\n  }\n  :host > i.door_front:before {\n    content: \"door_front\";\n  }\n  :host > i.door_open:before {\n    content: \"door_open\";\n  }\n  :host > i.door_sensor:before {\n    content: \"door_sensor\";\n  }\n  :host > i.door_sliding:before {\n    content: \"door_sliding\";\n  }\n  :host > i.doorbell:before {\n    content: \"doorbell\";\n  }\n  :host > i.doorbell_3p:before {\n    content: \"doorbell_3p\";\n  }\n  :host > i.doorbell_chime:before {\n    content: \"doorbell_chime\";\n  }\n  :host > i.double_arrow:before {\n    content: \"double_arrow\";\n  }\n  :host > i.downhill_skiing:before {\n    content: \"downhill_skiing\";\n  }\n  :host > i.download:before {\n    content: \"download\";\n  }\n  :host > i.download_2:before {\n    content: \"download_2\";\n  }\n  :host > i.download_done:before {\n    content: \"download_done\";\n  }\n  :host > i.download_for_offline:before {\n    content: \"download_for_offline\";\n  }\n  :host > i.downloading:before {\n    content: \"downloading\";\n  }\n  :host > i.draft:before {\n    content: \"draft\";\n  }\n  :host > i.draft_orders:before {\n    content: \"draft_orders\";\n  }\n  :host > i.drafts:before {\n    content: \"drafts\";\n  }\n  :host > i.drag_click:before {\n    content: \"drag_click\";\n  }\n  :host > i.drag_handle:before {\n    content: \"drag_handle\";\n  }\n  :host > i.drag_indicator:before {\n    content: \"drag_indicator\";\n  }\n  :host > i.drag_pan:before {\n    content: \"drag_pan\";\n  }\n  :host > i.draw:before {\n    content: \"draw\";\n  }\n  :host > i.draw_abstract:before {\n    content: \"draw_abstract\";\n  }\n  :host > i.draw_collage:before {\n    content: \"draw_collage\";\n  }\n  :host > i.drawing_recognition:before {\n    content: \"drawing_recognition\";\n  }\n  :host > i.dresser:before {\n    content: \"dresser\";\n  }\n  :host > i.drive_eta:before {\n    content: \"drive_eta\";\n  }\n  :host > i.drive_file_move:before {\n    content: \"drive_file_move\";\n  }\n  :host > i.drive_file_move_outline:before {\n    content: \"drive_file_move_outline\";\n  }\n  :host > i.drive_file_move_rtl:before {\n    content: \"drive_file_move_rtl\";\n  }\n  :host > i.drive_file_rename_outline:before {\n    content: \"drive_file_rename_outline\";\n  }\n  :host > i.drive_folder_upload:before {\n    content: \"drive_folder_upload\";\n  }\n  :host > i.drive_fusiontable:before {\n    content: \"drive_fusiontable\";\n  }\n  :host > i.dropdown:before {\n    content: \"dropdown\";\n  }\n  :host > i.dry:before {\n    content: \"dry\";\n  }\n  :host > i.dry_cleaning:before {\n    content: \"dry_cleaning\";\n  }\n  :host > i.dual_screen:before {\n    content: \"dual_screen\";\n  }\n  :host > i.duo:before {\n    content: \"duo\";\n  }\n  :host > i.dvr:before {\n    content: \"dvr\";\n  }\n  :host > i.dynamic_feed:before {\n    content: \"dynamic_feed\";\n  }\n  :host > i.dynamic_form:before {\n    content: \"dynamic_form\";\n  }\n  :host > i.e911_avatar:before {\n    content: \"e911_avatar\";\n  }\n  :host > i.e911_emergency:before {\n    content: \"e911_emergency\";\n  }\n  :host > i.e_mobiledata:before {\n    content: \"e_mobiledata\";\n  }\n  :host > i.e_mobiledata_badge:before {\n    content: \"e_mobiledata_badge\";\n  }\n  :host > i.earbuds:before {\n    content: \"earbuds\";\n  }\n  :host > i.earbuds_battery:before {\n    content: \"earbuds_battery\";\n  }\n  :host > i.early_on:before {\n    content: \"early_on\";\n  }\n  :host > i.earthquake:before {\n    content: \"earthquake\";\n  }\n  :host > i.east:before {\n    content: \"east\";\n  }\n  :host > i.ecg:before {\n    content: \"ecg\";\n  }\n  :host > i.ecg_heart:before {\n    content: \"ecg_heart\";\n  }\n  :host > i.eco:before {\n    content: \"eco\";\n  }\n  :host > i.eda:before {\n    content: \"eda\";\n  }\n  :host > i.edgesensor_high:before {\n    content: \"edgesensor_high\";\n  }\n  :host > i.edgesensor_low:before {\n    content: \"edgesensor_low\";\n  }\n  :host > i.edit:before {\n    content: \"edit\";\n  }\n  :host > i.edit_attributes:before {\n    content: \"edit_attributes\";\n  }\n  :host > i.edit_calendar:before {\n    content: \"edit_calendar\";\n  }\n  :host > i.edit_document:before {\n    content: \"edit_document\";\n  }\n  :host > i.edit_location:before {\n    content: \"edit_location\";\n  }\n  :host > i.edit_location_alt:before {\n    content: \"edit_location_alt\";\n  }\n  :host > i.edit_note:before {\n    content: \"edit_note\";\n  }\n  :host > i.edit_notifications:before {\n    content: \"edit_notifications\";\n  }\n  :host > i.edit_off:before {\n    content: \"edit_off\";\n  }\n  :host > i.edit_road:before {\n    content: \"edit_road\";\n  }\n  :host > i.edit_square:before {\n    content: \"edit_square\";\n  }\n  :host > i.editor_choice:before {\n    content: \"editor_choice\";\n  }\n  :host > i.egg:before {\n    content: \"egg\";\n  }\n  :host > i.egg_alt:before {\n    content: \"egg_alt\";\n  }\n  :host > i.eject:before {\n    content: \"eject\";\n  }\n  :host > i.elderly:before {\n    content: \"elderly\";\n  }\n  :host > i.elderly_woman:before {\n    content: \"elderly_woman\";\n  }\n  :host > i.electric_bike:before {\n    content: \"electric_bike\";\n  }\n  :host > i.electric_bolt:before {\n    content: \"electric_bolt\";\n  }\n  :host > i.electric_car:before {\n    content: \"electric_car\";\n  }\n  :host > i.electric_meter:before {\n    content: \"electric_meter\";\n  }\n  :host > i.electric_moped:before {\n    content: \"electric_moped\";\n  }\n  :host > i.electric_rickshaw:before {\n    content: \"electric_rickshaw\";\n  }\n  :host > i.electric_scooter:before {\n    content: \"electric_scooter\";\n  }\n  :host > i.electrical_services:before {\n    content: \"electrical_services\";\n  }\n  :host > i.elevation:before {\n    content: \"elevation\";\n  }\n  :host > i.elevator:before {\n    content: \"elevator\";\n  }\n  :host > i.email:before {\n    content: \"email\";\n  }\n  :host > i.emergency:before {\n    content: \"emergency\";\n  }\n  :host > i.emergency_heat:before {\n    content: \"emergency_heat\";\n  }\n  :host > i.emergency_heat_2:before {\n    content: \"emergency_heat_2\";\n  }\n  :host > i.emergency_home:before {\n    content: \"emergency_home\";\n  }\n  :host > i.emergency_recording:before {\n    content: \"emergency_recording\";\n  }\n  :host > i.emergency_share:before {\n    content: \"emergency_share\";\n  }\n  :host > i.emergency_share_off:before {\n    content: \"emergency_share_off\";\n  }\n  :host > i.emoji_emotions:before {\n    content: \"emoji_emotions\";\n  }\n  :host > i.emoji_events:before {\n    content: \"emoji_events\";\n  }\n  :host > i.emoji_flags:before {\n    content: \"emoji_flags\";\n  }\n  :host > i.emoji_food_beverage:before {\n    content: \"emoji_food_beverage\";\n  }\n  :host > i.emoji_nature:before {\n    content: \"emoji_nature\";\n  }\n  :host > i.emoji_objects:before {\n    content: \"emoji_objects\";\n  }\n  :host > i.emoji_people:before {\n    content: \"emoji_people\";\n  }\n  :host > i.emoji_symbols:before {\n    content: \"emoji_symbols\";\n  }\n  :host > i.emoji_transportation:before {\n    content: \"emoji_transportation\";\n  }\n  :host > i.emoticon:before {\n    content: \"emoticon\";\n  }\n  :host > i.empty_dashboard:before {\n    content: \"empty_dashboard\";\n  }\n  :host > i.enable:before {\n    content: \"enable\";\n  }\n  :host > i.encrypted:before {\n    content: \"encrypted\";\n  }\n  :host > i.endocrinology:before {\n    content: \"endocrinology\";\n  }\n  :host > i.energy:before {\n    content: \"energy\";\n  }\n  :host > i.energy_program_saving:before {\n    content: \"energy_program_saving\";\n  }\n  :host > i.energy_program_time_used:before {\n    content: \"energy_program_time_used\";\n  }\n  :host > i.energy_savings_leaf:before {\n    content: \"energy_savings_leaf\";\n  }\n  :host > i.engineering:before {\n    content: \"engineering\";\n  }\n  :host > i.enhanced_encryption:before {\n    content: \"enhanced_encryption\";\n  }\n  :host > i.ent:before {\n    content: \"ent\";\n  }\n  :host > i.enterprise:before {\n    content: \"enterprise\";\n  }\n  :host > i.enterprise_off:before {\n    content: \"enterprise_off\";\n  }\n  :host > i.equal:before {\n    content: \"equal\";\n  }\n  :host > i.equalizer:before {\n    content: \"equalizer\";\n  }\n  :host > i.error:before {\n    content: \"error\";\n  }\n  :host > i.error_circle_rounded:before {\n    content: \"error_circle_rounded\";\n  }\n  :host > i.error_med:before {\n    content: \"error_med\";\n  }\n  :host > i.error_outline:before {\n    content: \"error_outline\";\n  }\n  :host > i.escalator:before {\n    content: \"escalator\";\n  }\n  :host > i.escalator_warning:before {\n    content: \"escalator_warning\";\n  }\n  :host > i.euro:before {\n    content: \"euro\";\n  }\n  :host > i.euro_symbol:before {\n    content: \"euro_symbol\";\n  }\n  :host > i.ev_charger:before {\n    content: \"ev_charger\";\n  }\n  :host > i.ev_mobiledata_badge:before {\n    content: \"ev_mobiledata_badge\";\n  }\n  :host > i.ev_shadow:before {\n    content: \"ev_shadow\";\n  }\n  :host > i.ev_shadow_add:before {\n    content: \"ev_shadow_add\";\n  }\n  :host > i.ev_shadow_minus:before {\n    content: \"ev_shadow_minus\";\n  }\n  :host > i.ev_station:before {\n    content: \"ev_station\";\n  }\n  :host > i.event:before {\n    content: \"event\";\n  }\n  :host > i.event_available:before {\n    content: \"event_available\";\n  }\n  :host > i.event_busy:before {\n    content: \"event_busy\";\n  }\n  :host > i.event_list:before {\n    content: \"event_list\";\n  }\n  :host > i.event_note:before {\n    content: \"event_note\";\n  }\n  :host > i.event_repeat:before {\n    content: \"event_repeat\";\n  }\n  :host > i.event_seat:before {\n    content: \"event_seat\";\n  }\n  :host > i.event_upcoming:before {\n    content: \"event_upcoming\";\n  }\n  :host > i.exclamation:before {\n    content: \"exclamation\";\n  }\n  :host > i.exercise:before {\n    content: \"exercise\";\n  }\n  :host > i.exit_to_app:before {\n    content: \"exit_to_app\";\n  }\n  :host > i.expand:before {\n    content: \"expand\";\n  }\n  :host > i.expand_all:before {\n    content: \"expand_all\";\n  }\n  :host > i.expand_circle_down:before {\n    content: \"expand_circle_down\";\n  }\n  :host > i.expand_circle_right:before {\n    content: \"expand_circle_right\";\n  }\n  :host > i.expand_circle_up:before {\n    content: \"expand_circle_up\";\n  }\n  :host > i.expand_content:before {\n    content: \"expand_content\";\n  }\n  :host > i.expand_less:before {\n    content: \"expand_less\";\n  }\n  :host > i.expand_more:before {\n    content: \"expand_more\";\n  }\n  :host > i.experiment:before {\n    content: \"experiment\";\n  }\n  :host > i.explicit:before {\n    content: \"explicit\";\n  }\n  :host > i.explore:before {\n    content: \"explore\";\n  }\n  :host > i.explore_nearby:before {\n    content: \"explore_nearby\";\n  }\n  :host > i.explore_off:before {\n    content: \"explore_off\";\n  }\n  :host > i.explosion:before {\n    content: \"explosion\";\n  }\n  :host > i.export_notes:before {\n    content: \"export_notes\";\n  }\n  :host > i.exposure:before {\n    content: \"exposure\";\n  }\n  :host > i.exposure_neg_1:before {\n    content: \"exposure_neg_1\";\n  }\n  :host > i.exposure_neg_2:before {\n    content: \"exposure_neg_2\";\n  }\n  :host > i.exposure_plus_1:before {\n    content: \"exposure_plus_1\";\n  }\n  :host > i.exposure_plus_2:before {\n    content: \"exposure_plus_2\";\n  }\n  :host > i.exposure_zero:before {\n    content: \"exposure_zero\";\n  }\n  :host > i.extension:before {\n    content: \"extension\";\n  }\n  :host > i.extension_off:before {\n    content: \"extension_off\";\n  }\n  :host > i.eyeglasses:before {\n    content: \"eyeglasses\";\n  }\n  :host > i.face:before {\n    content: \"face\";\n  }\n  :host > i.face_2:before {\n    content: \"face_2\";\n  }\n  :host > i.face_3:before {\n    content: \"face_3\";\n  }\n  :host > i.face_4:before {\n    content: \"face_4\";\n  }\n  :host > i.face_5:before {\n    content: \"face_5\";\n  }\n  :host > i.face_6:before {\n    content: \"face_6\";\n  }\n  :host > i.face_retouching_natural:before {\n    content: \"face_retouching_natural\";\n  }\n  :host > i.face_retouching_off:before {\n    content: \"face_retouching_off\";\n  }\n  :host > i.face_unlock:before {\n    content: \"face_unlock\";\n  }\n  :host > i.fact_check:before {\n    content: \"fact_check\";\n  }\n  :host > i.factory:before {\n    content: \"factory\";\n  }\n  :host > i.falling:before {\n    content: \"falling\";\n  }\n  :host > i.familiar_face_and_zone:before {\n    content: \"familiar_face_and_zone\";\n  }\n  :host > i.family_history:before {\n    content: \"family_history\";\n  }\n  :host > i.family_home:before {\n    content: \"family_home\";\n  }\n  :host > i.family_link:before {\n    content: \"family_link\";\n  }\n  :host > i.family_restroom:before {\n    content: \"family_restroom\";\n  }\n  :host > i.family_star:before {\n    content: \"family_star\";\n  }\n  :host > i.farsight_digital:before {\n    content: \"farsight_digital\";\n  }\n  :host > i.fast_forward:before {\n    content: \"fast_forward\";\n  }\n  :host > i.fast_rewind:before {\n    content: \"fast_rewind\";\n  }\n  :host > i.fastfood:before {\n    content: \"fastfood\";\n  }\n  :host > i.faucet:before {\n    content: \"faucet\";\n  }\n  :host > i.favorite:before {\n    content: \"favorite\";\n  }\n  :host > i.favorite_border:before {\n    content: \"favorite_border\";\n  }\n  :host > i.fax:before {\n    content: \"fax\";\n  }\n  :host > i.feature_search:before {\n    content: \"feature_search\";\n  }\n  :host > i.featured_play_list:before {\n    content: \"featured_play_list\";\n  }\n  :host > i.featured_seasonal_and_gifts:before {\n    content: \"featured_seasonal_and_gifts\";\n  }\n  :host > i.featured_video:before {\n    content: \"featured_video\";\n  }\n  :host > i.feed:before {\n    content: \"feed\";\n  }\n  :host > i.feedback:before {\n    content: \"feedback\";\n  }\n  :host > i.female:before {\n    content: \"female\";\n  }\n  :host > i.femur:before {\n    content: \"femur\";\n  }\n  :host > i.femur_alt:before {\n    content: \"femur_alt\";\n  }\n  :host > i.fence:before {\n    content: \"fence\";\n  }\n  :host > i.fertile:before {\n    content: \"fertile\";\n  }\n  :host > i.festival:before {\n    content: \"festival\";\n  }\n  :host > i.fiber_dvr:before {\n    content: \"fiber_dvr\";\n  }\n  :host > i.fiber_manual_record:before {\n    content: \"fiber_manual_record\";\n  }\n  :host > i.fiber_new:before {\n    content: \"fiber_new\";\n  }\n  :host > i.fiber_pin:before {\n    content: \"fiber_pin\";\n  }\n  :host > i.fiber_smart_record:before {\n    content: \"fiber_smart_record\";\n  }\n  :host > i.file_copy:before {\n    content: \"file_copy\";\n  }\n  :host > i.file_download:before {\n    content: \"file_download\";\n  }\n  :host > i.file_download_done:before {\n    content: \"file_download_done\";\n  }\n  :host > i.file_download_off:before {\n    content: \"file_download_off\";\n  }\n  :host > i.file_map:before {\n    content: \"file_map\";\n  }\n  :host > i.file_open:before {\n    content: \"file_open\";\n  }\n  :host > i.file_present:before {\n    content: \"file_present\";\n  }\n  :host > i.file_save:before {\n    content: \"file_save\";\n  }\n  :host > i.file_save_off:before {\n    content: \"file_save_off\";\n  }\n  :host > i.file_upload:before {\n    content: \"file_upload\";\n  }\n  :host > i.file_upload_off:before {\n    content: \"file_upload_off\";\n  }\n  :host > i.filter:before {\n    content: \"filter\";\n  }\n  :host > i.filter_1:before {\n    content: \"filter_1\";\n  }\n  :host > i.filter_2:before {\n    content: \"filter_2\";\n  }\n  :host > i.filter_3:before {\n    content: \"filter_3\";\n  }\n  :host > i.filter_4:before {\n    content: \"filter_4\";\n  }\n  :host > i.filter_5:before {\n    content: \"filter_5\";\n  }\n  :host > i.filter_6:before {\n    content: \"filter_6\";\n  }\n  :host > i.filter_7:before {\n    content: \"filter_7\";\n  }\n  :host > i.filter_8:before {\n    content: \"filter_8\";\n  }\n  :host > i.filter_9:before {\n    content: \"filter_9\";\n  }\n  :host > i.filter_9_plus:before {\n    content: \"filter_9_plus\";\n  }\n  :host > i.filter_alt:before {\n    content: \"filter_alt\";\n  }\n  :host > i.filter_alt_off:before {\n    content: \"filter_alt_off\";\n  }\n  :host > i.filter_b_and_w:before {\n    content: \"filter_b_and_w\";\n  }\n  :host > i.filter_center_focus:before {\n    content: \"filter_center_focus\";\n  }\n  :host > i.filter_drama:before {\n    content: \"filter_drama\";\n  }\n  :host > i.filter_frames:before {\n    content: \"filter_frames\";\n  }\n  :host > i.filter_hdr:before {\n    content: \"filter_hdr\";\n  }\n  :host > i.filter_list:before {\n    content: \"filter_list\";\n  }\n  :host > i.filter_list_alt:before {\n    content: \"filter_list_alt\";\n  }\n  :host > i.filter_list_off:before {\n    content: \"filter_list_off\";\n  }\n  :host > i.filter_none:before {\n    content: \"filter_none\";\n  }\n  :host > i.filter_retrolux:before {\n    content: \"filter_retrolux\";\n  }\n  :host > i.filter_tilt_shift:before {\n    content: \"filter_tilt_shift\";\n  }\n  :host > i.filter_vintage:before {\n    content: \"filter_vintage\";\n  }\n  :host > i.finance:before {\n    content: \"finance\";\n  }\n  :host > i.finance_chip:before {\n    content: \"finance_chip\";\n  }\n  :host > i.finance_mode:before {\n    content: \"finance_mode\";\n  }\n  :host > i.find_in_page:before {\n    content: \"find_in_page\";\n  }\n  :host > i.find_replace:before {\n    content: \"find_replace\";\n  }\n  :host > i.fingerprint:before {\n    content: \"fingerprint\";\n  }\n  :host > i.fire_extinguisher:before {\n    content: \"fire_extinguisher\";\n  }\n  :host > i.fire_hydrant:before {\n    content: \"fire_hydrant\";\n  }\n  :host > i.fire_truck:before {\n    content: \"fire_truck\";\n  }\n  :host > i.fireplace:before {\n    content: \"fireplace\";\n  }\n  :host > i.first_page:before {\n    content: \"first_page\";\n  }\n  :host > i.fit_page:before {\n    content: \"fit_page\";\n  }\n  :host > i.fit_screen:before {\n    content: \"fit_screen\";\n  }\n  :host > i.fit_width:before {\n    content: \"fit_width\";\n  }\n  :host > i.fitness_center:before {\n    content: \"fitness_center\";\n  }\n  :host > i.flag:before {\n    content: \"flag\";\n  }\n  :host > i.flag_circle:before {\n    content: \"flag_circle\";\n  }\n  :host > i.flag_filled:before {\n    content: \"flag_filled\";\n  }\n  :host > i.flaky:before {\n    content: \"flaky\";\n  }\n  :host > i.flare:before {\n    content: \"flare\";\n  }\n  :host > i.flash_auto:before {\n    content: \"flash_auto\";\n  }\n  :host > i.flash_off:before {\n    content: \"flash_off\";\n  }\n  :host > i.flash_on:before {\n    content: \"flash_on\";\n  }\n  :host > i.flashlight_off:before {\n    content: \"flashlight_off\";\n  }\n  :host > i.flashlight_on:before {\n    content: \"flashlight_on\";\n  }\n  :host > i.flatware:before {\n    content: \"flatware\";\n  }\n  :host > i.flex_direction:before {\n    content: \"flex_direction\";\n  }\n  :host > i.flex_no_wrap:before {\n    content: \"flex_no_wrap\";\n  }\n  :host > i.flex_wrap:before {\n    content: \"flex_wrap\";\n  }\n  :host > i.flight:before {\n    content: \"flight\";\n  }\n  :host > i.flight_class:before {\n    content: \"flight_class\";\n  }\n  :host > i.flight_land:before {\n    content: \"flight_land\";\n  }\n  :host > i.flight_takeoff:before {\n    content: \"flight_takeoff\";\n  }\n  :host > i.flights_and_hotels:before {\n    content: \"flights_and_hotels\";\n  }\n  :host > i.flightsmode:before {\n    content: \"flightsmode\";\n  }\n  :host > i.flip:before {\n    content: \"flip\";\n  }\n  :host > i.flip_camera_android:before {\n    content: \"flip_camera_android\";\n  }\n  :host > i.flip_camera_ios:before {\n    content: \"flip_camera_ios\";\n  }\n  :host > i.flip_to_back:before {\n    content: \"flip_to_back\";\n  }\n  :host > i.flip_to_front:before {\n    content: \"flip_to_front\";\n  }\n  :host > i.flood:before {\n    content: \"flood\";\n  }\n  :host > i.floor:before {\n    content: \"floor\";\n  }\n  :host > i.floor_lamp:before {\n    content: \"floor_lamp\";\n  }\n  :host > i.flourescent:before {\n    content: \"flourescent\";\n  }\n  :host > i.flowsheet:before {\n    content: \"flowsheet\";\n  }\n  :host > i.fluid:before {\n    content: \"fluid\";\n  }\n  :host > i.fluid_balance:before {\n    content: \"fluid_balance\";\n  }\n  :host > i.fluid_med:before {\n    content: \"fluid_med\";\n  }\n  :host > i.fluorescent:before {\n    content: \"fluorescent\";\n  }\n  :host > i.flutter:before {\n    content: \"flutter\";\n  }\n  :host > i.flutter_dash:before {\n    content: \"flutter_dash\";\n  }\n  :host > i.fmd_bad:before {\n    content: \"fmd_bad\";\n  }\n  :host > i.fmd_good:before {\n    content: \"fmd_good\";\n  }\n  :host > i.foggy:before {\n    content: \"foggy\";\n  }\n  :host > i.folded_hands:before {\n    content: \"folded_hands\";\n  }\n  :host > i.folder:before {\n    content: \"folder\";\n  }\n  :host > i.folder_copy:before {\n    content: \"folder_copy\";\n  }\n  :host > i.folder_data:before {\n    content: \"folder_data\";\n  }\n  :host > i.folder_delete:before {\n    content: \"folder_delete\";\n  }\n  :host > i.folder_limited:before {\n    content: \"folder_limited\";\n  }\n  :host > i.folder_managed:before {\n    content: \"folder_managed\";\n  }\n  :host > i.folder_off:before {\n    content: \"folder_off\";\n  }\n  :host > i.folder_open:before {\n    content: \"folder_open\";\n  }\n  :host > i.folder_shared:before {\n    content: \"folder_shared\";\n  }\n  :host > i.folder_special:before {\n    content: \"folder_special\";\n  }\n  :host > i.folder_supervised:before {\n    content: \"folder_supervised\";\n  }\n  :host > i.folder_zip:before {\n    content: \"folder_zip\";\n  }\n  :host > i.follow_the_signs:before {\n    content: \"follow_the_signs\";\n  }\n  :host > i.font_download:before {\n    content: \"font_download\";\n  }\n  :host > i.font_download_off:before {\n    content: \"font_download_off\";\n  }\n  :host > i.food_bank:before {\n    content: \"food_bank\";\n  }\n  :host > i.foot_bones:before {\n    content: \"foot_bones\";\n  }\n  :host > i.footprint:before {\n    content: \"footprint\";\n  }\n  :host > i.for_you:before {\n    content: \"for_you\";\n  }\n  :host > i.forest:before {\n    content: \"forest\";\n  }\n  :host > i.fork_left:before {\n    content: \"fork_left\";\n  }\n  :host > i.fork_right:before {\n    content: \"fork_right\";\n  }\n  :host > i.forklift:before {\n    content: \"forklift\";\n  }\n  :host > i.format_align_center:before {\n    content: \"format_align_center\";\n  }\n  :host > i.format_align_justify:before {\n    content: \"format_align_justify\";\n  }\n  :host > i.format_align_left:before {\n    content: \"format_align_left\";\n  }\n  :host > i.format_align_right:before {\n    content: \"format_align_right\";\n  }\n  :host > i.format_bold:before {\n    content: \"format_bold\";\n  }\n  :host > i.format_clear:before {\n    content: \"format_clear\";\n  }\n  :host > i.format_color_fill:before {\n    content: \"format_color_fill\";\n  }\n  :host > i.format_color_reset:before {\n    content: \"format_color_reset\";\n  }\n  :host > i.format_color_text:before {\n    content: \"format_color_text\";\n  }\n  :host > i.format_h1:before {\n    content: \"format_h1\";\n  }\n  :host > i.format_h2:before {\n    content: \"format_h2\";\n  }\n  :host > i.format_h3:before {\n    content: \"format_h3\";\n  }\n  :host > i.format_h4:before {\n    content: \"format_h4\";\n  }\n  :host > i.format_h5:before {\n    content: \"format_h5\";\n  }\n  :host > i.format_h6:before {\n    content: \"format_h6\";\n  }\n  :host > i.format_image_left:before {\n    content: \"format_image_left\";\n  }\n  :host > i.format_image_right:before {\n    content: \"format_image_right\";\n  }\n  :host > i.format_indent_decrease:before {\n    content: \"format_indent_decrease\";\n  }\n  :host > i.format_indent_increase:before {\n    content: \"format_indent_increase\";\n  }\n  :host > i.format_ink_highlighter:before {\n    content: \"format_ink_highlighter\";\n  }\n  :host > i.format_italic:before {\n    content: \"format_italic\";\n  }\n  :host > i.format_letter_spacing:before {\n    content: \"format_letter_spacing\";\n  }\n  :host > i.format_letter_spacing_2:before {\n    content: \"format_letter_spacing_2\";\n  }\n  :host > i.format_letter_spacing_standard:before {\n    content: \"format_letter_spacing_standard\";\n  }\n  :host > i.format_letter_spacing_wide:before {\n    content: \"format_letter_spacing_wide\";\n  }\n  :host > i.format_letter_spacing_wider:before {\n    content: \"format_letter_spacing_wider\";\n  }\n  :host > i.format_line_spacing:before {\n    content: \"format_line_spacing\";\n  }\n  :host > i.format_list_bulleted:before {\n    content: \"format_list_bulleted\";\n  }\n  :host > i.format_list_bulleted_add:before {\n    content: \"format_list_bulleted_add\";\n  }\n  :host > i.format_list_numbered:before {\n    content: \"format_list_numbered\";\n  }\n  :host > i.format_list_numbered_rtl:before {\n    content: \"format_list_numbered_rtl\";\n  }\n  :host > i.format_overline:before {\n    content: \"format_overline\";\n  }\n  :host > i.format_paint:before {\n    content: \"format_paint\";\n  }\n  :host > i.format_paragraph:before {\n    content: \"format_paragraph\";\n  }\n  :host > i.format_quote:before {\n    content: \"format_quote\";\n  }\n  :host > i.format_shapes:before {\n    content: \"format_shapes\";\n  }\n  :host > i.format_size:before {\n    content: \"format_size\";\n  }\n  :host > i.format_strikethrough:before {\n    content: \"format_strikethrough\";\n  }\n  :host > i.format_text_clip:before {\n    content: \"format_text_clip\";\n  }\n  :host > i.format_text_overflow:before {\n    content: \"format_text_overflow\";\n  }\n  :host > i.format_text_wrap:before {\n    content: \"format_text_wrap\";\n  }\n  :host > i.format_textdirection_l_to_r:before {\n    content: \"format_textdirection_l_to_r\";\n  }\n  :host > i.format_textdirection_r_to_l:before {\n    content: \"format_textdirection_r_to_l\";\n  }\n  :host > i.format_underlined:before {\n    content: \"format_underlined\";\n  }\n  :host > i.format_underlined_squiggle:before {\n    content: \"format_underlined_squiggle\";\n  }\n  :host > i.forms_add_on:before {\n    content: \"forms_add_on\";\n  }\n  :host > i.forms_apps_script:before {\n    content: \"forms_apps_script\";\n  }\n  :host > i.fort:before {\n    content: \"fort\";\n  }\n  :host > i.forum:before {\n    content: \"forum\";\n  }\n  :host > i.forward:before {\n    content: \"forward\";\n  }\n  :host > i.forward_10:before {\n    content: \"forward_10\";\n  }\n  :host > i.forward_30:before {\n    content: \"forward_30\";\n  }\n  :host > i.forward_5:before {\n    content: \"forward_5\";\n  }\n  :host > i.forward_circle:before {\n    content: \"forward_circle\";\n  }\n  :host > i.forward_media:before {\n    content: \"forward_media\";\n  }\n  :host > i.forward_to_inbox:before {\n    content: \"forward_to_inbox\";\n  }\n  :host > i.foundation:before {\n    content: \"foundation\";\n  }\n  :host > i.frame_inspect:before {\n    content: \"frame_inspect\";\n  }\n  :host > i.frame_person:before {\n    content: \"frame_person\";\n  }\n  :host > i.frame_person_off:before {\n    content: \"frame_person_off\";\n  }\n  :host > i.frame_reload:before {\n    content: \"frame_reload\";\n  }\n  :host > i.frame_source:before {\n    content: \"frame_source\";\n  }\n  :host > i.free_breakfast:before {\n    content: \"free_breakfast\";\n  }\n  :host > i.free_cancellation:before {\n    content: \"free_cancellation\";\n  }\n  :host > i.front_hand:before {\n    content: \"front_hand\";\n  }\n  :host > i.front_loader:before {\n    content: \"front_loader\";\n  }\n  :host > i.full_coverage:before {\n    content: \"full_coverage\";\n  }\n  :host > i.full_hd:before {\n    content: \"full_hd\";\n  }\n  :host > i.full_stacked_bar_chart:before {\n    content: \"full_stacked_bar_chart\";\n  }\n  :host > i.fullscreen:before {\n    content: \"fullscreen\";\n  }\n  :host > i.fullscreen_exit:before {\n    content: \"fullscreen_exit\";\n  }\n  :host > i.function:before {\n    content: \"function\";\n  }\n  :host > i.functions:before {\n    content: \"functions\";\n  }\n  :host > i.g_mobiledata:before {\n    content: \"g_mobiledata\";\n  }\n  :host > i.g_mobiledata_badge:before {\n    content: \"g_mobiledata_badge\";\n  }\n  :host > i.g_translate:before {\n    content: \"g_translate\";\n  }\n  :host > i.gallery_thumbnail:before {\n    content: \"gallery_thumbnail\";\n  }\n  :host > i.gamepad:before {\n    content: \"gamepad\";\n  }\n  :host > i.games:before {\n    content: \"games\";\n  }\n  :host > i.garage:before {\n    content: \"garage\";\n  }\n  :host > i.garage_door:before {\n    content: \"garage_door\";\n  }\n  :host > i.garage_home:before {\n    content: \"garage_home\";\n  }\n  :host > i.garden_cart:before {\n    content: \"garden_cart\";\n  }\n  :host > i.gas_meter:before {\n    content: \"gas_meter\";\n  }\n  :host > i.gastroenterology:before {\n    content: \"gastroenterology\";\n  }\n  :host > i.gate:before {\n    content: \"gate\";\n  }\n  :host > i.gavel:before {\n    content: \"gavel\";\n  }\n  :host > i.general_device:before {\n    content: \"general_device\";\n  }\n  :host > i.generating_tokens:before {\n    content: \"generating_tokens\";\n  }\n  :host > i.genetics:before {\n    content: \"genetics\";\n  }\n  :host > i.genres:before {\n    content: \"genres\";\n  }\n  :host > i.gesture:before {\n    content: \"gesture\";\n  }\n  :host > i.gesture_select:before {\n    content: \"gesture_select\";\n  }\n  :host > i.get_app:before {\n    content: \"get_app\";\n  }\n  :host > i.gif:before {\n    content: \"gif\";\n  }\n  :host > i.gif_box:before {\n    content: \"gif_box\";\n  }\n  :host > i.girl:before {\n    content: \"girl\";\n  }\n  :host > i.gite:before {\n    content: \"gite\";\n  }\n  :host > i.glass_cup:before {\n    content: \"glass_cup\";\n  }\n  :host > i.globe:before {\n    content: \"globe\";\n  }\n  :host > i.globe_asia:before {\n    content: \"globe_asia\";\n  }\n  :host > i.globe_uk:before {\n    content: \"globe_uk\";\n  }\n  :host > i.glucose:before {\n    content: \"glucose\";\n  }\n  :host > i.glyphs:before {\n    content: \"glyphs\";\n  }\n  :host > i.go_to_line:before {\n    content: \"go_to_line\";\n  }\n  :host > i.golf_course:before {\n    content: \"golf_course\";\n  }\n  :host > i.google_home_devices:before {\n    content: \"google_home_devices\";\n  }\n  :host > i.google_plus_reshare:before {\n    content: \"google_plus_reshare\";\n  }\n  :host > i.google_tv_remote:before {\n    content: \"google_tv_remote\";\n  }\n  :host > i.google_wifi:before {\n    content: \"google_wifi\";\n  }\n  :host > i.gpp_bad:before {\n    content: \"gpp_bad\";\n  }\n  :host > i.gpp_good:before {\n    content: \"gpp_good\";\n  }\n  :host > i.gpp_maybe:before {\n    content: \"gpp_maybe\";\n  }\n  :host > i.gps_fixed:before {\n    content: \"gps_fixed\";\n  }\n  :host > i.gps_not_fixed:before {\n    content: \"gps_not_fixed\";\n  }\n  :host > i.gps_off:before {\n    content: \"gps_off\";\n  }\n  :host > i.grade:before {\n    content: \"grade\";\n  }\n  :host > i.gradient:before {\n    content: \"gradient\";\n  }\n  :host > i.grading:before {\n    content: \"grading\";\n  }\n  :host > i.grain:before {\n    content: \"grain\";\n  }\n  :host > i.graphic_eq:before {\n    content: \"graphic_eq\";\n  }\n  :host > i.grass:before {\n    content: \"grass\";\n  }\n  :host > i.grid_3x3:before {\n    content: \"grid_3x3\";\n  }\n  :host > i.grid_3x3_off:before {\n    content: \"grid_3x3_off\";\n  }\n  :host > i.grid_4x4:before {\n    content: \"grid_4x4\";\n  }\n  :host > i.grid_goldenratio:before {\n    content: \"grid_goldenratio\";\n  }\n  :host > i.grid_guides:before {\n    content: \"grid_guides\";\n  }\n  :host > i.grid_off:before {\n    content: \"grid_off\";\n  }\n  :host > i.grid_on:before {\n    content: \"grid_on\";\n  }\n  :host > i.grid_view:before {\n    content: \"grid_view\";\n  }\n  :host > i.grocery:before {\n    content: \"grocery\";\n  }\n  :host > i.group:before {\n    content: \"group\";\n  }\n  :host > i.group_add:before {\n    content: \"group_add\";\n  }\n  :host > i.group_off:before {\n    content: \"group_off\";\n  }\n  :host > i.group_remove:before {\n    content: \"group_remove\";\n  }\n  :host > i.group_work:before {\n    content: \"group_work\";\n  }\n  :host > i.grouped_bar_chart:before {\n    content: \"grouped_bar_chart\";\n  }\n  :host > i.groups:before {\n    content: \"groups\";\n  }\n  :host > i.groups_2:before {\n    content: \"groups_2\";\n  }\n  :host > i.groups_3:before {\n    content: \"groups_3\";\n  }\n  :host > i.gynecology:before {\n    content: \"gynecology\";\n  }\n  :host > i.h_mobiledata:before {\n    content: \"h_mobiledata\";\n  }\n  :host > i.h_mobiledata_badge:before {\n    content: \"h_mobiledata_badge\";\n  }\n  :host > i.h_plus_mobiledata:before {\n    content: \"h_plus_mobiledata\";\n  }\n  :host > i.h_plus_mobiledata_badge:before {\n    content: \"h_plus_mobiledata_badge\";\n  }\n  :host > i.hail:before {\n    content: \"hail\";\n  }\n  :host > i.hallway:before {\n    content: \"hallway\";\n  }\n  :host > i.hand_bones:before {\n    content: \"hand_bones\";\n  }\n  :host > i.hand_gesture:before {\n    content: \"hand_gesture\";\n  }\n  :host > i.handshake:before {\n    content: \"handshake\";\n  }\n  :host > i.handwriting_recognition:before {\n    content: \"handwriting_recognition\";\n  }\n  :host > i.handyman:before {\n    content: \"handyman\";\n  }\n  :host > i.hangout_video:before {\n    content: \"hangout_video\";\n  }\n  :host > i.hangout_video_off:before {\n    content: \"hangout_video_off\";\n  }\n  :host > i.hard_drive:before {\n    content: \"hard_drive\";\n  }\n  :host > i.hard_drive_2:before {\n    content: \"hard_drive_2\";\n  }\n  :host > i.hardware:before {\n    content: \"hardware\";\n  }\n  :host > i.hd:before {\n    content: \"hd\";\n  }\n  :host > i.hdr_auto:before {\n    content: \"hdr_auto\";\n  }\n  :host > i.hdr_auto_select:before {\n    content: \"hdr_auto_select\";\n  }\n  :host > i.hdr_enhanced_select:before {\n    content: \"hdr_enhanced_select\";\n  }\n  :host > i.hdr_off:before {\n    content: \"hdr_off\";\n  }\n  :host > i.hdr_off_select:before {\n    content: \"hdr_off_select\";\n  }\n  :host > i.hdr_on:before {\n    content: \"hdr_on\";\n  }\n  :host > i.hdr_on_select:before {\n    content: \"hdr_on_select\";\n  }\n  :host > i.hdr_plus:before {\n    content: \"hdr_plus\";\n  }\n  :host > i.hdr_plus_off:before {\n    content: \"hdr_plus_off\";\n  }\n  :host > i.hdr_strong:before {\n    content: \"hdr_strong\";\n  }\n  :host > i.hdr_weak:before {\n    content: \"hdr_weak\";\n  }\n  :host > i.headphones:before {\n    content: \"headphones\";\n  }\n  :host > i.headphones_battery:before {\n    content: \"headphones_battery\";\n  }\n  :host > i.headset:before {\n    content: \"headset\";\n  }\n  :host > i.headset_mic:before {\n    content: \"headset_mic\";\n  }\n  :host > i.headset_off:before {\n    content: \"headset_off\";\n  }\n  :host > i.healing:before {\n    content: \"healing\";\n  }\n  :host > i.health_and_beauty:before {\n    content: \"health_and_beauty\";\n  }\n  :host > i.health_and_safety:before {\n    content: \"health_and_safety\";\n  }\n  :host > i.health_metrics:before {\n    content: \"health_metrics\";\n  }\n  :host > i.heap_snapshot_large:before {\n    content: \"heap_snapshot_large\";\n  }\n  :host > i.heap_snapshot_multiple:before {\n    content: \"heap_snapshot_multiple\";\n  }\n  :host > i.heap_snapshot_thumbnail:before {\n    content: \"heap_snapshot_thumbnail\";\n  }\n  :host > i.hearing:before {\n    content: \"hearing\";\n  }\n  :host > i.hearing_disabled:before {\n    content: \"hearing_disabled\";\n  }\n  :host > i.heart_broken:before {\n    content: \"heart_broken\";\n  }\n  :host > i.heart_check:before {\n    content: \"heart_check\";\n  }\n  :host > i.heart_minus:before {\n    content: \"heart_minus\";\n  }\n  :host > i.heart_plus:before {\n    content: \"heart_plus\";\n  }\n  :host > i.heat:before {\n    content: \"heat\";\n  }\n  :host > i.heat_pump:before {\n    content: \"heat_pump\";\n  }\n  :host > i.heat_pump_balance:before {\n    content: \"heat_pump_balance\";\n  }\n  :host > i.height:before {\n    content: \"height\";\n  }\n  :host > i.helicopter:before {\n    content: \"helicopter\";\n  }\n  :host > i.help:before {\n    content: \"help\";\n  }\n  :host > i.help_center:before {\n    content: \"help_center\";\n  }\n  :host > i.help_clinic:before {\n    content: \"help_clinic\";\n  }\n  :host > i.help_outline:before {\n    content: \"help_outline\";\n  }\n  :host > i.hematology:before {\n    content: \"hematology\";\n  }\n  :host > i.hevc:before {\n    content: \"hevc\";\n  }\n  :host > i.hexagon:before {\n    content: \"hexagon\";\n  }\n  :host > i.hide:before {\n    content: \"hide\";\n  }\n  :host > i.hide_image:before {\n    content: \"hide_image\";\n  }\n  :host > i.hide_source:before {\n    content: \"hide_source\";\n  }\n  :host > i.high_density:before {\n    content: \"high_density\";\n  }\n  :host > i.high_quality:before {\n    content: \"high_quality\";\n  }\n  :host > i.high_res:before {\n    content: \"high_res\";\n  }\n  :host > i.highlight:before {\n    content: \"highlight\";\n  }\n  :host > i.highlight_keyboard_focus:before {\n    content: \"highlight_keyboard_focus\";\n  }\n  :host > i.highlight_mouse_cursor:before {\n    content: \"highlight_mouse_cursor\";\n  }\n  :host > i.highlight_off:before {\n    content: \"highlight_off\";\n  }\n  :host > i.highlight_text_cursor:before {\n    content: \"highlight_text_cursor\";\n  }\n  :host > i.highlighter_size_1:before {\n    content: \"highlighter_size_1\";\n  }\n  :host > i.highlighter_size_2:before {\n    content: \"highlighter_size_2\";\n  }\n  :host > i.highlighter_size_3:before {\n    content: \"highlighter_size_3\";\n  }\n  :host > i.highlighter_size_4:before {\n    content: \"highlighter_size_4\";\n  }\n  :host > i.highlighter_size_5:before {\n    content: \"highlighter_size_5\";\n  }\n  :host > i.hiking:before {\n    content: \"hiking\";\n  }\n  :host > i.history:before {\n    content: \"history\";\n  }\n  :host > i.history_edu:before {\n    content: \"history_edu\";\n  }\n  :host > i.history_toggle_off:before {\n    content: \"history_toggle_off\";\n  }\n  :host > i.hive:before {\n    content: \"hive\";\n  }\n  :host > i.hls:before {\n    content: \"hls\";\n  }\n  :host > i.hls_off:before {\n    content: \"hls_off\";\n  }\n  :host > i.holiday_village:before {\n    content: \"holiday_village\";\n  }\n  :host > i.home:before {\n    content: \"home\";\n  }\n  :host > i.home_and_garden:before {\n    content: \"home_and_garden\";\n  }\n  :host > i.home_app_logo:before {\n    content: \"home_app_logo\";\n  }\n  :host > i.home_filled:before {\n    content: \"home_filled\";\n  }\n  :host > i.home_health:before {\n    content: \"home_health\";\n  }\n  :host > i.home_improvement_and_tools:before {\n    content: \"home_improvement_and_tools\";\n  }\n  :host > i.home_iot_device:before {\n    content: \"home_iot_device\";\n  }\n  :host > i.home_max:before {\n    content: \"home_max\";\n  }\n  :host > i.home_max_dots:before {\n    content: \"home_max_dots\";\n  }\n  :host > i.home_mini:before {\n    content: \"home_mini\";\n  }\n  :host > i.home_pin:before {\n    content: \"home_pin\";\n  }\n  :host > i.home_repair_service:before {\n    content: \"home_repair_service\";\n  }\n  :host > i.home_speaker:before {\n    content: \"home_speaker\";\n  }\n  :host > i.home_storage:before {\n    content: \"home_storage\";\n  }\n  :host > i.home_work:before {\n    content: \"home_work\";\n  }\n  :host > i.horizontal_distribute:before {\n    content: \"horizontal_distribute\";\n  }\n  :host > i.horizontal_rule:before {\n    content: \"horizontal_rule\";\n  }\n  :host > i.horizontal_split:before {\n    content: \"horizontal_split\";\n  }\n  :host > i.hot_tub:before {\n    content: \"hot_tub\";\n  }\n  :host > i.hotel:before {\n    content: \"hotel\";\n  }\n  :host > i.hotel_class:before {\n    content: \"hotel_class\";\n  }\n  :host > i.hourglass:before {\n    content: \"hourglass\";\n  }\n  :host > i.hourglass_bottom:before {\n    content: \"hourglass_bottom\";\n  }\n  :host > i.hourglass_disabled:before {\n    content: \"hourglass_disabled\";\n  }\n  :host > i.hourglass_empty:before {\n    content: \"hourglass_empty\";\n  }\n  :host > i.hourglass_full:before {\n    content: \"hourglass_full\";\n  }\n  :host > i.hourglass_top:before {\n    content: \"hourglass_top\";\n  }\n  :host > i.house:before {\n    content: \"house\";\n  }\n  :host > i.house_siding:before {\n    content: \"house_siding\";\n  }\n  :host > i.house_with_shield:before {\n    content: \"house_with_shield\";\n  }\n  :host > i.houseboat:before {\n    content: \"houseboat\";\n  }\n  :host > i.household_supplies:before {\n    content: \"household_supplies\";\n  }\n  :host > i.how_to_reg:before {\n    content: \"how_to_reg\";\n  }\n  :host > i.how_to_vote:before {\n    content: \"how_to_vote\";\n  }\n  :host > i.hr_resting:before {\n    content: \"hr_resting\";\n  }\n  :host > i.html:before {\n    content: \"html\";\n  }\n  :host > i.http:before {\n    content: \"http\";\n  }\n  :host > i.https:before {\n    content: \"https\";\n  }\n  :host > i.hub:before {\n    content: \"hub\";\n  }\n  :host > i.humerus:before {\n    content: \"humerus\";\n  }\n  :host > i.humerus_alt:before {\n    content: \"humerus_alt\";\n  }\n  :host > i.humidity_high:before {\n    content: \"humidity_high\";\n  }\n  :host > i.humidity_indoor:before {\n    content: \"humidity_indoor\";\n  }\n  :host > i.humidity_low:before {\n    content: \"humidity_low\";\n  }\n  :host > i.humidity_mid:before {\n    content: \"humidity_mid\";\n  }\n  :host > i.humidity_percentage:before {\n    content: \"humidity_percentage\";\n  }\n  :host > i.hvac:before {\n    content: \"hvac\";\n  }\n  :host > i.ice_skating:before {\n    content: \"ice_skating\";\n  }\n  :host > i.icecream:before {\n    content: \"icecream\";\n  }\n  :host > i.ifl:before {\n    content: \"ifl\";\n  }\n  :host > i.iframe:before {\n    content: \"iframe\";\n  }\n  :host > i.iframe_off:before {\n    content: \"iframe_off\";\n  }\n  :host > i.image:before {\n    content: \"image\";\n  }\n  :host > i.image_aspect_ratio:before {\n    content: \"image_aspect_ratio\";\n  }\n  :host > i.image_not_supported:before {\n    content: \"image_not_supported\";\n  }\n  :host > i.image_search:before {\n    content: \"image_search\";\n  }\n  :host > i.imagesearch_roller:before {\n    content: \"imagesearch_roller\";\n  }\n  :host > i.imagesmode:before {\n    content: \"imagesmode\";\n  }\n  :host > i.immunology:before {\n    content: \"immunology\";\n  }\n  :host > i.import_contacts:before {\n    content: \"import_contacts\";\n  }\n  :host > i.import_export:before {\n    content: \"import_export\";\n  }\n  :host > i.important_devices:before {\n    content: \"important_devices\";\n  }\n  :host > i.in_home_mode:before {\n    content: \"in_home_mode\";\n  }\n  :host > i.inactive_order:before {\n    content: \"inactive_order\";\n  }\n  :host > i.inbox:before {\n    content: \"inbox\";\n  }\n  :host > i.inbox_customize:before {\n    content: \"inbox_customize\";\n  }\n  :host > i.incomplete_circle:before {\n    content: \"incomplete_circle\";\n  }\n  :host > i.indeterminate_check_box:before {\n    content: \"indeterminate_check_box\";\n  }\n  :host > i.indeterminate_question_box:before {\n    content: \"indeterminate_question_box\";\n  }\n  :host > i.info:before {\n    content: \"info\";\n  }\n  :host > i.info_i:before {\n    content: \"info_i\";\n  }\n  :host > i.infrared:before {\n    content: \"infrared\";\n  }\n  :host > i.ink_eraser:before {\n    content: \"ink_eraser\";\n  }\n  :host > i.ink_eraser_off:before {\n    content: \"ink_eraser_off\";\n  }\n  :host > i.ink_highlighter:before {\n    content: \"ink_highlighter\";\n  }\n  :host > i.ink_highlighter_move:before {\n    content: \"ink_highlighter_move\";\n  }\n  :host > i.ink_marker:before {\n    content: \"ink_marker\";\n  }\n  :host > i.ink_pen:before {\n    content: \"ink_pen\";\n  }\n  :host > i.inpatient:before {\n    content: \"inpatient\";\n  }\n  :host > i.input:before {\n    content: \"input\";\n  }\n  :host > i.input_circle:before {\n    content: \"input_circle\";\n  }\n  :host > i.insert_chart:before {\n    content: \"insert_chart\";\n  }\n  :host > i.insert_chart_filled:before {\n    content: \"insert_chart_filled\";\n  }\n  :host > i.insert_chart_outlined:before {\n    content: \"insert_chart_outlined\";\n  }\n  :host > i.insert_comment:before {\n    content: \"insert_comment\";\n  }\n  :host > i.insert_drive_file:before {\n    content: \"insert_drive_file\";\n  }\n  :host > i.insert_emoticon:before {\n    content: \"insert_emoticon\";\n  }\n  :host > i.insert_invitation:before {\n    content: \"insert_invitation\";\n  }\n  :host > i.insert_link:before {\n    content: \"insert_link\";\n  }\n  :host > i.insert_page_break:before {\n    content: \"insert_page_break\";\n  }\n  :host > i.insert_photo:before {\n    content: \"insert_photo\";\n  }\n  :host > i.insert_text:before {\n    content: \"insert_text\";\n  }\n  :host > i.insights:before {\n    content: \"insights\";\n  }\n  :host > i.install_desktop:before {\n    content: \"install_desktop\";\n  }\n  :host > i.install_mobile:before {\n    content: \"install_mobile\";\n  }\n  :host > i.instant_mix:before {\n    content: \"instant_mix\";\n  }\n  :host > i.integration_instructions:before {\n    content: \"integration_instructions\";\n  }\n  :host > i.interactive_space:before {\n    content: \"interactive_space\";\n  }\n  :host > i.interests:before {\n    content: \"interests\";\n  }\n  :host > i.interpreter_mode:before {\n    content: \"interpreter_mode\";\n  }\n  :host > i.inventory:before {\n    content: \"inventory\";\n  }\n  :host > i.inventory_2:before {\n    content: \"inventory_2\";\n  }\n  :host > i.invert_colors:before {\n    content: \"invert_colors\";\n  }\n  :host > i.invert_colors_off:before {\n    content: \"invert_colors_off\";\n  }\n  :host > i.ios:before {\n    content: \"ios\";\n  }\n  :host > i.ios_share:before {\n    content: \"ios_share\";\n  }\n  :host > i.iron:before {\n    content: \"iron\";\n  }\n  :host > i.iso:before {\n    content: \"iso\";\n  }\n  :host > i.jamboard_kiosk:before {\n    content: \"jamboard_kiosk\";\n  }\n  :host > i.javascript:before {\n    content: \"javascript\";\n  }\n  :host > i.join:before {\n    content: \"join\";\n  }\n  :host > i.join_full:before {\n    content: \"join_full\";\n  }\n  :host > i.join_inner:before {\n    content: \"join_inner\";\n  }\n  :host > i.join_left:before {\n    content: \"join_left\";\n  }\n  :host > i.join_right:before {\n    content: \"join_right\";\n  }\n  :host > i.joystick:before {\n    content: \"joystick\";\n  }\n  :host > i.jump_to_element:before {\n    content: \"jump_to_element\";\n  }\n  :host > i.kayaking:before {\n    content: \"kayaking\";\n  }\n  :host > i.kebab_dining:before {\n    content: \"kebab_dining\";\n  }\n  :host > i.kettle:before {\n    content: \"kettle\";\n  }\n  :host > i.key:before {\n    content: \"key\";\n  }\n  :host > i.key_off:before {\n    content: \"key_off\";\n  }\n  :host > i.key_vertical:before {\n    content: \"key_vertical\";\n  }\n  :host > i.key_visualizer:before {\n    content: \"key_visualizer\";\n  }\n  :host > i.keyboard:before {\n    content: \"keyboard\";\n  }\n  :host > i.keyboard_alt:before {\n    content: \"keyboard_alt\";\n  }\n  :host > i.keyboard_arrow_down:before {\n    content: \"keyboard_arrow_down\";\n  }\n  :host > i.keyboard_arrow_left:before {\n    content: \"keyboard_arrow_left\";\n  }\n  :host > i.keyboard_arrow_right:before {\n    content: \"keyboard_arrow_right\";\n  }\n  :host > i.keyboard_arrow_up:before {\n    content: \"keyboard_arrow_up\";\n  }\n  :host > i.keyboard_backspace:before {\n    content: \"keyboard_backspace\";\n  }\n  :host > i.keyboard_capslock:before {\n    content: \"keyboard_capslock\";\n  }\n  :host > i.keyboard_capslock_badge:before {\n    content: \"keyboard_capslock_badge\";\n  }\n  :host > i.keyboard_command_key:before {\n    content: \"keyboard_command_key\";\n  }\n  :host > i.keyboard_control_key:before {\n    content: \"keyboard_control_key\";\n  }\n  :host > i.keyboard_double_arrow_down:before {\n    content: \"keyboard_double_arrow_down\";\n  }\n  :host > i.keyboard_double_arrow_left:before {\n    content: \"keyboard_double_arrow_left\";\n  }\n  :host > i.keyboard_double_arrow_right:before {\n    content: \"keyboard_double_arrow_right\";\n  }\n  :host > i.keyboard_double_arrow_up:before {\n    content: \"keyboard_double_arrow_up\";\n  }\n  :host > i.keyboard_external_input:before {\n    content: \"keyboard_external_input\";\n  }\n  :host > i.keyboard_full:before {\n    content: \"keyboard_full\";\n  }\n  :host > i.keyboard_hide:before {\n    content: \"keyboard_hide\";\n  }\n  :host > i.keyboard_keys:before {\n    content: \"keyboard_keys\";\n  }\n  :host > i.keyboard_off:before {\n    content: \"keyboard_off\";\n  }\n  :host > i.keyboard_onscreen:before {\n    content: \"keyboard_onscreen\";\n  }\n  :host > i.keyboard_option_key:before {\n    content: \"keyboard_option_key\";\n  }\n  :host > i.keyboard_previous_language:before {\n    content: \"keyboard_previous_language\";\n  }\n  :host > i.keyboard_return:before {\n    content: \"keyboard_return\";\n  }\n  :host > i.keyboard_tab:before {\n    content: \"keyboard_tab\";\n  }\n  :host > i.keyboard_tab_rtl:before {\n    content: \"keyboard_tab_rtl\";\n  }\n  :host > i.keyboard_voice:before {\n    content: \"keyboard_voice\";\n  }\n  :host > i.kid_star:before {\n    content: \"kid_star\";\n  }\n  :host > i.king_bed:before {\n    content: \"king_bed\";\n  }\n  :host > i.kitchen:before {\n    content: \"kitchen\";\n  }\n  :host > i.kitesurfing:before {\n    content: \"kitesurfing\";\n  }\n  :host > i.lab_panel:before {\n    content: \"lab_panel\";\n  }\n  :host > i.lab_profile:before {\n    content: \"lab_profile\";\n  }\n  :host > i.lab_research:before {\n    content: \"lab_research\";\n  }\n  :host > i.label:before {\n    content: \"label\";\n  }\n  :host > i.label_important:before {\n    content: \"label_important\";\n  }\n  :host > i.label_important_outline:before {\n    content: \"label_important_outline\";\n  }\n  :host > i.label_off:before {\n    content: \"label_off\";\n  }\n  :host > i.label_outline:before {\n    content: \"label_outline\";\n  }\n  :host > i.labs:before {\n    content: \"labs\";\n  }\n  :host > i.lan:before {\n    content: \"lan\";\n  }\n  :host > i.landscape:before {\n    content: \"landscape\";\n  }\n  :host > i.landslide:before {\n    content: \"landslide\";\n  }\n  :host > i.language:before {\n    content: \"language\";\n  }\n  :host > i.language_chinese_array:before {\n    content: \"language_chinese_array\";\n  }\n  :host > i.language_chinese_cangjie:before {\n    content: \"language_chinese_cangjie\";\n  }\n  :host > i.language_chinese_dayi:before {\n    content: \"language_chinese_dayi\";\n  }\n  :host > i.language_chinese_pinyin:before {\n    content: \"language_chinese_pinyin\";\n  }\n  :host > i.language_chinese_quick:before {\n    content: \"language_chinese_quick\";\n  }\n  :host > i.language_chinese_wubi:before {\n    content: \"language_chinese_wubi\";\n  }\n  :host > i.language_french:before {\n    content: \"language_french\";\n  }\n  :host > i.language_gb_english:before {\n    content: \"language_gb_english\";\n  }\n  :host > i.language_international:before {\n    content: \"language_international\";\n  }\n  :host > i.language_japanese_kana:before {\n    content: \"language_japanese_kana\";\n  }\n  :host > i.language_korean_latin:before {\n    content: \"language_korean_latin\";\n  }\n  :host > i.language_pinyin:before {\n    content: \"language_pinyin\";\n  }\n  :host > i.language_spanish:before {\n    content: \"language_spanish\";\n  }\n  :host > i.language_us:before {\n    content: \"language_us\";\n  }\n  :host > i.language_us_colemak:before {\n    content: \"language_us_colemak\";\n  }\n  :host > i.language_us_dvorak:before {\n    content: \"language_us_dvorak\";\n  }\n  :host > i.laps:before {\n    content: \"laps\";\n  }\n  :host > i.laptop:before {\n    content: \"laptop\";\n  }\n  :host > i.laptop_chromebook:before {\n    content: \"laptop_chromebook\";\n  }\n  :host > i.laptop_mac:before {\n    content: \"laptop_mac\";\n  }\n  :host > i.laptop_windows:before {\n    content: \"laptop_windows\";\n  }\n  :host > i.lasso_select:before {\n    content: \"lasso_select\";\n  }\n  :host > i.last_page:before {\n    content: \"last_page\";\n  }\n  :host > i.launch:before {\n    content: \"launch\";\n  }\n  :host > i.laundry:before {\n    content: \"laundry\";\n  }\n  :host > i.layers:before {\n    content: \"layers\";\n  }\n  :host > i.layers_clear:before {\n    content: \"layers_clear\";\n  }\n  :host > i.lda:before {\n    content: \"lda\";\n  }\n  :host > i.leaderboard:before {\n    content: \"leaderboard\";\n  }\n  :host > i.leak_add:before {\n    content: \"leak_add\";\n  }\n  :host > i.leak_remove:before {\n    content: \"leak_remove\";\n  }\n  :host > i.left_click:before {\n    content: \"left_click\";\n  }\n  :host > i.left_panel_close:before {\n    content: \"left_panel_close\";\n  }\n  :host > i.left_panel_open:before {\n    content: \"left_panel_open\";\n  }\n  :host > i.legend_toggle:before {\n    content: \"legend_toggle\";\n  }\n  :host > i.lens:before {\n    content: \"lens\";\n  }\n  :host > i.lens_blur:before {\n    content: \"lens_blur\";\n  }\n  :host > i.letter_switch:before {\n    content: \"letter_switch\";\n  }\n  :host > i.library_add:before {\n    content: \"library_add\";\n  }\n  :host > i.library_add_check:before {\n    content: \"library_add_check\";\n  }\n  :host > i.library_books:before {\n    content: \"library_books\";\n  }\n  :host > i.library_music:before {\n    content: \"library_music\";\n  }\n  :host > i.license:before {\n    content: \"license\";\n  }\n  :host > i.lift_to_talk:before {\n    content: \"lift_to_talk\";\n  }\n  :host > i.light:before {\n    content: \"light\";\n  }\n  :host > i.light_group:before {\n    content: \"light_group\";\n  }\n  :host > i.light_mode:before {\n    content: \"light_mode\";\n  }\n  :host > i.light_off:before {\n    content: \"light_off\";\n  }\n  :host > i.lightbulb:before {\n    content: \"lightbulb\";\n  }\n  :host > i.lightbulb_circle:before {\n    content: \"lightbulb_circle\";\n  }\n  :host > i.lightbulb_outline:before {\n    content: \"lightbulb_outline\";\n  }\n  :host > i.lightning_stand:before {\n    content: \"lightning_stand\";\n  }\n  :host > i.line_axis:before {\n    content: \"line_axis\";\n  }\n  :host > i.line_curve:before {\n    content: \"line_curve\";\n  }\n  :host > i.line_end:before {\n    content: \"line_end\";\n  }\n  :host > i.line_end_arrow:before {\n    content: \"line_end_arrow\";\n  }\n  :host > i.line_end_arrow_notch:before {\n    content: \"line_end_arrow_notch\";\n  }\n  :host > i.line_end_circle:before {\n    content: \"line_end_circle\";\n  }\n  :host > i.line_end_diamond:before {\n    content: \"line_end_diamond\";\n  }\n  :host > i.line_end_square:before {\n    content: \"line_end_square\";\n  }\n  :host > i.line_start:before {\n    content: \"line_start\";\n  }\n  :host > i.line_start_arrow:before {\n    content: \"line_start_arrow\";\n  }\n  :host > i.line_start_arrow_notch:before {\n    content: \"line_start_arrow_notch\";\n  }\n  :host > i.line_start_circle:before {\n    content: \"line_start_circle\";\n  }\n  :host > i.line_start_diamond:before {\n    content: \"line_start_diamond\";\n  }\n  :host > i.line_start_square:before {\n    content: \"line_start_square\";\n  }\n  :host > i.line_style:before {\n    content: \"line_style\";\n  }\n  :host > i.line_weight:before {\n    content: \"line_weight\";\n  }\n  :host > i.linear_scale:before {\n    content: \"linear_scale\";\n  }\n  :host > i.link:before {\n    content: \"link\";\n  }\n  :host > i.link_off:before {\n    content: \"link_off\";\n  }\n  :host > i.linked_camera:before {\n    content: \"linked_camera\";\n  }\n  :host > i.linked_services:before {\n    content: \"linked_services\";\n  }\n  :host > i.liquor:before {\n    content: \"liquor\";\n  }\n  :host > i.list:before {\n    content: \"list\";\n  }\n  :host > i.list_alt:before {\n    content: \"list_alt\";\n  }\n  :host > i.list_alt_add:before {\n    content: \"list_alt_add\";\n  }\n  :host > i.lists:before {\n    content: \"lists\";\n  }\n  :host > i.live_help:before {\n    content: \"live_help\";\n  }\n  :host > i.live_tv:before {\n    content: \"live_tv\";\n  }\n  :host > i.living:before {\n    content: \"living\";\n  }\n  :host > i.local_activity:before {\n    content: \"local_activity\";\n  }\n  :host > i.local_airport:before {\n    content: \"local_airport\";\n  }\n  :host > i.local_atm:before {\n    content: \"local_atm\";\n  }\n  :host > i.local_bar:before {\n    content: \"local_bar\";\n  }\n  :host > i.local_cafe:before {\n    content: \"local_cafe\";\n  }\n  :host > i.local_car_wash:before {\n    content: \"local_car_wash\";\n  }\n  :host > i.local_convenience_store:before {\n    content: \"local_convenience_store\";\n  }\n  :host > i.local_dining:before {\n    content: \"local_dining\";\n  }\n  :host > i.local_drink:before {\n    content: \"local_drink\";\n  }\n  :host > i.local_fire_department:before {\n    content: \"local_fire_department\";\n  }\n  :host > i.local_florist:before {\n    content: \"local_florist\";\n  }\n  :host > i.local_gas_station:before {\n    content: \"local_gas_station\";\n  }\n  :host > i.local_grocery_store:before {\n    content: \"local_grocery_store\";\n  }\n  :host > i.local_hospital:before {\n    content: \"local_hospital\";\n  }\n  :host > i.local_hotel:before {\n    content: \"local_hotel\";\n  }\n  :host > i.local_laundry_service:before {\n    content: \"local_laundry_service\";\n  }\n  :host > i.local_library:before {\n    content: \"local_library\";\n  }\n  :host > i.local_mall:before {\n    content: \"local_mall\";\n  }\n  :host > i.local_movies:before {\n    content: \"local_movies\";\n  }\n  :host > i.local_offer:before {\n    content: \"local_offer\";\n  }\n  :host > i.local_parking:before {\n    content: \"local_parking\";\n  }\n  :host > i.local_pharmacy:before {\n    content: \"local_pharmacy\";\n  }\n  :host > i.local_phone:before {\n    content: \"local_phone\";\n  }\n  :host > i.local_pizza:before {\n    content: \"local_pizza\";\n  }\n  :host > i.local_play:before {\n    content: \"local_play\";\n  }\n  :host > i.local_police:before {\n    content: \"local_police\";\n  }\n  :host > i.local_post_office:before {\n    content: \"local_post_office\";\n  }\n  :host > i.local_printshop:before {\n    content: \"local_printshop\";\n  }\n  :host > i.local_see:before {\n    content: \"local_see\";\n  }\n  :host > i.local_shipping:before {\n    content: \"local_shipping\";\n  }\n  :host > i.local_taxi:before {\n    content: \"local_taxi\";\n  }\n  :host > i.location_automation:before {\n    content: \"location_automation\";\n  }\n  :host > i.location_away:before {\n    content: \"location_away\";\n  }\n  :host > i.location_chip:before {\n    content: \"location_chip\";\n  }\n  :host > i.location_city:before {\n    content: \"location_city\";\n  }\n  :host > i.location_disabled:before {\n    content: \"location_disabled\";\n  }\n  :host > i.location_home:before {\n    content: \"location_home\";\n  }\n  :host > i.location_off:before {\n    content: \"location_off\";\n  }\n  :host > i.location_on:before {\n    content: \"location_on\";\n  }\n  :host > i.location_pin:before {\n    content: \"location_pin\";\n  }\n  :host > i.location_searching:before {\n    content: \"location_searching\";\n  }\n  :host > i.locator_tag:before {\n    content: \"locator_tag\";\n  }\n  :host > i.lock:before {\n    content: \"lock\";\n  }\n  :host > i.lock_clock:before {\n    content: \"lock_clock\";\n  }\n  :host > i.lock_open:before {\n    content: \"lock_open\";\n  }\n  :host > i.lock_open_right:before {\n    content: \"lock_open_right\";\n  }\n  :host > i.lock_outline:before {\n    content: \"lock_outline\";\n  }\n  :host > i.lock_person:before {\n    content: \"lock_person\";\n  }\n  :host > i.lock_reset:before {\n    content: \"lock_reset\";\n  }\n  :host > i.login:before {\n    content: \"login\";\n  }\n  :host > i.logo_dev:before {\n    content: \"logo_dev\";\n  }\n  :host > i.logout:before {\n    content: \"logout\";\n  }\n  :host > i.looks:before {\n    content: \"looks\";\n  }\n  :host > i.looks_3:before {\n    content: \"looks_3\";\n  }\n  :host > i.looks_4:before {\n    content: \"looks_4\";\n  }\n  :host > i.looks_5:before {\n    content: \"looks_5\";\n  }\n  :host > i.looks_6:before {\n    content: \"looks_6\";\n  }\n  :host > i.looks_one:before {\n    content: \"looks_one\";\n  }\n  :host > i.looks_two:before {\n    content: \"looks_two\";\n  }\n  :host > i.loop:before {\n    content: \"loop\";\n  }\n  :host > i.loupe:before {\n    content: \"loupe\";\n  }\n  :host > i.low_density:before {\n    content: \"low_density\";\n  }\n  :host > i.low_priority:before {\n    content: \"low_priority\";\n  }\n  :host > i.loyalty:before {\n    content: \"loyalty\";\n  }\n  :host > i.lte_mobiledata:before {\n    content: \"lte_mobiledata\";\n  }\n  :host > i.lte_mobiledata_badge:before {\n    content: \"lte_mobiledata_badge\";\n  }\n  :host > i.lte_plus_mobiledata:before {\n    content: \"lte_plus_mobiledata\";\n  }\n  :host > i.lte_plus_mobiledata_badge:before {\n    content: \"lte_plus_mobiledata_badge\";\n  }\n  :host > i.luggage:before {\n    content: \"luggage\";\n  }\n  :host > i.lunch_dining:before {\n    content: \"lunch_dining\";\n  }\n  :host > i.lyrics:before {\n    content: \"lyrics\";\n  }\n  :host > i.macro_auto:before {\n    content: \"macro_auto\";\n  }\n  :host > i.macro_off:before {\n    content: \"macro_off\";\n  }\n  :host > i.magic_button:before {\n    content: \"magic_button\";\n  }\n  :host > i.magic_exchange:before {\n    content: \"magic_exchange\";\n  }\n  :host > i.magic_tether:before {\n    content: \"magic_tether\";\n  }\n  :host > i.magnification_large:before {\n    content: \"magnification_large\";\n  }\n  :host > i.magnification_small:before {\n    content: \"magnification_small\";\n  }\n  :host > i.magnify_docked:before {\n    content: \"magnify_docked\";\n  }\n  :host > i.magnify_fullscreen:before {\n    content: \"magnify_fullscreen\";\n  }\n  :host > i.mail:before {\n    content: \"mail\";\n  }\n  :host > i.mail_lock:before {\n    content: \"mail_lock\";\n  }\n  :host > i.mail_outline:before {\n    content: \"mail_outline\";\n  }\n  :host > i.male:before {\n    content: \"male\";\n  }\n  :host > i.man:before {\n    content: \"man\";\n  }\n  :host > i.man_2:before {\n    content: \"man_2\";\n  }\n  :host > i.man_3:before {\n    content: \"man_3\";\n  }\n  :host > i.man_4:before {\n    content: \"man_4\";\n  }\n  :host > i.manage_accounts:before {\n    content: \"manage_accounts\";\n  }\n  :host > i.manage_history:before {\n    content: \"manage_history\";\n  }\n  :host > i.manage_search:before {\n    content: \"manage_search\";\n  }\n  :host > i.manga:before {\n    content: \"manga\";\n  }\n  :host > i.manufacturing:before {\n    content: \"manufacturing\";\n  }\n  :host > i.map:before {\n    content: \"map\";\n  }\n  :host > i.maps_home_work:before {\n    content: \"maps_home_work\";\n  }\n  :host > i.maps_ugc:before {\n    content: \"maps_ugc\";\n  }\n  :host > i.margin:before {\n    content: \"margin\";\n  }\n  :host > i.mark_as_unread:before {\n    content: \"mark_as_unread\";\n  }\n  :host > i.mark_chat_read:before {\n    content: \"mark_chat_read\";\n  }\n  :host > i.mark_chat_unread:before {\n    content: \"mark_chat_unread\";\n  }\n  :host > i.mark_email_read:before {\n    content: \"mark_email_read\";\n  }\n  :host > i.mark_email_unread:before {\n    content: \"mark_email_unread\";\n  }\n  :host > i.mark_unread_chat_alt:before {\n    content: \"mark_unread_chat_alt\";\n  }\n  :host > i.markdown:before {\n    content: \"markdown\";\n  }\n  :host > i.markdown_copy:before {\n    content: \"markdown_copy\";\n  }\n  :host > i.markdown_paste:before {\n    content: \"markdown_paste\";\n  }\n  :host > i.markunread:before {\n    content: \"markunread\";\n  }\n  :host > i.markunread_mailbox:before {\n    content: \"markunread_mailbox\";\n  }\n  :host > i.masked_transitions:before {\n    content: \"masked_transitions\";\n  }\n  :host > i.masks:before {\n    content: \"masks\";\n  }\n  :host > i.match_case:before {\n    content: \"match_case\";\n  }\n  :host > i.match_word:before {\n    content: \"match_word\";\n  }\n  :host > i.matter:before {\n    content: \"matter\";\n  }\n  :host > i.maximize:before {\n    content: \"maximize\";\n  }\n  :host > i.measuring_tape:before {\n    content: \"measuring_tape\";\n  }\n  :host > i.media_bluetooth_off:before {\n    content: \"media_bluetooth_off\";\n  }\n  :host > i.media_bluetooth_on:before {\n    content: \"media_bluetooth_on\";\n  }\n  :host > i.media_link:before {\n    content: \"media_link\";\n  }\n  :host > i.media_output:before {\n    content: \"media_output\";\n  }\n  :host > i.media_output_off:before {\n    content: \"media_output_off\";\n  }\n  :host > i.mediation:before {\n    content: \"mediation\";\n  }\n  :host > i.medical_information:before {\n    content: \"medical_information\";\n  }\n  :host > i.medical_mask:before {\n    content: \"medical_mask\";\n  }\n  :host > i.medical_services:before {\n    content: \"medical_services\";\n  }\n  :host > i.medication:before {\n    content: \"medication\";\n  }\n  :host > i.medication_liquid:before {\n    content: \"medication_liquid\";\n  }\n  :host > i.meeting_room:before {\n    content: \"meeting_room\";\n  }\n  :host > i.memory:before {\n    content: \"memory\";\n  }\n  :host > i.memory_alt:before {\n    content: \"memory_alt\";\n  }\n  :host > i.menstrual_health:before {\n    content: \"menstrual_health\";\n  }\n  :host > i.menu:before {\n    content: \"menu\";\n  }\n  :host > i.menu_book:before {\n    content: \"menu_book\";\n  }\n  :host > i.menu_open:before {\n    content: \"menu_open\";\n  }\n  :host > i.merge:before {\n    content: \"merge\";\n  }\n  :host > i.merge_type:before {\n    content: \"merge_type\";\n  }\n  :host > i.message:before {\n    content: \"message\";\n  }\n  :host > i.metabolism:before {\n    content: \"metabolism\";\n  }\n  :host > i.mfg_nest_yale_lock:before {\n    content: \"mfg_nest_yale_lock\";\n  }\n  :host > i.mic:before {\n    content: \"mic\";\n  }\n  :host > i.mic_double:before {\n    content: \"mic_double\";\n  }\n  :host > i.mic_external_off:before {\n    content: \"mic_external_off\";\n  }\n  :host > i.mic_external_on:before {\n    content: \"mic_external_on\";\n  }\n  :host > i.mic_none:before {\n    content: \"mic_none\";\n  }\n  :host > i.mic_off:before {\n    content: \"mic_off\";\n  }\n  :host > i.microbiology:before {\n    content: \"microbiology\";\n  }\n  :host > i.microwave:before {\n    content: \"microwave\";\n  }\n  :host > i.microwave_gen:before {\n    content: \"microwave_gen\";\n  }\n  :host > i.military_tech:before {\n    content: \"military_tech\";\n  }\n  :host > i.mimo:before {\n    content: \"mimo\";\n  }\n  :host > i.mimo_disconnect:before {\n    content: \"mimo_disconnect\";\n  }\n  :host > i.mindfulness:before {\n    content: \"mindfulness\";\n  }\n  :host > i.minimize:before {\n    content: \"minimize\";\n  }\n  :host > i.minor_crash:before {\n    content: \"minor_crash\";\n  }\n  :host > i.mintmark:before {\n    content: \"mintmark\";\n  }\n  :host > i.missed_video_call:before {\n    content: \"missed_video_call\";\n  }\n  :host > i.missed_video_call_filled:before {\n    content: \"missed_video_call_filled\";\n  }\n  :host > i.missing_controller:before {\n    content: \"missing_controller\";\n  }\n  :host > i.mist:before {\n    content: \"mist\";\n  }\n  :host > i.mitre:before {\n    content: \"mitre\";\n  }\n  :host > i.mixture_med:before {\n    content: \"mixture_med\";\n  }\n  :host > i.mms:before {\n    content: \"mms\";\n  }\n  :host > i.mobile_friendly:before {\n    content: \"mobile_friendly\";\n  }\n  :host > i.mobile_off:before {\n    content: \"mobile_off\";\n  }\n  :host > i.mobile_screen_share:before {\n    content: \"mobile_screen_share\";\n  }\n  :host > i.mobiledata_off:before {\n    content: \"mobiledata_off\";\n  }\n  :host > i.mode:before {\n    content: \"mode\";\n  }\n  :host > i.mode_comment:before {\n    content: \"mode_comment\";\n  }\n  :host > i.mode_cool:before {\n    content: \"mode_cool\";\n  }\n  :host > i.mode_cool_off:before {\n    content: \"mode_cool_off\";\n  }\n  :host > i.mode_dual:before {\n    content: \"mode_dual\";\n  }\n  :host > i.mode_edit:before {\n    content: \"mode_edit\";\n  }\n  :host > i.mode_edit_outline:before {\n    content: \"mode_edit_outline\";\n  }\n  :host > i.mode_fan:before {\n    content: \"mode_fan\";\n  }\n  :host > i.mode_fan_off:before {\n    content: \"mode_fan_off\";\n  }\n  :host > i.mode_heat:before {\n    content: \"mode_heat\";\n  }\n  :host > i.mode_heat_cool:before {\n    content: \"mode_heat_cool\";\n  }\n  :host > i.mode_heat_off:before {\n    content: \"mode_heat_off\";\n  }\n  :host > i.mode_night:before {\n    content: \"mode_night\";\n  }\n  :host > i.mode_of_travel:before {\n    content: \"mode_of_travel\";\n  }\n  :host > i.mode_off_on:before {\n    content: \"mode_off_on\";\n  }\n  :host > i.mode_standby:before {\n    content: \"mode_standby\";\n  }\n  :host > i.model_training:before {\n    content: \"model_training\";\n  }\n  :host > i.monetization_on:before {\n    content: \"monetization_on\";\n  }\n  :host > i.money:before {\n    content: \"money\";\n  }\n  :host > i.money_off:before {\n    content: \"money_off\";\n  }\n  :host > i.money_off_csred:before {\n    content: \"money_off_csred\";\n  }\n  :host > i.monitor:before {\n    content: \"monitor\";\n  }\n  :host > i.monitor_heart:before {\n    content: \"monitor_heart\";\n  }\n  :host > i.monitor_weight:before {\n    content: \"monitor_weight\";\n  }\n  :host > i.monitor_weight_gain:before {\n    content: \"monitor_weight_gain\";\n  }\n  :host > i.monitor_weight_loss:before {\n    content: \"monitor_weight_loss\";\n  }\n  :host > i.monitoring:before {\n    content: \"monitoring\";\n  }\n  :host > i.monochrome_photos:before {\n    content: \"monochrome_photos\";\n  }\n  :host > i.mood:before {\n    content: \"mood\";\n  }\n  :host > i.mood_bad:before {\n    content: \"mood_bad\";\n  }\n  :host > i.mop:before {\n    content: \"mop\";\n  }\n  :host > i.more:before {\n    content: \"more\";\n  }\n  :host > i.more_down:before {\n    content: \"more_down\";\n  }\n  :host > i.more_horiz:before {\n    content: \"more_horiz\";\n  }\n  :host > i.more_time:before {\n    content: \"more_time\";\n  }\n  :host > i.more_up:before {\n    content: \"more_up\";\n  }\n  :host > i.more_vert:before {\n    content: \"more_vert\";\n  }\n  :host > i.mosque:before {\n    content: \"mosque\";\n  }\n  :host > i.motion_blur:before {\n    content: \"motion_blur\";\n  }\n  :host > i.motion_mode:before {\n    content: \"motion_mode\";\n  }\n  :host > i.motion_photos_auto:before {\n    content: \"motion_photos_auto\";\n  }\n  :host > i.motion_photos_off:before {\n    content: \"motion_photos_off\";\n  }\n  :host > i.motion_photos_on:before {\n    content: \"motion_photos_on\";\n  }\n  :host > i.motion_photos_pause:before {\n    content: \"motion_photos_pause\";\n  }\n  :host > i.motion_photos_paused:before {\n    content: \"motion_photos_paused\";\n  }\n  :host > i.motion_sensor_active:before {\n    content: \"motion_sensor_active\";\n  }\n  :host > i.motion_sensor_alert:before {\n    content: \"motion_sensor_alert\";\n  }\n  :host > i.motion_sensor_idle:before {\n    content: \"motion_sensor_idle\";\n  }\n  :host > i.motion_sensor_urgent:before {\n    content: \"motion_sensor_urgent\";\n  }\n  :host > i.motorcycle:before {\n    content: \"motorcycle\";\n  }\n  :host > i.mountain_flag:before {\n    content: \"mountain_flag\";\n  }\n  :host > i.mouse:before {\n    content: \"mouse\";\n  }\n  :host > i.move:before {\n    content: \"move\";\n  }\n  :host > i.move_down:before {\n    content: \"move_down\";\n  }\n  :host > i.move_group:before {\n    content: \"move_group\";\n  }\n  :host > i.move_item:before {\n    content: \"move_item\";\n  }\n  :host > i.move_location:before {\n    content: \"move_location\";\n  }\n  :host > i.move_selection_down:before {\n    content: \"move_selection_down\";\n  }\n  :host > i.move_selection_left:before {\n    content: \"move_selection_left\";\n  }\n  :host > i.move_selection_right:before {\n    content: \"move_selection_right\";\n  }\n  :host > i.move_selection_up:before {\n    content: \"move_selection_up\";\n  }\n  :host > i.move_to_inbox:before {\n    content: \"move_to_inbox\";\n  }\n  :host > i.move_up:before {\n    content: \"move_up\";\n  }\n  :host > i.moved_location:before {\n    content: \"moved_location\";\n  }\n  :host > i.movie:before {\n    content: \"movie\";\n  }\n  :host > i.movie_creation:before {\n    content: \"movie_creation\";\n  }\n  :host > i.movie_edit:before {\n    content: \"movie_edit\";\n  }\n  :host > i.movie_filter:before {\n    content: \"movie_filter\";\n  }\n  :host > i.movie_info:before {\n    content: \"movie_info\";\n  }\n  :host > i.moving:before {\n    content: \"moving\";\n  }\n  :host > i.moving_beds:before {\n    content: \"moving_beds\";\n  }\n  :host > i.moving_ministry:before {\n    content: \"moving_ministry\";\n  }\n  :host > i.mp:before {\n    content: \"mp\";\n  }\n  :host > i.multicooker:before {\n    content: \"multicooker\";\n  }\n  :host > i.multiline_chart:before {\n    content: \"multiline_chart\";\n  }\n  :host > i.multiple_stop:before {\n    content: \"multiple_stop\";\n  }\n  :host > i.museum:before {\n    content: \"museum\";\n  }\n  :host > i.music_cast:before {\n    content: \"music_cast\";\n  }\n  :host > i.music_note:before {\n    content: \"music_note\";\n  }\n  :host > i.music_off:before {\n    content: \"music_off\";\n  }\n  :host > i.music_video:before {\n    content: \"music_video\";\n  }\n  :host > i.my_location:before {\n    content: \"my_location\";\n  }\n  :host > i.mystery:before {\n    content: \"mystery\";\n  }\n  :host > i.nat:before {\n    content: \"nat\";\n  }\n  :host > i.nature:before {\n    content: \"nature\";\n  }\n  :host > i.nature_people:before {\n    content: \"nature_people\";\n  }\n  :host > i.navigate_before:before {\n    content: \"navigate_before\";\n  }\n  :host > i.navigate_next:before {\n    content: \"navigate_next\";\n  }\n  :host > i.navigation:before {\n    content: \"navigation\";\n  }\n  :host > i.near_me:before {\n    content: \"near_me\";\n  }\n  :host > i.near_me_disabled:before {\n    content: \"near_me_disabled\";\n  }\n  :host > i.nearby:before {\n    content: \"nearby\";\n  }\n  :host > i.nearby_error:before {\n    content: \"nearby_error\";\n  }\n  :host > i.nearby_off:before {\n    content: \"nearby_off\";\n  }\n  :host > i.nephrology:before {\n    content: \"nephrology\";\n  }\n  :host > i.nest_audio:before {\n    content: \"nest_audio\";\n  }\n  :host > i.nest_cam_floodlight:before {\n    content: \"nest_cam_floodlight\";\n  }\n  :host > i.nest_cam_indoor:before {\n    content: \"nest_cam_indoor\";\n  }\n  :host > i.nest_cam_iq:before {\n    content: \"nest_cam_iq\";\n  }\n  :host > i.nest_cam_iq_outdoor:before {\n    content: \"nest_cam_iq_outdoor\";\n  }\n  :host > i.nest_cam_magnet_mount:before {\n    content: \"nest_cam_magnet_mount\";\n  }\n  :host > i.nest_cam_outdoor:before {\n    content: \"nest_cam_outdoor\";\n  }\n  :host > i.nest_cam_stand:before {\n    content: \"nest_cam_stand\";\n  }\n  :host > i.nest_cam_wall_mount:before {\n    content: \"nest_cam_wall_mount\";\n  }\n  :host > i.nest_cam_wired_stand:before {\n    content: \"nest_cam_wired_stand\";\n  }\n  :host > i.nest_clock_farsight_analog:before {\n    content: \"nest_clock_farsight_analog\";\n  }\n  :host > i.nest_clock_farsight_digital:before {\n    content: \"nest_clock_farsight_digital\";\n  }\n  :host > i.nest_connect:before {\n    content: \"nest_connect\";\n  }\n  :host > i.nest_detect:before {\n    content: \"nest_detect\";\n  }\n  :host > i.nest_display:before {\n    content: \"nest_display\";\n  }\n  :host > i.nest_display_max:before {\n    content: \"nest_display_max\";\n  }\n  :host > i.nest_doorbell_visitor:before {\n    content: \"nest_doorbell_visitor\";\n  }\n  :host > i.nest_eco_leaf:before {\n    content: \"nest_eco_leaf\";\n  }\n  :host > i.nest_farsight_weather:before {\n    content: \"nest_farsight_weather\";\n  }\n  :host > i.nest_found_savings:before {\n    content: \"nest_found_savings\";\n  }\n  :host > i.nest_gale_wifi:before {\n    content: \"nest_gale_wifi\";\n  }\n  :host > i.nest_heat_link_e:before {\n    content: \"nest_heat_link_e\";\n  }\n  :host > i.nest_heat_link_gen_3:before {\n    content: \"nest_heat_link_gen_3\";\n  }\n  :host > i.nest_hello_doorbell:before {\n    content: \"nest_hello_doorbell\";\n  }\n  :host > i.nest_locator_tag:before {\n    content: \"nest_locator_tag\";\n  }\n  :host > i.nest_mini:before {\n    content: \"nest_mini\";\n  }\n  :host > i.nest_multi_room:before {\n    content: \"nest_multi_room\";\n  }\n  :host > i.nest_protect:before {\n    content: \"nest_protect\";\n  }\n  :host > i.nest_remote:before {\n    content: \"nest_remote\";\n  }\n  :host > i.nest_remote_comfort_sensor:before {\n    content: \"nest_remote_comfort_sensor\";\n  }\n  :host > i.nest_secure_alarm:before {\n    content: \"nest_secure_alarm\";\n  }\n  :host > i.nest_sunblock:before {\n    content: \"nest_sunblock\";\n  }\n  :host > i.nest_tag:before {\n    content: \"nest_tag\";\n  }\n  :host > i.nest_thermostat:before {\n    content: \"nest_thermostat\";\n  }\n  :host > i.nest_thermostat_e_eu:before {\n    content: \"nest_thermostat_e_eu\";\n  }\n  :host > i.nest_thermostat_gen_3:before {\n    content: \"nest_thermostat_gen_3\";\n  }\n  :host > i.nest_thermostat_sensor:before {\n    content: \"nest_thermostat_sensor\";\n  }\n  :host > i.nest_thermostat_sensor_eu:before {\n    content: \"nest_thermostat_sensor_eu\";\n  }\n  :host > i.nest_thermostat_zirconium_eu:before {\n    content: \"nest_thermostat_zirconium_eu\";\n  }\n  :host > i.nest_true_radiant:before {\n    content: \"nest_true_radiant\";\n  }\n  :host > i.nest_wake_on_approach:before {\n    content: \"nest_wake_on_approach\";\n  }\n  :host > i.nest_wake_on_press:before {\n    content: \"nest_wake_on_press\";\n  }\n  :host > i.nest_wifi_gale:before {\n    content: \"nest_wifi_gale\";\n  }\n  :host > i.nest_wifi_mistral:before {\n    content: \"nest_wifi_mistral\";\n  }\n  :host > i.nest_wifi_point:before {\n    content: \"nest_wifi_point\";\n  }\n  :host > i.nest_wifi_point_vento:before {\n    content: \"nest_wifi_point_vento\";\n  }\n  :host > i.nest_wifi_pro:before {\n    content: \"nest_wifi_pro\";\n  }\n  :host > i.nest_wifi_pro_2:before {\n    content: \"nest_wifi_pro_2\";\n  }\n  :host > i.nest_wifi_router:before {\n    content: \"nest_wifi_router\";\n  }\n  :host > i.network_cell:before {\n    content: \"network_cell\";\n  }\n  :host > i.network_check:before {\n    content: \"network_check\";\n  }\n  :host > i.network_intelligence_history:before {\n    content: \"network_intelligence_history\";\n  }\n  :host > i.network_intelligence_update:before {\n    content: \"network_intelligence_update\";\n  }\n  :host > i.network_locked:before {\n    content: \"network_locked\";\n  }\n  :host > i.network_manage:before {\n    content: \"network_manage\";\n  }\n  :host > i.network_node:before {\n    content: \"network_node\";\n  }\n  :host > i.network_ping:before {\n    content: \"network_ping\";\n  }\n  :host > i.network_wifi:before {\n    content: \"network_wifi\";\n  }\n  :host > i.network_wifi_1_bar:before {\n    content: \"network_wifi_1_bar\";\n  }\n  :host > i.network_wifi_1_bar_locked:before {\n    content: \"network_wifi_1_bar_locked\";\n  }\n  :host > i.network_wifi_2_bar:before {\n    content: \"network_wifi_2_bar\";\n  }\n  :host > i.network_wifi_2_bar_locked:before {\n    content: \"network_wifi_2_bar_locked\";\n  }\n  :host > i.network_wifi_3_bar:before {\n    content: \"network_wifi_3_bar\";\n  }\n  :host > i.network_wifi_3_bar_locked:before {\n    content: \"network_wifi_3_bar_locked\";\n  }\n  :host > i.network_wifi_locked:before {\n    content: \"network_wifi_locked\";\n  }\n  :host > i.neurology:before {\n    content: \"neurology\";\n  }\n  :host > i.new_label:before {\n    content: \"new_label\";\n  }\n  :host > i.new_releases:before {\n    content: \"new_releases\";\n  }\n  :host > i.new_window:before {\n    content: \"new_window\";\n  }\n  :host > i.news:before {\n    content: \"news\";\n  }\n  :host > i.newsmode:before {\n    content: \"newsmode\";\n  }\n  :host > i.newspaper:before {\n    content: \"newspaper\";\n  }\n  :host > i.newsstand:before {\n    content: \"newsstand\";\n  }\n  :host > i.next_plan:before {\n    content: \"next_plan\";\n  }\n  :host > i.next_week:before {\n    content: \"next_week\";\n  }\n  :host > i.nfc:before {\n    content: \"nfc\";\n  }\n  :host > i.night_shelter:before {\n    content: \"night_shelter\";\n  }\n  :host > i.night_sight_auto:before {\n    content: \"night_sight_auto\";\n  }\n  :host > i.night_sight_auto_off:before {\n    content: \"night_sight_auto_off\";\n  }\n  :host > i.night_sight_max:before {\n    content: \"night_sight_max\";\n  }\n  :host > i.nightlife:before {\n    content: \"nightlife\";\n  }\n  :host > i.nightlight:before {\n    content: \"nightlight\";\n  }\n  :host > i.nightlight_round:before {\n    content: \"nightlight_round\";\n  }\n  :host > i.nights_stay:before {\n    content: \"nights_stay\";\n  }\n  :host > i.no_accounts:before {\n    content: \"no_accounts\";\n  }\n  :host > i.no_adult_content:before {\n    content: \"no_adult_content\";\n  }\n  :host > i.no_backpack:before {\n    content: \"no_backpack\";\n  }\n  :host > i.no_crash:before {\n    content: \"no_crash\";\n  }\n  :host > i.no_drinks:before {\n    content: \"no_drinks\";\n  }\n  :host > i.no_encryption:before {\n    content: \"no_encryption\";\n  }\n  :host > i.no_encryption_gmailerrorred:before {\n    content: \"no_encryption_gmailerrorred\";\n  }\n  :host > i.no_flash:before {\n    content: \"no_flash\";\n  }\n  :host > i.no_food:before {\n    content: \"no_food\";\n  }\n  :host > i.no_luggage:before {\n    content: \"no_luggage\";\n  }\n  :host > i.no_meals:before {\n    content: \"no_meals\";\n  }\n  :host > i.no_meeting_room:before {\n    content: \"no_meeting_room\";\n  }\n  :host > i.no_photography:before {\n    content: \"no_photography\";\n  }\n  :host > i.no_sim:before {\n    content: \"no_sim\";\n  }\n  :host > i.no_sound:before {\n    content: \"no_sound\";\n  }\n  :host > i.no_stroller:before {\n    content: \"no_stroller\";\n  }\n  :host > i.no_transfer:before {\n    content: \"no_transfer\";\n  }\n  :host > i.noise_aware:before {\n    content: \"noise_aware\";\n  }\n  :host > i.noise_control_off:before {\n    content: \"noise_control_off\";\n  }\n  :host > i.noise_control_on:before {\n    content: \"noise_control_on\";\n  }\n  :host > i.nordic_walking:before {\n    content: \"nordic_walking\";\n  }\n  :host > i.north:before {\n    content: \"north\";\n  }\n  :host > i.north_east:before {\n    content: \"north_east\";\n  }\n  :host > i.north_west:before {\n    content: \"north_west\";\n  }\n  :host > i.not_accessible:before {\n    content: \"not_accessible\";\n  }\n  :host > i.not_accessible_forward:before {\n    content: \"not_accessible_forward\";\n  }\n  :host > i.not_interested:before {\n    content: \"not_interested\";\n  }\n  :host > i.not_listed_location:before {\n    content: \"not_listed_location\";\n  }\n  :host > i.not_started:before {\n    content: \"not_started\";\n  }\n  :host > i.note:before {\n    content: \"note\";\n  }\n  :host > i.note_add:before {\n    content: \"note_add\";\n  }\n  :host > i.note_alt:before {\n    content: \"note_alt\";\n  }\n  :host > i.note_stack:before {\n    content: \"note_stack\";\n  }\n  :host > i.note_stack_add:before {\n    content: \"note_stack_add\";\n  }\n  :host > i.notes:before {\n    content: \"notes\";\n  }\n  :host > i.notification_add:before {\n    content: \"notification_add\";\n  }\n  :host > i.notification_important:before {\n    content: \"notification_important\";\n  }\n  :host > i.notification_multiple:before {\n    content: \"notification_multiple\";\n  }\n  :host > i.notifications:before {\n    content: \"notifications\";\n  }\n  :host > i.notifications_active:before {\n    content: \"notifications_active\";\n  }\n  :host > i.notifications_none:before {\n    content: \"notifications_none\";\n  }\n  :host > i.notifications_off:before {\n    content: \"notifications_off\";\n  }\n  :host > i.notifications_paused:before {\n    content: \"notifications_paused\";\n  }\n  :host > i.notifications_unread:before {\n    content: \"notifications_unread\";\n  }\n  :host > i.numbers:before {\n    content: \"numbers\";\n  }\n  :host > i.nutrition:before {\n    content: \"nutrition\";\n  }\n  :host > i.ods:before {\n    content: \"ods\";\n  }\n  :host > i.odt:before {\n    content: \"odt\";\n  }\n  :host > i.offline_bolt:before {\n    content: \"offline_bolt\";\n  }\n  :host > i.offline_pin:before {\n    content: \"offline_pin\";\n  }\n  :host > i.offline_share:before {\n    content: \"offline_share\";\n  }\n  :host > i.oil_barrel:before {\n    content: \"oil_barrel\";\n  }\n  :host > i.on_device_training:before {\n    content: \"on_device_training\";\n  }\n  :host > i.on_hub_device:before {\n    content: \"on_hub_device\";\n  }\n  :host > i.oncology:before {\n    content: \"oncology\";\n  }\n  :host > i.ondemand_video:before {\n    content: \"ondemand_video\";\n  }\n  :host > i.online_prediction:before {\n    content: \"online_prediction\";\n  }\n  :host > i.onsen:before {\n    content: \"onsen\";\n  }\n  :host > i.opacity:before {\n    content: \"opacity\";\n  }\n  :host > i.open_in_browser:before {\n    content: \"open_in_browser\";\n  }\n  :host > i.open_in_full:before {\n    content: \"open_in_full\";\n  }\n  :host > i.open_in_new:before {\n    content: \"open_in_new\";\n  }\n  :host > i.open_in_new_down:before {\n    content: \"open_in_new_down\";\n  }\n  :host > i.open_in_new_off:before {\n    content: \"open_in_new_off\";\n  }\n  :host > i.open_in_phone:before {\n    content: \"open_in_phone\";\n  }\n  :host > i.open_jam:before {\n    content: \"open_jam\";\n  }\n  :host > i.open_with:before {\n    content: \"open_with\";\n  }\n  :host > i.ophthalmology:before {\n    content: \"ophthalmology\";\n  }\n  :host > i.oral_disease:before {\n    content: \"oral_disease\";\n  }\n  :host > i.order_approve:before {\n    content: \"order_approve\";\n  }\n  :host > i.order_play:before {\n    content: \"order_play\";\n  }\n  :host > i.orders:before {\n    content: \"orders\";\n  }\n  :host > i.orthopedics:before {\n    content: \"orthopedics\";\n  }\n  :host > i.other_admission:before {\n    content: \"other_admission\";\n  }\n  :host > i.other_houses:before {\n    content: \"other_houses\";\n  }\n  :host > i.outbound:before {\n    content: \"outbound\";\n  }\n  :host > i.outbox:before {\n    content: \"outbox\";\n  }\n  :host > i.outbox_alt:before {\n    content: \"outbox_alt\";\n  }\n  :host > i.outdoor_garden:before {\n    content: \"outdoor_garden\";\n  }\n  :host > i.outdoor_grill:before {\n    content: \"outdoor_grill\";\n  }\n  :host > i.outgoing_mail:before {\n    content: \"outgoing_mail\";\n  }\n  :host > i.outlet:before {\n    content: \"outlet\";\n  }\n  :host > i.outlined_flag:before {\n    content: \"outlined_flag\";\n  }\n  :host > i.outpatient:before {\n    content: \"outpatient\";\n  }\n  :host > i.outpatient_med:before {\n    content: \"outpatient_med\";\n  }\n  :host > i.output:before {\n    content: \"output\";\n  }\n  :host > i.output_circle:before {\n    content: \"output_circle\";\n  }\n  :host > i.oven:before {\n    content: \"oven\";\n  }\n  :host > i.oven_gen:before {\n    content: \"oven_gen\";\n  }\n  :host > i.overview:before {\n    content: \"overview\";\n  }\n  :host > i.overview_key:before {\n    content: \"overview_key\";\n  }\n  :host > i.oxygen_saturation:before {\n    content: \"oxygen_saturation\";\n  }\n  :host > i.p2p:before {\n    content: \"p2p\";\n  }\n  :host > i.pace:before {\n    content: \"pace\";\n  }\n  :host > i.pacemaker:before {\n    content: \"pacemaker\";\n  }\n  :host > i.package:before {\n    content: \"package\";\n  }\n  :host > i.package_2:before {\n    content: \"package_2\";\n  }\n  :host > i.padding:before {\n    content: \"padding\";\n  }\n  :host > i.page_control:before {\n    content: \"page_control\";\n  }\n  :host > i.page_info:before {\n    content: \"page_info\";\n  }\n  :host > i.pageless:before {\n    content: \"pageless\";\n  }\n  :host > i.pages:before {\n    content: \"pages\";\n  }\n  :host > i.pageview:before {\n    content: \"pageview\";\n  }\n  :host > i.paid:before {\n    content: \"paid\";\n  }\n  :host > i.palette:before {\n    content: \"palette\";\n  }\n  :host > i.pallet:before {\n    content: \"pallet\";\n  }\n  :host > i.pan_tool:before {\n    content: \"pan_tool\";\n  }\n  :host > i.pan_tool_alt:before {\n    content: \"pan_tool_alt\";\n  }\n  :host > i.pan_zoom:before {\n    content: \"pan_zoom\";\n  }\n  :host > i.panorama:before {\n    content: \"panorama\";\n  }\n  :host > i.panorama_fish_eye:before {\n    content: \"panorama_fish_eye\";\n  }\n  :host > i.panorama_horizontal:before {\n    content: \"panorama_horizontal\";\n  }\n  :host > i.panorama_photosphere:before {\n    content: \"panorama_photosphere\";\n  }\n  :host > i.panorama_vertical:before {\n    content: \"panorama_vertical\";\n  }\n  :host > i.panorama_wide_angle:before {\n    content: \"panorama_wide_angle\";\n  }\n  :host > i.paragliding:before {\n    content: \"paragliding\";\n  }\n  :host > i.park:before {\n    content: \"park\";\n  }\n  :host > i.partly_cloudy_day:before {\n    content: \"partly_cloudy_day\";\n  }\n  :host > i.partly_cloudy_night:before {\n    content: \"partly_cloudy_night\";\n  }\n  :host > i.partner_exchange:before {\n    content: \"partner_exchange\";\n  }\n  :host > i.partner_reports:before {\n    content: \"partner_reports\";\n  }\n  :host > i.party_mode:before {\n    content: \"party_mode\";\n  }\n  :host > i.passkey:before {\n    content: \"passkey\";\n  }\n  :host > i.password:before {\n    content: \"password\";\n  }\n  :host > i.patient_list:before {\n    content: \"patient_list\";\n  }\n  :host > i.pattern:before {\n    content: \"pattern\";\n  }\n  :host > i.pause:before {\n    content: \"pause\";\n  }\n  :host > i.pause_circle:before {\n    content: \"pause_circle\";\n  }\n  :host > i.pause_circle_filled:before {\n    content: \"pause_circle_filled\";\n  }\n  :host > i.pause_circle_outline:before {\n    content: \"pause_circle_outline\";\n  }\n  :host > i.pause_presentation:before {\n    content: \"pause_presentation\";\n  }\n  :host > i.payment:before {\n    content: \"payment\";\n  }\n  :host > i.payments:before {\n    content: \"payments\";\n  }\n  :host > i.pedal_bike:before {\n    content: \"pedal_bike\";\n  }\n  :host > i.pediatrics:before {\n    content: \"pediatrics\";\n  }\n  :host > i.pen_size_1:before {\n    content: \"pen_size_1\";\n  }\n  :host > i.pen_size_2:before {\n    content: \"pen_size_2\";\n  }\n  :host > i.pen_size_3:before {\n    content: \"pen_size_3\";\n  }\n  :host > i.pen_size_4:before {\n    content: \"pen_size_4\";\n  }\n  :host > i.pen_size_5:before {\n    content: \"pen_size_5\";\n  }\n  :host > i.pending:before {\n    content: \"pending\";\n  }\n  :host > i.pending_actions:before {\n    content: \"pending_actions\";\n  }\n  :host > i.pentagon:before {\n    content: \"pentagon\";\n  }\n  :host > i.people:before {\n    content: \"people\";\n  }\n  :host > i.people_alt:before {\n    content: \"people_alt\";\n  }\n  :host > i.people_outline:before {\n    content: \"people_outline\";\n  }\n  :host > i.percent:before {\n    content: \"percent\";\n  }\n  :host > i.performance_max:before {\n    content: \"performance_max\";\n  }\n  :host > i.pergola:before {\n    content: \"pergola\";\n  }\n  :host > i.perm_camera_mic:before {\n    content: \"perm_camera_mic\";\n  }\n  :host > i.perm_contact_calendar:before {\n    content: \"perm_contact_calendar\";\n  }\n  :host > i.perm_data_setting:before {\n    content: \"perm_data_setting\";\n  }\n  :host > i.perm_device_information:before {\n    content: \"perm_device_information\";\n  }\n  :host > i.perm_identity:before {\n    content: \"perm_identity\";\n  }\n  :host > i.perm_media:before {\n    content: \"perm_media\";\n  }\n  :host > i.perm_phone_msg:before {\n    content: \"perm_phone_msg\";\n  }\n  :host > i.perm_scan_wifi:before {\n    content: \"perm_scan_wifi\";\n  }\n  :host > i.person:before {\n    content: \"person\";\n  }\n  :host > i.person_2:before {\n    content: \"person_2\";\n  }\n  :host > i.person_3:before {\n    content: \"person_3\";\n  }\n  :host > i.person_4:before {\n    content: \"person_4\";\n  }\n  :host > i.person_add:before {\n    content: \"person_add\";\n  }\n  :host > i.person_add_alt:before {\n    content: \"person_add_alt\";\n  }\n  :host > i.person_add_disabled:before {\n    content: \"person_add_disabled\";\n  }\n  :host > i.person_alert:before {\n    content: \"person_alert\";\n  }\n  :host > i.person_apron:before {\n    content: \"person_apron\";\n  }\n  :host > i.person_book:before {\n    content: \"person_book\";\n  }\n  :host > i.person_cancel:before {\n    content: \"person_cancel\";\n  }\n  :host > i.person_celebrate:before {\n    content: \"person_celebrate\";\n  }\n  :host > i.person_check:before {\n    content: \"person_check\";\n  }\n  :host > i.person_edit:before {\n    content: \"person_edit\";\n  }\n  :host > i.person_filled:before {\n    content: \"person_filled\";\n  }\n  :host > i.person_off:before {\n    content: \"person_off\";\n  }\n  :host > i.person_outline:before {\n    content: \"person_outline\";\n  }\n  :host > i.person_pin:before {\n    content: \"person_pin\";\n  }\n  :host > i.person_pin_circle:before {\n    content: \"person_pin_circle\";\n  }\n  :host > i.person_play:before {\n    content: \"person_play\";\n  }\n  :host > i.person_raised_hand:before {\n    content: \"person_raised_hand\";\n  }\n  :host > i.person_remove:before {\n    content: \"person_remove\";\n  }\n  :host > i.person_search:before {\n    content: \"person_search\";\n  }\n  :host > i.personal_bag:before {\n    content: \"personal_bag\";\n  }\n  :host > i.personal_bag_off:before {\n    content: \"personal_bag_off\";\n  }\n  :host > i.personal_bag_question:before {\n    content: \"personal_bag_question\";\n  }\n  :host > i.personal_injury:before {\n    content: \"personal_injury\";\n  }\n  :host > i.personal_places:before {\n    content: \"personal_places\";\n  }\n  :host > i.personal_video:before {\n    content: \"personal_video\";\n  }\n  :host > i.pest_control:before {\n    content: \"pest_control\";\n  }\n  :host > i.pest_control_rodent:before {\n    content: \"pest_control_rodent\";\n  }\n  :host > i.pet_supplies:before {\n    content: \"pet_supplies\";\n  }\n  :host > i.pets:before {\n    content: \"pets\";\n  }\n  :host > i.phishing:before {\n    content: \"phishing\";\n  }\n  :host > i.phone:before {\n    content: \"phone\";\n  }\n  :host > i.phone_alt:before {\n    content: \"phone_alt\";\n  }\n  :host > i.phone_android:before {\n    content: \"phone_android\";\n  }\n  :host > i.phone_bluetooth_speaker:before {\n    content: \"phone_bluetooth_speaker\";\n  }\n  :host > i.phone_callback:before {\n    content: \"phone_callback\";\n  }\n  :host > i.phone_disabled:before {\n    content: \"phone_disabled\";\n  }\n  :host > i.phone_enabled:before {\n    content: \"phone_enabled\";\n  }\n  :host > i.phone_forwarded:before {\n    content: \"phone_forwarded\";\n  }\n  :host > i.phone_in_talk:before {\n    content: \"phone_in_talk\";\n  }\n  :host > i.phone_iphone:before {\n    content: \"phone_iphone\";\n  }\n  :host > i.phone_locked:before {\n    content: \"phone_locked\";\n  }\n  :host > i.phone_missed:before {\n    content: \"phone_missed\";\n  }\n  :host > i.phone_paused:before {\n    content: \"phone_paused\";\n  }\n  :host > i.phonelink:before {\n    content: \"phonelink\";\n  }\n  :host > i.phonelink_erase:before {\n    content: \"phonelink_erase\";\n  }\n  :host > i.phonelink_lock:before {\n    content: \"phonelink_lock\";\n  }\n  :host > i.phonelink_off:before {\n    content: \"phonelink_off\";\n  }\n  :host > i.phonelink_ring:before {\n    content: \"phonelink_ring\";\n  }\n  :host > i.phonelink_ring_off:before {\n    content: \"phonelink_ring_off\";\n  }\n  :host > i.phonelink_setup:before {\n    content: \"phonelink_setup\";\n  }\n  :host > i.photo:before {\n    content: \"photo\";\n  }\n  :host > i.photo_album:before {\n    content: \"photo_album\";\n  }\n  :host > i.photo_auto_merge:before {\n    content: \"photo_auto_merge\";\n  }\n  :host > i.photo_camera:before {\n    content: \"photo_camera\";\n  }\n  :host > i.photo_camera_back:before {\n    content: \"photo_camera_back\";\n  }\n  :host > i.photo_camera_front:before {\n    content: \"photo_camera_front\";\n  }\n  :host > i.photo_filter:before {\n    content: \"photo_filter\";\n  }\n  :host > i.photo_frame:before {\n    content: \"photo_frame\";\n  }\n  :host > i.photo_library:before {\n    content: \"photo_library\";\n  }\n  :host > i.photo_prints:before {\n    content: \"photo_prints\";\n  }\n  :host > i.photo_size_select_actual:before {\n    content: \"photo_size_select_actual\";\n  }\n  :host > i.photo_size_select_large:before {\n    content: \"photo_size_select_large\";\n  }\n  :host > i.photo_size_select_small:before {\n    content: \"photo_size_select_small\";\n  }\n  :host > i.php:before {\n    content: \"php\";\n  }\n  :host > i.physical_therapy:before {\n    content: \"physical_therapy\";\n  }\n  :host > i.piano:before {\n    content: \"piano\";\n  }\n  :host > i.piano_off:before {\n    content: \"piano_off\";\n  }\n  :host > i.picture_as_pdf:before {\n    content: \"picture_as_pdf\";\n  }\n  :host > i.picture_in_picture:before {\n    content: \"picture_in_picture\";\n  }\n  :host > i.picture_in_picture_alt:before {\n    content: \"picture_in_picture_alt\";\n  }\n  :host > i.picture_in_picture_center:before {\n    content: \"picture_in_picture_center\";\n  }\n  :host > i.picture_in_picture_large:before {\n    content: \"picture_in_picture_large\";\n  }\n  :host > i.picture_in_picture_medium:before {\n    content: \"picture_in_picture_medium\";\n  }\n  :host > i.picture_in_picture_mobile:before {\n    content: \"picture_in_picture_mobile\";\n  }\n  :host > i.picture_in_picture_off:before {\n    content: \"picture_in_picture_off\";\n  }\n  :host > i.picture_in_picture_small:before {\n    content: \"picture_in_picture_small\";\n  }\n  :host > i.pie_chart:before {\n    content: \"pie_chart\";\n  }\n  :host > i.pie_chart_filled:before {\n    content: \"pie_chart_filled\";\n  }\n  :host > i.pie_chart_outline:before {\n    content: \"pie_chart_outline\";\n  }\n  :host > i.pie_chart_outlined:before {\n    content: \"pie_chart_outlined\";\n  }\n  :host > i.pill:before {\n    content: \"pill\";\n  }\n  :host > i.pill_off:before {\n    content: \"pill_off\";\n  }\n  :host > i.pin:before {\n    content: \"pin\";\n  }\n  :host > i.pin_drop:before {\n    content: \"pin_drop\";\n  }\n  :host > i.pin_end:before {\n    content: \"pin_end\";\n  }\n  :host > i.pin_invoke:before {\n    content: \"pin_invoke\";\n  }\n  :host > i.pinch:before {\n    content: \"pinch\";\n  }\n  :host > i.pinch_zoom_in:before {\n    content: \"pinch_zoom_in\";\n  }\n  :host > i.pinch_zoom_out:before {\n    content: \"pinch_zoom_out\";\n  }\n  :host > i.pip:before {\n    content: \"pip\";\n  }\n  :host > i.pip_exit:before {\n    content: \"pip_exit\";\n  }\n  :host > i.pivot_table_chart:before {\n    content: \"pivot_table_chart\";\n  }\n  :host > i.place:before {\n    content: \"place\";\n  }\n  :host > i.place_item:before {\n    content: \"place_item\";\n  }\n  :host > i.plagiarism:before {\n    content: \"plagiarism\";\n  }\n  :host > i.planner_banner_ad_pt:before {\n    content: \"planner_banner_ad_pt\";\n  }\n  :host > i.planner_review:before {\n    content: \"planner_review\";\n  }\n  :host > i.play_arrow:before {\n    content: \"play_arrow\";\n  }\n  :host > i.play_circle:before {\n    content: \"play_circle\";\n  }\n  :host > i.play_disabled:before {\n    content: \"play_disabled\";\n  }\n  :host > i.play_for_work:before {\n    content: \"play_for_work\";\n  }\n  :host > i.play_lesson:before {\n    content: \"play_lesson\";\n  }\n  :host > i.play_music:before {\n    content: \"play_music\";\n  }\n  :host > i.play_pause:before {\n    content: \"play_pause\";\n  }\n  :host > i.play_shapes:before {\n    content: \"play_shapes\";\n  }\n  :host > i.playing_cards:before {\n    content: \"playing_cards\";\n  }\n  :host > i.playlist_add:before {\n    content: \"playlist_add\";\n  }\n  :host > i.playlist_add_check:before {\n    content: \"playlist_add_check\";\n  }\n  :host > i.playlist_add_check_circle:before {\n    content: \"playlist_add_check_circle\";\n  }\n  :host > i.playlist_add_circle:before {\n    content: \"playlist_add_circle\";\n  }\n  :host > i.playlist_play:before {\n    content: \"playlist_play\";\n  }\n  :host > i.playlist_remove:before {\n    content: \"playlist_remove\";\n  }\n  :host > i.plumbing:before {\n    content: \"plumbing\";\n  }\n  :host > i.plus_one:before {\n    content: \"plus_one\";\n  }\n  :host > i.podcasts:before {\n    content: \"podcasts\";\n  }\n  :host > i.podiatry:before {\n    content: \"podiatry\";\n  }\n  :host > i.podium:before {\n    content: \"podium\";\n  }\n  :host > i.point_of_sale:before {\n    content: \"point_of_sale\";\n  }\n  :host > i.point_scan:before {\n    content: \"point_scan\";\n  }\n  :host > i.policy:before {\n    content: \"policy\";\n  }\n  :host > i.poll:before {\n    content: \"poll\";\n  }\n  :host > i.polyline:before {\n    content: \"polyline\";\n  }\n  :host > i.polymer:before {\n    content: \"polymer\";\n  }\n  :host > i.pool:before {\n    content: \"pool\";\n  }\n  :host > i.portable_wifi_off:before {\n    content: \"portable_wifi_off\";\n  }\n  :host > i.portrait:before {\n    content: \"portrait\";\n  }\n  :host > i.position_bottom_left:before {\n    content: \"position_bottom_left\";\n  }\n  :host > i.position_bottom_right:before {\n    content: \"position_bottom_right\";\n  }\n  :host > i.position_top_right:before {\n    content: \"position_top_right\";\n  }\n  :host > i.post:before {\n    content: \"post\";\n  }\n  :host > i.post_add:before {\n    content: \"post_add\";\n  }\n  :host > i.potted_plant:before {\n    content: \"potted_plant\";\n  }\n  :host > i.power:before {\n    content: \"power\";\n  }\n  :host > i.power_input:before {\n    content: \"power_input\";\n  }\n  :host > i.power_off:before {\n    content: \"power_off\";\n  }\n  :host > i.power_rounded:before {\n    content: \"power_rounded\";\n  }\n  :host > i.power_settings_new:before {\n    content: \"power_settings_new\";\n  }\n  :host > i.prayer_times:before {\n    content: \"prayer_times\";\n  }\n  :host > i.precision_manufacturing:before {\n    content: \"precision_manufacturing\";\n  }\n  :host > i.pregnancy:before {\n    content: \"pregnancy\";\n  }\n  :host > i.pregnant_woman:before {\n    content: \"pregnant_woman\";\n  }\n  :host > i.preliminary:before {\n    content: \"preliminary\";\n  }\n  :host > i.prescriptions:before {\n    content: \"prescriptions\";\n  }\n  :host > i.present_to_all:before {\n    content: \"present_to_all\";\n  }\n  :host > i.preview:before {\n    content: \"preview\";\n  }\n  :host > i.preview_off:before {\n    content: \"preview_off\";\n  }\n  :host > i.price_change:before {\n    content: \"price_change\";\n  }\n  :host > i.price_check:before {\n    content: \"price_check\";\n  }\n  :host > i.print:before {\n    content: \"print\";\n  }\n  :host > i.print_add:before {\n    content: \"print_add\";\n  }\n  :host > i.print_connect:before {\n    content: \"print_connect\";\n  }\n  :host > i.print_disabled:before {\n    content: \"print_disabled\";\n  }\n  :host > i.print_error:before {\n    content: \"print_error\";\n  }\n  :host > i.print_lock:before {\n    content: \"print_lock\";\n  }\n  :host > i.priority:before {\n    content: \"priority\";\n  }\n  :host > i.priority_high:before {\n    content: \"priority_high\";\n  }\n  :host > i.privacy:before {\n    content: \"privacy\";\n  }\n  :host > i.privacy_tip:before {\n    content: \"privacy_tip\";\n  }\n  :host > i.private_connectivity:before {\n    content: \"private_connectivity\";\n  }\n  :host > i.problem:before {\n    content: \"problem\";\n  }\n  :host > i.procedure:before {\n    content: \"procedure\";\n  }\n  :host > i.process_chart:before {\n    content: \"process_chart\";\n  }\n  :host > i.production_quantity_limits:before {\n    content: \"production_quantity_limits\";\n  }\n  :host > i.productivity:before {\n    content: \"productivity\";\n  }\n  :host > i.progress_activity:before {\n    content: \"progress_activity\";\n  }\n  :host > i.prompt_suggestion:before {\n    content: \"prompt_suggestion\";\n  }\n  :host > i.propane:before {\n    content: \"propane\";\n  }\n  :host > i.propane_tank:before {\n    content: \"propane_tank\";\n  }\n  :host > i.psychiatry:before {\n    content: \"psychiatry\";\n  }\n  :host > i.psychology:before {\n    content: \"psychology\";\n  }\n  :host > i.psychology_alt:before {\n    content: \"psychology_alt\";\n  }\n  :host > i.public:before {\n    content: \"public\";\n  }\n  :host > i.public_off:before {\n    content: \"public_off\";\n  }\n  :host > i.publish:before {\n    content: \"publish\";\n  }\n  :host > i.published_with_changes:before {\n    content: \"published_with_changes\";\n  }\n  :host > i.pulmonology:before {\n    content: \"pulmonology\";\n  }\n  :host > i.pulse_alert:before {\n    content: \"pulse_alert\";\n  }\n  :host > i.punch_clock:before {\n    content: \"punch_clock\";\n  }\n  :host > i.push_pin:before {\n    content: \"push_pin\";\n  }\n  :host > i.qr_code:before {\n    content: \"qr_code\";\n  }\n  :host > i.qr_code_2:before {\n    content: \"qr_code_2\";\n  }\n  :host > i.qr_code_2_add:before {\n    content: \"qr_code_2_add\";\n  }\n  :host > i.qr_code_scanner:before {\n    content: \"qr_code_scanner\";\n  }\n  :host > i.query_builder:before {\n    content: \"query_builder\";\n  }\n  :host > i.query_stats:before {\n    content: \"query_stats\";\n  }\n  :host > i.question_answer:before {\n    content: \"question_answer\";\n  }\n  :host > i.question_exchange:before {\n    content: \"question_exchange\";\n  }\n  :host > i.question_mark:before {\n    content: \"question_mark\";\n  }\n  :host > i.queue:before {\n    content: \"queue\";\n  }\n  :host > i.queue_music:before {\n    content: \"queue_music\";\n  }\n  :host > i.queue_play_next:before {\n    content: \"queue_play_next\";\n  }\n  :host > i.quick_phrases:before {\n    content: \"quick_phrases\";\n  }\n  :host > i.quick_reference:before {\n    content: \"quick_reference\";\n  }\n  :host > i.quick_reference_all:before {\n    content: \"quick_reference_all\";\n  }\n  :host > i.quick_reorder:before {\n    content: \"quick_reorder\";\n  }\n  :host > i.quickreply:before {\n    content: \"quickreply\";\n  }\n  :host > i.quiet_time:before {\n    content: \"quiet_time\";\n  }\n  :host > i.quiet_time_active:before {\n    content: \"quiet_time_active\";\n  }\n  :host > i.quiz:before {\n    content: \"quiz\";\n  }\n  :host > i.r_mobiledata:before {\n    content: \"r_mobiledata\";\n  }\n  :host > i.radar:before {\n    content: \"radar\";\n  }\n  :host > i.radio:before {\n    content: \"radio\";\n  }\n  :host > i.radio_button_checked:before {\n    content: \"radio_button_checked\";\n  }\n  :host > i.radio_button_partial:before {\n    content: \"radio_button_partial\";\n  }\n  :host > i.radio_button_unchecked:before {\n    content: \"radio_button_unchecked\";\n  }\n  :host > i.radiology:before {\n    content: \"radiology\";\n  }\n  :host > i.railway_alert:before {\n    content: \"railway_alert\";\n  }\n  :host > i.rainy:before {\n    content: \"rainy\";\n  }\n  :host > i.rainy_heavy:before {\n    content: \"rainy_heavy\";\n  }\n  :host > i.rainy_light:before {\n    content: \"rainy_light\";\n  }\n  :host > i.rainy_snow:before {\n    content: \"rainy_snow\";\n  }\n  :host > i.ramen_dining:before {\n    content: \"ramen_dining\";\n  }\n  :host > i.ramp_left:before {\n    content: \"ramp_left\";\n  }\n  :host > i.ramp_right:before {\n    content: \"ramp_right\";\n  }\n  :host > i.range_hood:before {\n    content: \"range_hood\";\n  }\n  :host > i.rate_review:before {\n    content: \"rate_review\";\n  }\n  :host > i.raven:before {\n    content: \"raven\";\n  }\n  :host > i.raw_off:before {\n    content: \"raw_off\";\n  }\n  :host > i.raw_on:before {\n    content: \"raw_on\";\n  }\n  :host > i.read_more:before {\n    content: \"read_more\";\n  }\n  :host > i.readiness_score:before {\n    content: \"readiness_score\";\n  }\n  :host > i.real_estate_agent:before {\n    content: \"real_estate_agent\";\n  }\n  :host > i.rear_camera:before {\n    content: \"rear_camera\";\n  }\n  :host > i.rebase:before {\n    content: \"rebase\";\n  }\n  :host > i.rebase_edit:before {\n    content: \"rebase_edit\";\n  }\n  :host > i.receipt:before {\n    content: \"receipt\";\n  }\n  :host > i.receipt_long:before {\n    content: \"receipt_long\";\n  }\n  :host > i.recent_actors:before {\n    content: \"recent_actors\";\n  }\n  :host > i.recent_patient:before {\n    content: \"recent_patient\";\n  }\n  :host > i.recommend:before {\n    content: \"recommend\";\n  }\n  :host > i.record_voice_over:before {\n    content: \"record_voice_over\";\n  }\n  :host > i.rectangle:before {\n    content: \"rectangle\";\n  }\n  :host > i.recycling:before {\n    content: \"recycling\";\n  }\n  :host > i.redeem:before {\n    content: \"redeem\";\n  }\n  :host > i.redo:before {\n    content: \"redo\";\n  }\n  :host > i.reduce_capacity:before {\n    content: \"reduce_capacity\";\n  }\n  :host > i.refresh:before {\n    content: \"refresh\";\n  }\n  :host > i.regular_expression:before {\n    content: \"regular_expression\";\n  }\n  :host > i.relax:before {\n    content: \"relax\";\n  }\n  :host > i.release_alert:before {\n    content: \"release_alert\";\n  }\n  :host > i.remember_me:before {\n    content: \"remember_me\";\n  }\n  :host > i.reminder:before {\n    content: \"reminder\";\n  }\n  :host > i.reminders_alt:before {\n    content: \"reminders_alt\";\n  }\n  :host > i.remote_gen:before {\n    content: \"remote_gen\";\n  }\n  :host > i.remove:before {\n    content: \"remove\";\n  }\n  :host > i.remove_circle:before {\n    content: \"remove_circle\";\n  }\n  :host > i.remove_circle_outline:before {\n    content: \"remove_circle_outline\";\n  }\n  :host > i.remove_done:before {\n    content: \"remove_done\";\n  }\n  :host > i.remove_from_queue:before {\n    content: \"remove_from_queue\";\n  }\n  :host > i.remove_moderator:before {\n    content: \"remove_moderator\";\n  }\n  :host > i.remove_red_eye:before {\n    content: \"remove_red_eye\";\n  }\n  :host > i.remove_road:before {\n    content: \"remove_road\";\n  }\n  :host > i.remove_selection:before {\n    content: \"remove_selection\";\n  }\n  :host > i.remove_shopping_cart:before {\n    content: \"remove_shopping_cart\";\n  }\n  :host > i.reopen_window:before {\n    content: \"reopen_window\";\n  }\n  :host > i.reorder:before {\n    content: \"reorder\";\n  }\n  :host > i.repartition:before {\n    content: \"repartition\";\n  }\n  :host > i.repeat:before {\n    content: \"repeat\";\n  }\n  :host > i.repeat_on:before {\n    content: \"repeat_on\";\n  }\n  :host > i.repeat_one:before {\n    content: \"repeat_one\";\n  }\n  :host > i.repeat_one_on:before {\n    content: \"repeat_one_on\";\n  }\n  :host > i.replay:before {\n    content: \"replay\";\n  }\n  :host > i.replay_10:before {\n    content: \"replay_10\";\n  }\n  :host > i.replay_30:before {\n    content: \"replay_30\";\n  }\n  :host > i.replay_5:before {\n    content: \"replay_5\";\n  }\n  :host > i.replay_circle_filled:before {\n    content: \"replay_circle_filled\";\n  }\n  :host > i.reply:before {\n    content: \"reply\";\n  }\n  :host > i.reply_all:before {\n    content: \"reply_all\";\n  }\n  :host > i.report:before {\n    content: \"report\";\n  }\n  :host > i.report_gmailerrorred:before {\n    content: \"report_gmailerrorred\";\n  }\n  :host > i.report_off:before {\n    content: \"report_off\";\n  }\n  :host > i.report_problem:before {\n    content: \"report_problem\";\n  }\n  :host > i.request_page:before {\n    content: \"request_page\";\n  }\n  :host > i.request_quote:before {\n    content: \"request_quote\";\n  }\n  :host > i.reset_image:before {\n    content: \"reset_image\";\n  }\n  :host > i.reset_tv:before {\n    content: \"reset_tv\";\n  }\n  :host > i.reset_wrench:before {\n    content: \"reset_wrench\";\n  }\n  :host > i.resize:before {\n    content: \"resize\";\n  }\n  :host > i.respiratory_rate:before {\n    content: \"respiratory_rate\";\n  }\n  :host > i.responsive_layout:before {\n    content: \"responsive_layout\";\n  }\n  :host > i.restart_alt:before {\n    content: \"restart_alt\";\n  }\n  :host > i.restaurant:before {\n    content: \"restaurant\";\n  }\n  :host > i.restaurant_menu:before {\n    content: \"restaurant_menu\";\n  }\n  :host > i.restore:before {\n    content: \"restore\";\n  }\n  :host > i.restore_from_trash:before {\n    content: \"restore_from_trash\";\n  }\n  :host > i.restore_page:before {\n    content: \"restore_page\";\n  }\n  :host > i.resume:before {\n    content: \"resume\";\n  }\n  :host > i.reviews:before {\n    content: \"reviews\";\n  }\n  :host > i.rewarded_ads:before {\n    content: \"rewarded_ads\";\n  }\n  :host > i.rheumatology:before {\n    content: \"rheumatology\";\n  }\n  :host > i.rib_cage:before {\n    content: \"rib_cage\";\n  }\n  :host > i.rice_bowl:before {\n    content: \"rice_bowl\";\n  }\n  :host > i.right_click:before {\n    content: \"right_click\";\n  }\n  :host > i.right_panel_close:before {\n    content: \"right_panel_close\";\n  }\n  :host > i.right_panel_open:before {\n    content: \"right_panel_open\";\n  }\n  :host > i.ring_volume:before {\n    content: \"ring_volume\";\n  }\n  :host > i.ring_volume_filled:before {\n    content: \"ring_volume_filled\";\n  }\n  :host > i.ripples:before {\n    content: \"ripples\";\n  }\n  :host > i.robot:before {\n    content: \"robot\";\n  }\n  :host > i.robot_2:before {\n    content: \"robot_2\";\n  }\n  :host > i.rocket:before {\n    content: \"rocket\";\n  }\n  :host > i.rocket_launch:before {\n    content: \"rocket_launch\";\n  }\n  :host > i.roller_shades:before {\n    content: \"roller_shades\";\n  }\n  :host > i.roller_shades_closed:before {\n    content: \"roller_shades_closed\";\n  }\n  :host > i.roller_skating:before {\n    content: \"roller_skating\";\n  }\n  :host > i.roofing:before {\n    content: \"roofing\";\n  }\n  :host > i.room:before {\n    content: \"room\";\n  }\n  :host > i.room_preferences:before {\n    content: \"room_preferences\";\n  }\n  :host > i.room_service:before {\n    content: \"room_service\";\n  }\n  :host > i.rotate_90_degrees_ccw:before {\n    content: \"rotate_90_degrees_ccw\";\n  }\n  :host > i.rotate_90_degrees_cw:before {\n    content: \"rotate_90_degrees_cw\";\n  }\n  :host > i.rotate_left:before {\n    content: \"rotate_left\";\n  }\n  :host > i.rotate_right:before {\n    content: \"rotate_right\";\n  }\n  :host > i.roundabout_left:before {\n    content: \"roundabout_left\";\n  }\n  :host > i.roundabout_right:before {\n    content: \"roundabout_right\";\n  }\n  :host > i.rounded_corner:before {\n    content: \"rounded_corner\";\n  }\n  :host > i.route:before {\n    content: \"route\";\n  }\n  :host > i.router:before {\n    content: \"router\";\n  }\n  :host > i.routine:before {\n    content: \"routine\";\n  }\n  :host > i.rowing:before {\n    content: \"rowing\";\n  }\n  :host > i.rss_feed:before {\n    content: \"rss_feed\";\n  }\n  :host > i.rsvp:before {\n    content: \"rsvp\";\n  }\n  :host > i.rtt:before {\n    content: \"rtt\";\n  }\n  :host > i.rubric:before {\n    content: \"rubric\";\n  }\n  :host > i.rule:before {\n    content: \"rule\";\n  }\n  :host > i.rule_folder:before {\n    content: \"rule_folder\";\n  }\n  :host > i.rule_settings:before {\n    content: \"rule_settings\";\n  }\n  :host > i.run_circle:before {\n    content: \"run_circle\";\n  }\n  :host > i.running_with_errors:before {\n    content: \"running_with_errors\";\n  }\n  :host > i.rv_hookup:before {\n    content: \"rv_hookup\";\n  }\n  :host > i.safety_check:before {\n    content: \"safety_check\";\n  }\n  :host > i.safety_check_off:before {\n    content: \"safety_check_off\";\n  }\n  :host > i.safety_divider:before {\n    content: \"safety_divider\";\n  }\n  :host > i.sailing:before {\n    content: \"sailing\";\n  }\n  :host > i.salinity:before {\n    content: \"salinity\";\n  }\n  :host > i.sanitizer:before {\n    content: \"sanitizer\";\n  }\n  :host > i.satellite:before {\n    content: \"satellite\";\n  }\n  :host > i.satellite_alt:before {\n    content: \"satellite_alt\";\n  }\n  :host > i.sauna:before {\n    content: \"sauna\";\n  }\n  :host > i.save:before {\n    content: \"save\";\n  }\n  :host > i.save_alt:before {\n    content: \"save_alt\";\n  }\n  :host > i.save_as:before {\n    content: \"save_as\";\n  }\n  :host > i.saved_search:before {\n    content: \"saved_search\";\n  }\n  :host > i.savings:before {\n    content: \"savings\";\n  }\n  :host > i.scale:before {\n    content: \"scale\";\n  }\n  :host > i.scan:before {\n    content: \"scan\";\n  }\n  :host > i.scan_delete:before {\n    content: \"scan_delete\";\n  }\n  :host > i.scanner:before {\n    content: \"scanner\";\n  }\n  :host > i.scatter_plot:before {\n    content: \"scatter_plot\";\n  }\n  :host > i.scene:before {\n    content: \"scene\";\n  }\n  :host > i.schedule:before {\n    content: \"schedule\";\n  }\n  :host > i.schedule_send:before {\n    content: \"schedule_send\";\n  }\n  :host > i.schema:before {\n    content: \"schema\";\n  }\n  :host > i.school:before {\n    content: \"school\";\n  }\n  :host > i.science:before {\n    content: \"science\";\n  }\n  :host > i.science_off:before {\n    content: \"science_off\";\n  }\n  :host > i.score:before {\n    content: \"score\";\n  }\n  :host > i.scoreboard:before {\n    content: \"scoreboard\";\n  }\n  :host > i.screen_lock_landscape:before {\n    content: \"screen_lock_landscape\";\n  }\n  :host > i.screen_lock_portrait:before {\n    content: \"screen_lock_portrait\";\n  }\n  :host > i.screen_lock_rotation:before {\n    content: \"screen_lock_rotation\";\n  }\n  :host > i.screen_record:before {\n    content: \"screen_record\";\n  }\n  :host > i.screen_rotation:before {\n    content: \"screen_rotation\";\n  }\n  :host > i.screen_rotation_alt:before {\n    content: \"screen_rotation_alt\";\n  }\n  :host > i.screen_rotation_up:before {\n    content: \"screen_rotation_up\";\n  }\n  :host > i.screen_search_desktop:before {\n    content: \"screen_search_desktop\";\n  }\n  :host > i.screen_share:before {\n    content: \"screen_share\";\n  }\n  :host > i.screenshot:before {\n    content: \"screenshot\";\n  }\n  :host > i.screenshot_frame:before {\n    content: \"screenshot_frame\";\n  }\n  :host > i.screenshot_keyboard:before {\n    content: \"screenshot_keyboard\";\n  }\n  :host > i.screenshot_monitor:before {\n    content: \"screenshot_monitor\";\n  }\n  :host > i.screenshot_region:before {\n    content: \"screenshot_region\";\n  }\n  :host > i.screenshot_tablet:before {\n    content: \"screenshot_tablet\";\n  }\n  :host > i.scrollable_header:before {\n    content: \"scrollable_header\";\n  }\n  :host > i.scuba_diving:before {\n    content: \"scuba_diving\";\n  }\n  :host > i.sd:before {\n    content: \"sd\";\n  }\n  :host > i.sd_card:before {\n    content: \"sd_card\";\n  }\n  :host > i.sd_card_alert:before {\n    content: \"sd_card_alert\";\n  }\n  :host > i.sd_storage:before {\n    content: \"sd_storage\";\n  }\n  :host > i.sdk:before {\n    content: \"sdk\";\n  }\n  :host > i.search:before {\n    content: \"search\";\n  }\n  :host > i.search_check:before {\n    content: \"search_check\";\n  }\n  :host > i.search_hands_free:before {\n    content: \"search_hands_free\";\n  }\n  :host > i.search_off:before {\n    content: \"search_off\";\n  }\n  :host > i.security:before {\n    content: \"security\";\n  }\n  :host > i.security_key:before {\n    content: \"security_key\";\n  }\n  :host > i.security_update:before {\n    content: \"security_update\";\n  }\n  :host > i.security_update_good:before {\n    content: \"security_update_good\";\n  }\n  :host > i.security_update_warning:before {\n    content: \"security_update_warning\";\n  }\n  :host > i.segment:before {\n    content: \"segment\";\n  }\n  :host > i.select:before {\n    content: \"select\";\n  }\n  :host > i.select_all:before {\n    content: \"select_all\";\n  }\n  :host > i.select_check_box:before {\n    content: \"select_check_box\";\n  }\n  :host > i.select_to_speak:before {\n    content: \"select_to_speak\";\n  }\n  :host > i.select_window:before {\n    content: \"select_window\";\n  }\n  :host > i.select_window_off:before {\n    content: \"select_window_off\";\n  }\n  :host > i.self_care:before {\n    content: \"self_care\";\n  }\n  :host > i.self_improvement:before {\n    content: \"self_improvement\";\n  }\n  :host > i.sell:before {\n    content: \"sell\";\n  }\n  :host > i.send:before {\n    content: \"send\";\n  }\n  :host > i.send_and_archive:before {\n    content: \"send_and_archive\";\n  }\n  :host > i.send_money:before {\n    content: \"send_money\";\n  }\n  :host > i.send_time_extension:before {\n    content: \"send_time_extension\";\n  }\n  :host > i.send_to_mobile:before {\n    content: \"send_to_mobile\";\n  }\n  :host > i.sensor_door:before {\n    content: \"sensor_door\";\n  }\n  :host > i.sensor_occupied:before {\n    content: \"sensor_occupied\";\n  }\n  :host > i.sensor_window:before {\n    content: \"sensor_window\";\n  }\n  :host > i.sensors:before {\n    content: \"sensors\";\n  }\n  :host > i.sensors_krx:before {\n    content: \"sensors_krx\";\n  }\n  :host > i.sensors_krx_off:before {\n    content: \"sensors_krx_off\";\n  }\n  :host > i.sensors_off:before {\n    content: \"sensors_off\";\n  }\n  :host > i.sentiment_calm:before {\n    content: \"sentiment_calm\";\n  }\n  :host > i.sentiment_content:before {\n    content: \"sentiment_content\";\n  }\n  :host > i.sentiment_dissatisfied:before {\n    content: \"sentiment_dissatisfied\";\n  }\n  :host > i.sentiment_excited:before {\n    content: \"sentiment_excited\";\n  }\n  :host > i.sentiment_extremely_dissatisfied:before {\n    content: \"sentiment_extremely_dissatisfied\";\n  }\n  :host > i.sentiment_frustrated:before {\n    content: \"sentiment_frustrated\";\n  }\n  :host > i.sentiment_neutral:before {\n    content: \"sentiment_neutral\";\n  }\n  :host > i.sentiment_sad:before {\n    content: \"sentiment_sad\";\n  }\n  :host > i.sentiment_satisfied:before {\n    content: \"sentiment_satisfied\";\n  }\n  :host > i.sentiment_satisfied_alt:before {\n    content: \"sentiment_satisfied_alt\";\n  }\n  :host > i.sentiment_stressed:before {\n    content: \"sentiment_stressed\";\n  }\n  :host > i.sentiment_very_dissatisfied:before {\n    content: \"sentiment_very_dissatisfied\";\n  }\n  :host > i.sentiment_very_satisfied:before {\n    content: \"sentiment_very_satisfied\";\n  }\n  :host > i.sentiment_worried:before {\n    content: \"sentiment_worried\";\n  }\n  :host > i.service_toolbox:before {\n    content: \"service_toolbox\";\n  }\n  :host > i.set_meal:before {\n    content: \"set_meal\";\n  }\n  :host > i.settings:before {\n    content: \"settings\";\n  }\n  :host > i.settings_accessibility:before {\n    content: \"settings_accessibility\";\n  }\n  :host > i.settings_account_box:before {\n    content: \"settings_account_box\";\n  }\n  :host > i.settings_alert:before {\n    content: \"settings_alert\";\n  }\n  :host > i.settings_applications:before {\n    content: \"settings_applications\";\n  }\n  :host > i.settings_b_roll:before {\n    content: \"settings_b_roll\";\n  }\n  :host > i.settings_backup_restore:before {\n    content: \"settings_backup_restore\";\n  }\n  :host > i.settings_bluetooth:before {\n    content: \"settings_bluetooth\";\n  }\n  :host > i.settings_brightness:before {\n    content: \"settings_brightness\";\n  }\n  :host > i.settings_cell:before {\n    content: \"settings_cell\";\n  }\n  :host > i.settings_cinematic_blur:before {\n    content: \"settings_cinematic_blur\";\n  }\n  :host > i.settings_ethernet:before {\n    content: \"settings_ethernet\";\n  }\n  :host > i.settings_heart:before {\n    content: \"settings_heart\";\n  }\n  :host > i.settings_input_antenna:before {\n    content: \"settings_input_antenna\";\n  }\n  :host > i.settings_input_component:before {\n    content: \"settings_input_component\";\n  }\n  :host > i.settings_input_composite:before {\n    content: \"settings_input_composite\";\n  }\n  :host > i.settings_input_hdmi:before {\n    content: \"settings_input_hdmi\";\n  }\n  :host > i.settings_input_svideo:before {\n    content: \"settings_input_svideo\";\n  }\n  :host > i.settings_motion_mode:before {\n    content: \"settings_motion_mode\";\n  }\n  :host > i.settings_night_sight:before {\n    content: \"settings_night_sight\";\n  }\n  :host > i.settings_overscan:before {\n    content: \"settings_overscan\";\n  }\n  :host > i.settings_panorama:before {\n    content: \"settings_panorama\";\n  }\n  :host > i.settings_phone:before {\n    content: \"settings_phone\";\n  }\n  :host > i.settings_photo_camera:before {\n    content: \"settings_photo_camera\";\n  }\n  :host > i.settings_power:before {\n    content: \"settings_power\";\n  }\n  :host > i.settings_remote:before {\n    content: \"settings_remote\";\n  }\n  :host > i.settings_slow_motion:before {\n    content: \"settings_slow_motion\";\n  }\n  :host > i.settings_suggest:before {\n    content: \"settings_suggest\";\n  }\n  :host > i.settings_system_daydream:before {\n    content: \"settings_system_daydream\";\n  }\n  :host > i.settings_timelapse:before {\n    content: \"settings_timelapse\";\n  }\n  :host > i.settings_video_camera:before {\n    content: \"settings_video_camera\";\n  }\n  :host > i.settings_voice:before {\n    content: \"settings_voice\";\n  }\n  :host > i.settop_component:before {\n    content: \"settop_component\";\n  }\n  :host > i.severe_cold:before {\n    content: \"severe_cold\";\n  }\n  :host > i.shadow:before {\n    content: \"shadow\";\n  }\n  :host > i.shadow_add:before {\n    content: \"shadow_add\";\n  }\n  :host > i.shadow_minus:before {\n    content: \"shadow_minus\";\n  }\n  :host > i.shape_line:before {\n    content: \"shape_line\";\n  }\n  :host > i.shape_recognition:before {\n    content: \"shape_recognition\";\n  }\n  :host > i.shapes:before {\n    content: \"shapes\";\n  }\n  :host > i.share:before {\n    content: \"share\";\n  }\n  :host > i.share_location:before {\n    content: \"share_location\";\n  }\n  :host > i.share_off:before {\n    content: \"share_off\";\n  }\n  :host > i.share_reviews:before {\n    content: \"share_reviews\";\n  }\n  :host > i.share_windows:before {\n    content: \"share_windows\";\n  }\n  :host > i.sheets_rtl:before {\n    content: \"sheets_rtl\";\n  }\n  :host > i.shelf_auto_hide:before {\n    content: \"shelf_auto_hide\";\n  }\n  :host > i.shelf_position:before {\n    content: \"shelf_position\";\n  }\n  :host > i.shelves:before {\n    content: \"shelves\";\n  }\n  :host > i.shield:before {\n    content: \"shield\";\n  }\n  :host > i.shield_lock:before {\n    content: \"shield_lock\";\n  }\n  :host > i.shield_locked:before {\n    content: \"shield_locked\";\n  }\n  :host > i.shield_moon:before {\n    content: \"shield_moon\";\n  }\n  :host > i.shield_person:before {\n    content: \"shield_person\";\n  }\n  :host > i.shield_question:before {\n    content: \"shield_question\";\n  }\n  :host > i.shield_with_heart:before {\n    content: \"shield_with_heart\";\n  }\n  :host > i.shield_with_house:before {\n    content: \"shield_with_house\";\n  }\n  :host > i.shift:before {\n    content: \"shift\";\n  }\n  :host > i.shift_lock:before {\n    content: \"shift_lock\";\n  }\n  :host > i.shop:before {\n    content: \"shop\";\n  }\n  :host > i.shop_2:before {\n    content: \"shop_2\";\n  }\n  :host > i.shop_two:before {\n    content: \"shop_two\";\n  }\n  :host > i.shopping_bag:before {\n    content: \"shopping_bag\";\n  }\n  :host > i.shopping_basket:before {\n    content: \"shopping_basket\";\n  }\n  :host > i.shopping_cart:before {\n    content: \"shopping_cart\";\n  }\n  :host > i.shopping_cart_checkout:before {\n    content: \"shopping_cart_checkout\";\n  }\n  :host > i.shopping_cart_off:before {\n    content: \"shopping_cart_off\";\n  }\n  :host > i.shoppingmode:before {\n    content: \"shoppingmode\";\n  }\n  :host > i.short_stay:before {\n    content: \"short_stay\";\n  }\n  :host > i.short_text:before {\n    content: \"short_text\";\n  }\n  :host > i.shortcut:before {\n    content: \"shortcut\";\n  }\n  :host > i.show_chart:before {\n    content: \"show_chart\";\n  }\n  :host > i.shower:before {\n    content: \"shower\";\n  }\n  :host > i.shuffle:before {\n    content: \"shuffle\";\n  }\n  :host > i.shuffle_on:before {\n    content: \"shuffle_on\";\n  }\n  :host > i.shutter_speed:before {\n    content: \"shutter_speed\";\n  }\n  :host > i.shutter_speed_add:before {\n    content: \"shutter_speed_add\";\n  }\n  :host > i.shutter_speed_minus:before {\n    content: \"shutter_speed_minus\";\n  }\n  :host > i.sick:before {\n    content: \"sick\";\n  }\n  :host > i.side_navigation:before {\n    content: \"side_navigation\";\n  }\n  :host > i.sign_language:before {\n    content: \"sign_language\";\n  }\n  :host > i.signal_cellular_0_bar:before {\n    content: \"signal_cellular_0_bar\";\n  }\n  :host > i.signal_cellular_1_bar:before {\n    content: \"signal_cellular_1_bar\";\n  }\n  :host > i.signal_cellular_2_bar:before {\n    content: \"signal_cellular_2_bar\";\n  }\n  :host > i.signal_cellular_3_bar:before {\n    content: \"signal_cellular_3_bar\";\n  }\n  :host > i.signal_cellular_4_bar:before {\n    content: \"signal_cellular_4_bar\";\n  }\n  :host > i.signal_cellular_add:before {\n    content: \"signal_cellular_add\";\n  }\n  :host > i.signal_cellular_alt:before {\n    content: \"signal_cellular_alt\";\n  }\n  :host > i.signal_cellular_alt_1_bar:before {\n    content: \"signal_cellular_alt_1_bar\";\n  }\n  :host > i.signal_cellular_alt_2_bar:before {\n    content: \"signal_cellular_alt_2_bar\";\n  }\n  :host > i.signal_cellular_connected_no_internet_0_bar:before {\n    content: \"signal_cellular_connected_no_internet_0_bar\";\n  }\n  :host > i.signal_cellular_connected_no_internet_4_bar:before {\n    content: \"signal_cellular_connected_no_internet_4_bar\";\n  }\n  :host > i.signal_cellular_no_sim:before {\n    content: \"signal_cellular_no_sim\";\n  }\n  :host > i.signal_cellular_nodata:before {\n    content: \"signal_cellular_nodata\";\n  }\n  :host > i.signal_cellular_null:before {\n    content: \"signal_cellular_null\";\n  }\n  :host > i.signal_cellular_off:before {\n    content: \"signal_cellular_off\";\n  }\n  :host > i.signal_cellular_pause:before {\n    content: \"signal_cellular_pause\";\n  }\n  :host > i.signal_disconnected:before {\n    content: \"signal_disconnected\";\n  }\n  :host > i.signal_wifi_0_bar:before {\n    content: \"signal_wifi_0_bar\";\n  }\n  :host > i.signal_wifi_4_bar:before {\n    content: \"signal_wifi_4_bar\";\n  }\n  :host > i.signal_wifi_4_bar_lock:before {\n    content: \"signal_wifi_4_bar_lock\";\n  }\n  :host > i.signal_wifi_bad:before {\n    content: \"signal_wifi_bad\";\n  }\n  :host > i.signal_wifi_connected_no_internet_4:before {\n    content: \"signal_wifi_connected_no_internet_4\";\n  }\n  :host > i.signal_wifi_off:before {\n    content: \"signal_wifi_off\";\n  }\n  :host > i.signal_wifi_statusbar_4_bar:before {\n    content: \"signal_wifi_statusbar_4_bar\";\n  }\n  :host > i.signal_wifi_statusbar_not_connected:before {\n    content: \"signal_wifi_statusbar_not_connected\";\n  }\n  :host > i.signal_wifi_statusbar_null:before {\n    content: \"signal_wifi_statusbar_null\";\n  }\n  :host > i.signature:before {\n    content: \"signature\";\n  }\n  :host > i.signpost:before {\n    content: \"signpost\";\n  }\n  :host > i.sim_card:before {\n    content: \"sim_card\";\n  }\n  :host > i.sim_card_alert:before {\n    content: \"sim_card_alert\";\n  }\n  :host > i.sim_card_download:before {\n    content: \"sim_card_download\";\n  }\n  :host > i.single_bed:before {\n    content: \"single_bed\";\n  }\n  :host > i.sip:before {\n    content: \"sip\";\n  }\n  :host > i.skateboarding:before {\n    content: \"skateboarding\";\n  }\n  :host > i.skeleton:before {\n    content: \"skeleton\";\n  }\n  :host > i.skillet:before {\n    content: \"skillet\";\n  }\n  :host > i.skillet_cooktop:before {\n    content: \"skillet_cooktop\";\n  }\n  :host > i.skip_next:before {\n    content: \"skip_next\";\n  }\n  :host > i.skip_previous:before {\n    content: \"skip_previous\";\n  }\n  :host > i.skull:before {\n    content: \"skull\";\n  }\n  :host > i.sledding:before {\n    content: \"sledding\";\n  }\n  :host > i.sleep:before {\n    content: \"sleep\";\n  }\n  :host > i.sleep_score:before {\n    content: \"sleep_score\";\n  }\n  :host > i.slide_library:before {\n    content: \"slide_library\";\n  }\n  :host > i.sliders:before {\n    content: \"sliders\";\n  }\n  :host > i.slideshow:before {\n    content: \"slideshow\";\n  }\n  :host > i.slow_motion_video:before {\n    content: \"slow_motion_video\";\n  }\n  :host > i.smart_button:before {\n    content: \"smart_button\";\n  }\n  :host > i.smart_display:before {\n    content: \"smart_display\";\n  }\n  :host > i.smart_outlet:before {\n    content: \"smart_outlet\";\n  }\n  :host > i.smart_screen:before {\n    content: \"smart_screen\";\n  }\n  :host > i.smart_toy:before {\n    content: \"smart_toy\";\n  }\n  :host > i.smartphone:before {\n    content: \"smartphone\";\n  }\n  :host > i.smb_share:before {\n    content: \"smb_share\";\n  }\n  :host > i.smoke_free:before {\n    content: \"smoke_free\";\n  }\n  :host > i.smoking_rooms:before {\n    content: \"smoking_rooms\";\n  }\n  :host > i.sms:before {\n    content: \"sms\";\n  }\n  :host > i.sms_failed:before {\n    content: \"sms_failed\";\n  }\n  :host > i.snippet_folder:before {\n    content: \"snippet_folder\";\n  }\n  :host > i.snooze:before {\n    content: \"snooze\";\n  }\n  :host > i.snowboarding:before {\n    content: \"snowboarding\";\n  }\n  :host > i.snowing:before {\n    content: \"snowing\";\n  }\n  :host > i.snowing_heavy:before {\n    content: \"snowing_heavy\";\n  }\n  :host > i.snowmobile:before {\n    content: \"snowmobile\";\n  }\n  :host > i.snowshoeing:before {\n    content: \"snowshoeing\";\n  }\n  :host > i.soap:before {\n    content: \"soap\";\n  }\n  :host > i.social_distance:before {\n    content: \"social_distance\";\n  }\n  :host > i.social_leaderboard:before {\n    content: \"social_leaderboard\";\n  }\n  :host > i.solar_power:before {\n    content: \"solar_power\";\n  }\n  :host > i.sort:before {\n    content: \"sort\";\n  }\n  :host > i.sort_by_alpha:before {\n    content: \"sort_by_alpha\";\n  }\n  :host > i.sos:before {\n    content: \"sos\";\n  }\n  :host > i.sound_detection_dog_barking:before {\n    content: \"sound_detection_dog_barking\";\n  }\n  :host > i.sound_detection_glass_break:before {\n    content: \"sound_detection_glass_break\";\n  }\n  :host > i.sound_detection_loud_sound:before {\n    content: \"sound_detection_loud_sound\";\n  }\n  :host > i.sound_sampler:before {\n    content: \"sound_sampler\";\n  }\n  :host > i.soup_kitchen:before {\n    content: \"soup_kitchen\";\n  }\n  :host > i.source:before {\n    content: \"source\";\n  }\n  :host > i.source_environment:before {\n    content: \"source_environment\";\n  }\n  :host > i.source_notes:before {\n    content: \"source_notes\";\n  }\n  :host > i.south:before {\n    content: \"south\";\n  }\n  :host > i.south_america:before {\n    content: \"south_america\";\n  }\n  :host > i.south_east:before {\n    content: \"south_east\";\n  }\n  :host > i.south_west:before {\n    content: \"south_west\";\n  }\n  :host > i.spa:before {\n    content: \"spa\";\n  }\n  :host > i.space_bar:before {\n    content: \"space_bar\";\n  }\n  :host > i.space_dashboard:before {\n    content: \"space_dashboard\";\n  }\n  :host > i.spatial_audio:before {\n    content: \"spatial_audio\";\n  }\n  :host > i.spatial_audio_off:before {\n    content: \"spatial_audio_off\";\n  }\n  :host > i.spatial_tracking:before {\n    content: \"spatial_tracking\";\n  }\n  :host > i.speaker:before {\n    content: \"speaker\";\n  }\n  :host > i.speaker_group:before {\n    content: \"speaker_group\";\n  }\n  :host > i.speaker_notes:before {\n    content: \"speaker_notes\";\n  }\n  :host > i.speaker_notes_off:before {\n    content: \"speaker_notes_off\";\n  }\n  :host > i.speaker_phone:before {\n    content: \"speaker_phone\";\n  }\n  :host > i.special_character:before {\n    content: \"special_character\";\n  }\n  :host > i.specific_gravity:before {\n    content: \"specific_gravity\";\n  }\n  :host > i.speech_to_text:before {\n    content: \"speech_to_text\";\n  }\n  :host > i.speed:before {\n    content: \"speed\";\n  }\n  :host > i.speed_0_5:before {\n    content: \"speed_0_5\";\n  }\n  :host > i.speed_1_2:before {\n    content: \"speed_1_2\";\n  }\n  :host > i.speed_1_5:before {\n    content: \"speed_1_5\";\n  }\n  :host > i.speed_2x:before {\n    content: \"speed_2x\";\n  }\n  :host > i.spellcheck:before {\n    content: \"spellcheck\";\n  }\n  :host > i.splitscreen:before {\n    content: \"splitscreen\";\n  }\n  :host > i.splitscreen_add:before {\n    content: \"splitscreen_add\";\n  }\n  :host > i.splitscreen_bottom:before {\n    content: \"splitscreen_bottom\";\n  }\n  :host > i.splitscreen_left:before {\n    content: \"splitscreen_left\";\n  }\n  :host > i.splitscreen_right:before {\n    content: \"splitscreen_right\";\n  }\n  :host > i.splitscreen_top:before {\n    content: \"splitscreen_top\";\n  }\n  :host > i.splitscreen_vertical_add:before {\n    content: \"splitscreen_vertical_add\";\n  }\n  :host > i.spo2:before {\n    content: \"spo2\";\n  }\n  :host > i.spoke:before {\n    content: \"spoke\";\n  }\n  :host > i.sports:before {\n    content: \"sports\";\n  }\n  :host > i.sports_and_outdoors:before {\n    content: \"sports_and_outdoors\";\n  }\n  :host > i.sports_bar:before {\n    content: \"sports_bar\";\n  }\n  :host > i.sports_baseball:before {\n    content: \"sports_baseball\";\n  }\n  :host > i.sports_basketball:before {\n    content: \"sports_basketball\";\n  }\n  :host > i.sports_cricket:before {\n    content: \"sports_cricket\";\n  }\n  :host > i.sports_esports:before {\n    content: \"sports_esports\";\n  }\n  :host > i.sports_football:before {\n    content: \"sports_football\";\n  }\n  :host > i.sports_golf:before {\n    content: \"sports_golf\";\n  }\n  :host > i.sports_gymnastics:before {\n    content: \"sports_gymnastics\";\n  }\n  :host > i.sports_handball:before {\n    content: \"sports_handball\";\n  }\n  :host > i.sports_hockey:before {\n    content: \"sports_hockey\";\n  }\n  :host > i.sports_kabaddi:before {\n    content: \"sports_kabaddi\";\n  }\n  :host > i.sports_martial_arts:before {\n    content: \"sports_martial_arts\";\n  }\n  :host > i.sports_mma:before {\n    content: \"sports_mma\";\n  }\n  :host > i.sports_motorsports:before {\n    content: \"sports_motorsports\";\n  }\n  :host > i.sports_rugby:before {\n    content: \"sports_rugby\";\n  }\n  :host > i.sports_score:before {\n    content: \"sports_score\";\n  }\n  :host > i.sports_soccer:before {\n    content: \"sports_soccer\";\n  }\n  :host > i.sports_tennis:before {\n    content: \"sports_tennis\";\n  }\n  :host > i.sports_volleyball:before {\n    content: \"sports_volleyball\";\n  }\n  :host > i.sprinkler:before {\n    content: \"sprinkler\";\n  }\n  :host > i.sprint:before {\n    content: \"sprint\";\n  }\n  :host > i.square:before {\n    content: \"square\";\n  }\n  :host > i.square_foot:before {\n    content: \"square_foot\";\n  }\n  :host > i.ssid_chart:before {\n    content: \"ssid_chart\";\n  }\n  :host > i.stack:before {\n    content: \"stack\";\n  }\n  :host > i.stack_off:before {\n    content: \"stack_off\";\n  }\n  :host > i.stack_star:before {\n    content: \"stack_star\";\n  }\n  :host > i.stacked_bar_chart:before {\n    content: \"stacked_bar_chart\";\n  }\n  :host > i.stacked_email:before {\n    content: \"stacked_email\";\n  }\n  :host > i.stacked_inbox:before {\n    content: \"stacked_inbox\";\n  }\n  :host > i.stacked_line_chart:before {\n    content: \"stacked_line_chart\";\n  }\n  :host > i.stacks:before {\n    content: \"stacks\";\n  }\n  :host > i.stadia_controller:before {\n    content: \"stadia_controller\";\n  }\n  :host > i.stadium:before {\n    content: \"stadium\";\n  }\n  :host > i.stairs:before {\n    content: \"stairs\";\n  }\n  :host > i.star:before {\n    content: \"star\";\n  }\n  :host > i.star_border:before {\n    content: \"star_border\";\n  }\n  :host > i.star_border_purple500:before {\n    content: \"star_border_purple500\";\n  }\n  :host > i.star_half:before {\n    content: \"star_half\";\n  }\n  :host > i.star_outline:before {\n    content: \"star_outline\";\n  }\n  :host > i.star_purple500:before {\n    content: \"star_purple500\";\n  }\n  :host > i.star_rate:before {\n    content: \"star_rate\";\n  }\n  :host > i.star_rate_half:before {\n    content: \"star_rate_half\";\n  }\n  :host > i.stars:before {\n    content: \"stars\";\n  }\n  :host > i.start:before {\n    content: \"start\";\n  }\n  :host > i.stat_0:before {\n    content: \"stat_0\";\n  }\n  :host > i.stat_1:before {\n    content: \"stat_1\";\n  }\n  :host > i.stat_2:before {\n    content: \"stat_2\";\n  }\n  :host > i.stat_3:before {\n    content: \"stat_3\";\n  }\n  :host > i.stat_minus_1:before {\n    content: \"stat_minus_1\";\n  }\n  :host > i.stat_minus_2:before {\n    content: \"stat_minus_2\";\n  }\n  :host > i.stat_minus_3:before {\n    content: \"stat_minus_3\";\n  }\n  :host > i.stay_current_landscape:before {\n    content: \"stay_current_landscape\";\n  }\n  :host > i.stay_current_portrait:before {\n    content: \"stay_current_portrait\";\n  }\n  :host > i.stay_primary_landscape:before {\n    content: \"stay_primary_landscape\";\n  }\n  :host > i.stay_primary_portrait:before {\n    content: \"stay_primary_portrait\";\n  }\n  :host > i.step:before {\n    content: \"step\";\n  }\n  :host > i.step_into:before {\n    content: \"step_into\";\n  }\n  :host > i.step_out:before {\n    content: \"step_out\";\n  }\n  :host > i.step_over:before {\n    content: \"step_over\";\n  }\n  :host > i.steppers:before {\n    content: \"steppers\";\n  }\n  :host > i.steps:before {\n    content: \"steps\";\n  }\n  :host > i.stethoscope:before {\n    content: \"stethoscope\";\n  }\n  :host > i.stethoscope_arrow:before {\n    content: \"stethoscope_arrow\";\n  }\n  :host > i.stethoscope_check:before {\n    content: \"stethoscope_check\";\n  }\n  :host > i.sticky_note:before {\n    content: \"sticky_note\";\n  }\n  :host > i.sticky_note_2:before {\n    content: \"sticky_note_2\";\n  }\n  :host > i.stock_media:before {\n    content: \"stock_media\";\n  }\n  :host > i.stockpot:before {\n    content: \"stockpot\";\n  }\n  :host > i.stop:before {\n    content: \"stop\";\n  }\n  :host > i.stop_circle:before {\n    content: \"stop_circle\";\n  }\n  :host > i.stop_screen_share:before {\n    content: \"stop_screen_share\";\n  }\n  :host > i.storage:before {\n    content: \"storage\";\n  }\n  :host > i.store:before {\n    content: \"store\";\n  }\n  :host > i.store_mall_directory:before {\n    content: \"store_mall_directory\";\n  }\n  :host > i.storefront:before {\n    content: \"storefront\";\n  }\n  :host > i.storm:before {\n    content: \"storm\";\n  }\n  :host > i.straight:before {\n    content: \"straight\";\n  }\n  :host > i.straighten:before {\n    content: \"straighten\";\n  }\n  :host > i.strategy:before {\n    content: \"strategy\";\n  }\n  :host > i.stream:before {\n    content: \"stream\";\n  }\n  :host > i.stream_apps:before {\n    content: \"stream_apps\";\n  }\n  :host > i.streetview:before {\n    content: \"streetview\";\n  }\n  :host > i.stress_management:before {\n    content: \"stress_management\";\n  }\n  :host > i.strikethrough_s:before {\n    content: \"strikethrough_s\";\n  }\n  :host > i.stroke_full:before {\n    content: \"stroke_full\";\n  }\n  :host > i.stroke_partial:before {\n    content: \"stroke_partial\";\n  }\n  :host > i.stroller:before {\n    content: \"stroller\";\n  }\n  :host > i.style:before {\n    content: \"style\";\n  }\n  :host > i.styler:before {\n    content: \"styler\";\n  }\n  :host > i.stylus:before {\n    content: \"stylus\";\n  }\n  :host > i.stylus_laser_pointer:before {\n    content: \"stylus_laser_pointer\";\n  }\n  :host > i.stylus_note:before {\n    content: \"stylus_note\";\n  }\n  :host > i.subdirectory_arrow_left:before {\n    content: \"subdirectory_arrow_left\";\n  }\n  :host > i.subdirectory_arrow_right:before {\n    content: \"subdirectory_arrow_right\";\n  }\n  :host > i.subheader:before {\n    content: \"subheader\";\n  }\n  :host > i.subject:before {\n    content: \"subject\";\n  }\n  :host > i.subscript:before {\n    content: \"subscript\";\n  }\n  :host > i.subscriptions:before {\n    content: \"subscriptions\";\n  }\n  :host > i.subtitles:before {\n    content: \"subtitles\";\n  }\n  :host > i.subtitles_off:before {\n    content: \"subtitles_off\";\n  }\n  :host > i.subway:before {\n    content: \"subway\";\n  }\n  :host > i.summarize:before {\n    content: \"summarize\";\n  }\n  :host > i.sunny:before {\n    content: \"sunny\";\n  }\n  :host > i.sunny_snowing:before {\n    content: \"sunny_snowing\";\n  }\n  :host > i.superscript:before {\n    content: \"superscript\";\n  }\n  :host > i.supervised_user_circle:before {\n    content: \"supervised_user_circle\";\n  }\n  :host > i.supervised_user_circle_off:before {\n    content: \"supervised_user_circle_off\";\n  }\n  :host > i.supervisor_account:before {\n    content: \"supervisor_account\";\n  }\n  :host > i.support:before {\n    content: \"support\";\n  }\n  :host > i.support_agent:before {\n    content: \"support_agent\";\n  }\n  :host > i.surfing:before {\n    content: \"surfing\";\n  }\n  :host > i.surgical:before {\n    content: \"surgical\";\n  }\n  :host > i.surround_sound:before {\n    content: \"surround_sound\";\n  }\n  :host > i.swap_calls:before {\n    content: \"swap_calls\";\n  }\n  :host > i.swap_driving_apps:before {\n    content: \"swap_driving_apps\";\n  }\n  :host > i.swap_driving_apps_wheel:before {\n    content: \"swap_driving_apps_wheel\";\n  }\n  :host > i.swap_horiz:before {\n    content: \"swap_horiz\";\n  }\n  :host > i.swap_horizontal_circle:before {\n    content: \"swap_horizontal_circle\";\n  }\n  :host > i.swap_vert:before {\n    content: \"swap_vert\";\n  }\n  :host > i.swap_vertical_circle:before {\n    content: \"swap_vertical_circle\";\n  }\n  :host > i.sweep:before {\n    content: \"sweep\";\n  }\n  :host > i.swipe:before {\n    content: \"swipe\";\n  }\n  :host > i.swipe_down:before {\n    content: \"swipe_down\";\n  }\n  :host > i.swipe_down_alt:before {\n    content: \"swipe_down_alt\";\n  }\n  :host > i.swipe_left:before {\n    content: \"swipe_left\";\n  }\n  :host > i.swipe_left_alt:before {\n    content: \"swipe_left_alt\";\n  }\n  :host > i.swipe_right:before {\n    content: \"swipe_right\";\n  }\n  :host > i.swipe_right_alt:before {\n    content: \"swipe_right_alt\";\n  }\n  :host > i.swipe_up:before {\n    content: \"swipe_up\";\n  }\n  :host > i.swipe_up_alt:before {\n    content: \"swipe_up_alt\";\n  }\n  :host > i.swipe_vertical:before {\n    content: \"swipe_vertical\";\n  }\n  :host > i.switch:before {\n    content: \"switch\";\n  }\n  :host > i.switch_access:before {\n    content: \"switch_access\";\n  }\n  :host > i.switch_access_2:before {\n    content: \"switch_access_2\";\n  }\n  :host > i.switch_access_shortcut:before {\n    content: \"switch_access_shortcut\";\n  }\n  :host > i.switch_access_shortcut_add:before {\n    content: \"switch_access_shortcut_add\";\n  }\n  :host > i.switch_account:before {\n    content: \"switch_account\";\n  }\n  :host > i.switch_camera:before {\n    content: \"switch_camera\";\n  }\n  :host > i.switch_left:before {\n    content: \"switch_left\";\n  }\n  :host > i.switch_right:before {\n    content: \"switch_right\";\n  }\n  :host > i.switch_video:before {\n    content: \"switch_video\";\n  }\n  :host > i.switches:before {\n    content: \"switches\";\n  }\n  :host > i.sword_rose:before {\n    content: \"sword_rose\";\n  }\n  :host > i.swords:before {\n    content: \"swords\";\n  }\n  :host > i.symptoms:before {\n    content: \"symptoms\";\n  }\n  :host > i.synagogue:before {\n    content: \"synagogue\";\n  }\n  :host > i.sync:before {\n    content: \"sync\";\n  }\n  :host > i.sync_alt:before {\n    content: \"sync_alt\";\n  }\n  :host > i.sync_disabled:before {\n    content: \"sync_disabled\";\n  }\n  :host > i.sync_lock:before {\n    content: \"sync_lock\";\n  }\n  :host > i.sync_problem:before {\n    content: \"sync_problem\";\n  }\n  :host > i.sync_saved_locally:before {\n    content: \"sync_saved_locally\";\n  }\n  :host > i.syringe:before {\n    content: \"syringe\";\n  }\n  :host > i.system_security_update:before {\n    content: \"system_security_update\";\n  }\n  :host > i.system_security_update_good:before {\n    content: \"system_security_update_good\";\n  }\n  :host > i.system_security_update_warning:before {\n    content: \"system_security_update_warning\";\n  }\n  :host > i.system_update:before {\n    content: \"system_update\";\n  }\n  :host > i.system_update_alt:before {\n    content: \"system_update_alt\";\n  }\n  :host > i.tab:before {\n    content: \"tab\";\n  }\n  :host > i.tab_close:before {\n    content: \"tab_close\";\n  }\n  :host > i.tab_close_right:before {\n    content: \"tab_close_right\";\n  }\n  :host > i.tab_duplicate:before {\n    content: \"tab_duplicate\";\n  }\n  :host > i.tab_group:before {\n    content: \"tab_group\";\n  }\n  :host > i.tab_move:before {\n    content: \"tab_move\";\n  }\n  :host > i.tab_new_right:before {\n    content: \"tab_new_right\";\n  }\n  :host > i.tab_recent:before {\n    content: \"tab_recent\";\n  }\n  :host > i.tab_unselected:before {\n    content: \"tab_unselected\";\n  }\n  :host > i.table:before {\n    content: \"table\";\n  }\n  :host > i.table_bar:before {\n    content: \"table_bar\";\n  }\n  :host > i.table_chart:before {\n    content: \"table_chart\";\n  }\n  :host > i.table_chart_view:before {\n    content: \"table_chart_view\";\n  }\n  :host > i.table_lamp:before {\n    content: \"table_lamp\";\n  }\n  :host > i.table_restaurant:before {\n    content: \"table_restaurant\";\n  }\n  :host > i.table_rows:before {\n    content: \"table_rows\";\n  }\n  :host > i.table_rows_narrow:before {\n    content: \"table_rows_narrow\";\n  }\n  :host > i.table_view:before {\n    content: \"table_view\";\n  }\n  :host > i.tablet:before {\n    content: \"tablet\";\n  }\n  :host > i.tablet_android:before {\n    content: \"tablet_android\";\n  }\n  :host > i.tablet_mac:before {\n    content: \"tablet_mac\";\n  }\n  :host > i.tabs:before {\n    content: \"tabs\";\n  }\n  :host > i.tactic:before {\n    content: \"tactic\";\n  }\n  :host > i.tag:before {\n    content: \"tag\";\n  }\n  :host > i.tag_faces:before {\n    content: \"tag_faces\";\n  }\n  :host > i.takeout_dining:before {\n    content: \"takeout_dining\";\n  }\n  :host > i.tamper_detection_off:before {\n    content: \"tamper_detection_off\";\n  }\n  :host > i.tamper_detection_on:before {\n    content: \"tamper_detection_on\";\n  }\n  :host > i.tap_and_play:before {\n    content: \"tap_and_play\";\n  }\n  :host > i.tapas:before {\n    content: \"tapas\";\n  }\n  :host > i.target:before {\n    content: \"target\";\n  }\n  :host > i.task:before {\n    content: \"task\";\n  }\n  :host > i.task_alt:before {\n    content: \"task_alt\";\n  }\n  :host > i.taunt:before {\n    content: \"taunt\";\n  }\n  :host > i.taxi_alert:before {\n    content: \"taxi_alert\";\n  }\n  :host > i.team_dashboard:before {\n    content: \"team_dashboard\";\n  }\n  :host > i.temp_preferences_custom:before {\n    content: \"temp_preferences_custom\";\n  }\n  :host > i.temp_preferences_eco:before {\n    content: \"temp_preferences_eco\";\n  }\n  :host > i.temple_buddhist:before {\n    content: \"temple_buddhist\";\n  }\n  :host > i.temple_hindu:before {\n    content: \"temple_hindu\";\n  }\n  :host > i.tenancy:before {\n    content: \"tenancy\";\n  }\n  :host > i.terminal:before {\n    content: \"terminal\";\n  }\n  :host > i.terrain:before {\n    content: \"terrain\";\n  }\n  :host > i.text_ad:before {\n    content: \"text_ad\";\n  }\n  :host > i.text_decrease:before {\n    content: \"text_decrease\";\n  }\n  :host > i.text_fields:before {\n    content: \"text_fields\";\n  }\n  :host > i.text_fields_alt:before {\n    content: \"text_fields_alt\";\n  }\n  :host > i.text_format:before {\n    content: \"text_format\";\n  }\n  :host > i.text_increase:before {\n    content: \"text_increase\";\n  }\n  :host > i.text_rotate_up:before {\n    content: \"text_rotate_up\";\n  }\n  :host > i.text_rotate_vertical:before {\n    content: \"text_rotate_vertical\";\n  }\n  :host > i.text_rotation_angledown:before {\n    content: \"text_rotation_angledown\";\n  }\n  :host > i.text_rotation_angleup:before {\n    content: \"text_rotation_angleup\";\n  }\n  :host > i.text_rotation_down:before {\n    content: \"text_rotation_down\";\n  }\n  :host > i.text_rotation_none:before {\n    content: \"text_rotation_none\";\n  }\n  :host > i.text_select_end:before {\n    content: \"text_select_end\";\n  }\n  :host > i.text_select_jump_to_beginning:before {\n    content: \"text_select_jump_to_beginning\";\n  }\n  :host > i.text_select_jump_to_end:before {\n    content: \"text_select_jump_to_end\";\n  }\n  :host > i.text_select_move_back_character:before {\n    content: \"text_select_move_back_character\";\n  }\n  :host > i.text_select_move_back_word:before {\n    content: \"text_select_move_back_word\";\n  }\n  :host > i.text_select_move_down:before {\n    content: \"text_select_move_down\";\n  }\n  :host > i.text_select_move_forward_character:before {\n    content: \"text_select_move_forward_character\";\n  }\n  :host > i.text_select_move_forward_word:before {\n    content: \"text_select_move_forward_word\";\n  }\n  :host > i.text_select_move_up:before {\n    content: \"text_select_move_up\";\n  }\n  :host > i.text_select_start:before {\n    content: \"text_select_start\";\n  }\n  :host > i.text_snippet:before {\n    content: \"text_snippet\";\n  }\n  :host > i.text_to_speech:before {\n    content: \"text_to_speech\";\n  }\n  :host > i.textsms:before {\n    content: \"textsms\";\n  }\n  :host > i.texture:before {\n    content: \"texture\";\n  }\n  :host > i.texture_add:before {\n    content: \"texture_add\";\n  }\n  :host > i.texture_minus:before {\n    content: \"texture_minus\";\n  }\n  :host > i.theater_comedy:before {\n    content: \"theater_comedy\";\n  }\n  :host > i.theaters:before {\n    content: \"theaters\";\n  }\n  :host > i.thermometer:before {\n    content: \"thermometer\";\n  }\n  :host > i.thermometer_add:before {\n    content: \"thermometer_add\";\n  }\n  :host > i.thermometer_gain:before {\n    content: \"thermometer_gain\";\n  }\n  :host > i.thermometer_loss:before {\n    content: \"thermometer_loss\";\n  }\n  :host > i.thermometer_minus:before {\n    content: \"thermometer_minus\";\n  }\n  :host > i.thermostat:before {\n    content: \"thermostat\";\n  }\n  :host > i.thermostat_auto:before {\n    content: \"thermostat_auto\";\n  }\n  :host > i.thermostat_carbon:before {\n    content: \"thermostat_carbon\";\n  }\n  :host > i.things_to_do:before {\n    content: \"things_to_do\";\n  }\n  :host > i.thread_unread:before {\n    content: \"thread_unread\";\n  }\n  :host > i.thumb_down:before {\n    content: \"thumb_down\";\n  }\n  :host > i.thumb_down_alt:before {\n    content: \"thumb_down_alt\";\n  }\n  :host > i.thumb_down_filled:before {\n    content: \"thumb_down_filled\";\n  }\n  :host > i.thumb_down_off:before {\n    content: \"thumb_down_off\";\n  }\n  :host > i.thumb_down_off_alt:before {\n    content: \"thumb_down_off_alt\";\n  }\n  :host > i.thumb_up:before {\n    content: \"thumb_up\";\n  }\n  :host > i.thumb_up_alt:before {\n    content: \"thumb_up_alt\";\n  }\n  :host > i.thumb_up_filled:before {\n    content: \"thumb_up_filled\";\n  }\n  :host > i.thumb_up_off:before {\n    content: \"thumb_up_off\";\n  }\n  :host > i.thumb_up_off_alt:before {\n    content: \"thumb_up_off_alt\";\n  }\n  :host > i.thumbnail_bar:before {\n    content: \"thumbnail_bar\";\n  }\n  :host > i.thumbs_up_down:before {\n    content: \"thumbs_up_down\";\n  }\n  :host > i.thunderstorm:before {\n    content: \"thunderstorm\";\n  }\n  :host > i.tibia:before {\n    content: \"tibia\";\n  }\n  :host > i.tibia_alt:before {\n    content: \"tibia_alt\";\n  }\n  :host > i.time_auto:before {\n    content: \"time_auto\";\n  }\n  :host > i.time_to_leave:before {\n    content: \"time_to_leave\";\n  }\n  :host > i.timelapse:before {\n    content: \"timelapse\";\n  }\n  :host > i.timeline:before {\n    content: \"timeline\";\n  }\n  :host > i.timer:before {\n    content: \"timer\";\n  }\n  :host > i.timer_10:before {\n    content: \"timer_10\";\n  }\n  :host > i.timer_10_alt_1:before {\n    content: \"timer_10_alt_1\";\n  }\n  :host > i.timer_10_select:before {\n    content: \"timer_10_select\";\n  }\n  :host > i.timer_3:before {\n    content: \"timer_3\";\n  }\n  :host > i.timer_3_alt_1:before {\n    content: \"timer_3_alt_1\";\n  }\n  :host > i.timer_3_select:before {\n    content: \"timer_3_select\";\n  }\n  :host > i.timer_off:before {\n    content: \"timer_off\";\n  }\n  :host > i.tips_and_updates:before {\n    content: \"tips_and_updates\";\n  }\n  :host > i.tire_repair:before {\n    content: \"tire_repair\";\n  }\n  :host > i.title:before {\n    content: \"title\";\n  }\n  :host > i.toast:before {\n    content: \"toast\";\n  }\n  :host > i.toc:before {\n    content: \"toc\";\n  }\n  :host > i.today:before {\n    content: \"today\";\n  }\n  :host > i.toggle_off:before {\n    content: \"toggle_off\";\n  }\n  :host > i.toggle_on:before {\n    content: \"toggle_on\";\n  }\n  :host > i.token:before {\n    content: \"token\";\n  }\n  :host > i.toll:before {\n    content: \"toll\";\n  }\n  :host > i.tonality:before {\n    content: \"tonality\";\n  }\n  :host > i.toolbar:before {\n    content: \"toolbar\";\n  }\n  :host > i.tools_flat_head:before {\n    content: \"tools_flat_head\";\n  }\n  :host > i.tools_installation_kit:before {\n    content: \"tools_installation_kit\";\n  }\n  :host > i.tools_ladder:before {\n    content: \"tools_ladder\";\n  }\n  :host > i.tools_level:before {\n    content: \"tools_level\";\n  }\n  :host > i.tools_phillips:before {\n    content: \"tools_phillips\";\n  }\n  :host > i.tools_pliers_wire_stripper:before {\n    content: \"tools_pliers_wire_stripper\";\n  }\n  :host > i.tools_power_drill:before {\n    content: \"tools_power_drill\";\n  }\n  :host > i.tools_wrench:before {\n    content: \"tools_wrench\";\n  }\n  :host > i.tooltip:before {\n    content: \"tooltip\";\n  }\n  :host > i.top_panel_close:before {\n    content: \"top_panel_close\";\n  }\n  :host > i.top_panel_open:before {\n    content: \"top_panel_open\";\n  }\n  :host > i.topic:before {\n    content: \"topic\";\n  }\n  :host > i.tornado:before {\n    content: \"tornado\";\n  }\n  :host > i.total_dissolved_solids:before {\n    content: \"total_dissolved_solids\";\n  }\n  :host > i.touch_app:before {\n    content: \"touch_app\";\n  }\n  :host > i.touchpad_mouse:before {\n    content: \"touchpad_mouse\";\n  }\n  :host > i.touchpad_mouse_off:before {\n    content: \"touchpad_mouse_off\";\n  }\n  :host > i.tour:before {\n    content: \"tour\";\n  }\n  :host > i.toys:before {\n    content: \"toys\";\n  }\n  :host > i.toys_and_games:before {\n    content: \"toys_and_games\";\n  }\n  :host > i.toys_fan:before {\n    content: \"toys_fan\";\n  }\n  :host > i.track_changes:before {\n    content: \"track_changes\";\n  }\n  :host > i.traffic:before {\n    content: \"traffic\";\n  }\n  :host > i.trail_length:before {\n    content: \"trail_length\";\n  }\n  :host > i.trail_length_medium:before {\n    content: \"trail_length_medium\";\n  }\n  :host > i.trail_length_short:before {\n    content: \"trail_length_short\";\n  }\n  :host > i.train:before {\n    content: \"train\";\n  }\n  :host > i.tram:before {\n    content: \"tram\";\n  }\n  :host > i.transcribe:before {\n    content: \"transcribe\";\n  }\n  :host > i.transfer_within_a_station:before {\n    content: \"transfer_within_a_station\";\n  }\n  :host > i.transform:before {\n    content: \"transform\";\n  }\n  :host > i.transgender:before {\n    content: \"transgender\";\n  }\n  :host > i.transit_enterexit:before {\n    content: \"transit_enterexit\";\n  }\n  :host > i.transition_chop:before {\n    content: \"transition_chop\";\n  }\n  :host > i.transition_dissolve:before {\n    content: \"transition_dissolve\";\n  }\n  :host > i.transition_fade:before {\n    content: \"transition_fade\";\n  }\n  :host > i.transition_push:before {\n    content: \"transition_push\";\n  }\n  :host > i.transition_slide:before {\n    content: \"transition_slide\";\n  }\n  :host > i.translate:before {\n    content: \"translate\";\n  }\n  :host > i.transportation:before {\n    content: \"transportation\";\n  }\n  :host > i.travel:before {\n    content: \"travel\";\n  }\n  :host > i.travel_explore:before {\n    content: \"travel_explore\";\n  }\n  :host > i.travel_luggage_and_bags:before {\n    content: \"travel_luggage_and_bags\";\n  }\n  :host > i.trending_down:before {\n    content: \"trending_down\";\n  }\n  :host > i.trending_flat:before {\n    content: \"trending_flat\";\n  }\n  :host > i.trending_up:before {\n    content: \"trending_up\";\n  }\n  :host > i.trip:before {\n    content: \"trip\";\n  }\n  :host > i.trip_origin:before {\n    content: \"trip_origin\";\n  }\n  :host > i.trolley:before {\n    content: \"trolley\";\n  }\n  :host > i.trophy:before {\n    content: \"trophy\";\n  }\n  :host > i.troubleshoot:before {\n    content: \"troubleshoot\";\n  }\n  :host > i.try:before {\n    content: \"try\";\n  }\n  :host > i.tsunami:before {\n    content: \"tsunami\";\n  }\n  :host > i.tsv:before {\n    content: \"tsv\";\n  }\n  :host > i.tty:before {\n    content: \"tty\";\n  }\n  :host > i.tune:before {\n    content: \"tune\";\n  }\n  :host > i.tungsten:before {\n    content: \"tungsten\";\n  }\n  :host > i.turn_left:before {\n    content: \"turn_left\";\n  }\n  :host > i.turn_right:before {\n    content: \"turn_right\";\n  }\n  :host > i.turn_sharp_left:before {\n    content: \"turn_sharp_left\";\n  }\n  :host > i.turn_sharp_right:before {\n    content: \"turn_sharp_right\";\n  }\n  :host > i.turn_slight_left:before {\n    content: \"turn_slight_left\";\n  }\n  :host > i.turn_slight_right:before {\n    content: \"turn_slight_right\";\n  }\n  :host > i.turned_in:before {\n    content: \"turned_in\";\n  }\n  :host > i.turned_in_not:before {\n    content: \"turned_in_not\";\n  }\n  :host > i.tv:before {\n    content: \"tv\";\n  }\n  :host > i.tv_gen:before {\n    content: \"tv_gen\";\n  }\n  :host > i.tv_guide:before {\n    content: \"tv_guide\";\n  }\n  :host > i.tv_off:before {\n    content: \"tv_off\";\n  }\n  :host > i.tv_options_edit_channels:before {\n    content: \"tv_options_edit_channels\";\n  }\n  :host > i.tv_options_input_settings:before {\n    content: \"tv_options_input_settings\";\n  }\n  :host > i.tv_remote:before {\n    content: \"tv_remote\";\n  }\n  :host > i.tv_signin:before {\n    content: \"tv_signin\";\n  }\n  :host > i.tv_with_assistant:before {\n    content: \"tv_with_assistant\";\n  }\n  :host > i.two_pager:before {\n    content: \"two_pager\";\n  }\n  :host > i.two_wheeler:before {\n    content: \"two_wheeler\";\n  }\n  :host > i.type_specimen:before {\n    content: \"type_specimen\";\n  }\n  :host > i.u_turn_left:before {\n    content: \"u_turn_left\";\n  }\n  :host > i.u_turn_right:before {\n    content: \"u_turn_right\";\n  }\n  :host > i.ulna_radius:before {\n    content: \"ulna_radius\";\n  }\n  :host > i.ulna_radius_alt:before {\n    content: \"ulna_radius_alt\";\n  }\n  :host > i.umbrella:before {\n    content: \"umbrella\";\n  }\n  :host > i.unarchive:before {\n    content: \"unarchive\";\n  }\n  :host > i.undo:before {\n    content: \"undo\";\n  }\n  :host > i.unfold_less:before {\n    content: \"unfold_less\";\n  }\n  :host > i.unfold_less_double:before {\n    content: \"unfold_less_double\";\n  }\n  :host > i.unfold_more:before {\n    content: \"unfold_more\";\n  }\n  :host > i.unfold_more_double:before {\n    content: \"unfold_more_double\";\n  }\n  :host > i.ungroup:before {\n    content: \"ungroup\";\n  }\n  :host > i.universal_currency:before {\n    content: \"universal_currency\";\n  }\n  :host > i.universal_currency_alt:before {\n    content: \"universal_currency_alt\";\n  }\n  :host > i.universal_local:before {\n    content: \"universal_local\";\n  }\n  :host > i.unknown_2:before {\n    content: \"unknown_2\";\n  }\n  :host > i.unknown_5:before {\n    content: \"unknown_5\";\n  }\n  :host > i.unknown_document:before {\n    content: \"unknown_document\";\n  }\n  :host > i.unknown_med:before {\n    content: \"unknown_med\";\n  }\n  :host > i.unlicense:before {\n    content: \"unlicense\";\n  }\n  :host > i.unpublished:before {\n    content: \"unpublished\";\n  }\n  :host > i.unsubscribe:before {\n    content: \"unsubscribe\";\n  }\n  :host > i.upcoming:before {\n    content: \"upcoming\";\n  }\n  :host > i.update:before {\n    content: \"update\";\n  }\n  :host > i.update_disabled:before {\n    content: \"update_disabled\";\n  }\n  :host > i.upgrade:before {\n    content: \"upgrade\";\n  }\n  :host > i.upload:before {\n    content: \"upload\";\n  }\n  :host > i.upload_2:before {\n    content: \"upload_2\";\n  }\n  :host > i.upload_file:before {\n    content: \"upload_file\";\n  }\n  :host > i.urology:before {\n    content: \"urology\";\n  }\n  :host > i.usb:before {\n    content: \"usb\";\n  }\n  :host > i.usb_off:before {\n    content: \"usb_off\";\n  }\n  :host > i.user_attributes:before {\n    content: \"user_attributes\";\n  }\n  :host > i.vaccines:before {\n    content: \"vaccines\";\n  }\n  :host > i.vacuum:before {\n    content: \"vacuum\";\n  }\n  :host > i.valve:before {\n    content: \"valve\";\n  }\n  :host > i.vape_free:before {\n    content: \"vape_free\";\n  }\n  :host > i.vaping_rooms:before {\n    content: \"vaping_rooms\";\n  }\n  :host > i.variable_add:before {\n    content: \"variable_add\";\n  }\n  :host > i.variable_insert:before {\n    content: \"variable_insert\";\n  }\n  :host > i.variable_remove:before {\n    content: \"variable_remove\";\n  }\n  :host > i.variables:before {\n    content: \"variables\";\n  }\n  :host > i.ventilator:before {\n    content: \"ventilator\";\n  }\n  :host > i.verified:before {\n    content: \"verified\";\n  }\n  :host > i.verified_user:before {\n    content: \"verified_user\";\n  }\n  :host > i.vertical_align_bottom:before {\n    content: \"vertical_align_bottom\";\n  }\n  :host > i.vertical_align_center:before {\n    content: \"vertical_align_center\";\n  }\n  :host > i.vertical_align_top:before {\n    content: \"vertical_align_top\";\n  }\n  :host > i.vertical_distribute:before {\n    content: \"vertical_distribute\";\n  }\n  :host > i.vertical_shades:before {\n    content: \"vertical_shades\";\n  }\n  :host > i.vertical_shades_closed:before {\n    content: \"vertical_shades_closed\";\n  }\n  :host > i.vertical_split:before {\n    content: \"vertical_split\";\n  }\n  :host > i.vibration:before {\n    content: \"vibration\";\n  }\n  :host > i.video_call:before {\n    content: \"video_call\";\n  }\n  :host > i.video_camera_back:before {\n    content: \"video_camera_back\";\n  }\n  :host > i.video_camera_front:before {\n    content: \"video_camera_front\";\n  }\n  :host > i.video_camera_front_off:before {\n    content: \"video_camera_front_off\";\n  }\n  :host > i.video_chat:before {\n    content: \"video_chat\";\n  }\n  :host > i.video_file:before {\n    content: \"video_file\";\n  }\n  :host > i.video_label:before {\n    content: \"video_label\";\n  }\n  :host > i.video_library:before {\n    content: \"video_library\";\n  }\n  :host > i.video_search:before {\n    content: \"video_search\";\n  }\n  :host > i.video_settings:before {\n    content: \"video_settings\";\n  }\n  :host > i.video_stable:before {\n    content: \"video_stable\";\n  }\n  :host > i.videocam:before {\n    content: \"videocam\";\n  }\n  :host > i.videocam_off:before {\n    content: \"videocam_off\";\n  }\n  :host > i.videogame_asset:before {\n    content: \"videogame_asset\";\n  }\n  :host > i.videogame_asset_off:before {\n    content: \"videogame_asset_off\";\n  }\n  :host > i.view_agenda:before {\n    content: \"view_agenda\";\n  }\n  :host > i.view_array:before {\n    content: \"view_array\";\n  }\n  :host > i.view_carousel:before {\n    content: \"view_carousel\";\n  }\n  :host > i.view_column:before {\n    content: \"view_column\";\n  }\n  :host > i.view_column_2:before {\n    content: \"view_column_2\";\n  }\n  :host > i.view_comfy:before {\n    content: \"view_comfy\";\n  }\n  :host > i.view_comfy_alt:before {\n    content: \"view_comfy_alt\";\n  }\n  :host > i.view_compact:before {\n    content: \"view_compact\";\n  }\n  :host > i.view_compact_alt:before {\n    content: \"view_compact_alt\";\n  }\n  :host > i.view_cozy:before {\n    content: \"view_cozy\";\n  }\n  :host > i.view_day:before {\n    content: \"view_day\";\n  }\n  :host > i.view_headline:before {\n    content: \"view_headline\";\n  }\n  :host > i.view_in_ar:before {\n    content: \"view_in_ar\";\n  }\n  :host > i.view_in_ar_new:before {\n    content: \"view_in_ar_new\";\n  }\n  :host > i.view_in_ar_off:before {\n    content: \"view_in_ar_off\";\n  }\n  :host > i.view_kanban:before {\n    content: \"view_kanban\";\n  }\n  :host > i.view_list:before {\n    content: \"view_list\";\n  }\n  :host > i.view_module:before {\n    content: \"view_module\";\n  }\n  :host > i.view_quilt:before {\n    content: \"view_quilt\";\n  }\n  :host > i.view_sidebar:before {\n    content: \"view_sidebar\";\n  }\n  :host > i.view_stream:before {\n    content: \"view_stream\";\n  }\n  :host > i.view_timeline:before {\n    content: \"view_timeline\";\n  }\n  :host > i.view_week:before {\n    content: \"view_week\";\n  }\n  :host > i.vignette:before {\n    content: \"vignette\";\n  }\n  :host > i.villa:before {\n    content: \"villa\";\n  }\n  :host > i.visibility:before {\n    content: \"visibility\";\n  }\n  :host > i.visibility_lock:before {\n    content: \"visibility_lock\";\n  }\n  :host > i.visibility_off:before {\n    content: \"visibility_off\";\n  }\n  :host > i.vital_signs:before {\n    content: \"vital_signs\";\n  }\n  :host > i.vitals:before {\n    content: \"vitals\";\n  }\n  :host > i.voice_chat:before {\n    content: \"voice_chat\";\n  }\n  :host > i.voice_over_off:before {\n    content: \"voice_over_off\";\n  }\n  :host > i.voice_selection:before {\n    content: \"voice_selection\";\n  }\n  :host > i.voicemail:before {\n    content: \"voicemail\";\n  }\n  :host > i.volcano:before {\n    content: \"volcano\";\n  }\n  :host > i.volume_down:before {\n    content: \"volume_down\";\n  }\n  :host > i.volume_down_alt:before {\n    content: \"volume_down_alt\";\n  }\n  :host > i.volume_mute:before {\n    content: \"volume_mute\";\n  }\n  :host > i.volume_off:before {\n    content: \"volume_off\";\n  }\n  :host > i.volume_up:before {\n    content: \"volume_up\";\n  }\n  :host > i.volunteer_activism:before {\n    content: \"volunteer_activism\";\n  }\n  :host > i.voting_chip:before {\n    content: \"voting_chip\";\n  }\n  :host > i.vpn_key:before {\n    content: \"vpn_key\";\n  }\n  :host > i.vpn_key_alert:before {\n    content: \"vpn_key_alert\";\n  }\n  :host > i.vpn_key_off:before {\n    content: \"vpn_key_off\";\n  }\n  :host > i.vpn_lock:before {\n    content: \"vpn_lock\";\n  }\n  :host > i.vr180_create2d:before {\n    content: \"vr180_create2d\";\n  }\n  :host > i.vr180_create2d_off:before {\n    content: \"vr180_create2d_off\";\n  }\n  :host > i.vrpano:before {\n    content: \"vrpano\";\n  }\n  :host > i.wall_art:before {\n    content: \"wall_art\";\n  }\n  :host > i.wall_lamp:before {\n    content: \"wall_lamp\";\n  }\n  :host > i.wallet:before {\n    content: \"wallet\";\n  }\n  :host > i.wallpaper:before {\n    content: \"wallpaper\";\n  }\n  :host > i.wallpaper_slideshow:before {\n    content: \"wallpaper_slideshow\";\n  }\n  :host > i.ward:before {\n    content: \"ward\";\n  }\n  :host > i.warehouse:before {\n    content: \"warehouse\";\n  }\n  :host > i.warning:before {\n    content: \"warning\";\n  }\n  :host > i.warning_amber:before {\n    content: \"warning_amber\";\n  }\n  :host > i.warning_off:before {\n    content: \"warning_off\";\n  }\n  :host > i.wash:before {\n    content: \"wash\";\n  }\n  :host > i.watch:before {\n    content: \"watch\";\n  }\n  :host > i.watch_button_press:before {\n    content: \"watch_button_press\";\n  }\n  :host > i.watch_later:before {\n    content: \"watch_later\";\n  }\n  :host > i.watch_off:before {\n    content: \"watch_off\";\n  }\n  :host > i.watch_screentime:before {\n    content: \"watch_screentime\";\n  }\n  :host > i.watch_wake:before {\n    content: \"watch_wake\";\n  }\n  :host > i.water:before {\n    content: \"water\";\n  }\n  :host > i.water_bottle:before {\n    content: \"water_bottle\";\n  }\n  :host > i.water_bottle_large:before {\n    content: \"water_bottle_large\";\n  }\n  :host > i.water_damage:before {\n    content: \"water_damage\";\n  }\n  :host > i.water_do:before {\n    content: \"water_do\";\n  }\n  :host > i.water_drop:before {\n    content: \"water_drop\";\n  }\n  :host > i.water_ec:before {\n    content: \"water_ec\";\n  }\n  :host > i.water_full:before {\n    content: \"water_full\";\n  }\n  :host > i.water_heater:before {\n    content: \"water_heater\";\n  }\n  :host > i.water_lock:before {\n    content: \"water_lock\";\n  }\n  :host > i.water_loss:before {\n    content: \"water_loss\";\n  }\n  :host > i.water_lux:before {\n    content: \"water_lux\";\n  }\n  :host > i.water_medium:before {\n    content: \"water_medium\";\n  }\n  :host > i.water_orp:before {\n    content: \"water_orp\";\n  }\n  :host > i.water_ph:before {\n    content: \"water_ph\";\n  }\n  :host > i.water_pump:before {\n    content: \"water_pump\";\n  }\n  :host > i.water_voc:before {\n    content: \"water_voc\";\n  }\n  :host > i.waterfall_chart:before {\n    content: \"waterfall_chart\";\n  }\n  :host > i.waves:before {\n    content: \"waves\";\n  }\n  :host > i.waving_hand:before {\n    content: \"waving_hand\";\n  }\n  :host > i.wb_auto:before {\n    content: \"wb_auto\";\n  }\n  :host > i.wb_cloudy:before {\n    content: \"wb_cloudy\";\n  }\n  :host > i.wb_incandescent:before {\n    content: \"wb_incandescent\";\n  }\n  :host > i.wb_iridescent:before {\n    content: \"wb_iridescent\";\n  }\n  :host > i.wb_shade:before {\n    content: \"wb_shade\";\n  }\n  :host > i.wb_sunny:before {\n    content: \"wb_sunny\";\n  }\n  :host > i.wb_twilight:before {\n    content: \"wb_twilight\";\n  }\n  :host > i.wc:before {\n    content: \"wc\";\n  }\n  :host > i.weather_hail:before {\n    content: \"weather_hail\";\n  }\n  :host > i.weather_mix:before {\n    content: \"weather_mix\";\n  }\n  :host > i.weather_snowy:before {\n    content: \"weather_snowy\";\n  }\n  :host > i.web:before {\n    content: \"web\";\n  }\n  :host > i.web_asset:before {\n    content: \"web_asset\";\n  }\n  :host > i.web_asset_off:before {\n    content: \"web_asset_off\";\n  }\n  :host > i.web_stories:before {\n    content: \"web_stories\";\n  }\n  :host > i.web_traffic:before {\n    content: \"web_traffic\";\n  }\n  :host > i.webhook:before {\n    content: \"webhook\";\n  }\n  :host > i.weekend:before {\n    content: \"weekend\";\n  }\n  :host > i.weight:before {\n    content: \"weight\";\n  }\n  :host > i.west:before {\n    content: \"west\";\n  }\n  :host > i.whatshot:before {\n    content: \"whatshot\";\n  }\n  :host > i.wheelchair_pickup:before {\n    content: \"wheelchair_pickup\";\n  }\n  :host > i.where_to_vote:before {\n    content: \"where_to_vote\";\n  }\n  :host > i.widgets:before {\n    content: \"widgets\";\n  }\n  :host > i.width:before {\n    content: \"width\";\n  }\n  :host > i.width_full:before {\n    content: \"width_full\";\n  }\n  :host > i.width_normal:before {\n    content: \"width_normal\";\n  }\n  :host > i.width_wide:before {\n    content: \"width_wide\";\n  }\n  :host > i.wifi:before {\n    content: \"wifi\";\n  }\n  :host > i.wifi_1_bar:before {\n    content: \"wifi_1_bar\";\n  }\n  :host > i.wifi_2_bar:before {\n    content: \"wifi_2_bar\";\n  }\n  :host > i.wifi_add:before {\n    content: \"wifi_add\";\n  }\n  :host > i.wifi_calling:before {\n    content: \"wifi_calling\";\n  }\n  :host > i.wifi_calling_1:before {\n    content: \"wifi_calling_1\";\n  }\n  :host > i.wifi_calling_2:before {\n    content: \"wifi_calling_2\";\n  }\n  :host > i.wifi_calling_3:before {\n    content: \"wifi_calling_3\";\n  }\n  :host > i.wifi_channel:before {\n    content: \"wifi_channel\";\n  }\n  :host > i.wifi_find:before {\n    content: \"wifi_find\";\n  }\n  :host > i.wifi_home:before {\n    content: \"wifi_home\";\n  }\n  :host > i.wifi_lock:before {\n    content: \"wifi_lock\";\n  }\n  :host > i.wifi_notification:before {\n    content: \"wifi_notification\";\n  }\n  :host > i.wifi_off:before {\n    content: \"wifi_off\";\n  }\n  :host > i.wifi_password:before {\n    content: \"wifi_password\";\n  }\n  :host > i.wifi_protected_setup:before {\n    content: \"wifi_protected_setup\";\n  }\n  :host > i.wifi_proxy:before {\n    content: \"wifi_proxy\";\n  }\n  :host > i.wifi_tethering:before {\n    content: \"wifi_tethering\";\n  }\n  :host > i.wifi_tethering_error:before {\n    content: \"wifi_tethering_error\";\n  }\n  :host > i.wifi_tethering_off:before {\n    content: \"wifi_tethering_off\";\n  }\n  :host > i.wind_power:before {\n    content: \"wind_power\";\n  }\n  :host > i.window:before {\n    content: \"window\";\n  }\n  :host > i.window_closed:before {\n    content: \"window_closed\";\n  }\n  :host > i.window_open:before {\n    content: \"window_open\";\n  }\n  :host > i.window_sensor:before {\n    content: \"window_sensor\";\n  }\n  :host > i.wine_bar:before {\n    content: \"wine_bar\";\n  }\n  :host > i.woman:before {\n    content: \"woman\";\n  }\n  :host > i.woman_2:before {\n    content: \"woman_2\";\n  }\n  :host > i.work:before {\n    content: \"work\";\n  }\n  :host > i.work_alert:before {\n    content: \"work_alert\";\n  }\n  :host > i.work_history:before {\n    content: \"work_history\";\n  }\n  :host > i.work_off:before {\n    content: \"work_off\";\n  }\n  :host > i.work_outline:before {\n    content: \"work_outline\";\n  }\n  :host > i.work_update:before {\n    content: \"work_update\";\n  }\n  :host > i.workflow:before {\n    content: \"workflow\";\n  }\n  :host > i.workspace_premium:before {\n    content: \"workspace_premium\";\n  }\n  :host > i.workspaces:before {\n    content: \"workspaces\";\n  }\n  :host > i.workspaces_outline:before {\n    content: \"workspaces_outline\";\n  }\n  :host > i.wounds_injuries:before {\n    content: \"wounds_injuries\";\n  }\n  :host > i.wrap_text:before {\n    content: \"wrap_text\";\n  }\n  :host > i.wrist:before {\n    content: \"wrist\";\n  }\n  :host > i.wrong_location:before {\n    content: \"wrong_location\";\n  }\n  :host > i.wysiwyg:before {\n    content: \"wysiwyg\";\n  }\n  :host > i.yard:before {\n    content: \"yard\";\n  }\n  :host > i.your_trips:before {\n    content: \"your_trips\";\n  }\n  :host > i.youtube_activity:before {\n    content: \"youtube_activity\";\n  }\n  :host > i.youtube_searched_for:before {\n    content: \"youtube_searched_for\";\n  }\n  :host > i.zone_person_alert:before {\n    content: \"zone_person_alert\";\n  }\n  :host > i.zone_person_idle:before {\n    content: \"zone_person_idle\";\n  }\n  :host > i.zone_person_urgent:before {\n    content: \"zone_person_urgent\";\n  }\n  :host > i.zoom_in:before {\n    content: \"zoom_in\";\n  }\n  :host > i.zoom_in_map:before {\n    content: \"zoom_in_map\";\n  }\n  :host > i.zoom_out:before {\n    content: \"zoom_out\";\n  }\n  :host > i.zoom_out_map:before {\n    content: \"zoom_out_map\";\n  }\n}";
+var iconCss$3 = css_248z$3s;
 
 var css_248z$3r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n    border-left: none;\n    box-shadow: -2px 0px 0px var(--color-ocean);\n    padding: 0 0.5em;\n    width: 100%;\n    color: var(--color-grey);\n  }\n}";
+var indentedTextCss$5 = css_248z$3r;
 
 var css_248z$3q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* INPUT */\n  :host .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: 44px;\n  }\n  :host .kol-input.default:not(.hide-label) {\n    grid-template-columns: 1.5rem auto;\n    gap: 0.4em;\n  }\n  :host .kol-input.switch:not(.hide-label) {\n    grid-template-columns: 3.5rem auto;\n    gap: 0.4em;\n  }\n  :host .kol-input > div.input {\n    display: inherit;\n    min-height: 44px;\n    order: 2;\n  }\n  :host .kol-input > div.input input {\n    margin: 0px;\n  }\n  :host .kol-input:not(.disabled) :is(.input, label) {\n    cursor: pointer;\n  }\n  :host .kol-input.disabled .input {\n    cursor: not-allowed;\n  }\n  :host .kol-input > label {\n    order: 3;\n  }\n  :host .kol-input > .kol-alert-wc.error {\n    order: 1;\n    padding-top: 0.25em;\n    grid-column: span 2/auto;\n  }\n  :host .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  :host .kol-input.error input:focus,\n  .kol-input.error select:focus,\n  .kol-input.error textarea:focus {\n    outline-color: var(--color-red) !important;\n  }\n  :host .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  :host input {\n    order: 1;\n    width: 100%;\n    border-color: var(--color-grey);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    line-height: 24px;\n    font-size: 1rem;\n  }\n  :host input:hover {\n    border-color: var(--color-midnight);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  :host input:focus:hover {\n    box-shadow: none;\n  }\n  :host input:active {\n    box-shadow: none;\n  }\n  :host .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  :host .kol-input:not(.button) label span {\n    margin-top: 0.125rem;\n  }\n  :host .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  :host .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    transition: 0.5s;\n  }\n  :host .kol-input input[type=checkbox]:before {\n    content: \"\";\n  }\n  :host .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-midnight);\n    border-color: var(--color-midnight);\n  }\n  :host .kol-input.default .checkbox-container {\n    justify-content: flex-start;\n  }\n  :host .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-midnight);\n    border-color: var(--color-midnight);\n  }\n  :host .kol-input.default .icon {\n    color: var(--color-white);\n    margin: -0.125rem 0 0 0.25rem;\n    /* visually align */\n  }\n  :host .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: calc(6 * var(--spacing));\n    min-width: calc(6 * var(--spacing));\n    width: calc(6 * var(--spacing));\n  }\n  .default .icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    margin-top: 1px;\n  }\n  .default.checked .icon::part(icon)::before {\n    content: \"check\";\n  }\n  .default.indeterminate .icon::part(icon)::before {\n    content: \"remove\";\n  }\n  :host .kol-input.switch input[type=checkbox] {\n    min-width: 3.5em;\n    width: 3.5em;\n    background-color: var(--color-grey);\n    border-width: 0;\n    height: 1.5em;\n    border-radius: 1.25em;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host .kol-input.switch input[type=checkbox]:before {\n    transition: 0.5;\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  :host .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-midnight);\n  }\n  :host .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(2em);\n    --tw-bg-opacity: 1;\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate {\n    --tw-bg-opacity: 1;\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(1em);\n  }\n  .switch .checkbox-input-element {\n    display: block;\n  }\n  .switch .icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: 2px;\n    color: #000;\n  }\n  .switch .icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .switch .icon::part(icon)::before {\n    content: \"add\";\n  }\n  .switch.checked .icon {\n    transform: translate(2em, -50%);\n  }\n  .switch.checked .icon::part(icon)::before {\n    content: \"check\";\n  }\n  .switch.indeterminate .icon {\n    transform: translate(1em, -50%);\n  }\n  .switch.indeterminate .icon::part(icon)::before {\n    content: \"remove\";\n  }\n  .kol-input.button {\n    row-gap: 0.5rem;\n    /* Outer, clickable, container for the checkbox */\n    /* Inner, visual, element for the checkbox */\n    /* Outer, clickable, container for the label */\n    /* Inner, visual, element for the label */\n    /* States */\n  }\n  .kol-input.button .checkbox-container {\n    align-items: center;\n    display: flex;\n    min-height: 44px;\n    position: relative;\n  }\n  .kol-input.button .icon {\n    background-color: var(--color-silver);\n    border-bottom-left-radius: var(--border-radius);\n    border-top-left-radius: var(--border-radius);\n    height: auto;\n    min-height: 32px;\n    min-width: 32px;\n    /* Stable position when paddings are changing */\n  }\n  .kol-input.button .icon::part(icon) {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n  .hide-label.kol-input.button .icon {\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n  }\n  .kol-input.button .input-label {\n    align-items: center;\n    display: flex;\n    min-height: 44px;\n    width: 100%;\n  }\n  .kol-input.button .input-label-span {\n    align-items: center;\n    background-color: var(--color-silver);\n    border-bottom-right-radius: var(--border-radius);\n    border-top-right-radius: var(--border-radius);\n    display: flex;\n    min-height: 32px;\n    padding-right: 12px;\n    width: 100%;\n  }\n  .kol-input.button.checked .icon, .kol-input.button.checked .input-label-span {\n    background-color: var(--color-ice);\n  }\n  .kol-input.button:not(.disabled):hover .icon, .kol-input.button:not(.disabled):hover .input-label-span {\n    background-color: var(--color-midnight);\n    color: var(--color-silver);\n  }\n  .kol-input.button:focus-within {\n    outline: none;\n  }\n  .kol-input.button:focus-within .icon,\n  .kol-input.button:focus-within .input-label-span {\n    min-height: 34px;\n    border: 3px solid var(--color-ocean);\n    background-clip: content-box;\n    padding: 2px;\n  }\n  .kol-input.button:focus-within .icon {\n    border-right: none;\n    padding-right: 0;\n  }\n  .kol-input.button:focus-within .input-label-span {\n    border-left: none;\n    padding-left: 0;\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputCheckboxCss$5 = css_248z$3q;
 
 var css_248z$3p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input[type=color] {\n    border: none;\n    min-height: 40px !important;\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:not([type=color]):read-only,\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputColorCss$5 = css_248z$3p;
 
 var css_248z$3o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputDateCss$5 = css_248z$3o;
 
 var css_248z$3n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputEmailCss$5 = css_248z$3n;
 
 var css_248z$3m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2px);\n  }\n  input {\n    border: none;\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputFileCss$5 = css_248z$3m;
 
 var css_248z$3l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputNumberCss$5 = css_248z$3l;
 
 var css_248z$3k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputPasswordCss$5 = css_248z$3k;
 
 var css_248z$3j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* INPUT */\n  .kol-input {\n    display: grid;\n    gap: 0.4em;\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-grey);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    /* padding: 10px 14px; */\n    line-height: 24px;\n    font-size: 16px;\n  }\n  input:hover {\n    border-color: var(--color-midnight);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-midnight);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: 0px;\n    margin: 0px;\n    padding: 0px;\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    position: relative;\n    min-height: 44px;\n    margin: 0;\n    gap: 0.5rem;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: 0.25em;\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(6 * var(--spacing));\n    min-width: calc(6 * var(--spacing));\n    width: calc(6 * var(--spacing));\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-midnight);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    border-color: var(--border-default);\n    background-color: var(--background-light-grey);\n  }\n  .kol-alert-wc.error {\n    order: 1;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n  }\n  fieldset .kol-input {\n    order: 3;\n  }\n  fieldset.error {\n    border-left: 3px solid var(--color-red);\n    color: var(--color-red);\n    font-weight: 700;\n    padding-left: 1em;\n  }\n  fieldset.error input:focus,\n  fieldset.error select:focus,\n  fieldset.error textarea:focus {\n    outline-color: var(--color-red) !important;\n  }\n  fieldset.error .kol-alert-wc.error {\n    margin-left: -0.25em;\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem 1rem;\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: 0.25em;\n  }\n  fieldset .input-slot {\n    gap: 0.5rem;\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputRadioCss$5 = css_248z$3j;
 
 var css_248z$3i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  .inputs-wrapper {\n    gap: 1em;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 1em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: 0.5em;\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: 0.5em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n}";
+var inputRangeCss$4 = css_248z$3i;
 
 var css_248z$3h = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var inputTextCss$5 = css_248z$3h;
 
 var css_248z$3g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-ocean);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: 2px;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .standalone a {\n    font-size: 1em;\n    line-height: 1.25em;\n    color: var(--color-midnight);\n    text-decoration: underline;\n  }\n  .standalone a:hover {\n    text-decoration-thickness: 3px;\n    text-decoration-color: var(--color-ocean);\n  }\n  .standalone a:visited {\n    color: var(--color-purple);\n  }\n  .standalone a:focus > .kol-span-wc {\n    outline-offset: -3px;\n    transition: outline 0.2s linear;\n  }\n  .standalone a .kol-span-wc {\n    border: none;\n    border-radius: 5px;\n  }\n  :is(a, button) {\n    font-size: 1.125em;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-midnight);\n    border-color: var(--color-midnight);\n    color: var(--color-white);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-midnight);\n    color: var(--color-midnight);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .success :is(a, button) > .kol-span-wc,\n  .success :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-green);\n    border-color: var(--color-green);\n    color: var(--color-white);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-white);\n    background-color: var(--color-white);\n    box-shadow: none;\n    color: var(--color-midnight);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .success :is(a, button):active > .kol-span-wc,\n  .success :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-ocean);\n    border-color: var(--color-ocean);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-white);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-crimson);\n    border-color: var(--color-crimson);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .success :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-white);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 8px;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** button with inline focus */\n  :is(a, button).focus-inline:focus > .kol-span-wc {\n    outline-offset: -2px;\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: block;\n  }\n}";
+var linkButtonCss$5 = css_248z$3g;
 
 var css_248z$3f = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-midnight);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    text-decoration-color: var(--color-ocean);\n  }\n  :is(a, button):focus {\n    outline: none;\n    text-decoration-thickness: unset;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: 5px;\n    outline: 3px solid var(--color-ocean);\n  }\n  :is(a, button):focus:hover {\n    text-decoration: none;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n}";
+var linkCss$5 = css_248z$3f;
 
 var css_248z$3e = "@layer kol-theme-component {\n  :host .overlay .modal {\n    max-height: calc(100% - 32px);\n  }\n}";
+var modalCss$2 = css_248z$3e;
 
 var css_248z$3d = "@layer kol-theme-component {\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  nav {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    width: 100%;\n  }\n  ul {\n    list-style: none;\n  }\n  .entry-item :is(a, .button) {\n    align-items: center;\n    background-color: var(--color-white);\n    border-left-color: transparent;\n    border-left-style: solid;\n    border-left-width: 0.5rem;\n    color: var(--color-midnight);\n    display: flex;\n    font-style: normal;\n    letter-spacing: 0.175px;\n    line-height: 1.5rem;\n    min-height: 44px;\n    min-width: 44px;\n    padding: 0.75rem 0.5rem 0.75rem 0.25rem;\n    place-items: center;\n    text-decoration: none;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    width: 100%;\n  }\n  .vertical .active .entry-item :is(a, .button) {\n    background-color: var(--color-ice);\n    border-left-color: var(--color-midnight);\n    color: var(--color-midnight);\n    font-weight: 700;\n  }\n  .entry-item :is(a, .button):hover,\n  .vertical .active .entry-item :is(a, .button):hover {\n    background-color: var(--color-ocean);\n    border-left-color: var(--color-ocean);\n    color: var(--color-white);\n    font-weight: 700;\n  }\n  .nav:not(.is-compact) .entry-item .icon {\n    display: none;\n  }\n  /** Compact mode */\n  .entry.hide-label :is(.kol-button-wc, .kol-link-wc, .kol-span-wc):first-child {\n    place-items: center;\n  }\n  .entry.hide-label :is(a, button) {\n    padding: 0;\n    border-left: 0;\n  }\n}";
+var navCss$5 = css_248z$3d;
 
 var css_248z$3c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .navigation-list {\n    gap: 0.25em;\n  }\n  .icon {\n    font-size: 18px;\n  }\n  .icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 400;\n  }\n  .first .icon::part(icon)::before {\n    content: \"keyboard_double_arrow_left\";\n  }\n  .previous .icon::part(icon)::before {\n    content: \"chevron_left\";\n  }\n  .next .icon::part(icon)::before {\n    content: \"chevron_right\";\n  }\n  .last .icon::part(icon)::before {\n    content: \"keyboard_double_arrow_right\";\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button:focus .button-inner {\n    outline-offset: 2px;\n    outline: 3px solid var(--color-ocean);\n    transition: outline-offset 0.2s linear;\n  }\n  .button:active:not(:disabled) .button-inner, .button:hover:not(:disabled) .button-inner {\n    background-color: var(--color-ocean);\n    border-color: var(--color-ocean);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-white);\n  }\n  .button:active .button-inner {\n    border-color: var(--color-white);\n    outline: none;\n  }\n  .button .button-inner {\n    background-color: var(--color-white);\n    border-radius: var(--a11y-min-size);\n    border: 2px solid var(--color-white);\n    color: var(--color-midnight);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .selected .button-inner {\n    background-color: var(--color-ice);\n    border-color: var(--color-ice);\n    font-weight: 700;\n  }\n}";
+var paginationCss$5 = css_248z$3c;
 
 var css_248z$3b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .bar > div {\n    flex-direction: column;\n    gap: 0.5rem !important;\n    width: 100px;\n  }\n  .bar > div text {\n    color: var(--color-black);\n    align-self: flex-end;\n  }\n  .bar svg {\n    height: 1rem;\n  }\n  .bar .background {\n    fill: var(--color-ice);\n    stroke: var(--color-ice);\n    stroke-width: 1px;\n  }\n  .bar .progress {\n    fill: var(--color-midnight);\n    stroke: var(--color-midnight);\n  }\n  .bar .border {\n    display: none;\n  }\n  .cycle {\n    overflow: visible;\n  }\n  .cycle .whitespace,\n  .cycle .border {\n    stroke: transparent;\n  }\n  .cycle .background {\n    stroke: var(--color-ice);\n    stroke-width: 1rem;\n  }\n  .cycle .progress {\n    stroke: var(--color-midnight);\n    stroke-width: 1rem;\n  }\n  .cycle text:first-of-type {\n    color: var(--color-grey);\n    line-height: 1.25rem;\n    alignment-baseline: after-edge;\n  }\n  .cycle text:last-of-type {\n    color: var(--color-black);\n    font-size: 1.75rem;\n    font-weight: 700;\n    line-height: 1.5rem;\n    alignment-baseline: central;\n  }\n}";
+var progressCss$5 = css_248z$3b;
 
 var css_248z$3a = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n  }\n  select {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input.icon-left .kol-icon:first-child {\n    margin-right: 0.5em;\n  }\n  .input.icon-right .kol-icon:last-child {\n    margin-left: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  select:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-smoke);\n    border-color: var(--color-granite);\n    color: var(--color-black);\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: 1px 0;\n    border-radius: 0.25em;\n    cursor: pointer;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  option:active:not(:disabled),\n  option:checked:not(:disabled),\n  option:focus:not(:disabled),\n  option:hover:not(:disabled) {\n    background: var(--color-ocean);\n    color: white;\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var selectCss$5 = css_248z$3a;
 
 var css_248z$39 = "@layer kol-theme-component {\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: 2px;\n    gap: 0.5rem;\n    line-height: 1rem;\n    padding: 8px 14px;\n    background-color: var(--color-ocean);\n    border-color: var(--color-ocean);\n    color: var(--color-white);\n    cursor: pointer;\n  }\n}";
+var skipNavCss$5 = css_248z$39;
 
 var css_248z$38 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-midnight);\n  }\n  .popover {\n    background: #fff;\n  }\n  .horizontal-line {\n    background-color: var(--color-midnight);\n    border-radius: 2px;\n    width: 1px;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .secondary-button :active > .kol-span-wc {\n    border-top-right-radius: var(--a11y-min-size);\n    border-bottom-right-radius: var(--a11y-min-size);\n  }\n  .secondary-button :focus .kol-span-wc {\n    border-top-right-radius: var(--a11y-min-size);\n    border-bottom-right-radius: var(--a11y-min-size);\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    outline-offset: 0;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-ocean);\n    outline-style: solid;\n    outline-width: 3px;\n    outline-offset: 2px;\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--a11y-min-size);\n    border-bottom-left-radius: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button) {\n    font-size: 1.125em;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-midnight);\n    border-color: var(--color-midnight);\n    color: var(--color-white);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-midnight);\n    color: var(--color-midnight);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .success :is(a, button) > .kol-span-wc,\n  .success :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-green);\n    border-color: var(--color-green);\n    color: var(--color-white);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-white);\n    background-color: var(--color-white);\n    box-shadow: none;\n    color: var(--color-midnight);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .success :is(a, button):active > .kol-span-wc,\n  .success :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-ocean);\n    border-color: var(--color-ocean);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-white);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-crimson);\n    border-color: var(--color-crimson);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .success :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-white);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 8px;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** button with inline focus */\n  :is(a, button).focus-inline:focus > .kol-span-wc {\n    outline-offset: -2px;\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: block;\n  }\n}";
+var splitButtonCss$5 = css_248z$38;
 
 var css_248z$37 = "@layer kol-theme-component {\n  .cycle {\n    padding: 0.125rem;\n  }\n  .cycle span {\n    background-color: #fc0;\n  }\n}";
+var spinCss$3 = css_248z$37;
 
 var css_248z$36 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .pagination {\n    align-items: center;\n    justify-content: start;\n    grid-template-columns: auto 1fr;\n  }\n  :host > div:last-child,\n  :host > div:last-child > div:last-child {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n    gap: 1em;\n  }\n  @media (min-width: 1024px) {\n    :host > div:last-child,\n    :host > div:last-child > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div:last-child .kol-pagination {\n      display: flex;\n      gap: 1rem;\n    }\n  }\n}";
+var tableStatefulCss$5 = css_248z$36;
 
 var css_248z$35 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host * {\n    hyphens: var(--kolibri-hyphens);\n    font-family: var(--kolibri-font-family);\n    line-height: var(--kolibri-line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-ocean);\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  caption {\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  tbody tr:last-child th,\n  tr:last-child td {\n    border-bottom-width: 0;\n  }\n  th {\n    padding: 0.75em 0;\n    font-weight: 700;\n    color: var(--color-black);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  th,\n  td {\n    border-bottom: 1px solid var(--color-granite);\n    height: 1.25rem;\n  }\n  tbody th {\n    text-align: left;\n  }\n  tbody th,\n  td {\n    padding: 1em 0;\n    vertical-align: top;\n  }\n  th .kol-button,\n  td .kol-button {\n    margin-top: -0.75rem;\n    margin-bottom: -0.75rem;\n  }\n  .table-sort-button .button {\n    font-weight: 700;\n  }\n}";
+var tableStatelessCss$5 = css_248z$35;
 
 var css_248z$34 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-button-group-wc {\n    display: inline-flex;\n    gap: 2rem;\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: 0.25rem;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    min-height: 44px;\n    min-width: 44px;\n    color: var(--color-grey);\n    padding: 0;\n  }\n  button:hover {\n    color: var(--color-midnight);\n  }\n  button.primary,\n  button.selected {\n    /* border-bottom: 0.025rem solid var(--color-midnight); */\n    color: var(--color-midnight);\n  }\n  button:not(.selected) .kol-span-wc > span {\n    padding-bottom: 0.25em;\n  }\n  button.selected .kol-span-wc > span {\n    border-bottom: 0.25em solid;\n  }\n  button .kol-span-wc > span {\n    gap: 0.5rem;\n  }\n  :host > div > div {\n    padding: 0.25em 0;\n  }\n  .close-button {\n    display: none;\n    font-size: 25%;\n    height: fit-content;\n    width: 0;\n  }\n  .close-button button {\n    width: 1rem;\n    position: relative;\n    height: 1rem;\n    left: -4.25em;\n    top: 0.25em;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0px 1em 0px 0px;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0px 1em;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0px 1em 0px 0px;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0px 1em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .kol-button-group-wc button {\n    border: none;\n  }\n}";
+var tabsCss$5 = css_248z$34;
 
 var css_248z$33 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-input {\n    gap: 0.25em;\n    display: grid;\n    grid-template-areas: \"error error\" \"label counter\" \"input input\" \"hint hint\";\n    grid-template-columns: 1fr 115px;\n  }\n  .kol-input .error {\n    order: 1;\n    grid-area: error;\n  }\n  .kol-input label {\n    order: 2;\n    grid-area: label;\n  }\n  .kol-input .counter {\n    order: 2;\n    grid-area: counter;\n    justify-self: end;\n  }\n  .kol-input .input {\n    order: 3;\n    grid-area: input;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.875em;\n    font-style: italic;\n    grid-area: hint;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-grey);\n  }\n  .input {\n    background-color: var(--color-white);\n    border-color: var(--color-grey);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5em;\n  }\n  .input > .kol-icon {\n    width: 1em;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1em;\n    padding-right: 1em;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5em;\n    padding-right: 0.5em;\n  }\n  .input > input:first-child {\n    padding-left: 0.375em;\n  }\n  .input > input:last-child {\n    padding-right: 0.375em;\n  }\n  .input:hover {\n    border-color: var(--color-midnight);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error .input {\n    border-color: var(--color-red);\n    border-width: 3px;\n  }\n  .kol-input.error:not(.hidden-error) {\n    border-left: 3px solid var(--color-red);\n    padding-left: 1em;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-red);\n    font-weight: 700;\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .input textarea ~ span {\n    position: absolute;\n    top: -1.5rem;\n    right: 0;\n    color: var(--color-grey);\n  }\n  .msg {\n    border-width: 0 !important;\n  }\n  .kol-alert-wc {\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: white;\n  }\n  .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--kolibri-spacing);\n  }\n  .msg {\n    background-color: transparent;\n  }\n  .msg > .heading {\n    place-items: flex-start;\n  }\n  .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: var(--spacing);\n  }\n  .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  .msg {\n    align-items: start;\n  }\n  .default {\n    border-color: var(--color-grey);\n  }\n  .default.msg .heading-icon {\n    color: var(--color-grey);\n  }\n  .error {\n    border-color: var(--color-red);\n  }\n  .error.msg .heading-icon {\n    color: var(--color-red);\n  }\n  .info {\n    border-color: var(--color-midnight);\n  }\n  .info.msg .heading-icon {\n    color: var(--color-midnight);\n  }\n  .success {\n    border-color: var(--color-green);\n  }\n  .success.msg .heading-icon {\n    color: var(--color-green);\n  }\n  .warning {\n    border-color: var(--color-orange);\n  }\n  .warning.msg .heading-icon {\n    color: var(--color-orange);\n  }\n  .heading-icon {\n    color: white;\n  }\n  .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  .msg > .heading > .heading-icon::part(icon) {\n    line-height: 1.375rem;\n  }\n  .msg > .heading > div > .kol-heading-wc {\n    line-height: 20px;\n    padding-top: 0.125rem;\n  }\n  .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-grey);\n  }\n  .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-red);\n  }\n  .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-midnight);\n  }\n  .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-green);\n  }\n  .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-orange);\n  }\n  /*.msg > .heading > div {display: grid;grid-template-columns: 1fr auto;}.msg > .heading > div > .content {grid-row: 2;grid-column: 1;}.msg > div > .close {display: flex;}*/\n  .msg.default .close .icon {\n    color: var(--color-grey);\n  }\n  .msg.error .close .icon {\n    color: var(--color-red);\n  }\n  .msg.info .close .icon {\n    color: var(--color-midnight);\n  }\n  .msg.success .close .icon {\n    color: var(--color-green);\n  }\n  .msg.warning .close .icon {\n    color: var(--color-orange);\n  }\n  .card {\n    border-width: 2px;\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  .card.hasCloser > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: white;\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  .card > .heading .kol-button-wc button:focus {\n    outline-color: var(--color-white);\n    outline-offset: -3px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline 0.1s linear;\n  }\n  .card > .heading .kol-button-wc button:hover {\n    background-color: rgba(32, 32, 32, 0.2);\n  }\n  .card > .heading .kol-button-wc button:active {\n    background-color: rgba(32, 32, 32, 0.4);\n  }\n  .card > .heading .kol-button-wc button:hover:focus {\n    background-color: rgba(32, 32, 32, 0.1);\n  }\n  .card > .content {\n    padding: 1rem;\n    max-height: 9.5rem;\n    overflow-y: auto;\n  }\n  .card.default > .heading {\n    background-color: var(--color-grey);\n    border-bottom: 2px solid var(--color-grey);\n  }\n  .card.error > .heading {\n    background-color: var(--color-red);\n    border-bottom: 2px solid var(--color-red);\n  }\n  .card.info > .heading {\n    background-color: var(--color-midnight);\n    border-bottom: 2px solid var(--color-midnight);\n  }\n  .card.success > .heading {\n    background-color: var(--color-green);\n    border-bottom: 2px solid var(--color-green);\n  }\n  .card.warning > .heading {\n    background-color: var(--color-orange);\n    border-bottom: 2px solid var(--color-orange);\n  }\n  :is(.error, .info, .success, .warning) .heading-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n    font-variation-settings: \"FILL\" 1;\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n  :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem !important;\n  }\n  .error .heading-icon::part(icon)::before {\n    content: \"error\";\n  }\n  .info .heading-icon::part(icon)::before {\n    content: \"info\";\n  }\n  .success .heading-icon::part(icon)::before {\n    content: \"check_circle\";\n  }\n  .warning .heading-icon::part(icon)::before {\n    content: \"warning\";\n  }\n  .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  .card.default .close {\n    background-color: var(--color-grey);\n  }\n  .card.error .close {\n    background-color: var(--color-red);\n  }\n  .card.info .close {\n    background-color: var(--color-midnight);\n  }\n  .card.success .close {\n    background-color: var(--color-green);\n  }\n  .card.warning .close {\n    background-color: var(--color-orange);\n  }\n  .close > button {\n    min-width: 44px;\n    color: var(--color-white);\n    min-height: 44px;\n    display: grid;\n    gap: 0.25em;\n    line-height: 1.5rem;\n    font-family: var(--font-family);\n    font-weight: 700;\n    cursor: pointer;\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: 2px;\n    font-size: 1rem;\n    align-items: center;\n    padding: 8px 14px;\n    justify-content: center;\n    font-style: normal;\n    text-align: center;\n    width: inherit;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n    background-color: rgba(0, 0, 0, 0);\n    border-color: rgba(0, 0, 0, 0);\n  }\n  .close > button {\n    padding: 8px;\n  }\n  .close > button .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1rem;\n  }\n  .close > button .kol-icon::part(icon) {\n    font-family: \"Material Symbols Rounded\";\n    font-weight: 900;\n  }\n  .close > button .kol-icon::part(icon)::before {\n    content: \"close\";\n  }\n  .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var textareaCss$5 = css_248z$33;
 
 var css_248z$32 = "@layer kol-theme-component {\n  :host {\n    top: 5rem;\n    right: 2rem;\n    width: 440px;\n    max-width: 100%;\n  }\n  .toast {\n    margin-top: 1rem;\n  }\n  .toast:first-child {\n    margin-top: 0;\n  }\n}";
+var toastContainerCss$5 = css_248z$32;
 
 const BMF = KoliBri.createTheme('bmf', {
-    GLOBAL: css_248z$3F,
-    'KOL-BUTTON': css_248z$3y,
-    'KOL-INPUT-TEXT': css_248z$3h,
-    'KOL-INPUT-PASSWORD': css_248z$3k,
-    'KOL-INPUT-NUMBER': css_248z$3l,
-    'KOL-INPUT-DATE': css_248z$3o,
-    'KOL-INPUT-EMAIL': css_248z$3n,
-    'KOL-INPUT-FILE': css_248z$3m,
-    'KOL-TEXTAREA': css_248z$33,
-    'KOL-ALERT': css_248z$3C,
-    'KOL-AVATAR': css_248z$3B,
-    'KOL-HEADING': css_248z$3t,
-    'KOL-BADGE': css_248z$3A,
-    'KOL-BUTTON-GROUP': css_248z$3x,
-    'KOL-INDENTED-TEXT': css_248z$3r,
-    'KOL-LINK': css_248z$3f,
-    'KOL-DETAILS': css_248z$3u,
-    'KOL-PROGRESS': css_248z$3b,
-    'KOL-SELECT': css_248z$3a,
-    'KOL-INPUT-COLOR': css_248z$3p,
-    'KOL-ACCORDION': css_248z$3D,
-    'KOL-TABLE-STATEFUL': css_248z$36,
-    'KOL-TABLE-STATELESS': css_248z$35,
-    'KOL-NAV': css_248z$3d,
-    'KOL-CARD': css_248z$3v,
-    'KOL-INPUT-CHECKBOX': css_248z$3q,
-    'KOL-INPUT-RADIO': css_248z$3j,
-    'KOL-TOAST-CONTAINER': css_248z$32,
-    'KOL-TABS': css_248z$34,
-    'KOL-PAGINATION': css_248z$3c,
-    'KOL-INPUT-RANGE': css_248z$3i,
-    'KOL-LINK-BUTTON': css_248z$3g,
-    'KOL-BUTTON-LINK': css_248z$3w,
-    'KOL-ABBR': css_248z$3E,
-    'KOL-BREADCRUMB': css_248z$3z,
-    'KOL-MODAL': css_248z$3e,
-    'KOL-ICON': css_248z$3s,
-    'KOL-SKIP-NAV': css_248z$39,
-    'KOL-SPLIT-BUTTON': css_248z$38,
-    'KOL-SPIN': css_248z$37,
+    GLOBAL: globalCss$4,
+    'KOL-BUTTON': buttonCss$5,
+    'KOL-INPUT-TEXT': inputTextCss$5,
+    'KOL-INPUT-PASSWORD': inputPasswordCss$5,
+    'KOL-INPUT-NUMBER': inputNumberCss$5,
+    'KOL-INPUT-DATE': inputDateCss$5,
+    'KOL-INPUT-EMAIL': inputEmailCss$5,
+    'KOL-INPUT-FILE': inputFileCss$5,
+    'KOL-TEXTAREA': textareaCss$5,
+    'KOL-ALERT': alertCss$5,
+    'KOL-AVATAR': avatarCss$4,
+    'KOL-HEADING': headingCss$5,
+    'KOL-BADGE': badgeCss$5,
+    'KOL-BUTTON-GROUP': buttonGroupCss$5,
+    'KOL-INDENTED-TEXT': indentedTextCss$5,
+    'KOL-LINK': linkCss$5,
+    'KOL-DETAILS': detailsCss$4,
+    'KOL-PROGRESS': progressCss$5,
+    'KOL-SELECT': selectCss$5,
+    'KOL-INPUT-COLOR': inputColorCss$5,
+    'KOL-ACCORDION': accordionCss$5,
+    'KOL-TABLE-STATEFUL': tableStatefulCss$5,
+    'KOL-TABLE-STATELESS': tableStatelessCss$5,
+    'KOL-NAV': navCss$5,
+    'KOL-CARD': cardCss$5,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss$5,
+    'KOL-INPUT-RADIO': inputRadioCss$5,
+    'KOL-TOAST-CONTAINER': toastContainerCss$5,
+    'KOL-TABS': tabsCss$5,
+    'KOL-PAGINATION': paginationCss$5,
+    'KOL-INPUT-RANGE': inputRangeCss$4,
+    'KOL-LINK-BUTTON': linkButtonCss$5,
+    'KOL-BUTTON-LINK': buttonLinkCss$5,
+    'KOL-ABBR': abbrCss$2,
+    'KOL-BREADCRUMB': breadcrumbCss$5,
+    'KOL-MODAL': modalCss$2,
+    'KOL-ICON': iconCss$3,
+    'KOL-SKIP-NAV': skipNavCss$5,
+    'KOL-SPLIT-BUTTON': splitButtonCss$5,
+    'KOL-SPIN': spinCss$3,
 });
 
 var css_248z$31 = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, 16px);\n    --spacing: var(--kolibri-spacing, 0.25rem);\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #c0003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-light);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: 0.5rem 0.75rem;\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.5rem;\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+var globalCss$3 = css_248z$31;
 
 var css_248z$30 = "@layer kol-theme-component {\n  abbr {\n    border-bottom: dashed var(--color-text) 1px;\n    text-decoration: none !important;\n  }\n}";
+var abbrCss$1 = css_248z$30;
 
 var css_248z$2$ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-span-wc > span {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n  }\n  :host > div > .kol-heading-wc button {\n    border-radius: var(--border-radius);\n    min-height: 2.2rem;\n    padding: 12px 8px;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc {\n    font-weight: 700;\n    font-size: 1.125rem;\n    line-height: 20px;\n    gap: 0.5rem;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  :host > div > .kol-heading-wc button .kol-icon {\n    color: var(--color-primary);\n    font-size: 1rem;\n  }\n  :host > div {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  :host > div div[class=header],\n  :host > div[class*=open] div[class=content] {\n    margin: 0;\n  }\n  :host > div div[class=content] {\n    padding-left: 2.25em;\n    padding-bottom: 12px;\n    padding-right: 8px;\n  }\n  button:focus {\n    outline: none;\n  }\n  :host > .accordion:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
+var accordionCss$4 = css_248z$2$;
 
 var css_248z$2_ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var alertCss$4 = css_248z$2_;
 
 var css_248z$2Z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var avatarCss$3 = css_248z$2Z;
 
 var css_248z$2Y = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n    font-size: inherit;\n  }\n  :host > span {\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  :host > span .kol-button-wc > button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: 0.2rem;\n  }\n  :host > span .kol-span-wc {\n    padding: 0.25rem 0.75rem;\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: 0.5rem;\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: 0.25rem;\n  }\n}";
+var badgeCss$4 = css_248z$2Y;
 
 var css_248z$2X = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: 0.75rem;\n    color: var(--color-subtle);\n  }\n  .kol-link::part(icon) {\n    font-size: 1.25rem;\n  }\n  ul li > :is(span, .kol-link) {\n    line-height: 1.25rem;\n  }\n  ul li:last-child > span {\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var breadcrumbCss$4 = css_248z$2X;
 
 var css_248z$2W = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 0.8rem;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonCss$4 = css_248z$2W;
 
 var css_248z$2V = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing);\n  }\n}";
+var buttonGroupCss$4 = css_248z$2V;
 
 var css_248z$2U = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonLinkCss$4 = css_248z$2U;
 
 var css_248z$2T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 0.25rem var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  :host .kol-heading-wc {\n    line-height: 1.75rem;\n  }\n  :host div.header {\n    padding: 1rem 1rem 0.5rem 1rem;\n  }\n  :host div.content {\n    padding: 0.5rem 1rem 1rem;\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: 0.5rem 1rem;\n  }\n}";
+var cardCss$4 = css_248z$2T;
 
 var css_248z$2S = "@layer kol-theme-component {\n  details > summary {\n    border-radius: var(--border-radius);\n    font-family: var(--font-family);\n  }\n  details .kol-indented-text-wc {\n    margin: 0.25rem 0 0 0.65rem;\n  }\n  .kol-icon {\n    font-size: 1.2rem;\n  }\n}";
+var detailsCss$3 = css_248z$2S;
 
 var css_248z$2R = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: 1.5rem;\n    line-height: 1.75rem;\n  }\n  .headline-h2 {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .headline-h3 {\n    font-size: 1.125rem;\n    line-height: 1.5rem;\n  }\n}";
+var headingCss$4 = css_248z$2R;
 
 var css_248z$2Q = "@layer kol-theme-component {\n  :host {\n    width: 1em;\n    height: 1em;\n  }\n  :host > i {\n    width: 1em;\n    height: 1em;\n  }\n}";
+var iconCss$2 = css_248z$2Q;
 
 var css_248z$2P = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: -2px 0px 0px var(--color-primary-variant);\n    padding: 0 0.5rem;\n    width: 100%;\n  }\n}";
+var indentedTextCss$4 = css_248z$2P;
 
 var css_248z$2O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :host .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    gap: 0.4rem;\n  }\n  :host .kol-input.default {\n    grid-template-columns: 1.5rem auto;\n  }\n  :host .kol-input.switch {\n    grid-template-columns: 3.5rem auto;\n  }\n  :host .kol-input.button {\n    gap: 0.4rem 1px;\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  :host .kol-input > div.input {\n    display: inherit;\n    min-height: var(--a11y-min-size);\n    order: 2;\n  }\n  :host .kol-input > div.input input {\n    margin: 0px;\n  }\n  :host .kol-input > label {\n    order: 3;\n  }\n  .disabled .input-label,\n  .disabled .checkbox-container {\n    cursor: not-allowed;\n  }\n  :host .kol-input > .kol-alert-wc.error {\n    order: 1;\n    padding-top: calc(var(--spacing) / 2);\n    grid-column: span 2/auto;\n  }\n  :host .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  :host .kol-input.error input:focus,\n  .kol-input.error select:focus,\n  .kol-input.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  :host .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  :host input {\n    cursor: pointer;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n    line-height: 24px;\n    font-size: 1rem;\n  }\n  :host input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  :host input:focus:hover {\n    box-shadow: none;\n  }\n  :host input:active {\n    box-shadow: none;\n  }\n  :host .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  :host .kol-input label span {\n    margin-top: 0.125rem;\n  }\n  :host .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  :host .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  :host .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  :host .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: 1.5rem;\n    min-width: 1.5rem;\n    width: 1.5rem;\n  }\n  :host .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.default .icon {\n    color: var(--color-light);\n    margin-left: 0.25rem;\n  }\n  :host .kol-input.switch input[type=checkbox] {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host .kol-input.switch input[type=checkbox]:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  :host .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(2em);\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(1em);\n  }\n  .switch .icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: 2px;\n  }\n  .switch.checked .icon {\n    transform: translate(2em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(1em, -50%);\n  }\n  .button .input {\n    border-top-width: 1px;\n    border-left-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-left-style: solid;\n    border-bottom-style: solid;\n  }\n  .button.hide-label .input {\n    border-right-width: 1px;\n    border-right-style: solid;\n  }\n  .button .input-label {\n    border-top-width: 1px;\n    border-right-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-right-style: solid;\n    border-bottom-style: solid;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: 1rem;\n  }\n  .button .input-label .input-label-span {\n    margin: auto 0;\n  }\n  .button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button .input,\n  .button .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .button.indeterminate .input,\n  .button.indeterminate .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .button.checked .input,\n  .button.checked .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .button:is(:active, :hover):not(.disabled) .input,\n  .button:is(:active, :hover):not(.disabled) .input-label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .button.disabled .input {\n    opacity: 0.5;\n    outline: none;\n  }\n}";
+var inputCheckboxCss$4 = css_248z$2O;
 
 var css_248z$2N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input[type=color] {\n    border: none;\n    min-height: 40px !important;\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputColorCss$4 = css_248z$2N;
 
 var css_248z$2M = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputDateCss$4 = css_248z$2M;
 
 var css_248z$2L = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputEmailCss$4 = css_248z$2L;
 
 var css_248z$2K = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2px);\n  }\n  input {\n    border: none;\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputFileCss$4 = css_248z$2K;
 
 var css_248z$2J = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputNumberCss$4 = css_248z$2J;
 
 var css_248z$2I = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputPasswordCss$4 = css_248z$2I;
 
 var css_248z$2H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: 20px;\n    gap: calc(var(--spacing) * 2);\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    line-height: 24px;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: 0px;\n    margin: 0px;\n    padding: 0px;\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: 0.5rem;\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: calc(var(--spacing) / 2);\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: 1.5rem;\n    min-width: 1.5rem;\n    width: 1.5rem;\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-alert-wc.error {\n    order: 1;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n  }\n  fieldset .kol-input {\n    order: 3;\n  }\n  fieldset.error {\n    border-left: 3px solid var(--color-danger);\n    color: var(--color-danger);\n    font-weight: 700;\n    padding-left: 1rem;\n  }\n  fieldset.error input:focus,\n  fieldset.error select:focus,\n  fieldset.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  fieldset.error .kol-alert-wc.error {\n    margin-left: -0.25em;\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: calc(var(--spacing) / 2);\n  }\n  fieldset .input-slot {\n    gap: var(--spacing);\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n}";
+var inputRadioCss$4 = css_248z$2H;
 
 var css_248z$2G = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .inputs-wrapper {\n    gap: 1rem;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: 0.5rem;\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: 0.5rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputRangeCss$3 = css_248z$2G;
 
 var css_248z$2F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputTextCss$4 = css_248z$2F;
 
 var css_248z$2E = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var kolibriCss$3 = css_248z$2E;
 
 var css_248z$2D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 0.8rem;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}";
+var linkButtonCss$4 = css_248z$2D;
 
 var css_248z$2C = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n}";
+var linkCss$4 = css_248z$2C;
 
 var css_248z$2B = "@layer kol-theme-component {\n  :host .overlay .modal {\n    max-height: calc(100% - 32px);\n  }\n}";
+var modalCss$1 = css_248z$2B;
 
 var css_248z$2A = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  nav {\n    background-color: var(--color-mute);\n  }\n  ul {\n    list-style: none;\n  }\n  .kol-link-wc {\n    display: flex;\n  }\n  .entry-item a,\n  .entry-item .button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: 0.5rem;\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .vertical .entry-item a,\n  .vertical .entry-item .button {\n    border-left: 2px solid transparent;\n    padding-left: 0.5rem;\n  }\n  .horizontal .entry-item a,\n  .horizontal .entry-item .button {\n    padding: 0 1rem;\n  }\n  .vertical .active .entry-item a,\n  .vertical .active .entry-item .button {\n    border-left-color: var(--color-primary);\n  }\n  .entry-item a:focus-visible,\n  .entry-item .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .entry-item a:hover {\n    text-decoration: underline;\n  }\n  .list .list {\n    padding-left: 1rem;\n  }\n  .active .entry-item a,\n  .active .entry-item .button {\n    font-weight: bold;\n  }\n  .active .list .entry-item a,\n  .active .list .entry-item .button {\n    font-weight: normal;\n    border-left-color: transparent;\n  }\n  .expand-button {\n    margin-left: 0.5rem;\n  }\n  .expand-button .button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .expand-button .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .expand-button .button-inner {\n    justify-content: center;\n  }\n}";
+var navCss$4 = css_248z$2A;
 
 var css_248z$2z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .button:focus .button-inner {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button:is(:active, :hover):not(:disabled) .button-inner {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .button:active .button-inner {\n    color: var(--color-light);\n    outline: none;\n  }\n  .selected .button-inner {\n    background-color: var(--color-mute-variant);\n    border-radius: var(--a11y-min-size);\n    border: 0;\n  }\n}";
+var paginationCss$4 = css_248z$2z;
 
 var css_248z$2y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0px;\n    overflow: hidden;\n    width: 0px;\n  }\n  :host svg line:first-child,\n  :host svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-mute-variant);\n  }\n  :host svg line:last-child,\n  :host svg circle:last-child {\n    fill: transparent;\n    stroke: var(--color-primary);\n  }\n  .cycle .progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
+var progressCss$4 = css_248z$2y;
 
 var css_248z$2x = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  select {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 2rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  select:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: 1px 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  option:active:not(:disabled),\n  option:checked:not(:disabled),\n  option:focus:not(:disabled),\n  option:hover:not(:disabled) {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var selectCss$4 = css_248z$2x;
 
 var css_248z$2w = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: 1rem;\n    padding: 8px 14px;\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
+var skipNavCss$4 = css_248z$2w;
 
 var css_248z$2v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .popover {\n    background: #fff;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: 1px;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: 0.8rem;\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var splitButtonCss$4 = css_248z$2v;
 
 var css_248z$2u = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    div.pagination .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
+var tableStatefulCss$4 = css_248z$2u;
 
 var css_248z$2t = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: 0.5rem;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .table {\n    padding: 0.5rem;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  :host table thead tr:last-child th,\n  :host table thead tr:last-child td {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: 0.5rem;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: 0.5rem;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+var tableStatelessCss$4 = css_248z$2t;
 
 var css_248z$2s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-button-group-wc {\n    display: inline-flex;\n    gap: 2rem;\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    font-style: normal;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  button:hover {\n    color: var(--color-primary);\n  }\n  button.primary,\n  button.selected {\n    color: var(--color-primary);\n  }\n  button:not(.selected) .kol-span-wc > span {\n    padding-bottom: 0.25em;\n  }\n  button.selected .kol-span-wc > span {\n    border-bottom: 0.25em solid;\n  }\n  button .kol-span-wc > span {\n    gap: 0.5rem;\n  }\n  .kol-icon {\n    font-size: 1rem;\n  }\n  :host > div > div {\n    padding: 0.25em 0;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0px 1rem 0px 0px;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0px 1rem;\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0px 1rem 0px 0px;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0px 1rem;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .kol-button-group-wc button {\n    border: none;\n  }\n}";
+var tabsCss$4 = css_248z$2s;
 
 var css_248z$2r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: 0.25rem;\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: 0.5rem 1rem;\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: 1.25rem;\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: 1.25rem;\n    line-height: 1.25rem;\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: 1rem;\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: 1.25rem;\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: 1.2rem;\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: 0.25rem;\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: 0.9rem;\n    font-style: italic;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 0.5rem;\n  }\n  .input > .kol-icon {\n    width: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: 0.5rem;\n    padding-right: 0.5rem;\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: 1rem;\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var textareaCss$4 = css_248z$2r;
 
 var css_248z$2q = "@layer kol-theme-component {\n  :host {\n    top: 1rem;\n    right: 1rem;\n    width: 440px;\n  }\n  .toast {\n    margin-top: 1rem;\n  }\n}";
+var toastContainerCss$4 = css_248z$2q;
 
 var css_248z$2p = "@layer kol-theme-component {\n  .tree-item ul {\n    list-style: disc inside;\n    border-left: 2px solid;\n    padding-left: 0.4rem;\n    margin-left: 2rem;\n    margin-top: 0.4rem;\n  }\n  .tree-item li {\n    margin: 0.4rem 0;\n  }\n  .tree-item .toggle-button {\n    align-items: center;\n    border: 1px solid var(--color-primary);\n    display: inline-flex;\n    height: 1.6rem;\n    justify-content: center;\n    margin-right: 0.4rem;\n    width: 1.6rem;\n  }\n  .tree-link {\n    display: inline-block;\n    padding: 0.4rem;\n  }\n  .tree-link.active {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n}";
+var treeItemCss$1 = css_248z$2p;
 
 var css_248z$2o = "@layer kol-theme-component {\n  .tree:focus-within {\n    outline: 1px solid var(--color-primary);\n  }\n}";
+var treeCss$1 = css_248z$2o;
 
 const BStW = KoliBri.createTheme('bstw', {
-    GLOBAL: css_248z$31,
-    'KOL-ABBR': css_248z$30,
-    'KOL-ACCORDION': css_248z$2$,
-    'KOL-ALERT': css_248z$2_,
-    'KOL-AVATAR': css_248z$2Z,
-    'KOL-BADGE': css_248z$2Y,
-    'KOL-BREADCRUMB': css_248z$2X,
-    'KOL-BUTTON': css_248z$2W,
-    'KOL-BUTTON-GROUP': css_248z$2V,
-    'KOL-BUTTON-LINK': css_248z$2U,
-    'KOL-CARD': css_248z$2T,
-    'KOL-DETAILS': css_248z$2S,
-    'KOL-HEADING': css_248z$2R,
-    'KOL-ICON': css_248z$2Q,
-    'KOL-INDENTED-TEXT': css_248z$2P,
-    'KOL-INPUT-CHECKBOX': css_248z$2O,
-    'KOL-INPUT-COLOR': css_248z$2N,
-    'KOL-INPUT-DATE': css_248z$2M,
-    'KOL-INPUT-EMAIL': css_248z$2L,
-    'KOL-INPUT-FILE': css_248z$2K,
-    'KOL-INPUT-NUMBER': css_248z$2J,
-    'KOL-INPUT-PASSWORD': css_248z$2I,
-    'KOL-INPUT-RADIO': css_248z$2H,
-    'KOL-INPUT-RANGE': css_248z$2G,
-    'KOL-INPUT-TEXT': css_248z$2F,
-    'KOL-KOLIBRI': css_248z$2E,
-    'KOL-LINK': css_248z$2C,
-    'KOL-LINK-BUTTON': css_248z$2D,
-    'KOL-MODAL': css_248z$2B,
-    'KOL-NAV': css_248z$2A,
-    'KOL-PAGINATION': css_248z$2z,
-    'KOL-PROGRESS': css_248z$2y,
-    'KOL-SELECT': css_248z$2x,
-    'KOL-SKIP-NAV': css_248z$2w,
-    'KOL-SPLIT-BUTTON': css_248z$2v,
-    'KOL-TABLE-STATEFUL': css_248z$2u,
-    'KOL-TABLE-STATELESS': css_248z$2t,
-    'KOL-TABS': css_248z$2s,
-    'KOL-TEXTAREA': css_248z$2r,
-    'KOL-TOAST-CONTAINER': css_248z$2q,
-    'KOL-TREE': css_248z$2o,
-    'KOL-TREE-ITEM': css_248z$2p,
+    GLOBAL: globalCss$3,
+    'KOL-ABBR': abbrCss$1,
+    'KOL-ACCORDION': accordionCss$4,
+    'KOL-ALERT': alertCss$4,
+    'KOL-AVATAR': avatarCss$3,
+    'KOL-BADGE': badgeCss$4,
+    'KOL-BREADCRUMB': breadcrumbCss$4,
+    'KOL-BUTTON': buttonCss$4,
+    'KOL-BUTTON-GROUP': buttonGroupCss$4,
+    'KOL-BUTTON-LINK': buttonLinkCss$4,
+    'KOL-CARD': cardCss$4,
+    'KOL-DETAILS': detailsCss$3,
+    'KOL-HEADING': headingCss$4,
+    'KOL-ICON': iconCss$2,
+    'KOL-INDENTED-TEXT': indentedTextCss$4,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss$4,
+    'KOL-INPUT-COLOR': inputColorCss$4,
+    'KOL-INPUT-DATE': inputDateCss$4,
+    'KOL-INPUT-EMAIL': inputEmailCss$4,
+    'KOL-INPUT-FILE': inputFileCss$4,
+    'KOL-INPUT-NUMBER': inputNumberCss$4,
+    'KOL-INPUT-PASSWORD': inputPasswordCss$4,
+    'KOL-INPUT-RADIO': inputRadioCss$4,
+    'KOL-INPUT-RANGE': inputRangeCss$3,
+    'KOL-INPUT-TEXT': inputTextCss$4,
+    'KOL-KOLIBRI': kolibriCss$3,
+    'KOL-LINK': linkCss$4,
+    'KOL-LINK-BUTTON': linkButtonCss$4,
+    'KOL-MODAL': modalCss$1,
+    'KOL-NAV': navCss$4,
+    'KOL-PAGINATION': paginationCss$4,
+    'KOL-PROGRESS': progressCss$4,
+    'KOL-SELECT': selectCss$4,
+    'KOL-SKIP-NAV': skipNavCss$4,
+    'KOL-SPLIT-BUTTON': splitButtonCss$4,
+    'KOL-TABLE-STATEFUL': tableStatefulCss$4,
+    'KOL-TABLE-STATELESS': tableStatelessCss$4,
+    'KOL-TABS': tabsCss$4,
+    'KOL-TEXTAREA': textareaCss$4,
+    'KOL-TOAST-CONTAINER': toastContainerCss$4,
+    'KOL-TREE': treeCss$1,
+    'KOL-TREE-ITEM': treeItemCss$1,
 });
 
 var css_248z$2n = "@layer kol-theme-global {\n  :host {\n    --border-radius: var(--kolibri-border-radius, 5px);\n    --font-family: var(--kolibri-font-family, BundesSans Web, Calibri, Verdana, Arial, Helvetica, sans-serif);\n    --font-size: var(--kolibri-font-size, 16px);\n    --spacing: var(--kolibri-spacing, calc(4rem / var(--kolibri-root-font-size, 16)));\n    --border-width: var(--kolibri-border-width, 1px);\n    --color-primary: var(--kolibri-color-primary, #004b76);\n    --color-primary-variant: var(--kolibri-color-primary-variant, #0077b6);\n    --color-danger: var(--kolibri-color-danger, #c0003c);\n    --color-warning: var(--kolibri-color-warning, #c44931);\n    --color-success: var(--kolibri-color-success, #005c45);\n    --color-subtle: var(--kolibri-color-subtle, #576164);\n    --color-light: var(--kolibri-color-light, #ffffff);\n    --color-text: var(--kolibri-color-text, #202020);\n    --color-mute: var(--kolibri-color-mute, #f2f3f4);\n    --color-mute-variant: var(--kolibri-color-mute-variant, #bec5c9);\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  .kol-input:not(.checkbox, .radio) .input:focus-within,\n  .kol-input:is(.checkbox, .radio) input:focus,\n  summary:focus {\n    cursor: pointer;\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-heading-wc {\n    font-weight: 700;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    border: var(--border-width) solid var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    border: var(--border-width) solid var(--color-subtle);\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: var(--color-light);\n  }\n  .kol-tooltip-wc .tooltip-content {\n    border-radius: var(--border-radius);\n    line-height: 1.5;\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  @keyframes spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n}";
+var globalCss$2 = css_248z$2n;
 
 var css_248z$2m = "@layer kol-theme-component {\n  abbr {\n    border-bottom: dashed var(--color-text) 1px;\n    text-decoration: none !important;\n  }\n}";
+var abbrCss = css_248z$2m;
 
 var css_248z$2l = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-span-wc > span {\n    display: flex;\n    place-items: baseline center;\n    text-align: left;\n  }\n  :host > div > .kol-heading-wc button {\n    border-radius: var(--border-radius);\n    min-height: calc(35.2rem / var(--kolibri-root-font-size, 16));\n    padding: 12px 8px;\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc {\n    font-weight: 700;\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: 20px;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > .kol-heading-wc button .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  :host > div > .kol-heading-wc button .kol-icon {\n    color: var(--color-primary);\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    width: 100%;\n    height: 100%;\n    display: grid;\n  }\n  :host > div div[class=header],\n  :host > div[class*=open] div[class=content] {\n    margin: 0;\n  }\n  :host > div div[class=content] {\n    padding-left: 2.25em;\n    padding-bottom: 12px;\n    padding-right: 8px;\n  }\n  button:focus {\n    outline: none;\n  }\n  :host > .accordion:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n    cursor: pointer;\n  }\n}";
+var accordionCss$3 = css_248z$2l;
 
 var css_248z$2k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n}";
+var alertCss$3 = css_248z$2k;
 
 var css_248z$2j = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var avatarCss$2 = css_248z$2j;
 
 var css_248z$2i = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: var(--font-family);\n    font-size: inherit;\n  }\n  :host > span {\n    border-radius: var(--border-radius);\n    display: inline-flex;\n    font-style: normal;\n  }\n  :host > span.smart-button {\n    align-items: center;\n  }\n  :host > span .kol-button-wc:hover > button {\n    background-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  :host > span .kol-button-wc > button {\n    color: inherit;\n    border-top-right-radius: var(--border-radius);\n    border-bottom-right-radius: var(--border-radius);\n    padding: calc(3.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span .kol-span-wc {\n    padding: calc(4rem / var(--kolibri-root-font-size, 16)) calc(12rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var badgeCss$3 = css_248z$2i;
 
 var css_248z$2h = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  li:has(:is(.kol-icon + .kol-link, .kol-icon + span)) .kol-icon {\n    font-size: calc(12rem / var(--kolibri-root-font-size, 16));\n    color: var(--color-subtle);\n  }\n  .kol-link::part(icon) {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li > :is(span, .kol-link) {\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  ul li:last-child > span {\n    color: var(--color-subtle);\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var breadcrumbCss$3 = css_248z$2h;
 
 var css_248z$2g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonCss$3 = css_248z$2g;
 
 var css_248z$2f = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing);\n  }\n}";
+var buttonGroupCss$3 = css_248z$2f;
 
 var css_248z$2e = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonLinkCss$3 = css_248z$2e;
 
 var css_248z$2d = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  /* https://www.figma.com/file/56JbmrssCRpjpfxoAFeHqT/Design-System-EPLF-(in-progress)?node-id=8225%3A5945 */\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: var(--color-light);\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(4rem / var(--kolibri-root-font-size, 16)) var(--color-subtle);\n    border-radius: var(--border-radius);\n  }\n  :host .kol-heading-wc {\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.header {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host div.content {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var cardCss$3 = css_248z$2d;
 
 var css_248z$2c = "@layer kol-theme-component {\n  details > summary {\n    border-radius: var(--border-radius);\n    font-family: var(--font-family);\n  }\n  details .kol-indented-text-wc {\n    margin: calc(4rem / var(--kolibri-root-font-size, 16)) 0 0 calc(10.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var detailsCss$2 = css_248z$2c;
 
 var css_248z$2b = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    color: inherit;\n    font-style: normal;\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3 {\n    font-weight: 700;\n  }\n  .headline-h1 {\n    font-size: calc(24rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  .headline-h2 {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(28rem / var(--kolibri-root-font-size, 16));\n  }\n  .headline-h3 {\n    font-size: calc(18rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(24rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var headingCss$3 = css_248z$2b;
 
 var css_248z$2a = "@layer kol-theme-component {\n  :host {\n    width: 1em;\n    height: 1em;\n  }\n  :host > i {\n    width: 1em;\n    height: 1em;\n  }\n}";
+var iconCss$1 = css_248z$2a;
 
 var css_248z$29 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-light);\n    border-left: none;\n    box-shadow: -2px 0px 0px var(--color-primary-variant);\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n}";
+var indentedTextCss$3 = css_248z$29;
 
 var css_248z$28 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  :host .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n    min-height: var(--a11y-min-size);\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.default {\n    grid-template-columns: calc(24rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  :host .kol-input.switch {\n    grid-template-columns: calc(56rem / var(--kolibri-root-font-size, 16)) auto;\n  }\n  :host .kol-input.button {\n    gap: calc(6.4rem / var(--kolibri-root-font-size, 16)) 1px;\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  :host .kol-input > div.input {\n    display: inherit;\n    min-height: var(--a11y-min-size);\n    order: 2;\n  }\n  :host .kol-input > div.input input {\n    margin: 0px;\n  }\n  :host .kol-input > label {\n    order: 3;\n  }\n  .disabled .input-label,\n  .disabled .checkbox-container {\n    cursor: not-allowed;\n  }\n  :host .kol-input > .kol-alert-wc.error {\n    order: 1;\n    padding-top: calc(var(--spacing) / 2);\n    grid-column: span 2/auto;\n  }\n  :host .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.error input:focus,\n  .kol-input.error select:focus,\n  .kol-input.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  :host .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  :host input {\n    cursor: pointer;\n    order: 1;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: var(--border-radius);\n    line-height: 24px;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  :host input:focus:hover {\n    box-shadow: none;\n  }\n  :host input:active {\n    box-shadow: none;\n  }\n  :host .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  /* CHECKBOX */\n  :host .kol-input label span {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  :host .kol-input input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  :host .kol-input input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n  }\n  :host .kol-input.default input[type=checkbox] {\n    border-radius: var(--border-radius);\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.default input[type=checkbox]:indeterminate {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.default .icon {\n    color: var(--color-light);\n    margin-left: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .kol-input.switch input[type=checkbox] {\n    background-color: var(--color-subtle);\n    border-radius: 1.25em;\n    border-width: 0;\n    display: block;\n    height: 1.5em;\n    min-width: 3.5em;\n    position: relative;\n    width: 3.5em;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  :host .kol-input.switch input[type=checkbox]:before {\n    width: 1.25em;\n    height: 1.25em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    border-radius: 1.25em;\n    background-color: white;\n    position: absolute;\n  }\n  :host .kol-input.switch input[type=checkbox]:checked {\n    background-color: var(--color-primary);\n  }\n  :host .kol-input.switch input[type=checkbox]:checked:before {\n    transform: translateX(2em);\n  }\n  :host .kol-input.switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(1em);\n  }\n  .switch .icon {\n    width: 1.25em;\n    height: 1.25em;\n    left: 2px;\n  }\n  .switch.checked .icon {\n    transform: translate(2em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(1em, -50%);\n  }\n  .button .input {\n    border-top-width: 1px;\n    border-left-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-left-style: solid;\n    border-bottom-style: solid;\n  }\n  .button.hide-label .input {\n    border-right-width: 1px;\n    border-right-style: solid;\n  }\n  .button .input-label {\n    border-top-width: 1px;\n    border-right-width: 1px;\n    border-bottom-width: 1px;\n    border-top-style: solid;\n    border-right-style: solid;\n    border-bottom-style: solid;\n    justify-self: stretch;\n    align-self: stretch;\n    display: flex;\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .button .input-label .input-label-span {\n    margin: auto auto;\n    font-weight: 700;\n  }\n  .button:focus-within {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button .input,\n  .button .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-light);\n    color: var(--color-primary);\n  }\n  .button.indeterminate .input,\n  .button.indeterminate .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-mute);\n    color: var(--color-primary);\n  }\n  .button.checked .input,\n  .button.checked .input-label {\n    border-color: var(--color-primary);\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .button:is(:active, :hover):not(.disabled) .input,\n  .button:is(:active, :hover):not(.disabled) .input-label {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .button.disabled .input {\n    opacity: 0.5;\n    outline: none;\n  }\n}";
+var inputCheckboxCss$3 = css_248z$28;
 
 var css_248z$27 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input[type=color] {\n    border: none;\n    min-height: 40px !important;\n  }\n  input[type=color] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputColorCss$3 = css_248z$27;
 
 var css_248z$26 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputDateCss$3 = css_248z$26;
 
 var css_248z$25 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputEmailCss$3 = css_248z$25;
 
 var css_248z$24 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  .kol-input .input input[type=file] {\n    padding-top: calc(0.5em + 2px);\n  }\n  input {\n    border: none;\n  }\n  input[type=file] {\n    background-color: transparent;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputFileCss$3 = css_248z$24;
 
 var css_248z$23 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputNumberCss$3 = css_248z$23;
 
 var css_248z$22 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputPasswordCss$3 = css_248z$22;
 
 var css_248z$21 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  label {\n    cursor: pointer;\n    display: grid;\n    line-height: 20px;\n    gap: calc(var(--spacing) * 2);\n    width: 100%;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    border-color: var(--color-subtle);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    line-height: 24px;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n  }\n  input:focus:hover {\n    box-shadow: none;\n  }\n  input:hover {\n    border-color: var(--color-primary);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .required legend > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  /* RADIO */\n  fieldset {\n    border: 0px;\n    margin: 0px;\n    padding: 0px;\n    display: grid;\n    gap: 0.25em;\n  }\n  .radio-input-wrapper {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    min-height: var(--a11y-min-size);\n    position: relative;\n  }\n  .radio-input-wrapper label {\n    cursor: pointer;\n    display: flex;\n    padding-left: calc(var(--spacing) / 2);\n    width: 100%;\n  }\n  .radio-input-wrapper label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    min-width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n    width: calc(6 * 4rem / var(--kolibri-root-font-size, 16));\n  }\n  .radio-input-wrapper input[type=radio]:before {\n    content: \"\";\n    cursor: pointer;\n    border-radius: 100%;\n    display: block;\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    background-color: var(--color-primary);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    cursor: not-allowed;\n    background-color: var(--color-mute-variant);\n  }\n  .kol-alert-wc.error {\n    order: 1;\n  }\n  fieldset legend {\n    order: 2;\n    display: contents;\n  }\n  fieldset .kol-input {\n    order: 3;\n  }\n  fieldset.error {\n    border-left: 3px solid var(--color-danger);\n    color: var(--color-danger);\n    font-weight: 700;\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  fieldset.error input:focus,\n  fieldset.error select:focus,\n  fieldset.error textarea:focus {\n    outline-color: var(--color-danger) !important;\n  }\n  fieldset.error .kol-alert-wc.error {\n    margin-left: -0.25em;\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  fieldset.horizontal {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--spacing) calc(var(--spacing) * 2);\n  }\n  fieldset.horizontal legend {\n    display: inline-block;\n    margin-bottom: calc(var(--spacing) / 2);\n  }\n  fieldset .input-slot {\n    gap: var(--spacing);\n  }\n  .radio-input-wrapper label {\n    padding-left: 0;\n  }\n}";
+var inputRadioCss$3 = css_248z$21;
 
 var css_248z$20 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .inputs-wrapper {\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-left > .kol-icon:first-child {\n    margin-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input.icon-right > .kol-icon:last-child {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputRangeCss$2 = css_248z$20;
 
 var css_248z$1$ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  input {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  input:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var inputTextCss$3 = css_248z$1$;
 
 var css_248z$1_ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var kolibriCss$2 = css_248z$1_;
 
 var css_248z$1Z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    transition: outline-offset 0.2s linear;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    outline-width: calc(var(--border-width) * 2);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0px 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n}";
+var linkButtonCss$3 = css_248z$1Z;
 
 var css_248z$1Y = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: var(--border-width) solid;\n  }\n  a:hover:not([aria-disabled]),\n  button:hover:not([disabled]) {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n    line-height: 1em;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n}";
+var linkCss$3 = css_248z$1Y;
 
 var css_248z$1X = "@layer kol-theme-component {\n  :host .overlay .modal {\n    max-height: calc(100% - 32px);\n  }\n}";
+var modalCss = css_248z$1X;
 
 var css_248z$1W = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  nav {\n    background-color: var(--color-mute);\n  }\n  ul {\n    list-style: none;\n  }\n  .kol-link-wc {\n    display: flex;\n  }\n  .entry-item a,\n  .entry-item .button {\n    align-items: center;\n    color: var(--color-primary);\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    min-height: var(--a11y-min-size);\n    text-decoration: none;\n  }\n  .vertical .entry-item a,\n  .vertical .entry-item .button {\n    border-left: 2px solid transparent;\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .horizontal .entry-item a,\n  .horizontal .entry-item .button {\n    padding: 0 calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .vertical .active .entry-item a,\n  .vertical .active .entry-item .button {\n    border-left-color: var(--color-primary);\n  }\n  .entry-item a:focus-visible,\n  .entry-item .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .entry-item a:hover {\n    text-decoration: underline;\n  }\n  .list .list {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .active .entry-item a,\n  .active .entry-item .button {\n    font-weight: bold;\n  }\n  .active .list .entry-item a,\n  .active .list .entry-item .button {\n    font-weight: normal;\n    border-left-color: transparent;\n  }\n  .expand-button {\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .expand-button .button:hover {\n    background-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .expand-button .button:focus-visible {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .expand-button .button-inner {\n    justify-content: center;\n  }\n}";
+var navCss$3 = css_248z$1W;
 
 var css_248z$1V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    background-color: var(--color-light);\n    border-radius: var(--border-radius);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n    font-weight: 700;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .button:focus .button-inner {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .button:is(:active, :hover):not(:disabled) .button-inner {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .button:active .button-inner {\n    color: var(--color-light);\n    outline: none;\n  }\n  .selected .button-inner {\n    background-color: var(--color-mute-variant);\n    border-radius: var(--a11y-min-size);\n    border: 0;\n  }\n}";
+var paginationCss$3 = css_248z$1V;
 
 var css_248z$1U = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0px;\n    overflow: hidden;\n    width: 0px;\n  }\n  :host svg line:first-child,\n  :host svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-mute-variant);\n  }\n  :host svg line:last-child,\n  :host svg circle:last-child {\n    fill: transparent;\n    stroke: var(--color-primary);\n  }\n  .cycle .progress {\n    stroke: var(--color-primary-variant);\n  }\n}";
+var progressCss$3 = css_248z$1U;
 
 var css_248z$1T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  select {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(32rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  select:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n  }\n  select[multiple] {\n    overflow: auto;\n  }\n  select option {\n    margin: 1px 0;\n    border-radius: var(--border-radius);\n    cursor: pointer;\n  }\n  select option:disabled {\n    cursor: not-allowed;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  option:active:not(:disabled),\n  option:checked:not(:disabled),\n  option:focus:not(:disabled),\n  option:hover:not(:disabled) {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var selectCss$3 = css_248z$1T;
 
 var css_248z$1S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: var(--a11y-min-size);\n    border-style: solid;\n    border-width: var(--border-width);\n    gap: calc(var(--spacing) * 2);\n    line-height: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding: 8px 14px;\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    color: var(--color-light);\n    cursor: pointer;\n  }\n}";
+var skipNavCss$3 = css_248z$1S;
 
 var css_248z$1R = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-primary);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  .popover {\n    background: #fff;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .horizontal-line {\n    background-color: var(--color-primary);\n    border-radius: 2px;\n    width: 1px;\n  }\n  :is(a, button) > .kol-span-wc {\n    font-weight: 700;\n    border-top-left-radius: var(--border-radius);\n    border-bottom-left-radius: var(--border-radius);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 8px 14px;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline-offset: 2px;\n    outline: var(--color-primary-variant) solid 3px;\n    transition: 200ms outline-offset linear;\n  }\n  .primary :is(a, button) > .kol-span-wc,\n  .primary :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-primary);\n    border-color: var(--color-primary);\n    color: var(--color-light);\n  }\n  .secondary :is(a, button) > .kol-span-wc,\n  .secondary :is(a, button):disabled:hover > .kol-span-wc,\n  .normal :is(a, button) > .kol-span-wc,\n  .normal :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-light);\n    border-color: var(--color-primary);\n    color: var(--color-primary);\n  }\n  .danger :is(a, button) > .kol-span-wc,\n  .danger :is(a, button):disabled:hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n    color: var(--color-light);\n  }\n  .ghost :is(a, button) > .kol-span-wc,\n  .ghost :is(a, button):disabled:hover > .kol-span-wc {\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n    box-shadow: none;\n    color: var(--color-primary);\n  }\n  /*-----------*/\n  .primary :is(a, button):active > .kol-span-wc,\n  .primary :is(a, button):hover > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):hover > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):hover > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  .danger :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):hover > .kol-span-wc {\n    background-color: var(--color-danger);\n    border-color: var(--color-danger);\n  }\n  :is(a, button):disabled:hover > .kol-span-wc,\n  :is(a, button):focus:hover > .kol-span-wc {\n    box-shadow: none;\n  }\n  .primary :is(a, button):active > .kol-span-wc,\n  .secondary :is(a, button):active > .kol-span-wc,\n  .normal :is(a, button):active > .kol-span-wc,\n  .danger :is(a, button):active > .kol-span-wc,\n  .ghost :is(a, button):active > .kol-span-wc {\n    border-color: var(--color-light);\n    box-shadow: none;\n    outline: none;\n  }\n  :is(a, button).hide-label > .kol-span-wc {\n    padding: calc(12.8rem / var(--kolibri-root-font-size, 16));\n    width: unset;\n  }\n  :is(a, button).hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  :is(a, button).loading > .kol-span-wc .kol-icon {\n    animation: spin 5s infinite linear;\n  }\n  /** small ghost button */\n  .ghost :is(a, button).small > .kol-span-wc {\n    border: none;\n    background-color: transparent;\n    box-shadow: none;\n  }\n  .ghost :is(a, button).small > .kol-span-wc > span {\n    border-radius: 1.5em;\n    border-style: solid;\n    border-width: var(--border-width);\n    border-color: var(--color-light);\n    background-color: var(--color-light);\n  }\n  .ghost :is(a, button).small:active > .kol-span-wc > span,\n  .ghost :is(a, button).small:hover > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:active > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent:hover > .kol-span-wc > span {\n    background-color: var(--color-primary-variant);\n    border-color: var(--color-primary-variant);\n    box-shadow: 0 2px 8px 2px rgba(8, 35, 48, 0.24);\n    color: var(--color-light);\n  }\n  /** :is(a,button) with transparent background */\n  :is(a, button).transparent > .kol-span-wc > span,\n  .ghost :is(a, button).small.transparent > .kol-span-wc > span,\n  :is(a, button).transparent > .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var splitButtonCss$3 = css_248z$1R;
 
 var css_248z$1Q = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  @media (min-width: 1024px) {\n    div.pagination .kol-pagination {\n      display: flex;\n      align-items: center;\n    }\n  }\n}";
+var tableStatefulCss$3 = css_248z$1Q;
 
 var css_248z$1P = "@layer kol-theme-component {\n  :host * {\n    hyphens: var(--hyphens);\n    font-family: var(--font-family);\n    line-height: var(--line-height);\n    word-break: break-word;\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-primary);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  .table {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-primary-variant);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  :host table thead tr:last-child th,\n  :host table thead tr:last-child td {\n    border-width: 0;\n    border-bottom-width: calc(var(--border-width) * 2);\n    border-style: solid;\n    border-color: var(--color-primary-variant);\n  }\n  th {\n    background-color: var(--color-light);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tr:nth-child(even) {\n    background-color: var(--color-mute);\n  }\n  th,\n  td {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+var tableStatelessCss$3 = css_248z$1P;
 
 var css_248z$1O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .kol-button-group-wc {\n    display: inline-flex;\n    gap: calc(32rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  button {\n    box-sizing: border-box;\n    background-color: transparent;\n    border: 0;\n    border-radius: var(--border-radius);\n    font-style: normal;\n    font-weight: 700;\n    font-size: 18px;\n    line-height: 22px;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    color: var(--color-subtle);\n    padding: 0;\n  }\n  button:hover {\n    color: var(--color-primary);\n  }\n  button.primary,\n  button.selected {\n    color: var(--color-primary);\n  }\n  button:not(.selected) .kol-span-wc > span {\n    padding-bottom: 0.25em;\n  }\n  button.selected .kol-span-wc > span {\n    border-bottom: 0.25em solid;\n  }\n  button .kol-span-wc > span {\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-icon {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div > div {\n    padding: 0.25em 0;\n  }\n  div[role=tabpanel] {\n    height: 100%;\n  }\n  div.grid {\n    height: 100%;\n  }\n  :host > .tabs-align-right {\n    display: grid;\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-right .kol-button-group-wc {\n    display: grid;\n    order: 2;\n  }\n  :host > .tabs-align-left {\n    display: grid;\n    grid-template-columns: auto 1fr;\n  }\n  :host > .tabs-align-left .kol-button-group-wc {\n    display: grid;\n    order: 0;\n  }\n  :host > .tabs-align-bottom {\n    display: grid;\n    grid-template-rows: 1fr auto;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc {\n    order: 2;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div:first-child {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16)) 0px 0px;\n  }\n  :host > .tabs-align-bottom > .kol-button-group-wc > div > div {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > .tabs-align-top {\n    display: grid;\n    grid-template-rows: auto 1fr;\n  }\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-top .kol-button-group-wc > div {\n    display: flex;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div:first-child {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16)) 0px 0px;\n  }\n  :host > .tabs-align-top > .kol-button-group-wc > div > div {\n    margin: 0px calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    gap: inherit;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  :host .kol-button-group-wc button {\n    border: none;\n  }\n}";
+var tabsCss$3 = css_248z$1O;
 
 var css_248z$1N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host .msg {\n    border-width: 0 !important;\n  }\n  :host .kol-alert-wc {\n    border-width: var(--border-width);\n    border-style: solid;\n    border-radius: var(--border-radius);\n    display: flex;\n    width: 100%;\n    overflow: unset;\n    border-color: transparent;\n    background-color: var(--color-light);\n  }\n  :host .kol-alert-wc > .heading {\n    display: flex;\n    gap: 0.5em;\n    place-items: center;\n  }\n  :host .kol-alert-wc > .heading > div {\n    display: grid;\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .msg > .heading > .kol-icon {\n    place-self: baseline;\n  }\n  :host .kol-alert-wc > .heading > .kol-button-wc.close {\n    place-self: center;\n  }\n  :host .msg {\n    align-items: start;\n  }\n  :host .default {\n    border-color: var(--color-subtle);\n  }\n  :host .default.msg .heading-icon {\n    color: var(--color-subtle);\n  }\n  :host .error {\n    border-color: var(--color-danger);\n  }\n  :host .error.msg .heading-icon {\n    color: var(--color-danger);\n  }\n  :host .info {\n    border-color: var(--color-primary);\n  }\n  :host .info.msg .heading-icon {\n    color: var(--color-primary);\n  }\n  :host .success {\n    border-color: var(--color-success);\n  }\n  :host .success.msg .heading-icon {\n    color: var(--color-success);\n  }\n  :host .warning {\n    border-color: var(--color-warning);\n  }\n  :host .warning.msg .heading-icon {\n    color: var(--color-warning);\n  }\n  :host .heading-icon {\n    color: var(--color-light);\n  }\n  :host .kol-alert-wc .heading .heading-icon {\n    padding: 0;\n  }\n  :host .msg > .heading > .heading-icon {\n    padding-top: 0;\n    place-items: baseline;\n  }\n  :host .msg > .heading > div > .kol-heading-wc {\n    padding-top: calc(--var-spacing / 2);\n  }\n  :host .msg.default .heading > div > .kol-heading-wc {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .heading > div > .kol-heading-wc {\n    color: var(--color-danger);\n  }\n  :host .msg.info .heading > div > .kol-heading-wc {\n    color: var(--color-primary);\n  }\n  :host .msg.success .heading > div > .kol-heading-wc {\n    color: var(--color-success);\n  }\n  :host .msg.warning .heading > div > .kol-heading-wc {\n    color: var(--color-warning);\n  }\n  :host .msg.default .close .icon {\n    color: var(--color-subtle);\n  }\n  :host .msg.error .close .icon {\n    color: var(--color-danger);\n  }\n  :host .msg.info .close .icon {\n    color: var(--color-primary);\n  }\n  :host .msg.success .close .icon {\n    color: var(--color-success);\n  }\n  :host .msg.warning .close .icon {\n    color: var(--color-warning);\n  }\n  :host .card {\n    border-width: var(--border-width);\n    border-style: solid;\n    filter: drop-shadow(0px 2px 4px rgba(8, 35, 48, 0.24));\n    flex-direction: column;\n  }\n  :host .card > .heading {\n    padding: calc(8rem / var(--kolibri-root-font-size, 16)) calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card[_has-closer] > .heading {\n    padding-top: 0;\n    padding-bottom: 0;\n    padding-right: 0;\n  }\n  :host .card > .heading > div {\n    width: 100%;\n    min-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .heading-icon {\n    justify-self: right;\n    margin-top: -4px;\n  }\n  :host .card > .heading .kol-heading-wc {\n    width: 100%;\n    color: var(--color-light);\n    display: flex;\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n    line-height: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > .heading .kol-heading-wc > * {\n    margin: auto 0;\n  }\n  :host .card > .content {\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card.default > .heading {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error > .heading {\n    background-color: var(--color-danger);\n  }\n  :host .card.info > .heading {\n    background-color: var(--color-primary);\n  }\n  :host .card.success > .heading {\n    background-color: var(--color-success);\n  }\n  :host .card.warning > .heading {\n    background-color: var(--color-warning);\n  }\n  :host :is(.error, .info, .success, .warning) .heading-icon {\n    font-size: calc(20rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .card > div > .content {\n    grid-row: 2;\n    grid-column: 1/span 2;\n  }\n  :host .card.default .close {\n    background-color: var(--color-subtle);\n  }\n  :host .card.error .close {\n    background-color: var(--color-danger);\n  }\n  :host .card.info .close {\n    background-color: var(--color-primary);\n  }\n  :host .card.success .close {\n    background-color: var(--color-success);\n  }\n  :host .card.warning .close {\n    background-color: var(--color-warning);\n  }\n  :host .close > button {\n    border-radius: 50%;\n    /* visible on focus */\n    color: var(--color-light);\n    cursor: pointer;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  :host .close > button.hide-label .kol-icon {\n    display: flex;\n    width: 1em;\n    height: 1em;\n    font-size: calc(19.2rem / var(--kolibri-root-font-size, 16));\n  }\n  :host .close > button:active {\n    box-shadow: none;\n    outline: none;\n  }\n  .kol-input {\n    gap: calc(4rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input .error {\n    order: 1;\n  }\n  .kol-input label {\n    order: 2;\n  }\n  .kol-input .input {\n    order: 3;\n  }\n  .kol-input .counter {\n    order: 4;\n  }\n  .kol-input .hint {\n    order: 5;\n    font-size: calc(14.4rem / var(--kolibri-root-font-size, 16));\n    font-style: italic;\n  }\n  textarea {\n    border: none;\n  }\n  input::placeholder {\n    color: var(--color-subtle);\n  }\n  .input {\n    background-color: var(--color-light);\n    border-color: var(--color-subtle);\n    border-radius: var(--border-radius);\n    border-style: solid;\n    border-width: 2px;\n    padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > .kol-icon {\n    width: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) {\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .input:is(.icon-left, .icon-right) input {\n    padding-left: calc(8rem / var(--kolibri-root-font-size, 16));\n    padding-right: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n  .input > input:first-child {\n    padding-left: var(--spacing);\n  }\n  .input > input:last-child {\n    padding-right: var(--spacing);\n  }\n  :not(.disabled) .input:hover {\n    border-color: var(--color-primary);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  .kol-input.error {\n    border-left: 3px solid var(--color-danger);\n    padding-left: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-input.error .input:focus-within {\n    outline-color: var(--color-danger) !important;\n  }\n  .kol-input.error .kol-alert-wc.error {\n    color: var(--color-danger);\n    font-weight: 700;\n  }\n  select[multiple],\n  textarea {\n    overflow: auto;\n  }\n  textarea {\n    display: block;\n  }\n  .input {\n    position: relative;\n  }\n  .kol-input.disabled .input {\n    background-color: var(--color-mute);\n    border-color: var(--color-mute-variant);\n    color: var(--color-text);\n  }\n}";
+var textareaCss$3 = css_248z$1N;
 
 var css_248z$1M = "@layer kol-theme-component {\n  :host {\n    top: calc(16rem / var(--kolibri-root-font-size, 16));\n    right: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 440px;\n  }\n  .toast {\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}";
+var toastContainerCss$3 = css_248z$1M;
 
 var css_248z$1L = "@layer kol-theme-component {\n  .tree-item ul {\n    list-style: disc inside;\n    border-left: 2px solid;\n    padding-left: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    margin-left: calc(32rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-item li {\n    margin: calc(6.4rem / var(--kolibri-root-font-size, 16)) 0;\n  }\n  .tree-item .toggle-button {\n    align-items: center;\n    border: 1px solid var(--color-primary);\n    display: inline-flex;\n    height: calc(25.6rem / var(--kolibri-root-font-size, 16));\n    justify-content: center;\n    margin-right: calc(6.4rem / var(--kolibri-root-font-size, 16));\n    width: calc(25.6rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link {\n    display: inline-block;\n    padding: calc(6.4rem / var(--kolibri-root-font-size, 16));\n  }\n  .tree-link.active {\n    background: var(--color-primary-variant);\n    color: var(--color-light);\n  }\n}";
+var treeItemCss = css_248z$1L;
 
 var css_248z$1K = "@layer kol-theme-component {\n  .tree:focus-within {\n    outline: 1px solid var(--color-primary);\n  }\n}";
+var treeCss = css_248z$1K;
 
 const DEFAULT = KoliBri.createTheme('default', {
-    GLOBAL: css_248z$2n,
-    'KOL-ABBR': css_248z$2m,
-    'KOL-ACCORDION': css_248z$2l,
-    'KOL-ALERT': css_248z$2k,
-    'KOL-AVATAR': css_248z$2j,
-    'KOL-BADGE': css_248z$2i,
-    'KOL-BREADCRUMB': css_248z$2h,
-    'KOL-BUTTON': css_248z$2g,
-    'KOL-BUTTON-GROUP': css_248z$2f,
-    'KOL-BUTTON-LINK': css_248z$2e,
-    'KOL-CARD': css_248z$2d,
-    'KOL-DETAILS': css_248z$2c,
-    'KOL-HEADING': css_248z$2b,
-    'KOL-ICON': css_248z$2a,
-    'KOL-INDENTED-TEXT': css_248z$29,
-    'KOL-INPUT-CHECKBOX': css_248z$28,
-    'KOL-INPUT-COLOR': css_248z$27,
-    'KOL-INPUT-DATE': css_248z$26,
-    'KOL-INPUT-EMAIL': css_248z$25,
-    'KOL-INPUT-FILE': css_248z$24,
-    'KOL-INPUT-NUMBER': css_248z$23,
-    'KOL-INPUT-PASSWORD': css_248z$22,
-    'KOL-INPUT-RADIO': css_248z$21,
-    'KOL-INPUT-RANGE': css_248z$20,
-    'KOL-INPUT-TEXT': css_248z$1$,
-    'KOL-KOLIBRI': css_248z$1_,
-    'KOL-LINK': css_248z$1Y,
-    'KOL-LINK-BUTTON': css_248z$1Z,
-    'KOL-MODAL': css_248z$1X,
-    'KOL-NAV': css_248z$1W,
-    'KOL-PAGINATION': css_248z$1V,
-    'KOL-PROGRESS': css_248z$1U,
-    'KOL-SELECT': css_248z$1T,
-    'KOL-SKIP-NAV': css_248z$1S,
-    'KOL-SPLIT-BUTTON': css_248z$1R,
-    'KOL-TABLE-STATEFUL': css_248z$1Q,
-    'KOL-TABLE-STATELESS': css_248z$1P,
-    'KOL-TABS': css_248z$1O,
-    'KOL-TEXTAREA': css_248z$1N,
-    'KOL-TOAST-CONTAINER': css_248z$1M,
-    'KOL-TREE': css_248z$1K,
-    'KOL-TREE-ITEM': css_248z$1L,
+    GLOBAL: globalCss$2,
+    'KOL-ABBR': abbrCss,
+    'KOL-ACCORDION': accordionCss$3,
+    'KOL-ALERT': alertCss$3,
+    'KOL-AVATAR': avatarCss$2,
+    'KOL-BADGE': badgeCss$3,
+    'KOL-BREADCRUMB': breadcrumbCss$3,
+    'KOL-BUTTON': buttonCss$3,
+    'KOL-BUTTON-GROUP': buttonGroupCss$3,
+    'KOL-BUTTON-LINK': buttonLinkCss$3,
+    'KOL-CARD': cardCss$3,
+    'KOL-DETAILS': detailsCss$2,
+    'KOL-HEADING': headingCss$3,
+    'KOL-ICON': iconCss$1,
+    'KOL-INDENTED-TEXT': indentedTextCss$3,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss$3,
+    'KOL-INPUT-COLOR': inputColorCss$3,
+    'KOL-INPUT-DATE': inputDateCss$3,
+    'KOL-INPUT-EMAIL': inputEmailCss$3,
+    'KOL-INPUT-FILE': inputFileCss$3,
+    'KOL-INPUT-NUMBER': inputNumberCss$3,
+    'KOL-INPUT-PASSWORD': inputPasswordCss$3,
+    'KOL-INPUT-RADIO': inputRadioCss$3,
+    'KOL-INPUT-RANGE': inputRangeCss$2,
+    'KOL-INPUT-TEXT': inputTextCss$3,
+    'KOL-KOLIBRI': kolibriCss$2,
+    'KOL-LINK': linkCss$3,
+    'KOL-LINK-BUTTON': linkButtonCss$3,
+    'KOL-MODAL': modalCss,
+    'KOL-NAV': navCss$3,
+    'KOL-PAGINATION': paginationCss$3,
+    'KOL-PROGRESS': progressCss$3,
+    'KOL-SELECT': selectCss$3,
+    'KOL-SKIP-NAV': skipNavCss$3,
+    'KOL-SPLIT-BUTTON': splitButtonCss$3,
+    'KOL-TABLE-STATEFUL': tableStatefulCss$3,
+    'KOL-TABLE-STATELESS': tableStatelessCss$3,
+    'KOL-TABS': tabsCss$3,
+    'KOL-TEXTAREA': textareaCss$3,
+    'KOL-TOAST-CONTAINER': toastContainerCss$3,
+    'KOL-TREE': treeCss,
+    'KOL-TREE-ITEM': treeItemCss,
 });
 
 var css_248z$1J = "@layer kol-theme-global {\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n  :host {\n    --color-blue: #004494;\n    --color-yellow: #ffd617;\n    --color-grey: #404040;\n    --color-blue-130: #002f67;\n    --color-blue-120: #003776;\n    --color-blue-110: #003d84;\n    --color-blue-100: var(--color-blue);\n    --color-blue-75: #4073af;\n    --color-blue-50: #bfd0e4;\n    --color-blue-25: #bfd0e4;\n    --color-blue-5: #f2f5f9;\n    --color-yellow-120: #f8ae21;\n    --color-yellow-110: #fbc11d;\n    --color-yellow-100: var(--color-yellow);\n    --color-yellow-75: #ffde39;\n    --color-yellow-50: #ffe879;\n    --color-yellow-25: #fff4bb;\n    --color-grey-100: var(--color-grey);\n    --color-grey-75: #707070;\n    --color-grey-50: #9f9f9f;\n    --color-grey-25: #cfcfcf;\n    --color-grey-20: #d9d9d9;\n    --color-grey-15: #e3e3e3;\n    --color-grey-10: #ebebeb;\n    --color-grey-5: #f5f5f5;\n    --color-grey-3: #f9f9f9;\n    --color-blue-n: #006fb4;\n    --color-orange: #f29527;\n    --color-green: #467a39;\n    --color-red: #da2131;\n    --color-red-1xx: #981722;\n    --color-black: #000;\n    --color-white: #fff;\n    --font-family: Arial, sans-serif;\n    --font-size: 16px;\n    --font-weight: 400;\n    --font-weight-bold: 600;\n    --line-height: 1.5em;\n    --line-height-heading: 1.2em;\n    --spacing-4xl: 64px;\n    --spacing-3xl: 48px;\n    --spacing-2xl: 40px;\n    --spacing-xl: 32px;\n    --spacing-l: 24px;\n    --spacing-m: 16px;\n    --spacing-s: 12px;\n    --spacing-xs: 8px;\n    --spacing-2xs: 4px;\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n    display: inline-block;\n  }\n  a,\n  button {\n    font-size: var(--font-size);\n    outline: none;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--font-weight-bold);\n    line-height: var(--line-height-heading);\n    margin: 0;\n    padding: 0;\n  }\n  p {\n    font-weight: var(--font-weight);\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.5em;\n  }\n  .required label span::after,\n  .required legend span::after {\n    color: var(--color-red);\n    padding-left: 0.25em;\n  }\n}";
+var globalCss$1 = css_248z$1J;
 
 var css_248z$1I = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-grey-5);\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n  }\n  :host > div .headline button {\n    text-align: left;\n    width: 100%;\n    padding: 0 var(--spacing-m);\n    display: flex;\n    place-items: center;\n  }\n  :host > div .headline button .kol-icon {\n    margin-bottom: 0.75rem;\n    margin-inline-end: 1rem;\n    margin-inline-start: 0;\n    margin-top: 0.75rem;\n  }\n  :host > div .headline button span {\n    color: var(--color-grey);\n    font-weight: var(--font-weight-bold);\n    padding: 0.75rem 0;\n    width: 100%;\n  }\n  :host > div[part*=open] .headline button span {\n    border-bottom: 1px solid var(--color-grey);\n  }\n  :host > div .headline button:focus,\n  :host > div .headline button:hover {\n    background-color: var(--color-grey-25);\n  }\n  :host > div .headline button:focus {\n    outline: 2px solid var(--color-blue);\n    outline-offset: -2px;\n  }\n  .content {\n    padding: var(--spacing-s) var(--spacing-m);\n  }\n}";
+var accordionCss$2 = css_248z$1I;
 
 var css_248z$1H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n}";
+var alertCss$2 = css_248z$1H;
 
 var css_248z$1G = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var avatarCss$1 = css_248z$1G;
 
 var css_248z$1F = "@layer kol-theme-component {\n  :host > span {\n    font: normal normal var(--font-weight) 1em var(--font-family);\n    padding: calc(0.5rem - 1px) calc(0.75rem - 1px);\n    text-transform: uppercase;\n  }\n}";
+var badgeCss$2 = css_248z$1F;
 
 var css_248z$1E = "@layer kol-theme-component {\n  :host {\n    font: normal normal 400 0.875rem/1rem arial, sans-serif;\n    font-weight: var(--font-weight-bold);\n  }\n  .kol-icon::part(icon separator)::before {\n    color: var(--color-blue);\n  }\n  li:last-child {\n    color: var(--color-grey-75);\n  }\n  .kol-icon[exportparts*=separator] {\n    margin-inline-end: 0.5rem;\n    margin-inline-start: 0.5rem;\n    padding: 0;\n  }\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var breadcrumbCss$2 = css_248z$1E;
 
 var css_248z$1D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  a .kol-span-wc,\n  button .kol-span-wc {\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: 44px;\n    min-width: 44px;\n    padding: 0.25em 0.75em;\n  }\n  a,\n  button {\n    appearance: none;\n    background: none;\n    outline: none;\n    text-decoration: none;\n  }\n  a:focus .kol-span-wc,\n  button:focus .kol-span-wc {\n    outline-offset: -4px;\n    outline-width: 2px;\n    outline-style: solid;\n  }\n  button.ghost:focus .kol-span-wc {\n    outline-offset: -2px;\n  }\n  .primary a .kol-span-wc,\n  .primary button .kol-span-wc {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n  }\n  .primary a:focus .kol-span-wc,\n  .primary button:focus .kol-span-wc {\n    outline-color: var(--color-white);\n  }\n  .primary a:hover .kol-span-wc,\n  .primary button:hover .kol-span-wc {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .secondary a .kol-span-wc,\n  .secondary button .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n  }\n  .secondary a:focus .kol-span-wc,\n  .secondary button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n    outline-offset: -6px;\n  }\n  .secondary a:hover .kol-span-wc,\n  .secondary button:hover .kol-span-wc {\n    border-color: var(--color-blue-130);\n    color: var(--color-blue-130);\n  }\n  .normal a .kol-span-wc,\n  .normal button .kol-span-wc {\n    background-color: var(--color-yellow);\n    border-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .normal a:hover .kol-span-wc,\n  .normal button:hover .kol-span-wc {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a .kol-span-wc,\n  .ghost button .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-blue);\n  }\n  .ghost a:focus .kol-span-wc,\n  .ghost button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n  }\n  .ghost a:hover .kol-span-wc,\n  .ghost button:hover .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n}";
+var buttonCss$2 = css_248z$1D;
 
 var css_248z$1C = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: var(--spacing-2xs);\n  }\n}";
+var buttonGroupCss$2 = css_248z$1C;
 
 var css_248z$1B = "@layer kol-theme-component {\n  :is(a, button) {\n    color: var(--color-primary);\n    font-style: normal;\n    font-weight: 400;\n    text-decoration-line: underline;\n    font-size: inherit;\n  }\n  :is(a, button):focus {\n    outline: none;\n  }\n  :is(a, button):focus .kol-span-wc {\n    border-radius: var(--border-radius);\n    outline: calc(var(--border-width) * 2) solid;\n  }\n  :is(a, button):hover {\n    text-decoration-thickness: 0.25em;\n  }\n  :is(a, button):visited {\n    color: var(--visited);\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  .skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  .skip:focus {\n    background: white;\n    left: unset;\n    position: unset;\n  }\n  .access-key-hint {\n    background: var(--color-mute-variant);\n    border-radius: 3px;\n    color: var(--color-text);\n    padding: 0 0.3em;\n  }\n}";
+var buttonLinkCss$2 = css_248z$1B;
 
 var css_248z$1A = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  :host .kol-heading-wc {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75em;\n  }\n  :host div.header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  :host div.content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n  :host > div > div.content + div.footer {\n    border-top: 2px solid var(--color-blue);\n  }\n}";
+var cardCss$2 = css_248z$1A;
 
 var css_248z$1z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  details > .kol-indented-text {\n    margin: 0.175rem;\n    padding: 0;\n  }\n}";
+var detailsCss$1 = css_248z$1z;
 
 var css_248z$1y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .headline-h1 {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n  .headline-h2 {\n    font-size: 1.75rem;\n    line-height: 2rem;\n  }\n  .headline-h3 {\n    font-size: 1.5rem;\n    line-height: 1.75rem;\n  }\n  .headline-h4 {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  .headline-h5 {\n    font-size: 1rem;\n    line-height: 1.5rem;\n  }\n  .headline-h6 {\n    color: rgb(234, 0, 255);\n  }\n}";
+var headingCss$2 = css_248z$1y;
 
 var css_248z$1x = "@layer kol-theme-component {\n  :host,\n  :host > i {\n    height: 1em;\n    width: 1em;\n  }\n}";
+var iconCss = css_248z$1x;
 
 var css_248z$1w = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    border-end-start-radius: 0;\n    border-inline-start: 10px solid var(--color-yellow);\n    border-start-start-radius: 0;\n    padding-bottom: 1rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1rem;\n    margin: 0;\n  }\n}";
+var indentedTextCss$2 = css_248z$1w;
 
 var css_248z$1v = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  input[type=checkbox] {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    color: var(--color-grey);\n    line-height: 1.5em;\n    font-size: 1rem;\n  }\n  input[type=checkbox]:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:checked:hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .error input[type=checkbox] {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:hover {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked:hover {\n    background-color: var(--color-red-1xx);\n    border-color: var(--color-red-1xx);\n  }\n  .error.required label > span::after {\n    color: var(--color-red);\n  }\n  .default .icon {\n    margin-left: 0.2rem;\n  }\n  .default.checked .icon {\n    color: var(--color-white);\n  }\n  .switch input[type=checkbox] {\n    display: block;\n  }\n  .switch input[type=checkbox]::before,\n  .switch input[type=checkbox]:indeterminate::before {\n    background-color: var(--color-grey-75);\n  }\n  .switch input[type=checkbox]:hover::before,\n  .switch input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-blue);\n  }\n  .switch input[type=checkbox]:checked::before,\n  .switch input[type=checkbox]:checked:hover::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]::before {\n    background-color: var(--color-red);\n  }\n  .switch.error input[type=checkbox]:checked::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-red-1xx);\n  }\n  .kol-input {\n    gap: var(--spacing-xs);\n  }\n  .button {\n    gap: var(--spacing-xs) 0;\n    grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n  }\n  .kol-input kol-alert-wc.error {\n    order: 3;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert-wc {\n    grid-column: span 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .hint {\n    font-size: 0.875rem;\n  }\n  .button:focus-within {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
+var inputCheckboxCss$2 = css_248z$1v;
 
 var css_248z$1u = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 44px !important;\n    min-height: 44px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputColorCss$2 = css_248z$1u;
 
 var css_248z$1t = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputDateCss$2 = css_248z$1t;
 
 var css_248z$1s = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputEmailCss$2 = css_248z$1s;
 
 var css_248z$1r = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    margin: 1px;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 44px !important;\n    min-height: 44px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputFileCss$2 = css_248z$1r;
 
 var css_248z$1q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputNumberCss$2 = css_248z$1q;
 
 var css_248z$1p = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputPasswordCss$2 = css_248z$1p;
 
 var css_248z$1o = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  fieldset {\n    border: 0;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n  }\n  .input-slot {\n    gap: 0.25rem;\n  }\n  fieldset .kol-alert-wc {\n    order: 1;\n  }\n  fieldset .hint {\n    order: 2;\n  }\n  fieldset .kol-alert-wc {\n    order: 3;\n  }\n  fieldset .kol-input {\n    order: 4;\n  }\n  .radio-input-wrapper {\n    display: flex;\n    align-items: center;\n  }\n  .radio-label {\n    padding-left: 0.5rem;\n  }\n  input[type=radio] {\n    border: 2px solid var(--color-grey-75);\n  }\n  input[type=radio]:before {\n    display: none;\n  }\n  input[type=radio]:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  input[type=radio]:focus {\n    outline: 2px solid var(--color-blue);\n    outline-offset: 2px;\n  }\n  input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  label,\n  legend {\n    color: var(--color-grey);\n  }\n  legend {\n    font-weight: var(--font-weight-bold);\n  }\n  .error input[type=radio] {\n    border: 2px solid var(--color-red);\n  }\n  .error input[type=radio]:before {\n    display: none;\n  }\n  .error input[type=radio]:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .error input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 1;\n    width: 100%;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 4;\n  }\n}";
+var inputRadioCss$2 = css_248z$1o;
 
 var css_248z$1n = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputRangeCss$1 = css_248z$1n;
 
 var css_248z$1m = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input:not([type=range]):focus,\n  select:focus,\n  textarea:focus {\n    border-top: 1px solid var(--color-blue);\n    border-bottom: 1px solid var(--color-blue);\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputTextCss$2 = css_248z$1m;
 
 var css_248z$1l = "@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: 0.25rem;\n  }\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var linkButtonCss$2 = css_248z$1l;
 
 var css_248z$1k = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var kolibriCss$1 = css_248z$1k;
 
 var css_248z$1j = "@layer kol-theme-component {\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var linkCss$2 = css_248z$1j;
 
 var css_248z$1i = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0px;\n    padding: 0px;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry .kol-button-wc:first-child,\n  .entry .kol-link-wc,\n  .entry .kol-span-wc {\n    flex-grow: 1;\n  }\n  /* custom. */\n  nav {\n    background-color: var(--color-blue);\n  }\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .expand-button button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-span-wc {\n    border-color: transparent;\n    border-style: solid;\n    border-width: 2px;\n    color: var(--color-white);\n    font-size: 18px;\n    justify-items: start;\n    padding: 1rem;\n    height: 100%;\n  }\n  li > ul,\n  li + li {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: 2px;\n  }\n  a {\n    text-decoration: none;\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n  :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n    text-decoration: underline;\n  }\n  div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .expanded > div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n}";
+var navCss$2 = css_248z$1i;
 
 var css_248z$1h = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .button {\n    appearance: none;\n    background: none;\n    outline: none;\n    text-decoration: none;\n  }\n  .button-inner {\n    background-color: var(--color-yellow);\n    border: 2px solid var(--color-yellow);\n    color: var(--color-black);\n    font-weight: var(--font-weight-bold);\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0.25em 0.75em;\n  }\n  .button:not(:disabled):hover .button-inner {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .button:focus .button-inner {\n    outline-offset: -4px;\n    outline: 2px solid var(--color-black);\n  }\n  .button:disabled .button-inner {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .selected .button-inner {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    opacity: 1 !important;\n    text-decoration: underline;\n  }\n}";
+var paginationCss$2 = css_248z$1h;
 
 var css_248z$1g = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0px;\n    overflow: hidden;\n    width: 0px;\n  }\n  svg line:first-child,\n  svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-grey-25);\n  }\n  svg line:last-child,\n  svg circle:last-child {\n    stroke: var(--color-blue-130);\n    fill: transparent;\n  }\n  progress {\n    display: none;\n  }\n}";
+var progressCss$2 = css_248z$1g;
 
 var css_248z$1f = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var selectCss$2 = css_248z$1f;
 
 var css_248z$1e = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    font-weight: var(--font-weight-bold);\n    gap: 0.5rem;\n    line-height: 1rem;\n    padding: 0.25em 0.75em;\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    cursor: pointer;\n  }\n}";
+var skipNavCss$2 = css_248z$1e;
 
 var css_248z$1d = "@layer kol-theme-component {\n  .cycle {\n    padding: 0.125rem;\n  }\n  .cycle span {\n    background-color: var(--color-blue-75);\n  }\n}";
+var spinCss$2 = css_248z$1d;
 
 var css_248z$1c = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-radius: 0;\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-blue);\n  }\n  .popover {\n    background: #fff;\n  }\n  .horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  a .kol-span-wc,\n  button .kol-span-wc {\n    font-weight: var(--font-weight-bold);\n    margin: 0;\n    min-height: 44px;\n    min-width: 44px;\n    padding: 0.25em 0.75em;\n  }\n  a,\n  button {\n    appearance: none;\n    background: none;\n    outline: none;\n    text-decoration: none;\n  }\n  a:focus .kol-span-wc,\n  button:focus .kol-span-wc {\n    outline-offset: -4px;\n    outline-width: 2px;\n    outline-style: solid;\n  }\n  button.ghost:focus .kol-span-wc {\n    outline-offset: -2px;\n  }\n  .primary a .kol-span-wc,\n  .primary button .kol-span-wc {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n  }\n  .primary a:focus .kol-span-wc,\n  .primary button:focus .kol-span-wc {\n    outline-color: var(--color-white);\n  }\n  .primary a:hover .kol-span-wc,\n  .primary button:hover .kol-span-wc {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .secondary a .kol-span-wc,\n  .secondary button .kol-span-wc {\n    background-color: var(--color-white);\n    border-color: var(--color-blue);\n    color: var(--color-blue);\n  }\n  .secondary a:focus .kol-span-wc,\n  .secondary button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n    outline-offset: -6px;\n  }\n  .secondary a:hover .kol-span-wc,\n  .secondary button:hover .kol-span-wc {\n    border-color: var(--color-blue-130);\n    color: var(--color-blue-130);\n  }\n  .normal a .kol-span-wc,\n  .normal button .kol-span-wc {\n    background-color: var(--color-yellow);\n    border-color: var(--color-yellow);\n    color: var(--color-black);\n  }\n  .normal a:hover .kol-span-wc,\n  .normal button:hover .kol-span-wc {\n    background-color: var(--color-yellow-120);\n    border-color: var(--color-yellow-120);\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a .kol-span-wc,\n  .ghost button .kol-span-wc {\n    background-color: transparent;\n    border-color: transparent;\n    color: var(--color-blue);\n  }\n  .ghost a:focus .kol-span-wc,\n  .ghost button:focus .kol-span-wc {\n    outline-color: var(--color-blue);\n  }\n  .ghost a:hover .kol-span-wc,\n  .ghost button:hover .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n}";
+var splitButtonCss$2 = css_248z$1c;
 
 var css_248z$1b = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  @media (min-width: 1024px) {\n    :host > div:last-child,\n    :host > div:last-child > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div:last-child .kol-pagination {\n      display: flex;\n      gap: 1rem;\n    }\n  }\n}";
+var tableStatefulCss$2 = css_248z$1b;
 
 var css_248z$1a = "@layer kol-theme-component {\n  :host {\n    display: block;\n    font-family: var(--font-family);\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  caption {\n    padding: 0.5em;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: 2px;\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  :host table thead tr:last-child th,\n  :host table thead tr:last-child td {\n    border-width: 0;\n    border-bottom-width: 2px;\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  th {\n    background-color: var(--color-white);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tbody tr:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  th,\n  td {\n    padding: 0.5em;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+var tableStatelessCss$2 = css_248z$1a;
 
 var css_248z$19 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: 0.25rem;\n  }\n  .kol-button-group-wc {\n    border-bottom: 1px solid var(--color-grey-25);\n    margin-bottom: -1px;\n  }\n  .kol-button-group-wc button {\n    border: none;\n    margin-bottom: -1px;\n  }\n  .kol-button-group-wc button .kol-span-wc {\n    padding: 0.5rem;\n    min-height: 44px;\n    min-width: 44px;\n  }\n  .kol-button-group-wc button.selected .kol-span-wc {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-button-group-wc button:hover:not(:disabled) .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n  .kol-button-group-wc button:focus .kol-span-wc {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
+var tabsCss$2 = css_248z$19;
 
 var css_248z$18 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading .kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  .counter {\n    order: 5;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var textareaCss$2 = css_248z$18;
 
 var css_248z$17 = "@layer kol-theme-component {\n  :host {\n    top: 1rem;\n    right: 1rem;\n    width: 440px;\n    max-width: 100%;\n  }\n  .toast {\n    display: block;\n    background: #fff;\n    margin-top: 1rem;\n  }\n  .alert {\n    display: block;\n  }\n}";
+var toastContainerCss$2 = css_248z$17;
 
 const ECL_EC = KoliBri.createTheme('ecl-ec', {
-    GLOBAL: css_248z$1J,
-    'KOL-HEADING': css_248z$1y,
-    'KOL-ACCORDION': css_248z$1I,
-    'KOL-INDENTED-TEXT': css_248z$1w,
-    'KOL-BUTTON': css_248z$1D,
-    'KOL-LINK-BUTTON': css_248z$1l,
-    'KOL-BADGE': css_248z$1F,
-    'KOL-ALERT': css_248z$1H,
-    'KOL-AVATAR': css_248z$1G,
-    'KOL-TABS': css_248z$19,
-    'KOL-LINK': css_248z$1j,
-    'KOL-BUTTON-LINK': css_248z$1B,
-    'KOL-BREADCRUMB': css_248z$1E,
-    'KOL-DETAILS': css_248z$1z,
-    'KOL-PROGRESS': css_248z$1g,
-    'KOL-SPIN': css_248z$1d,
-    'KOL-PAGINATION': css_248z$1h,
-    'KOL-INPUT-CHECKBOX': css_248z$1v,
-    'KOL-INPUT-COLOR': css_248z$1u,
-    'KOL-CARD': css_248z$1A,
-    'KOL-BUTTON-GROUP': css_248z$1C,
-    'KOL-INPUT-RADIO': css_248z$1o,
-    'KOL-INPUT-RANGE': css_248z$1n,
-    'KOL-INPUT-TEXT': css_248z$1m,
-    'KOL-KOLIBRI': css_248z$1k,
-    'KOL-INPUT-PASSWORD': css_248z$1p,
-    'KOL-INPUT-NUMBER': css_248z$1q,
-    'KOL-INPUT-DATE': css_248z$1t,
-    'KOL-INPUT-EMAIL': css_248z$1s,
-    'KOL-INPUT-FILE': css_248z$1r,
-    'KOL-SELECT': css_248z$1f,
-    'KOL-TEXTAREA': css_248z$18,
-    'KOL-ICON': css_248z$1x,
-    'KOL-TABLE-STATEFUL': css_248z$1b,
-    'KOL-TABLE-STATELESS': css_248z$1a,
-    'KOL-NAV': css_248z$1i,
-    'KOL-SKIP-NAV': css_248z$1e,
-    'KOL-SPLIT-BUTTON': css_248z$1c,
-    'KOL-TOAST-CONTAINER': css_248z$17,
+    GLOBAL: globalCss$1,
+    'KOL-HEADING': headingCss$2,
+    'KOL-ACCORDION': accordionCss$2,
+    'KOL-INDENTED-TEXT': indentedTextCss$2,
+    'KOL-BUTTON': buttonCss$2,
+    'KOL-LINK-BUTTON': linkButtonCss$2,
+    'KOL-BADGE': badgeCss$2,
+    'KOL-ALERT': alertCss$2,
+    'KOL-AVATAR': avatarCss$1,
+    'KOL-TABS': tabsCss$2,
+    'KOL-LINK': linkCss$2,
+    'KOL-BUTTON-LINK': buttonLinkCss$2,
+    'KOL-BREADCRUMB': breadcrumbCss$2,
+    'KOL-DETAILS': detailsCss$1,
+    'KOL-PROGRESS': progressCss$2,
+    'KOL-SPIN': spinCss$2,
+    'KOL-PAGINATION': paginationCss$2,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss$2,
+    'KOL-INPUT-COLOR': inputColorCss$2,
+    'KOL-CARD': cardCss$2,
+    'KOL-BUTTON-GROUP': buttonGroupCss$2,
+    'KOL-INPUT-RADIO': inputRadioCss$2,
+    'KOL-INPUT-RANGE': inputRangeCss$1,
+    'KOL-INPUT-TEXT': inputTextCss$2,
+    'KOL-KOLIBRI': kolibriCss$1,
+    'KOL-INPUT-PASSWORD': inputPasswordCss$2,
+    'KOL-INPUT-NUMBER': inputNumberCss$2,
+    'KOL-INPUT-DATE': inputDateCss$2,
+    'KOL-INPUT-EMAIL': inputEmailCss$2,
+    'KOL-INPUT-FILE': inputFileCss$2,
+    'KOL-SELECT': selectCss$2,
+    'KOL-TEXTAREA': textareaCss$2,
+    'KOL-ICON': iconCss,
+    'KOL-TABLE-STATEFUL': tableStatefulCss$2,
+    'KOL-TABLE-STATELESS': tableStatelessCss$2,
+    'KOL-NAV': navCss$2,
+    'KOL-SKIP-NAV': skipNavCss$2,
+    'KOL-SPLIT-BUTTON': splitButtonCss$2,
+    'KOL-TOAST-CONTAINER': toastContainerCss$2,
 });
 
 var css_248z$16 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .accordion,\n  div[part*=accordion] {\n    border-radius: 8px;\n    box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n    margin: 0;\n    overflow: hidden;\n  }\n  .headline {\n    font-size: 2em;\n  }\n  div[part*=close] .headline button {\n    border-radius: 8px;\n  }\n  div[part*=open] .headline button {\n    border-start-end-radius: 8px;\n    border-start-start-radius: 8px;\n  }\n  .headline button {\n    outline-offset: -1px;\n    border: 0;\n    border-bottom-color: #cfdaf5;\n    border-bottom-style: solid;\n    border-bottom-width: 2px;\n    color: #171a22;\n    position: relative;\n    display: block;\n    font: normal normal 400 1.125rem/1.75rem arial, sans-serif;\n    padding: 1.5rem;\n    text-align: start;\n    width: 100%;\n  }\n  .headline button::before {\n    background-color: #fc0;\n    border-end-end-radius: 2px;\n    border-end-start-radius: 2px;\n    content: \"\";\n    height: 4px;\n    position: absolute;\n    left: 1.5rem;\n    top: 0;\n    width: 32px;\n  }\n  .headline button .kol-icon {\n    margin-right: 0.75rem;\n  }\n  .headline button kol-icon::part(icon)::before {\n    color: #0e47cb;\n    font-weight: 900;\n    font-family: \"Font Awesome 6 Free\";\n  }\n  .open .headline button .kol-icon::part(icon)::before {\n    content: \"\\f077\";\n  }\n  :not(.open) .headline button .kol-icon::part(icon)::before {\n    content: \"\\f078\";\n  }\n  .content,\n  div[part=content] {\n    -webkit-border-start: 4px solid #0e47cb;\n    -webkit-margin-start: 0;\n    border-bottom: 2px solid #cfdaf5;\n    border-inline-start: 4px solid #0e47cb;\n    color: #515560;\n    font: normal normal 400 1rem/1.5rem arial, sans-serif;\n    margin-inline-start: 0;\n    padding: 1.5rem;\n  }\n  .kol-span-wc > span {\n    align-items: baseline;\n  }\n}";
+var accordionCss$1 = css_248z$16;
 
 var css_248z$15 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n}";
+var alertCss$1 = css_248z$15;
 
 var css_248z$14 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var avatarCss = css_248z$14;
 
 var css_248z$13 = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > span {\n    font: normal normal var(--font-weight) 0.875rem/1em var(--font-family);\n    padding: calc(0.5rem - 1px) calc(0.75rem - 1px);\n    text-transform: uppercase;\n  }\n}";
+var badgeCss$1 = css_248z$13;
 
 var css_248z$12 = "@layer kol-theme-component {\n  :host,\n  .kol-link {\n    font-family: var(--font-family);\n  }\n}";
+var breadcrumbCss$1 = css_248z$12;
 
 var css_248z$11 = "@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: 0.25rem;\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  a:focus,\n  button:focus {\n    outline: none;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    min-height: 44px;\n    min-width: 44px;\n    border-radius: 4px;\n    font: normal normal 400 1rem/1.25rem arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: 0.75rem;\n  }\n  a:focus-visible > .kol-span-wc,\n  button:focus-visible > .kol-span-wc {\n    outline-offset: -4px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  a:active > .kol-span-wc,\n  button:active > .kol-span-wc,\n  a:hover > .kol-span-wc,\n  button:hover > .kol-span-wc {\n    box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n  }\n  .primary a > .kol-span-wc,\n  .primary button > .kol-span-wc {\n    background-color: #0e47cb;\n    color: #fff;\n  }\n  .primary a:focus-visible > .kol-span-wc,\n  .primary button:focus-visible > .kol-span-wc {\n    outline-color: #fff;\n  }\n  .primary a:hover > .kol-span-wc,\n  .primary button:hover > .kol-span-wc {\n    background-color: #3e6cd5;\n  }\n  .secondary a > .kol-span-wc,\n  .secondary button > .kol-span-wc {\n    background-color: #fff;\n    border: 2px solid #0e47cb;\n    color: #0e47cb;\n    padding: calc(0.75rem - 2px) calc(1rem - 2px);\n  }\n  .secondary a:focus-visible > .kol-span-wc,\n  .secondary button:focus-visible > .kol-span-wc {\n    box-shadow: inset 0 0 0 4px #0e47cb;\n    outline-color: #fff;\n  }\n  .secondary a:hover > .kol-span-wc,\n  .secondary button:hover > .kol-span-wc {\n    border-color: #0e47cb;\n    color: #0e47cb;\n  }\n  .normal a > .kol-span-wc,\n  .normal button > .kol-span-wc {\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .normal a:focus-visible > .kol-span-wc,\n  .normal button:focus-visible > .kol-span-wc {\n    outline-color: #000;\n  }\n  .normal a:hover > .kol-span-wc,\n  .normal button:hover > .kol-span-wc {\n    background-color: #fc0;\n    border-color: #fc0;\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a > .kol-span-wc,\n  .ghost button > .kol-span-wc {\n    color: #0e47cb;\n  }\n  .ghost a:focus-visible > .kol-span-wc,\n  .ghost button:focus-visible > .kol-span-wc {\n    outline-color: #0e47cb;\n  }\n  .ghost a:hover > .kol-span-wc,\n  .ghost button:hover > .kol-span-wc {\n    color: #0e47cb;\n  }\n}";
+var buttonCss$1 = css_248z$11;
 
 var css_248z$10 = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    gap: var(--spacing-2xs);\n  }\n}";
+var buttonGroupCss$1 = css_248z$10;
 
 var css_248z$$ = "@layer kol-theme-component {\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var buttonLinkCss$1 = css_248z$$;
 
 var css_248z$_ = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    background-color: white;\n    grid-template-rows: min-content 2fr min-content;\n    box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);\n  }\n  :host .kol-heading-wc {\n    display: inline-flex;\n    font-style: normal;\n    font-weight: 700;\n    font-size: 1.25em;\n    line-height: 1.75em;\n  }\n  :host div.header {\n    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs) var(--spacing-m);\n  }\n  :host div.content {\n    padding: var(--spacing-xs) var(--spacing-m) var(--spacing-m);\n    overflow: hidden;\n  }\n  :host div.footer {\n    padding: var(--spacing-xs) var(--spacing-m);\n  }\n  :host > div > div.content + div.footer {\n    border-top: 2px solid var(--color-blue);\n  }\n}";
+var cardCss$1 = css_248z$_;
 
 var css_248z$Z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var detailsCss = css_248z$Z;
 
 var css_248z$Y = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    font-weight: var(--font-weight-bold);\n  }\n  .headline-h1 {\n    font-size: 2.625rem;\n    line-height: 3.25rem;\n  }\n  .headline-h2 {\n    font-size: 2.25rem;\n    line-height: 2.75rem;\n  }\n  .headline-h3 {\n    font-size: 2rem;\n    line-height: 2.5rem;\n  }\n  .headline-h4 {\n    font-size: 1.75rem;\n    line-height: 2rem;\n  }\n  .headline-h5 {\n    font-size: 1.5rem;\n    line-height: 1.75rem;\n  }\n  .headline-h6 {\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n}";
+var headingCss$1 = css_248z$Y;
 
 var css_248z$X = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    -webkit-border-start: 8px solid #0e47cb;\n    -webkit-padding-start: 1.5rem;\n    border-end-start-radius: 4px;\n    border-inline-start: 8px solid #0e47cb;\n    border-start-start-radius: 4px;\n    display: inline-block;\n    padding-bottom: 1rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1rem;\n  }\n}";
+var indentedTextCss$1 = css_248z$X;
 
 var css_248z$W = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  input[type=checkbox] {\n    background-color: var(--color-white);\n    border-width: 2px;\n    border-style: solid;\n    color: var(--color-grey);\n    line-height: 1.5em;\n    font-size: 1rem;\n  }\n  input[type=checkbox]:focus {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  input[type=checkbox] {\n    border-color: var(--color-grey-75);\n  }\n  input[type=checkbox]:checked {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:hover {\n    border-color: var(--color-blue);\n  }\n  input[type=checkbox]:checked:hover {\n    background-color: var(--color-blue-130);\n    border-color: var(--color-blue-130);\n  }\n  .error input[type=checkbox] {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:hover {\n    border-color: var(--color-red);\n  }\n  .error input[type=checkbox]:checked:hover {\n    background-color: var(--color-red-1xx);\n    border-color: var(--color-red-1xx);\n  }\n  .error.required label > span::after {\n    color: var(--color-red);\n  }\n  .default .icon {\n    margin-left: 0.2rem;\n  }\n  .default.checked .icon {\n    color: var(--color-white);\n  }\n  .switch input[type=checkbox] {\n    display: block;\n  }\n  .switch input[type=checkbox]::before,\n  .switch input[type=checkbox]:indeterminate::before {\n    background-color: var(--color-grey-75);\n  }\n  .switch input[type=checkbox]:hover::before,\n  .switch input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-blue);\n  }\n  .switch input[type=checkbox]:checked::before,\n  .switch input[type=checkbox]:checked:hover::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]::before {\n    background-color: var(--color-red);\n  }\n  .switch.error input[type=checkbox]:checked::before {\n    background-color: var(--color-white);\n  }\n  .switch.error input[type=checkbox]:indeterminate:hover::before {\n    background-color: var(--color-red-1xx);\n  }\n  .kol-input {\n    gap: var(--spacing-xs);\n  }\n  .button {\n    gap: var(--spacing-xs) 0;\n    grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n  }\n  .kol-input .kol-alert-wc.error {\n    order: 3;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert-wc {\n    grid-column: span 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n  }\n  .hint {\n    font-size: 0.875rem;\n  }\n  .button:focus-within {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
+var inputCheckboxCss$1 = css_248z$W;
 
 var css_248z$V = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 44px !important;\n    min-height: 44px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputColorCss$1 = css_248z$V;
 
 var css_248z$U = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputDateCss$1 = css_248z$U;
 
 var css_248z$T = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputEmailCss$1 = css_248z$T;
 
 var css_248z$S = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    margin: 1px;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 44px !important;\n    min-height: 44px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputFileCss$1 = css_248z$S;
 
 var css_248z$R = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputNumberCss$1 = css_248z$R;
 
 var css_248z$Q = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 44px !important;\n    min-height: 44px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputPasswordCss$1 = css_248z$Q;
 
 var css_248z$P = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  fieldset {\n    border: 0;\n    gap: 0.5rem;\n    flex-wrap: wrap;\n  }\n  fieldset .kol-alert-wc {\n    order: 1;\n  }\n  fieldset .hint {\n    order: 2;\n  }\n  fieldset .kol-alert-wc {\n    order: 3;\n  }\n  fieldset .kol-input-wc {\n    order: 4;\n  }\n  .radio-input-wrapper {\n    display: flex;\n    align-items: center;\n  }\n  .radio-label {\n    padding-left: 0.5rem;\n  }\n  input[type=radio] {\n    outline: 2px solid var(--color-grey-75);\n    outline-offset: 2px;\n  }\n  input[type=radio]:before {\n    display: none;\n  }\n  input[type=radio]:checked {\n    border-color: var(--color-blue);\n    border-width: 7px;\n  }\n  input[type=radio]:focus {\n    outline-color: var(--color-blue);\n  }\n  input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-blue);\n  }\n  label,\n  legend {\n    color: var(--color-grey);\n  }\n  legend {\n    font-weight: var(--font-weight-bold);\n  }\n  .error input[type=radio] {\n    border: 2px solid var(--color-red);\n  }\n  .error input[type=radio]:before {\n    display: none;\n  }\n  .error input[type=radio]:checked {\n    border-color: var(--color-red);\n    border-width: 7px;\n  }\n  .error input[type=radio]:not(:disabled):hover {\n    border-color: var(--color-red-1xx);\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 1;\n    width: 100%;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 4;\n  }\n}";
+var inputRadioCss$1 = css_248z$P;
 
 var css_248z$O = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .inputs-wrapper {\n    gap: 1rem;\n  }\n}";
+var inputRangeCss = css_248z$O;
 
 var css_248z$N = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 44px !important;\n    min-height: 44px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var inputTextCss$1 = css_248z$N;
 
 var css_248z$M = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var kolibriCss = css_248z$M;
 
 var css_248z$L = "@layer kol-theme-component {\n  :host {\n    --kolibri-spacing: 0.25rem;\n    font-family: var(--font-family);\n  }\n  a,\n  button {\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  a:focus,\n  button:focus {\n    outline: none;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    min-height: 44px;\n    min-width: 44px;\n    border-radius: 4px;\n    font: normal normal 400 1rem/1.25rem arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: 0.75rem;\n  }\n  a:focus-visible > .kol-span-wc,\n  button:focus-visible > .kol-span-wc {\n    outline-offset: -4px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  a:active > .kol-span-wc,\n  button:active > .kol-span-wc,\n  a:hover > .kol-span-wc,\n  button:hover > .kol-span-wc {\n    box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n  }\n  .primary a > .kol-span-wc,\n  .primary button > .kol-span-wc {\n    background-color: #0e47cb;\n    color: #fff;\n  }\n  .primary a:focus-visible > .kol-span-wc,\n  .primary button:focus-visible > .kol-span-wc {\n    outline-color: #fff;\n  }\n  .primary a:hover > .kol-span-wc,\n  .primary button:hover > .kol-span-wc {\n    background-color: #3e6cd5;\n  }\n  .secondary a > .kol-span-wc,\n  .secondary button > .kol-span-wc {\n    background-color: #fff;\n    border: 2px solid #0e47cb;\n    color: #0e47cb;\n    padding: calc(0.75rem - 2px) calc(1rem - 2px);\n  }\n  .secondary a:focus-visible > .kol-span-wc,\n  .secondary button:focus-visible > .kol-span-wc {\n    box-shadow: inset 0 0 0 4px #0e47cb;\n    outline-color: #fff;\n  }\n  .secondary a:hover > .kol-span-wc,\n  .secondary button:hover > .kol-span-wc {\n    border-color: #0e47cb;\n    color: #0e47cb;\n  }\n  .normal a > .kol-span-wc,\n  .normal button > .kol-span-wc {\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .normal a:focus-visible > .kol-span-wc,\n  .normal button:focus-visible > .kol-span-wc {\n    outline-color: #000;\n  }\n  .normal a:hover > .kol-span-wc,\n  .normal button:hover > .kol-span-wc {\n    background-color: #fc0;\n    border-color: #fc0;\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a > .kol-span-wc,\n  .ghost button > .kol-span-wc {\n    color: #0e47cb;\n  }\n  .ghost a:focus-visible > .kol-span-wc,\n  .ghost button:focus-visible > .kol-span-wc {\n    outline-color: #0e47cb;\n  }\n  .ghost a:hover > .kol-span-wc,\n  .ghost button:hover > .kol-span-wc {\n    color: #0e47cb;\n  }\n}";
+var linkButtonCss$1 = css_248z$L;
 
 var css_248z$K = "@layer kol-theme-component {\n  a,\n  button {\n    appearance: none;\n    color: var(--color-blue);\n    text-decoration: underline;\n  }\n  a:hover,\n  button:hover {\n    color: var(--color-blue-130);\n  }\n}";
+var linkCss$1 = css_248z$K;
 
 var css_248z$J = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0px;\n    padding: 0px;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry .kol-button-wc:first-child,\n  .entry .kol-link-wc,\n  .entry .kol-span-wc {\n    flex-grow: 1;\n  }\n  /* custom. */\n  nav {\n    background-color: var(--color-blue);\n  }\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .expand-button button {\n    background-color: var(--color-blue-130);\n    margin: auto;\n    height: 100%;\n  }\n  .kol-span-wc {\n    border-color: transparent;\n    border-style: solid;\n    border-width: 2px;\n    color: var(--color-white);\n    font-size: 18px;\n    justify-items: start;\n    padding: 1rem;\n    height: 100%;\n  }\n  li > ul,\n  li + li {\n    border-color: var(--color-blue-75);\n    border-style: solid;\n    border-width: 0;\n    border-top-width: 2px;\n  }\n  a {\n    text-decoration: none;\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc {\n    border-color: var(--color-white);\n  }\n  :is(.kol-button-wc, .kol-link-wc):focus-within .kol-span-wc,\n  :is(.kol-button-wc, .kol-link-wc):hover .kol-span-wc {\n    text-decoration: underline;\n  }\n  div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab6\";\n  }\n  .expanded > div > .expand-button kol-icon::part(icon)::before {\n    content: \"\\eab4\";\n  }\n}";
+var navCss$1 = css_248z$J;
 
 var css_248z$I = "@layer kol-theme-component {\n  :host {\n    display: grid;\n    font-family: var(--font-family);\n  }\n  .button {\n    --kolibri-spacing: 0.25rem;\n    border-radius: 4px;\n  }\n  .button:focus {\n    outline: none;\n  }\n  .button-inner {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    border-radius: 4px;\n    font: normal normal 400 1rem/1.25rem Arial, sans-serif;\n    padding: 0.75rem;\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .button:focus-visible .button-inner {\n    outline-offset: -4px;\n    outline: 2px solid var(--color-black);\n  }\n  button:not(:disabled):active .button-inner,\n  button:not(:disabled):hover .button-inner {\n    background-color: #fc0;\n    border-color: #fc0;\n    box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n  }\n  .button:disabled .button-inner {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .selected .button-inner {\n    background-color: var(--color-blue);\n    border-color: var(--color-blue);\n    color: var(--color-white);\n    font-weight: bold;\n    text-decoration: underline;\n    opacity: 1 !important;\n  }\n}";
+var paginationCss$1 = css_248z$I;
 
 var css_248z$H = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n}";
+var progressCss$1 = css_248z$H;
 
 var css_248z$G = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var selectCss$1 = css_248z$G;
 
 var css_248z$F = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: 4px;\n    gap: 0.5rem;\n    line-height: 1rem;\n    padding: 0.75rem;\n    background-color: #0e47cb;\n    color: #fff;\n    cursor: pointer;\n  }\n}";
+var skipNavCss$1 = css_248z$F;
 
 var css_248z$E = "@layer kol-theme-component {\n  .cycle {\n    padding: 0.125rem;\n  }\n  .cycle span {\n    background-color: var(--color-blue-80);\n  }\n}";
+var spinCss$1 = css_248z$E;
 
 var css_248z$D = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    border-style: solid;\n    border-width: 2px;\n    border-color: var(--color-blue);\n    border-radius: 4px;\n  }\n  .horizontal-line {\n    border: 0;\n    border-top: 1px solid var(--color-blue);\n  }\n  .popover {\n    background: #fff;\n  }\n  a,\n  button {\n    appearance: none;\n    border-radius: 4px;\n    text-decoration: none;\n  }\n  a:focus,\n  button:focus {\n    outline: none;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    min-height: 44px;\n    min-width: 44px;\n    border-radius: 4px;\n    font: normal normal 400 1rem/1.25rem arial, sans-serif;\n    font-weight: 400;\n    margin: 0;\n    padding: 0.75rem;\n  }\n  a:focus-visible > .kol-span-wc,\n  button:focus-visible > .kol-span-wc {\n    outline-offset: -4px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  a:active > .kol-span-wc,\n  button:active > .kol-span-wc,\n  a:hover > .kol-span-wc,\n  button:hover > .kol-span-wc {\n    box-shadow: 0 2px 4px rgba(9, 49, 142, 0.08), 0 0 10px rgba(9, 49, 142, 0.04), 0 4px 5px rgba(9, 49, 142, 0.04), 0 -4px 4px rgba(9, 49, 142, 0.04);\n  }\n  .primary a > .kol-span-wc,\n  .primary button > .kol-span-wc {\n    background-color: #0e47cb;\n    color: #fff;\n  }\n  .primary a:focus-visible > .kol-span-wc,\n  .primary button:focus-visible > .kol-span-wc {\n    outline-color: #fff;\n  }\n  .primary a:hover > .kol-span-wc,\n  .primary button:hover > .kol-span-wc {\n    background-color: #3e6cd5;\n  }\n  .secondary a > .kol-span-wc,\n  .secondary button > .kol-span-wc {\n    background-color: #fff;\n    border: 2px solid #0e47cb;\n    color: #0e47cb;\n    padding: calc(0.75rem - 2px) calc(1rem - 2px);\n  }\n  .secondary a:focus-visible > .kol-span-wc,\n  .secondary button:focus-visible > .kol-span-wc {\n    box-shadow: inset 0 0 0 4px #0e47cb;\n    outline-color: #fff;\n  }\n  .secondary a:hover > .kol-span-wc,\n  .secondary button:hover > .kol-span-wc {\n    border-color: #0e47cb;\n    color: #0e47cb;\n  }\n  .normal a > .kol-span-wc,\n  .normal button > .kol-span-wc {\n    background-color: #fc0;\n    color: #171a22;\n  }\n  .normal a:focus-visible > .kol-span-wc,\n  .normal button:focus-visible > .kol-span-wc {\n    outline-color: #000;\n  }\n  .normal a:hover > .kol-span-wc,\n  .normal button:hover > .kol-span-wc {\n    background-color: #fc0;\n    border-color: #fc0;\n  }\n  .danger a .kol-span-wc,\n  .danger button .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n    color: var(--color-white);\n  }\n  .danger a:hover .kol-span-wc,\n  .danger button:hover .kol-span-wc {\n    background-color: var(--color-red);\n    border-color: var(--color-red);\n  }\n  .ghost a > .kol-span-wc,\n  .ghost button > .kol-span-wc {\n    color: #0e47cb;\n  }\n  .ghost a:focus-visible > .kol-span-wc,\n  .ghost button:focus-visible > .kol-span-wc {\n    outline-color: #0e47cb;\n  }\n  .ghost a:hover > .kol-span-wc,\n  .ghost button:hover > .kol-span-wc {\n    color: #0e47cb;\n  }\n}";
+var splitButtonCss$1 = css_248z$D;
 
 var css_248z$C = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n  }\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .pagination {\n    gap: 1rem;\n  }\n  @media (min-width: 1024px) {\n    :host > div:last-child,\n    :host > div:last-child > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div:last-child .kol-pagination {\n      display: flex;\n      gap: 1rem;\n    }\n  }\n}";
+var tableStatefulCss$1 = css_248z$C;
 
 var css_248z$B = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    display: block;\n  }\n  caption {\n    padding: 0.5em;\n  }\n  th {\n    font-weight: normal;\n    color: var(--color-midnight);\n  }\n  :host table thead tr:first-child th,\n  :host table thead tr:first-child td {\n    border-width: 0;\n    border-top-width: 2px;\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-blue);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 2px;\n  }\n  table {\n    width: 100%;\n    border-spacing: 0;\n  }\n  table,\n  :host table thead tr:last-child th,\n  :host table thead tr:last-child td {\n    border-width: 0;\n    border-bottom-width: 2px;\n    border-style: solid;\n    border-color: var(--color-ice);\n  }\n  th {\n    background-color: var(--color-white);\n  }\n  th div {\n    width: 100%;\n    display: flex;\n    gap: 0.5em;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n  }\n  tbody tr:nth-child(odd) {\n    background-color: var(--color-grey-10);\n  }\n  th,\n  td {\n    padding: 0.5em;\n  }\n  th[aria-sort=ascending],\n  th[aria-sort=descending] {\n    font-weight: 700;\n  }\n}";
+var tableStatelessCss$1 = css_248z$B;
 
 var css_248z$A = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    --kolibri-spacing: 0.25rem;\n  }\n  .kol-button-group-wc {\n    border-bottom: 1px solid var(--color-grey-25);\n    margin-bottom: -1px;\n  }\n  .kol-button-group-wc button {\n    border: none;\n    margin-bottom: -1px;\n  }\n  .kol-button-group-wc button .kol-span-wc {\n    padding: 0.5rem;\n    min-height: 44px;\n    min-width: 44px;\n  }\n  .kol-button-group-wc button.selected .kol-span-wc {\n    border-color: var(--color-grey-25);\n    border-style: solid;\n    border-width: 1px;\n    border-bottom-color: white;\n    border-top-color: var(--color-blue);\n    box-shadow: 0 -3px var(--color-blue);\n    font-weight: var(--font-weight-bold);\n    color: var(--color-blue);\n  }\n  .kol-button-group-wc button:hover:not(:disabled) .kol-span-wc {\n    color: var(--color-blue-130);\n  }\n  .kol-button-group-wc button:focus .kol-span-wc {\n    outline-color: var(--color-blue-130);\n    outline-style: solid;\n    outline-width: 2px;\n  }\n}";
+var tabsCss$1 = css_248z$A;
 
 var css_248z$z = "@layer kol-theme-component {\n  :host {\n    font-family: var(--font-family);\n    font-family: var(--font-family);\n  }\n  :host > div {\n    background-color: var(--color-white);\n  }\n  :host > div.card {\n    border-style: solid;\n    border-width: 2px;\n  }\n  :host > div.msg {\n    border: none;\n  }\n  :host .msg .heading .kol-icon {\n    font-size: 1.5em;\n    margin: var(--spacing-2xs);\n  }\n  :host .msg .heading > div {\n    padding: var(--spacing-2xs);\n  }\n  :host .card {\n    padding-bottom: 1.5rem;\n    padding-inline-end: 0.5rem;\n    padding-inline-start: 1.5rem;\n    padding-top: 1.5rem;\n  }\n  :host .card .heading {\n    gap: 0.5rem;\n  }\n  :host .card .content {\n    margin-left: 2.5rem;\n  }\n  :host .card .heading .kol-icon {\n    font-size: 2rem;\n  }\n  :host .default {\n    border-color: var(--color-grey);\n  }\n  :host .default .heading kol-icon {\n    color: var(--color-grey);\n  }\n  :host .error {\n    border-color: var(--color-red);\n  }\n  :host .error .heading .kol-icon {\n    color: var(--color-red);\n  }\n  :host .info {\n    border-color: var(--color-blue);\n  }\n  :host .info .heading .kol-icon {\n    color: var(--color-blue);\n  }\n  :host .success {\n    border-color: var(--color-green);\n  }\n  :host .success .heading .kol-icon {\n    color: var(--color-green);\n  }\n  :host .warning {\n    border-color: var(--color-orange);\n  }\n  :host .warning .heading .kol-icon {\n    color: var(--color-orange);\n  }\n  .kol-input {\n    color: var(--color-grey);\n    gap: var(--spacing-xs);\n  }\n  input,\n  select,\n  textarea {\n    border: none;\n    outline: none;\n  }\n  input,\n  select:not([multiple]) {\n    height: 40px !important;\n    min-height: 40px !important;\n  }\n  label {\n    font-weight: var(--font-weight-bold);\n    order: 1;\n  }\n  .hint {\n    font-size: 0.875rem;\n    order: 2;\n  }\n  .kol-alert-wc {\n    color: var(--color-red);\n    font-size: 0.875em;\n    margin-left: calc(-1 * var(--spacing-2xs));\n    order: 3;\n  }\n  .input {\n    min-height: 44px !important;\n    border: 1px solid var(--color-grey-75);\n    color: var(--color-grey);\n    order: 4;\n    align-items: center;\n    padding: 1px 0.5em;\n  }\n  .kol-input .counter {\n    order: 5;\n  }\n  input::placeholder,\n  textarea::placeholder {\n    color: var(--color-grey-50);\n  }\n  .input:focus-within {\n    box-shadow: inset 1px 1px var(--color-blue), inset -1px -1px var(--color-blue);\n    outline: none;\n  }\n  .input:focus-within,\n  .input:hover {\n    border-color: var(--color-blue) !important;\n  }\n  .error .input {\n    border-color: var(--color-red);\n  }\n}";
+var textareaCss$1 = css_248z$z;
 
 var css_248z$y = "@layer kol-theme-component {\n  :host {\n    top: 1rem;\n    right: 1rem;\n    width: 440px;\n    max-width: 100%;\n  }\n  .toast {\n    display: block;\n    background: #fff;\n    margin-top: 1rem;\n  }\n  .alert {\n    display: block;\n  }\n}";
+var toastContainerCss$1 = css_248z$y;
 
 const ECL_EU = KoliBri.createTheme('ecl-eu', {
-    GLOBAL: css_248z$1J,
-    'KOL-HEADING': css_248z$Y,
-    'KOL-ACCORDION': css_248z$16,
-    'KOL-INDENTED-TEXT': css_248z$X,
-    'KOL-BUTTON': css_248z$11,
-    'KOL-LINK-BUTTON': css_248z$L,
-    'KOL-BUTTON-GROUP': css_248z$10,
-    'KOL-PAGINATION': css_248z$I,
-    'KOL-PROGRESS': css_248z$H,
-    'KOL-NAV': css_248z$J,
-    'KOL-BADGE': css_248z$13,
-    'KOL-ALERT': css_248z$15,
-    'KOL-CARD': css_248z$_,
-    'KOL-INPUT-CHECKBOX': css_248z$W,
-    'KOL-INPUT-COLOR': css_248z$V,
-    'KOL-INPUT-FILE': css_248z$S,
-    'KOL-INPUT-EMAIL': css_248z$T,
-    'KOL-INPUT-NUMBER': css_248z$R,
-    'KOL-INPUT-DATE': css_248z$U,
-    'KOL-INPUT-PASSWORD': css_248z$Q,
-    'KOL-INPUT-TEXT': css_248z$N,
-    'KOL-KOLIBRI': css_248z$M,
-    'KOL-SELECT': css_248z$G,
-    'KOL-TEXTAREA': css_248z$z,
-    'KOL-TABLE-STATEFUL': css_248z$C,
-    'KOL-TABLE-STATELESS': css_248z$B,
-    'KOL-AVATAR': css_248z$14,
-    'KOL-TABS': css_248z$A,
-    'KOL-LINK': css_248z$K,
-    'KOL-BUTTON-LINK': css_248z$$,
-    'KOL-BREADCRUMB': css_248z$12,
-    'KOL-DETAILS': css_248z$Z,
-    'KOL-SPIN': css_248z$E,
-    'KOL-INPUT-RADIO': css_248z$P,
-    'KOL-INPUT-RANGE': css_248z$O,
-    'KOL-SKIP-NAV': css_248z$F,
-    'KOL-SPLIT-BUTTON': css_248z$D,
-    'KOL-TOAST-CONTAINER': css_248z$y,
+    GLOBAL: globalCss$1,
+    'KOL-HEADING': headingCss$1,
+    'KOL-ACCORDION': accordionCss$1,
+    'KOL-INDENTED-TEXT': indentedTextCss$1,
+    'KOL-BUTTON': buttonCss$1,
+    'KOL-LINK-BUTTON': linkButtonCss$1,
+    'KOL-BUTTON-GROUP': buttonGroupCss$1,
+    'KOL-PAGINATION': paginationCss$1,
+    'KOL-PROGRESS': progressCss$1,
+    'KOL-NAV': navCss$1,
+    'KOL-BADGE': badgeCss$1,
+    'KOL-ALERT': alertCss$1,
+    'KOL-CARD': cardCss$1,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss$1,
+    'KOL-INPUT-COLOR': inputColorCss$1,
+    'KOL-INPUT-FILE': inputFileCss$1,
+    'KOL-INPUT-EMAIL': inputEmailCss$1,
+    'KOL-INPUT-NUMBER': inputNumberCss$1,
+    'KOL-INPUT-DATE': inputDateCss$1,
+    'KOL-INPUT-PASSWORD': inputPasswordCss$1,
+    'KOL-INPUT-TEXT': inputTextCss$1,
+    'KOL-KOLIBRI': kolibriCss,
+    'KOL-SELECT': selectCss$1,
+    'KOL-TEXTAREA': textareaCss$1,
+    'KOL-TABLE-STATEFUL': tableStatefulCss$1,
+    'KOL-TABLE-STATELESS': tableStatelessCss$1,
+    'KOL-AVATAR': avatarCss,
+    'KOL-TABS': tabsCss$1,
+    'KOL-LINK': linkCss$1,
+    'KOL-BUTTON-LINK': buttonLinkCss$1,
+    'KOL-BREADCRUMB': breadcrumbCss$1,
+    'KOL-DETAILS': detailsCss,
+    'KOL-SPIN': spinCss$1,
+    'KOL-INPUT-RADIO': inputRadioCss$1,
+    'KOL-INPUT-RANGE': inputRangeCss,
+    'KOL-SKIP-NAV': skipNavCss$1,
+    'KOL-SPLIT-BUTTON': splitButtonCss$1,
+    'KOL-TOAST-CONTAINER': toastContainerCss$1,
 });
 
 var css_248z$x = "@layer kol-theme-global {\n  :host {\n    --border-color: var(--color-anthrazit);\n    --border-radius: 0.125rem;\n    --color-anthrazit: #333;\n    --color-jade: #f3f7fb;\n    --color-weiss: #fff;\n    --color-petrol: #007a89;\n    --color-achat: #0b4d59;\n    --color-teal: #056773;\n    --color-fluorit: #66ddec;\n    --color-rotton: rgba(188, 0, 0, 1);\n    --color-rotton-20: rgba(188, 0, 0, 0.2);\n    --color-gras: #138510;\n    --color-warn: #f0541e;\n    --color-blut: var(--color-rotton);\n    --color-input-bg-default: #e8edf2;\n    --gradient-petrol-achat: linear-gradient(67deg, var(--color-petrol), var(--color-achat));\n    --color-citrin: #d4c912;\n    --color-umber: #494500;\n    --color-gelb: #fff443;\n    --color-lichtgelb: #eeff6c;\n    --gradient-gelb-citrin: linear-gradient(67deg, var(--color-gelb), var(--color-citrin));\n    --font-family-sans: BundesSans Web;\n    --font-family-serif: BundesSerif Web;\n    --font-size: 16px;\n    --spacing: 0.125em;\n    --kolibri-spacing: calc(2 * var(--spacing));\n  }\n  :host {\n    /* Reset global background-color defined by components */\n    background-color: transparent;\n  }\n  * {\n    box-sizing: border-box;\n  }\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-family: var(--font-family);\n    font-size: var(--font-size);\n    margin: 0;\n    padding: 0;\n  }\n  *[tabindex]:focus,\n  a:focus,\n  button:focus,\n  input:focus,\n  select:focus,\n  summary:focus,\n  textarea:focus {\n    cursor: pointer;\n    outline-color: var(--color-petrol);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  .kol-span-wc,\n  .kol-span-wc > span {\n    gap: 0.25em;\n  }\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #f2f2f2;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    background-color: #626262;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    padding: 0.25rem 0.5rem;\n    font-size: 0.875rem;\n    line-height: 1.25rem;\n    border-radius: 2px;\n    border: 1px solid #626262;\n  }\n}";
+var globalCss = css_248z$x;
 
 var css_248z$w = "@layer kol-theme-component {\n  :host > div {\n    font-family: var(--font-family);\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    display: grid;\n    border-color: var(--kolibri-border-color);\n    border-width: 1px;\n    border-style: solid;\n    border-radius: 0.25rem;\n  }\n  :host > div > .kol-heading-wc {\n    font-weight: 700;\n    font-size: 1.25rem;\n    line-height: 1.75rem;\n  }\n  :host > div > .kol-heading-wc button {\n    cursor: pointer;\n    width: 100%;\n    margin: 0;\n    display: flex;\n    gap: 0.5em;\n    border: 0;\n    align-items: center;\n    overflow: hidden;\n    font-size: inherit;\n    line-height: 1.75em;\n    background-color: transparent;\n    padding: 0.5rem;\n  }\n  :host > div[part*=open] > .kol-heading-wc button {\n    padding-bottom: 0;\n  }\n  :host > div[part*=open] > .kol-heading-wc button .kol-icon {\n    width: 1em;\n  }\n  :host > div div[part=header],\n  :host > div[part*=open] div[part=content] {\n    margin: 0;\n  }\n  :host > div div[part=header] {\n    padding-left: 2rem;\n  }\n  :host > div[part*=open] div[part=content] {\n    margin: 0;\n    padding: 0 1rem 1rem 2.25rem;\n  }\n  :host > div > .kol-heading-wc button .kol-icon::part(icon) {\n    color: var(--color-midnight);\n  }\n  button {\n    cursor: pointer;\n    font-weight: inherit;\n    font-size: inherit;\n    line-height: inherit;\n  }\n  .content {\n    padding: 0.5rem;\n  }\n  :host > div > .kol-heading-wc button .kol-icon::part(close)::before {\n    font-family: \"Font Awesome 6 Free\";\n    content: \"\\f077\";\n  }\n  :host > div > .kol-heading-wc button .kol-icon::part(open)::before {\n    font-family: \"Font Awesome 6 Free\";\n    content: \"\\f078\";\n  }\n}";
+var accordionCss = css_248z$w;
 
 var css_248z$v = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n}";
+var alertCss = css_248z$v;
 
 var css_248z$u = "@layer kol-theme-component {\n  :host {\n    display: inline-block;\n    font-family: inherit;\n  }\n  :host > span {\n    border-radius: 0.3125rem;\n    display: inline-flex;\n  }\n  :host > span .kol-button-wc {\n    border-left: 1px solid rgba(0, 0, 0, 0.25);\n  }\n  :host > span .kol-span-wc {\n    padding: 0.25rem 0.5rem;\n  }\n  :host > span > .kol-span-wc {\n    align-items: center;\n    font-style: normal;\n    gap: 0.5rem;\n  }\n  :host > span > .kol-span-wc > span {\n    display: flex;\n    gap: 0.25rem;\n  }\n  :host button {\n    border-radius: 0 var(--spacing) var(--spacing) 0;\n  }\n}";
+var badgeCss = css_248z$u;
 
 var css_248z$t = "@layer kol-theme-component {\n  li > span {\n    font-weight: bold;\n    /* text-transform: uppercase; */\n  }\n}";
+var breadcrumbCss = css_248z$t;
 
 var css_248z$s = "@layer kol-theme-component {\n  a,\n  button {\n    border-radius: 2rem !important;\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    border-radius: 2rem;\n    border-style: solid;\n    min-width: 44px;\n    min-height: 44px;\n    border-width: var(--spacing);\n    font-size: inherit;\n    /*line-height: 1.25em;*/\n    /*padding: calc(4 * var(--spacing));*/\n    padding: 0 1rem;\n  }\n  button {\n    background-color: transparent;\n  }\n  .button a.hide-label > .kol-span-wc,\n  .button button.hide-label > .kol-span-wc {\n    padding: 0 0.5rem;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc.primary > a > .kol-span-wc,\n  .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n  button.primary > .kol-span-wc,\n  button.primary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.primary > a:hover > .kol-span-wc,\n  .kol-link-wc.primary > a:focus > .kol-span-wc,\n  button.primary:hover > .kol-span-wc,\n  button.primary:focus > .kol-span-wc {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n  }\n  .kol-link-wc.secondary > a > .kol-span-wc,\n  .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n  button.secondary > .kol-span-wc,\n  button.secondary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-petrol);\n    color: var(--color-petrol);\n  }\n  .kol-link-wc.secondary > a:hover > .kol-span-wc,\n  .kol-link-wc.secondary > a:focus > .kol-span-wc,\n  button.secondary:hover > .kol-span-wc,\n  button.secondary:focus > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.normal > a > .kol-span-wc,\n  .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n  button.normal > .kol-span-wc,\n  button.normal:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-anthrazit);\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.normal > a:hover > .kol-span-wc,\n  .kol-link-wc.normal > a:focus > .kol-span-wc,\n  button.normal:hover > .kol-span-wc,\n  button.normal:focus > .kol-span-wc {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.danger > a > .kol-span-wc,\n  .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n  button.danger > .kol-span-wc,\n  button.danger:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-blut);\n    color: var(--color-blut);\n  }\n  .kol-link-wc.danger > a:hover > .kol-span-wc,\n  .kol-link-wc.danger > a:focus > .kol-span-wc,\n  button.danger:hover > .kol-span-wc,\n  button.danger:focus > .kol-span-wc {\n    background-color: var(--color-blut);\n    border-color: var(--color-blut);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.ghost > a > .kol-span-wc,\n  .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n  button.ghost > .kol-span-wc,\n  button.ghost:disabled:hover > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: transparent;\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.ghost > a:hover > .kol-span-wc,\n  .kol-link-wc.ghost > a:focus > .kol-span-wc,\n  button.ghost:hover > .kol-span-wc,\n  button.ghost:focus > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: var(--color-ghost);\n    color: var(--color-anthrazit);\n  }\n}";
+var buttonCss = css_248z$s;
 
 var css_248z$r = "@layer kol-theme-component {\n  :host > .kol-button-group-wc {\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.25rem;\n  }\n}";
+var buttonGroupCss = css_248z$r;
 
 var css_248z$q = "@layer kol-theme-component {\n  a,\n  button {\n    border-radius: 2rem !important;\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    border-radius: 2rem;\n    border-style: solid;\n    min-width: 44px;\n    min-height: 44px;\n    border-width: var(--spacing);\n    font-size: inherit;\n    /*line-height: 1.25em;*/\n    /*padding: calc(4 * var(--spacing));*/\n    padding: 0 1rem;\n  }\n  .button a.hide-label > .kol-span-wc,\n  .button button.hide-label > .kol-span-wc {\n    padding: 0 0.5rem;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc.primary > a > .kol-span-wc,\n  .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n  button.primary > .kol-span-wc,\n  button.primary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.primary > a:hover > .kol-span-wc,\n  .kol-link-wc.primary > a:focus > .kol-span-wc,\n  button.primary:hover > .kol-span-wc,\n  button.primary:focus > .kol-span-wc {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n  }\n  .kol-link-wc.secondary > a > .kol-span-wc,\n  .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n  button.secondary > .kol-span-wc,\n  button.secondary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-petrol);\n    color: var(--color-petrol);\n  }\n  .kol-link-wc.secondary > a:hover > .kol-span-wc,\n  .kol-link-wc.secondary > a:focus > .kol-span-wc,\n  button.secondary:hover > .kol-span-wc,\n  button.secondary:focus > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.normal > a > .kol-span-wc,\n  .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n  button.normal > .kol-span-wc,\n  button.normal:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-anthrazit);\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.normal > a:hover > .kol-span-wc,\n  .kol-link-wc.normal > a:focus > .kol-span-wc,\n  button.normal:hover > .kol-span-wc,\n  button.normal:focus > .kol-span-wc {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.danger > a > .kol-span-wc,\n  .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n  button.danger > .kol-span-wc,\n  button.danger:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-blut);\n    color: var(--color-blut);\n  }\n  .kol-link-wc.danger > a:hover > .kol-span-wc,\n  .kol-link-wc.danger > a:focus > .kol-span-wc,\n  button.danger:hover > .kol-span-wc,\n  button.danger:focus > .kol-span-wc {\n    background-color: var(--color-blut);\n    border-color: var(--color-blut);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.ghost > a > .kol-span-wc,\n  .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n  button.ghost > .kol-span-wc,\n  button.ghost:disabled:hover > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: transparent;\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.ghost > a:hover > .kol-span-wc,\n  .kol-link-wc.ghost > a:focus > .kol-span-wc,\n  button.ghost:hover > .kol-span-wc,\n  button.ghost:focus > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: var(--color-ghost);\n    color: var(--color-anthrazit);\n  }\n}";
+var buttonLinkCss = css_248z$q;
 
 var css_248z$p = "@layer kol-theme-component {\n  :host > div {\n    background-color: white;\n    border-color: var(--border-color);\n    border-style: solid;\n    border-width: 1px;\n    border-radius: calc(2 * var(--border-radius));\n    width: 100%;\n    height: 100%;\n  }\n  .kol-heading {\n    padding: 0.5rem;\n    display: block;\n    border-bottom-style: solid;\n    border-bottom-color: var(--border-color);\n    border-bottom-width: 1px;\n  }\n  :host > div > div {\n    display: block;\n    padding: 0.5rem;\n  }\n  :host > div > div:last-child {\n    display: block;\n    padding: 0.5rem;\n    border-top-style: solid;\n    border-top-color: var(--color-achat);\n    border-top-width: 1px;\n  }\n}";
+var cardCss = css_248z$p;
 
 var css_248z$o = "@layer kol-theme-component {\n  .headline-h1,\n  .headline-h2,\n  .headline-h3,\n  .headline-h4,\n  .headline-h5,\n  .headline-h6 {\n    line-height: 1em;\n    margin: 0;\n    padding: 0;\n  }\n  .headline-h1 {\n    font-family: var(--font-family-serif);\n    font-size: 54px;\n    font-weight: bold;\n  }\n  .headline-h2 {\n    font-family: var(--font-family-serif);\n    font-size: 32px;\n    font-weight: bold;\n  }\n  .headline-h3 {\n    font-family: var(--font-family-serif);\n    font-size: 26px;\n    font-weight: bold;\n  }\n  .headline-h4 {\n    font-family: var(--font-family-serif);\n    font-size: 20px;\n    font-weight: normal;\n  }\n  .headline-h5 {\n    font-family: var(--font-family-serif);\n    font-size: 17px;\n    font-weight: bold;\n  }\n  .headline-h6 {\n    font-family: var(--font-family-sans);\n    font-size: 17px;\n    font-weight: normal;\n  }\n}";
+var headingCss = css_248z$o;
 
 var css_248z$n = "@layer kol-theme-component {\n  :host > div {\n    background: var(--color-white);\n    border-left: none;\n    box-shadow: -4px 0px 0px var(--color-petrol);\n    padding: 0.25em 0.5em;\n    width: 100%;\n  }\n}";
+var indentedTextCss = css_248z$n;
 
 var css_248z$m = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  .checkbox-container {\n    justify-content: flex-start;\n  }\n  input {\n    color: var(--default-letter);\n    border-color: var(--default-border);\n    border-width: 2px;\n    border-style: solid;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .required label > span::after {\n    content: \"*\";\n    padding-left: 0.125em;\n  }\n  input:hover {\n    border-color: var(--color-petrol);\n  }\n  /* NEU */\n  .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n    width: 100%;\n  }\n  .kol-input.default {\n    grid-template-columns: calc(12 * var(--spacing)) auto;\n  }\n  .switch {\n    grid-template-columns: calc(26 * var(--spacing)) auto;\n  }\n  .button {\n    gap: 0.5rem 0;\n    grid-template-areas: \"input label\" \"hint hint\" \"error error\";\n  }\n  .kol-input > div.input {\n    display: inline-flex;\n    order: 1;\n  }\n  .kol-input > div.input input {\n    margin: 0px;\n  }\n  .kol-input > label {\n    order: 2;\n    padding-left: calc(4 * var(--spacing));\n  }\n  .kol-input > .kol-alert-wc.error {\n    order: 3;\n    padding-top: 0.25em;\n    grid-column: span 2/auto;\n  }\n  /* CHECKBOX */\n  input[type=checkbox] {\n    appearance: none;\n    background-color: white;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:checked {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n  }\n  .default input[type=checkbox] {\n    height: calc(12 * var(--spacing));\n    min-width: calc(12 * var(--spacing));\n    width: calc(12 * var(--spacing));\n  }\n  .default .icon {\n    margin-left: 0.25rem;\n  }\n  .default.checked .icon {\n    color: var(--color-weiss);\n  }\n  .switch input[type=checkbox] {\n    display: block;\n    min-width: 3.2em;\n    width: 3.2em;\n    height: 1.7em;\n    position: relative;\n  }\n  .switch input[type=checkbox]:before {\n    /* border-radius: 0.25em; */\n    -webkit-transition: 0.5s;\n    -moz-transition: 0.5s;\n    -ms-transition: 0.5s;\n    transition: 0.5;\n    width: 1.2em;\n    height: 1.2em;\n    left: calc(0.25em - 2px);\n    top: calc(0.25em - 2px);\n    background-color: black;\n    position: absolute;\n  }\n  .switch input[type=checkbox]:checked:before {\n    transform: translateX(1.5em);\n    background-color: white;\n  }\n  .switch input[type=checkbox]:indeterminate:before {\n    transform: translateX(0.75em);\n    background-color: var(--color-petrol);\n  }\n  .switch:is(:not(.checked), .indeterminate) .icon {\n    color: #fff;\n  }\n  .disabled {\n    opacity: 0.33;\n  }\n  .kol-input span.hint {\n    grid-column: span 2;\n    font-style: italic;\n    color: gray;\n    display: block;\n    order: 3;\n    padding: 0 var(--spacing);\n  }\n  .button:focus-within {\n    border-radius: 2rem;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n  }\n}";
+var inputCheckboxCss = css_248z$m;
 
 var css_248z$l = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputColorCss = css_248z$l;
 
 var css_248z$k = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputDateCss = css_248z$k;
 
 var css_248z$j = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputEmailCss = css_248z$j;
 
 var css_248z$i = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputFileCss = css_248z$i;
 
 var css_248z$h = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputNumberCss = css_248z$h;
 
 var css_248z$g = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputPasswordCss = css_248z$g;
 
 var css_248z$f = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  :host input:focus {\n    outline-color: var(--color-achat) !important;\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n  }\n  input {\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-color: var(--default-border);\n    border-width: 2px;\n    border-style: solid;\n    border-radius: 5px;\n    /* padding: 10px 14px; */\n    line-height: 24px;\n    font-size: 16px;\n  }\n  input:hover {\n    border-color: var(--color-achat);\n  }\n  .kol-alert-wc {\n    display: block;\n    width: 100%;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  /* RADIO */\n  fieldset {\n    border: 0px;\n    margin: 0px;\n    padding: 0px;\n    flex-wrap: wrap;\n  }\n  fieldset.horizontal {\n    gap: 1rem;\n  }\n  fieldset legend {\n    display: block;\n    width: 100%;\n    line-height: 1.5em;\n  }\n  .radio-input-wrapper,\n  .input {\n    cursor: pointer;\n    display: flex;\n    flex-direction: row;\n    gap: 0.5em;\n    margin-top: 0.25em;\n    margin-bottom: 0.25em;\n    align-items: center;\n    position: relative;\n  }\n  .radio-label {\n    cursor: pointer;\n    display: flex;\n    width: 100%;\n  }\n  .radio-label span {\n    margin-top: 0.125em;\n  }\n  .radio-input-wrapper input[type=radio] {\n    appearance: none;\n    transition: 0.5s;\n    border-radius: 100%;\n    height: calc(12 * var(--spacing));\n    min-width: calc(12 * var(--spacing));\n    width: calc(12 * var(--spacing));\n  }\n  .radio-input-wrapper input[type=radio]:checked:before {\n    box-shadow: 0 0 0.1rem black;\n    background-color: var(--color-petrol);\n  }\n  .radio-input-wrapper input[type=radio]:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: #999;\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    width: 100%;\n  }\n}";
+var inputRadioCss = css_248z$f;
 
 var css_248z$e = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  input:hover,\n  input:focus {\n    border-color: var(--border-color) !important;\n    border-radius: none !important;\n    outline-color: var(--color-achat) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--color-anthrazit);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  input {\n    cursor: pointer;\n    width: 100%;\n    color: var(--color-anthrazit);\n    border-width: 1px;\n    border-style: solid;\n    border-color: var(--color-petrol);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n    overflow: hidden;\n    line-height: 24px;\n    font-size: 16px;\n  }\n  .error input {\n    background-color: var(--color-rotton-20) !important;\n    border-color: var(--color-rotton) !important;\n  }\n  input:disabled {\n    background-color: var(--color-input-bg-default);\n    border-color: var(--border-color);\n    cursor: not-allowed;\n  }\n  .kol-alert-wc {\n    margin-top: calc(2 * var(--spacing));\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  input::placeholder {\n    font-style: italic;\n  }\n}";
+var inputTextCss = css_248z$e;
 
 var css_248z$d = "@layer kol-theme-component {\n  .kol-link-wc a,\n  .kol-button-wc button {\n    text-decoration-line: none;\n  }\n  a,\n  button {\n    background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n    background-repeat: no-repeat;\n    background-position: left 0 bottom 0;\n    background-size: 25% 0.25ex;\n    border-radius: var(--spacing);\n    color: var(--color-petrol);\n    font-family: var(--font-family-sans);\n    font-size: inherit;\n    /* text-transform: uppercase; */\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  a:focus,\n  a:hover,\n  button:focus,\n  button:hover {\n    background-size: 100% 0.25ex;\n    color: var(--color-achat);\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  a.skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  a.skip:focus {\n    background-color: white;\n    box-shadow: 0 0 0.5rem 0.5rem white;\n    left: unset;\n    position: unset;\n  }\n}";
+var linkButtonCss = css_248z$d;
 
 var css_248z$c = "@layer kol-theme-component {\n  .kol-link-wc a,\n  .kol-button-wc button {\n    text-decoration-line: none;\n  }\n  a,\n  button {\n    background-image: repeating-linear-gradient(to right, #66ddec, #66ddec);\n    background-repeat: no-repeat;\n    background-position: left 0 bottom 0;\n    background-size: 25% 0.25ex;\n    border-radius: var(--spacing);\n    color: var(--color-petrol);\n    font-family: var(--font-family-sans);\n    font-size: inherit;\n    /* text-transform: uppercase; */\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  a:focus,\n  a:hover,\n  button:focus,\n  button:hover {\n    background-size: 100% 0.25ex;\n    color: var(--color-achat);\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n  }\n  .hidden {\n    display: none;\n    visibility: hidden;\n  }\n  a.skip {\n    left: -99999px;\n    overflow: hidden;\n    position: absolute;\n    z-index: 9999999;\n  }\n  a.skip:focus {\n    background-color: white;\n    box-shadow: 0 0 0.5rem 0.5rem white;\n    left: unset;\n    position: unset;\n  }\n}";
+var linkCss = css_248z$c;
 
 var css_248z$b = "@layer kol-theme-component {\n  :host .hidden {\n    display: none;\n  }\n  :host > div > nav ul {\n    list-style: none;\n    margin: 0px;\n    padding: 0px;\n    border-radius: var(--border-radius);\n    background-color: var(--color-petrol);\n  }\n  :host > div > nav ul > li {\n    border-radius: var(--border-radius);\n    overflow: hidden;\n    padding: 0.125em;\n  }\n  :host > div > nav ul > li[part*=vertical] + li {\n    border-radius: 0;\n    border-top: 0.1em dotted white;\n  }\n  :host > div > nav ul > li[part*=\"vertical selected\"] {\n    border-right: 0.375em solid var(--color-citrin);\n  }\n  :host > div > nav ul > li[part*=horizontal] + li {\n    border-radius: 0;\n    border-left: 0.1em dotted white;\n  }\n  :host > div > nav ul > li[part*=\"horizontal selected\"] {\n    border-bottom: 0.375em solid var(--color-citrin);\n  }\n  :host > div > nav ul > li > div {\n    height: 100%;\n  }\n  :host > div > nav .kol-link-wc {\n    width: 100%;\n    /*height: 100%;font-weight: 600;*/\n    display: block;\n  }\n  :host > div > nav .kol-link-wc a {\n    border-radius: var(--border-radius);\n    background-color: var(--color-petrol);\n    border: 1px solid transparent;\n    grid: flex;\n    line-height: 2em;\n    padding: 0.5em;\n    color: white;\n    height: 100%;\n    -webkit-box-align: center;\n    align-items: center;\n    display: flex;\n    cursor: pointer;\n    text-decoration: inherit;\n  }\n  :host > div > nav .kol-link-wc[exportparts*=selected] a {\n    background-color: var(--color-achat);\n    font-weight: 700;\n  }\n  :host > div > nav .kol-link-wc a .kol-icon.mr-2 {\n    margin-right: calc(4 * var(--spacing));\n  }\n  :host > div > nav .kol-link-wc a .kol-icon.ml-2 {\n    margin-left: calc(4 * var(--spacing));\n  }\n  :host > div > nav .kol-link-wc a:focus,\n  :host > div > nav .kol-link-wc a:hover {\n    border: 1px solid white;\n    background-color: var(--color-fluorit);\n    color: var(--color-anthrazit);\n  }\n  /* compact button */\n  :host > div > div:last-child {\n    margin-top: 0.5em;\n    width: 100%;\n    text-align: center;\n  }\n  :host > div > nav .kol-link-wc a.text-center {\n    display: grid;\n    align-items: center;\n    justify-items: center;\n  }\n  /* horizontal */\n  ul.flex {\n    display: flex;\n  }\n  li > div > div.absolute {\n    position: absolute;\n  }\n  .kol-span-wc {\n    justify-items: baseline;\n  }\n}";
+var navCss = css_248z$b;
 
 var css_248z$a = "@layer kol-theme-component {\n  .button {\n    border-radius: 2rem;\n    font-family: var(--font-family-sans);\n  }\n  .button-inner {\n    background-color: var(--color-weiss);\n    border-radius: 2rem;\n    border: var(--spacing) solid var(--color-anthrazit);\n    color: var(--color-anthrazit);\n    font-size: inherit;\n    gap: 0.25em;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    padding: 0 1rem;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n    transition-timing-function: ease-in-out;\n  }\n  .hide-label .button-inner {\n    padding: 0 0.5rem;\n  }\n  .button:not(:disabled):hover .button-inner,\n  .button:focus .button-inner {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .button:disabled .button-inner {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .selected .button-inner {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n    color: var(--color-weiss);\n    font-weight: bold;\n    opacity: 1 !important;\n    text-decoration: underline;\n  }\n}";
+var paginationCss = css_248z$a;
 
 var css_248z$9 = "@layer kol-theme-component {\n  :host {\n    --kolibri-text-label-padding: 60px;\n  }\n  :host progress,\n  :host span {\n    display: block;\n    height: 0px;\n    overflow: hidden;\n    width: 0px;\n  }\n  svg line:first-child,\n  svg circle:first-child {\n    fill: transparent;\n    stroke: var(--color-fluorit);\n  }\n  svg line:last-child,\n  svg circle:last-child {\n    stroke: var(--color-achat);\n    fill: transparent;\n  }\n  progress {\n    display: none;\n  }\n}";
+var progressCss = css_248z$9;
 
 var css_248z$8 = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  select:hover,\n  select:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--default-letter);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  select.error {\n    background-color: var(--danger-light) !important;\n    border-color: var(--danger);\n  }\n  select {\n    width: 100%;\n    color: var(--default-letter);\n    border-width: 1px;\n    border-style: solid;\n    line-height: 24px;\n    font-size: 16px;\n    border-color: var(--kolibri-color-normal);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n  }\n  select:disabled {\n    cursor: not-allowed;\n    border-color: var(--border-default);\n    background-color: var(--background-light-grey);\n  }\n  option {\n    height: 2em;\n  }\n  select:not([multiple]) option {\n    padding: 0.5em;\n  }\n  .kol-alert-wc {\n    margin-top: var(--spacing);\n    display: block;\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n}";
+var selectCss = css_248z$8;
 
 var css_248z$7 = "@layer kol-theme-component {\n  .kol-link-wc > a > .kol-span-wc {\n    border-radius: 2rem;\n    border-style: solid;\n    gap: 0.5rem;\n    line-height: 1rem;\n    padding: 0 1rem;\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n    cursor: pointer;\n  }\n}";
+var skipNavCss = css_248z$7;
 
 var css_248z$6 = "@layer kol-theme-component {\n  .cycle {\n    padding: 0.125rem;\n  }\n  .cycle span {\n    background-color: #fc0;\n  }\n}";
+var spinCss = css_248z$6;
 
 var css_248z$5 = "@layer kol-theme-component {\n  :host {\n    border-radius: 2rem;\n    border-style: solid;\n    border-width: var(--spacing);\n  }\n  .popover {\n    background: #fff;\n  }\n  .horizontal-line {\n    background-color: var(--border-color);\n    border-radius: 2px;\n    width: 1px;\n  }\n  .secondary-button button {\n    height: 100%;\n  }\n  .secondary-button > button > .kol-span-wc {\n    border-top-right-radius: 2rem;\n    border-bottom-right-radius: 2rem;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n  .secondary-button > button > :active > .kol-span-wc {\n    border-top-right-radius: 2rem;\n    border-bottom-right-radius: 2rem;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n  .secondary-button > button > :focus > .kol-span-wc {\n    border-top-right-radius: 2rem;\n    border-bottom-right-radius: 2rem;\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n  }\n  .secondary-button > a,\n  .secondary-button > button {\n    border-top-right-radius: 2rem !important;\n    border-bottom-right-radius: 2rem !important;\n    border-top-left-radius: 0px !important;\n    border-bottom-left-radius: 0px !important;\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a,\n  button {\n    border-top-left-radius: 2rem !important;\n    border-bottom-left-radius: 2rem !important;\n    border-top-right-radius: 0px !important;\n    border-bottom-right-radius: 0px !important;\n    font-family: var(--font-family-sans);\n    /* text-transform: uppercase; */\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    border-top-left-radius: 2rem;\n    border-bottom-left-radius: 2rem;\n    font-size: inherit;\n    padding: 0 1rem;\n    min-width: 44px;\n    min-height: 44px;\n  }\n  button {\n    background-color: transparent;\n  }\n  .button a.hide-label > .kol-span-wc,\n  .button button.hide-label > .kol-span-wc {\n    padding: 0 0.5rem;\n  }\n  a > .kol-span-wc,\n  button > .kol-span-wc {\n    gap: 0.25em;\n    transition-delay: 0;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.5s;\n    transition-property: background, color, border-color;\n  }\n  .kol-link-wc.primary > a > .kol-span-wc,\n  .kol-link-wc.primary > a:disabled:hover > .kol-span-wc,\n  button.primary > .kol-span-wc,\n  button.primary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.primary > a:hover > .kol-span-wc,\n  .kol-link-wc.primary > a:focus > .kol-span-wc,\n  button.primary:hover > .kol-span-wc,\n  button.primary:focus > .kol-span-wc {\n    background-color: var(--color-achat);\n    border-color: var(--color-achat);\n  }\n  .kol-link-wc.secondary > a > .kol-span-wc,\n  .kol-link-wc.secondary > a:disabled:hover > .kol-span-wc,\n  button.secondary > .kol-span-wc,\n  button.secondary:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-petrol);\n    color: var(--color-petrol);\n  }\n  .kol-link-wc.secondary > a:hover > .kol-span-wc,\n  .kol-link-wc.secondary > a:focus > .kol-span-wc,\n  button.secondary:hover > .kol-span-wc,\n  button.secondary:focus > .kol-span-wc {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.normal > a > .kol-span-wc,\n  .kol-link-wc.normal > a:disabled:hover > .kol-span-wc,\n  button.normal > .kol-span-wc,\n  button.normal:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-anthrazit);\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.normal > a:hover > .kol-span-wc,\n  .kol-link-wc.normal > a:focus > .kol-span-wc,\n  button.normal:hover > .kol-span-wc,\n  button.normal:focus > .kol-span-wc {\n    background-color: var(--color-anthrazit);\n    border-color: var(--color-anthrazit);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.danger > a > .kol-span-wc,\n  .kol-link-wc.danger > a:disabled:hover > .kol-span-wc,\n  button.danger > .kol-span-wc,\n  button.danger:disabled:hover > .kol-span-wc {\n    background-color: var(--color-weiss);\n    border-color: var(--color-blut);\n    color: var(--color-blut);\n  }\n  .kol-link-wc.danger > a:hover > .kol-span-wc,\n  .kol-link-wc.danger > a:focus > .kol-span-wc,\n  button.danger:hover > .kol-span-wc,\n  button.danger:focus > .kol-span-wc {\n    background-color: var(--color-blut);\n    border-color: var(--color-blut);\n    color: var(--color-weiss);\n  }\n  .kol-link-wc.ghost > a > .kol-span-wc,\n  .kol-link-wc.ghost > a:disabled:hover > .kol-span-wc,\n  button.ghost > .kol-span-wc,\n  button.ghost:disabled:hover > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: transparent;\n    color: var(--color-anthrazit);\n  }\n  .kol-link-wc.ghost > a:hover > .kol-span-wc,\n  .kol-link-wc.ghost > a:focus > .kol-span-wc,\n  button.ghost:hover > .kol-span-wc,\n  button.ghost:focus > .kol-span-wc {\n    background-color: var(--color-ghost);\n    border-color: var(--color-ghost);\n    color: var(--color-anthrazit);\n  }\n}";
+var splitButtonCss = css_248z$5;
 
 var css_248z$4 = "@layer kol-theme-component {\n  :host > div {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  :host > div:last-child {\n    border-style: solid;\n    border-width: 1px;\n    border-color: var(--border-color);\n  }\n  @media (min-width: 1024px) {\n    :host > div.pagination,\n    :host > div.pagination > div:last-child {\n      grid-auto-flow: column;\n    }\n    :host > div.pagination .kol-pagination {\n      display: flex;\n      gap: 1rem;\n    }\n  }\n}";
+var tableStatefulCss = css_248z$4;
 
 var css_248z$3 = "@layer kol-theme-component {\n  .table {\n    padding: 0.5em;\n  }\n  .table:has(.focus-element:focus) {\n    outline-color: var(--color-petrol);\n    outline-offset: 2px;\n    outline-style: solid;\n    outline-width: 3px;\n    transition: outline-offset 0.2s linear;\n  }\n  table {\n    width: 100%;\n    border-collapse: collapse;\n    border-spacing: 0;\n  }\n  table,\n  tr,\n  th,\n  td {\n    border: 0 solid var(--border-color);\n  }\n  tr {\n    border-top-width: 1px;\n  }\n  tr:nth-child(even) {\n    background-color: #f2f2f2;\n  }\n  th,\n  td {\n    border-right-width: 1px;\n    padding: 0.25em 0.5em;\n  }\n  th {\n    background-color: #eee;\n  }\n  .table-sort-button .button {\n    font-weight: bold;\n  }\n}";
+var tableStatelessCss = css_248z$3;
 
 var css_248z$2 = "@layer kol-theme-component {\n  :host > div {\n    display: block;\n    width: 100%;\n  }\n  :host .kol-button-group-wc {\n    display: flex;\n    background-color: var(--color-petrol);\n  }\n  :host .kol-button-group-wc > div {\n    display: inline-flex;\n  }\n  :host .kol-button-group-wc > div + div {\n    margin-left: 0.25em;\n  }\n  :host > div > div {\n    padding: 0.25em;\n    border: 1px solid var(--border-color);\n  }\n  button {\n    box-sizing: border-box;\n    font-size: inherit;\n    line-height: 1.25em;\n    cursor: pointer;\n    border-width: 2px;\n    box-shadow: 0 0 0.25em gray;\n    width: inherit;\n    overflow: hidden;\n    border-style: solid;\n    padding: calc(4 * var(--spacing));\n    display: grid;\n    gap: 0.25em;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    transition-duration: 0.5s;\n    transition-property: background-color, color, border-color;\n  }\n  .kol-button-wc button.selected,\n  .kol-button-wc[aria-selected=true] button {\n    background-color: white;\n    border-bottom-width: 0.25em !important;\n    border-bottom-style: solid;\n    border-bottom-color: var(--color-citrin) !important;\n  }\n  button > .kol-span-wc span {\n    display: flex;\n    gap: 0.25em;\n    align-items: center;\n    justify-content: center;\n  }\n  button:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  button.primary,\n  button.primary:disabled:hover {\n    background-color: var(--kolibri-color-primary);\n    border-color: var(--kolibri-color-primary);\n    color: white;\n  }\n  button.primary:hover,\n  button.primary:focus {\n    color: var(--kolibri-color-primary);\n  }\n  button.secondary,\n  button.secondary:disabled:hover {\n    background-color: var(--kolibri-color-secondary);\n    border-color: var(--kolibri-color-secondary);\n    color: white;\n  }\n  button.secondary:hover,\n  button.secondary:focus {\n    color: var(--kolibri-color-secondary);\n  }\n  button.normal,\n  button.normal:disabled:hover {\n    background-color: var(--color-petrol);\n    border-color: var(--color-petrol);\n    color: white;\n  }\n  button.normal:hover,\n  button.normal:focus {\n    color: var(--color-petrol);\n  }\n  button.danger,\n  button.danger:disabled:hover {\n    background-color: var(--kolibri-color-danger);\n    border-color: var(--kolibri-color-danger);\n    color: white;\n  }\n  button.danger:hover,\n  button.danger:focus {\n    color: var(--kolibri-color-danger);\n  }\n  button.ghost,\n  button.ghost:disabled:hover {\n    background-color: white;\n    border-color: var(--kolibri-color-ghost);\n    color: var(--kolibri-color-ghost);\n  }\n  button.ghost:hover,\n  button.ghost:focus {\n    background-color: var(--kolibri-color-ghost);\n    color: white;\n  }\n  button:hover,\n  button:focus {\n    background-color: white;\n    box-shadow: 0 0 0.25em black;\n  }\n  button:active {\n    outline: 0 !important;\n    box-shadow: none !important;\n  }\n  .close-button {\n    font-size: 25%;\n    height: fit-content;\n    width: 0;\n  }\n  .close-button button {\n    width: 1rem;\n    position: relative;\n    height: 1rem;\n    left: -4.25em;\n    top: 0.25em;\n  }\n  :host > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left {\n    grid-template-columns: auto 1fr;\n  }\n  :host > div.tabs-align-right {\n    grid-template-columns: 1fr auto;\n  }\n  :host > .tabs-align-left .kol-button-group-wc,\n  :host > .tabs-align-top .kol-button-group-wc {\n    order: 0;\n  }\n  :host > .tabs-align-bottom .kol-button-group-wc,\n  :host > .tabs-align-right .kol-button-group-wc {\n    order: 1;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div,\n  :host > div.tabs-align-left .kol-button-group-wc > div > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div {\n    display: grid;\n  }\n  :host > div.tabs-align-left .kol-button-group-wc > div > div .kol-button-wc,\n  :host > div.tabs-align-right .kol-button-group-wc > div > div .kol-button-wc {\n    width: 100%;\n  }\n  :host > div.tabs-align-bottom .kol-button-group-wc div,\n  :host > div.tabs-align-top .kol-button-group-wc div {\n    display: flex;\n    flex-wrap: wrap;\n  }\n}";
+var tabsCss = css_248z$2;
 
 var css_248z$1 = "@layer kol-theme-component {\n  :host {\n    --kolibri-border-width: 1px;\n  }\n  :host .default {\n    border-color: var(--color-anthrazit);\n  }\n  :host .heading {\n    gap: 0.5rem;\n  }\n  :host .default .heading-icon {\n    background-color: var(--color-anthrazit);\n  }\n  :host .error {\n    border-color: var(--color-rotton);\n  }\n  :host .error .heading-icon {\n    background-color: var(--color-rotton);\n  }\n  :host .info {\n    border-color: var(--color-petrol);\n  }\n  :host .info .heading-icon {\n    background-color: var(--color-petrol);\n  }\n  :host .success {\n    border-color: var(--color-gras);\n  }\n  :host .success .heading-icon {\n    background-color: var(--color-gras);\n  }\n  :host .warning {\n    border-color: var(--color-warn);\n  }\n  :host .warning .heading-icon {\n    background-color: var(--color-warn);\n  }\n  textarea:hover,\n  textarea:focus {\n    border-color: var(--default-border-hover);\n    outline-color: var(--primary) !important;\n    outline-offset: 0;\n    outline-style: solid;\n    outline-width: 1px;\n  }\n  label {\n    color: var(--default-letter);\n    font-size: 14px;\n    line-height: 20px;\n    gap: 8px;\n    width: 100%;\n    font-weight: bold;\n  }\n  textarea.error {\n    background-color: var(--danger-light) !important;\n    border-color: var(--danger);\n  }\n  textarea {\n    width: 100%;\n    color: var(--default-letter);\n    border-width: 1px;\n    border-style: solid;\n    line-height: 24px;\n    font-size: 16px;\n    border-color: var(--kolibri-color-normal);\n    border-radius: 0;\n    background-color: #e8edf2 !important;\n  }\n  textarea::placeholder {\n    color: var(--default-border);\n  }\n  textarea:disabled {\n    cursor: not-allowed;\n  }\n  textarea:disabled,\n  textarea:read-only {\n    border-color: var(--border-default);\n    background-color: var(--background-light-grey);\n  }\n  .kol-required span::after {\n    content: \"*\";\n  }\n  .kol-alert-wc {\n    margin-top: var(--spacing);\n    display: block;\n  }\n}";
+var textareaCss = css_248z$1;
 
 var css_248z = "@layer kol-theme-component {\n  :host {\n    top: 1rem;\n    width: 750px;\n    max-width: 100%;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  .toast {\n    background: #fff;\n    margin-top: 1rem;\n  }\n}";
+var toastContainerCss = css_248z;
 
 const ITZBund = KoliBri.createTheme('itzbund', {
-    GLOBAL: css_248z$x,
-    'KOL-BUTTON': css_248z$s,
-    'KOL-BUTTON-GROUP': css_248z$r,
-    'KOL-LINK-BUTTON': css_248z$d,
-    'KOL-PAGINATION': css_248z$a,
-    'KOL-BUTTON-LINK': css_248z$q,
-    'KOL-INPUT-TEXT': css_248z$e,
-    'KOL-INPUT-PASSWORD': css_248z$g,
-    'KOL-INPUT-NUMBER': css_248z$h,
-    'KOL-INPUT-DATE': css_248z$k,
-    'KOL-INPUT-EMAIL': css_248z$j,
-    'KOL-INPUT-FILE': css_248z$i,
-    'KOL-TEXTAREA': css_248z$1,
-    'KOL-ALERT': css_248z$v,
-    'KOL-HEADING': css_248z$o,
-    'KOL-BADGE': css_248z$u,
-    'KOL-INDENTED-TEXT': css_248z$n,
-    'KOL-LINK': css_248z$c,
-    'KOL-BREADCRUMB': css_248z$t,
-    'KOL-SPIN': css_248z$6,
-    'KOL-PROGRESS': css_248z$9,
-    'KOL-SELECT': css_248z$8,
-    'KOL-INPUT-COLOR': css_248z$l,
-    'KOL-ACCORDION': css_248z$w,
-    'KOL-TABLE-STATEFUL': css_248z$4,
-    'KOL-TABLE-STATELESS': css_248z$3,
-    'KOL-NAV': css_248z$b,
-    'KOL-CARD': css_248z$p,
-    'KOL-INPUT-CHECKBOX': css_248z$m,
-    'KOL-INPUT-RADIO': css_248z$f,
-    'KOL-TOAST-CONTAINER': css_248z,
-    'KOL-TABS': css_248z$2,
-    'KOL-SKIP-NAV': css_248z$7,
-    'KOL-SPLIT-BUTTON': css_248z$5,
+    GLOBAL: globalCss,
+    'KOL-BUTTON': buttonCss,
+    'KOL-BUTTON-GROUP': buttonGroupCss,
+    'KOL-LINK-BUTTON': linkButtonCss,
+    'KOL-PAGINATION': paginationCss,
+    'KOL-BUTTON-LINK': buttonLinkCss,
+    'KOL-INPUT-TEXT': inputTextCss,
+    'KOL-INPUT-PASSWORD': inputPasswordCss,
+    'KOL-INPUT-NUMBER': inputNumberCss,
+    'KOL-INPUT-DATE': inputDateCss,
+    'KOL-INPUT-EMAIL': inputEmailCss,
+    'KOL-INPUT-FILE': inputFileCss,
+    'KOL-TEXTAREA': textareaCss,
+    'KOL-ALERT': alertCss,
+    'KOL-HEADING': headingCss,
+    'KOL-BADGE': badgeCss,
+    'KOL-INDENTED-TEXT': indentedTextCss,
+    'KOL-LINK': linkCss,
+    'KOL-BREADCRUMB': breadcrumbCss,
+    'KOL-SPIN': spinCss,
+    'KOL-PROGRESS': progressCss,
+    'KOL-SELECT': selectCss,
+    'KOL-INPUT-COLOR': inputColorCss,
+    'KOL-ACCORDION': accordionCss,
+    'KOL-TABLE-STATEFUL': tableStatefulCss,
+    'KOL-TABLE-STATELESS': tableStatelessCss,
+    'KOL-NAV': navCss,
+    'KOL-CARD': cardCss,
+    'KOL-INPUT-CHECKBOX': inputCheckboxCss,
+    'KOL-INPUT-RADIO': inputRadioCss,
+    'KOL-TOAST-CONTAINER': toastContainerCss,
+    'KOL-TABS': tabsCss,
+    'KOL-SKIP-NAV': skipNavCss,
+    'KOL-SPLIT-BUTTON': splitButtonCss,
 });
 
 export { BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund };