npm - @zanichelli/albe-web-components - Versions diffs - 19.3.0 → 19.5.0 - Mend

@zanichelli/albe-web-components 19.3.0 → 19.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (619) hide show

package/dist/components/z-tr.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["stylesCss","ZTr","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","expandable","expanded","updateColumns","cells","Array","from","host","querySelectorAll","pop","columns","map","cell","colspan","reduce","a","b","style","setProperty","expandableContent","id","randomId","expandableContentId","onRowClick","event","preventExpand","target","closest","expand","emit","onKeyDown","active","document","activeElement","key","preventDefault","componentWillLoad","render","h","Host","role","tabIndex","undefined","onClick","bind","class","type","name","onSlotchange"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n\n --columns: 1;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.z-tr--expand-button-container,\n::slotted() {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\n::slotted(:not(:last-child)) {\n border-right: var(--z-table--cell-left-border, none);\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted() {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(:last-child) {\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; / prevents shadow to be cut by the next element /\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted() {\n background-color: var(--color-background);\n}\n\n:host(:hover):has([tabIndex]) ::slotted(z-td),\n:host(:hover):has([tabIndex]) ::slotted(z-th) {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n background-color: var(--color-surface02);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n right: 0;\n left: 0;\n width: 100%;\n border-radius: 4px;\n box-shadow: none;\n inset: 0;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted() {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZTr implements ComponentInterface {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n if (this.expandable) {\n cells.pop();\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"mappings":"2OAAA,MAAMA,EAAY,IAAM,4vE,MC4BXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,iGAkBEC,KAAAC,WAAa,MAMbD,KAAAE,SAAW,KAgGZ,CAjFW,aAAAC,GACR,MAAMC,EAAQC,MAAMC,KAAKN,KAAKO,KAAKC,iBAAkD,eACrF,GAAIR,KAAKC,WAAY,CACnBG,EAAMK,K,CAGR,MAAMC,EAAUN,EAAMO,KAAKC,GAASA,EAAKC,SAAW,IAAGC,QAAO,CAACC,EAAGC,IAAMD,EAAIC,GAAG,GAC/EhB,KAAKO,KAAKU,MAAMC,YAAY,YAAa,GAAGR,KAE5C,GAAIV,KAAKC,WAAY,CACnB,MAAMkB,EAAoBf,EAAMK,MAChCU,EAAkBC,GAAKD,EAAkBC,IAAM,2BAA2BC,MAC1ErB,KAAKsB,oBAAsBH,EAAkBC,E,EAQzC,UAAAG,CAAWC,GACjB,MAAMC,EAAiBD,EAAME,OAAuBC,QAAQ,mBAC5D,IAAK3B,KAAKC,YAAcwB,EAAe,CACrC,M,CAGFzB,KAAKE,UAAYF,KAAKE,SACtBF,KAAK4B,OAAOC,KAAK,CAAC3B,SAAUF,KAAKE,U,CAG3B,SAAA4B,CAAUN,GAChB,IAAKxB,KAAKC,WAAY,CACpB,M,CAGF,MAAM8B,EAASC,SAASC,cACxB,GAAIF,IAAW/B,KAAKO,KAAM,CACxB,M,CAGF,GAAIiB,EAAMU,MAAQ,SAAWV,EAAMU,MAAQ,IAAK,CAC9CV,EAAMW,iBACNnC,KAAKE,UAAYF,KAAKE,SACtBF,KAAK4B,OAAOC,KAAK,CAAC3B,SAAUF,KAAKE,U,EAIrC,iBAAAkC,GACEpC,KAAKG,e,CAGP,MAAAkC,GACE,OACEC,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,MACLC,SAAUzC,KAAKC,WAAa,EAAIyC,UAChCxC,SAAUF,KAAKE,SACfyC,QAAS3C,KAAKuB,WAAWqB,KAAK5C,MAC9B8B,UAAW9B,KAAK8B,UAAUc,KAAK5C,OAE/BsC,EAAA,OAAAJ,IAAA,2CACEW,MAAM,sBAAqB,cACf,SAEdP,EAAA,OAAAJ,IAAA,2CAAKW,MAAM,iCACR7C,KAAKC,YACJqC,EAAA,UAAAJ,IAAA,2CACEO,UAAU,EAAE,gBACGzC,KAAKE,SAAW,OAAS,QAAO,aACnCF,KAAKE,SAAW,gBAAkB,eAAc,gBAC7CF,KAAKsB,oBACpBwB,KAAK,UAELR,EAAA,UAAAJ,IAAA,2CAAQa,KAAM/C,KAAKE,SAAW,gBAAkB,mBAItDoC,EAAA,QAAAJ,IAAA,2CAAMc,aAAchD,KAAKG,cAAcyC,KAAK5C,Q","ignoreList":[]}
1	+ {"version":3,"names":["stylesCss","ZTr","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","expandable","expanded","updateColumns","cells","Array","from","host","querySelectorAll","expandableContent","pop","id","randomId","expandableContentId","columns","map","cell","colspan","reduce","a","b","style","setProperty","onRowClick","event","preventExpand","target","closest","expand","emit","onKeyDown","active","document","activeElement","key","preventDefault","componentWillLoad","render","h","Host","role","tabIndex","undefined","onClick","bind","class","type","name","onSlotchange"],"sources":["src/components/table/z-tr/styles.css?tag=z-tr&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tr&encapsulation=shadow","src/components/table/z-tr/index.tsx"],"sourcesContent":[":host {\n position: relative;\n display: grid;\n width: 100%;\n box-sizing: border-box;\n grid-auto-flow: column;\n grid-template-columns: var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));\n\n --columns: 1;\n}\n\n* {\n box-sizing: border-box;\n}\n\n:host([expandable]) {\n --show-expandable-button: visible;\n\n cursor: pointer;\n}\n\n:host([expandable]) ::slotted() {\n grid-row: 1;\n}\n\n:host([expandable]) ::slotted(:nth-last-child(2)) {\n border-right: none;\n}\n\n:host([expandable]) ::slotted(:last-child) {\n border-top: var(--border-size-small) solid var(--color-surface03);\n border-left: 0;\n grid-column: 1 / span calc(var(--columns) + 1);\n grid-row: 2;\n}\n\n:host([expandable]:not([expanded])) ::slotted(:last-child) {\n display: none;\n}\n\n:host([expanded]) {\n margin-bottom: 4px; / prevents shadow to be cut by the next element /\n box-shadow: 0 4px 4px -2px var(--shadow-color-base);\n}\n\n:host([expanded]) .z-tr--expand-button-container,\n:host([expanded]) ::slotted() {\n border-left: 0 !important;\n background-color: var(--color-background);\n}\n\n:host([tabIndex]:hover) ::slotted(z-td),\n:host([tabIndex]:hover) ::slotted(z-th),\n:host([tabIndex]:hover) .z-tr--expand-button-container {\n background-color: var(--color-surface02);\n}\n\n:host([tabIndex]:hover) .z-tr--focus-overlay {\n border-top: var(--border-size-small) solid var(--color-surface04);\n border-bottom: var(--border-size-small) solid var(--color-surface04);\n}\n\n:host(:focus) {\n position: relative;\n z-index: 20;\n border: none !important;\n box-shadow: var(--shadow-focus-primary);\n outline: none;\n}\n\n.z-tr--expand-button-container {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--z-table--cells-background, var(--color-surface01));\n}\n\n.z-tr--expand-button-container button {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: none;\n margin: auto;\n appearance: none;\n background: transparent;\n cursor: pointer;\n visibility: var(--show-expandable-button, hidden);\n}\n\n.z-tr--expand-button-container button z-icon {\n --z-icon-width: 16px;\n --z-icon-height: 16px;\n}\n\n.z-tr--focus-overlay {\n position: absolute;\n z-index: 30;\n top: calc(var(--border-size-small) * -1);\n bottom: 0;\n left: 0;\n width: 100%;\n height: calc(100% + (var(--border-size-small) * 2));\n box-shadow: none;\n outline: none;\n pointer-events: none;\n transition: box-shadow 0.2s;\n}\n\n:host(:focus) .z-tr--focus-overlay {\n box-shadow:\n 0 0 0 2px var(--shadow-focus-primary),\n var(--shadow-focus-primary);\n outline: none;\n}\n\n:host(:focus) ::slotted() {\n border-bottom: none;\n}\n\n:host(:focus) .z-tr--expand-button-container {\n border-bottom: none;\n}\n","z-table,\ntable.z-table {\n background-color: var(--color-surface01);\n\n --z-table--cells-padding: calc(var(--space-unit) 2);\n}\n\ntable.z-table {\n border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n background-color: var(--color-background);\n\n --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n border-top: var(--border-size-medium) solid var(--color-surface03);\n border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n position: relative;\n background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n position: absolute;\n z-index: 1;\n top: 0;\n right: 0;\n bottom: 0;\n left: -1px;\n box-shadow:\n inset 0 var(--border-size-small) 0 var(--color-surface04),\n inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n left: 0;\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Listen,\n Prop,\n State,\n Watch,\n h,\n} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/*\n ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n /\n@Component({\n tag: \"z-tr\",\n styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n shadow: true,\n})\nexport class ZTr implements ComponentInterface {\n @Element() host: HTMLZTrElement;\n\n /\n Whether the row is expandable.\n * Use a `z-td` as the last cell of the row for the additional content.\n * It will show a button to expand/collapse the row.\n * The last cell will be hidden until the button or row is clicked.\n \n If some element inside the expandable row contains the `prevent-expand` css class,\n * the row will not expand by clicking that element.\n /\n @Prop({reflect: true})\n expandable = false;\n\n /\n Whether the row is currently expanded.\n /\n @State()\n expanded = false;\n\n /\n HTML Id of the expandable content.\n * It is used to link the button to the content through the `aria-controls` attribute.\n /\n @State()\n expandableContentId: string;\n\n /* Row has been expanded /\n @Event()\n expand: EventEmitter;\n\n @Watch(\"expandable\")\n @Listen(\"colspanchange\")\n protected updateColumns(): void {\n const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement \| HTMLZThElement>(\"z-td, z-th\"));\n\n if (this.expandable) {\n const expandableContent = cells.pop();\n expandableContent.id = expandableContent.id \|\| `z-tr-expandable-content-${randomId()}`;\n this.expandableContentId = expandableContent.id;\n }\n\n const columns = cells.map((cell) => cell.colspan \|\| 1).reduce((a, b) => a + b, 0);\n this.host.style.setProperty(\"--columns\", `${columns}`);\n }\n\n /\n Handle click on row.\n * Skip expansion if the click is on a element with `prevent-expand` css class.\n */\n private onRowClick(event: MouseEvent): void {\n const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n if (!this.expandable \|\| preventExpand) {\n return;\n }\n\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n if (!this.expandable) {\n return;\n }\n\n const active = document.activeElement;\n if (active !== this.host) {\n return;\n }\n\n if (event.key === \"Enter\" \|\| event.key === \" \") {\n event.preventDefault();\n this.expanded = !this.expanded;\n this.expand.emit({expanded: this.expanded});\n }\n }\n\n componentWillLoad(): void {\n this.updateColumns();\n }\n\n render(): HTMLZTrElement {\n return (\n <Host\n role=\"row\"\n tabIndex={this.expandable ? 0 : undefined}\n expanded={this.expanded}\n onClick={this.onRowClick.bind(this)}\n onKeyDown={this.onKeyDown.bind(this)}\n >\n <div\n class=\"z-tr--focus-overlay\"\n aria-hidden=\"true\"\n ></div>\n <div class=\"z-tr--expand-button-container\">\n {this.expandable && (\n <button\n tabIndex={-1}\n aria-expanded={this.expanded ? \"true\" : \"false\"}\n aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n aria-controls={this.expandableContentId}\n type=\"button\"\n >\n <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n </button>\n )}\n </div>\n <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n </Host>\n );\n }\n}\n"],"mappings":"gPAAA,MAAMA,EAAY,IAAM,2xECAxB,MAAMA,EAAY,IAAM,6sD,MC4BXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,iGAkBEC,KAAAC,WAAa,MAMbD,KAAAE,SAAW,KA6FZ,CA9EW,aAAAC,GACR,MAAMC,EAAQC,MAAMC,KAAKN,KAAKO,KAAKC,iBAAkD,eAErF,GAAIR,KAAKC,WAAY,CACnB,MAAMQ,EAAoBL,EAAMM,MAChCD,EAAkBE,GAAKF,EAAkBE,IAAM,2BAA2BC,MAC1EZ,KAAKa,oBAAsBJ,EAAkBE,E,CAG/C,MAAMG,EAAUV,EAAMW,KAAKC,GAASA,EAAKC,SAAW,IAAGC,QAAO,CAACC,EAAGC,IAAMD,EAAIC,GAAG,GAC/EpB,KAAKO,KAAKc,MAAMC,YAAY,YAAa,GAAGR,I,CAOtC,UAAAS,CAAWC,GACjB,MAAMC,EAAiBD,EAAME,OAAuBC,QAAQ,mBAC5D,IAAK3B,KAAKC,YAAcwB,EAAe,CACrC,M,CAGFzB,KAAKE,UAAYF,KAAKE,SACtBF,KAAK4B,OAAOC,KAAK,CAAC3B,SAAUF,KAAKE,U,CAG3B,SAAA4B,CAAUN,GAChB,IAAKxB,KAAKC,WAAY,CACpB,M,CAGF,MAAM8B,EAASC,SAASC,cACxB,GAAIF,IAAW/B,KAAKO,KAAM,CACxB,M,CAGF,GAAIiB,EAAMU,MAAQ,SAAWV,EAAMU,MAAQ,IAAK,CAC9CV,EAAMW,iBACNnC,KAAKE,UAAYF,KAAKE,SACtBF,KAAK4B,OAAOC,KAAK,CAAC3B,SAAUF,KAAKE,U,EAIrC,iBAAAkC,GACEpC,KAAKG,e,CAGP,MAAAkC,GACE,OACEC,EAACC,EAAI,CAAAL,IAAA,2CACHM,KAAK,MACLC,SAAUzC,KAAKC,WAAa,EAAIyC,UAChCxC,SAAUF,KAAKE,SACfyC,QAAS3C,KAAKuB,WAAWqB,KAAK5C,MAC9B8B,UAAW9B,KAAK8B,UAAUc,KAAK5C,OAE/BsC,EAAA,OAAAJ,IAAA,2CACEW,MAAM,sBAAqB,cACf,SAEdP,EAAA,OAAAJ,IAAA,2CAAKW,MAAM,iCACR7C,KAAKC,YACJqC,EAAA,UAAAJ,IAAA,2CACEO,UAAU,EAAE,gBACGzC,KAAKE,SAAW,OAAS,QAAO,aACnCF,KAAKE,SAAW,gBAAkB,eAAc,gBAC7CF,KAAKa,oBACpBiC,KAAK,UAELR,EAAA,UAAAJ,IAAA,2CAAQa,KAAM/C,KAAKE,SAAW,gBAAkB,mBAItDoC,EAAA,QAAAJ,IAAA,2CAAMc,aAAchD,KAAKG,cAAcyC,KAAK5C,Q","ignoreList":[]}

package/dist/esm/{index-BEHxru6n.js → index-BcDWN4F1.js} RENAMED Viewed

@@ -2,7 +2,7 @@ const NAMESPACE = 'web-components-library';
 const BUILD = /* web-components-library */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, shadowDom: true, slotRelocation: true, state: true, updatable: true};
 const globalScripts = () => {};
-const globalStyles = "@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n:root {\n  --gray950: #121212;\n  --gray900: #292929;\n  --gray800: #3d3d3d;\n  --gray700: #525252;\n  --gray600: #666;\n  --gray500: #9b9b9b;\n  --gray400: #adadad;\n  --gray300: #c2c2c2;\n  --gray200: #d6d6d6;\n  --gray100: #ebebeb;\n  --gray50: #f6f6f6;\n  --gray25: #fafafa;\n}\n\n:root {\n  --blue950: #001229;\n  --blue900: #001f46;\n  --blue800: #002c63;\n  --blue700: #003981;\n  --blue600: #0047a0;\n  --blue500: #0056c1;\n  --blue400: #2e76ce;\n  --blue300: #5893db;\n  --blue200: #82b0e7;\n  --blue100: #accdf3;\n  --blue50: #d6eaff;\n  --blue25: #ebf5ff;\n}\n\n:root {\n  --green950: #19200a;\n  --green900: #22330a;\n  --green800: #2b4808;\n  --green700: #355d06;\n  --green600: #407305;\n  --green500: #568818;\n  --green400: #6f9d2f;\n  --green300: #8ab14a;\n  --green200: #a6c66b;\n  --green100: #c3da92;\n  --green50: #effce0;\n  --green25: #f5fdec;\n}\n\n:root {\n  --yellow950: #33280f;\n  --yellow900: #5c4615;\n  --yellow800: #85641a;\n  --yellow700: #ab8125;\n  --yellow600: #d09e30;\n  --yellow500: #f6bb3b;\n  --yellow400: #f9c852;\n  --yellow300: #fbd468;\n  --yellow200: #fee17f;\n  --yellow150: #ffde72;\n  --yellow100: #ffea91;\n  --yellow50: #fbf4e6;\n  --yellow25: #fcf7ed;\n}\n\n:root {\n  --red950: #2a0005;\n  --red900: #4c0009;\n  --red800: #6f000d;\n  --red700: #940111;\n  --red600: #ba0115;\n  --red500: #e4011c;\n  --red400: #ec5163;\n  --red300: #f07a88;\n  --red200: #f49fa9;\n  --red100: #f8bfc4;\n  --red50: #fdeeed;\n  --red25: #fef6f6;\n}\n\n:root {\n  --avatar-C01: #99005b;\n  --avatar-C02: #b01300;\n  --avatar-C03: #e62200;\n  --avatar-C04: #7c4000;\n  --avatar-C05: #c25600;\n  --avatar-C06: #6e6d6d;\n  --avatar-C07: #667d00;\n  --avatar-C08: #008741;\n  --avatar-C09: #00612f;\n  --avatar-C10: #007d8a;\n  --avatar-C11: #007db3;\n  --avatar-C12: #00548c;\n  --avatar-C13: #0028b1;\n  --avatar-C14: #00019c;\n  --avatar-C15: #6400ee;\n  --avatar-C16: #5f3fff;\n  --avatar-C17: #8b00a5;\n  --avatar-C18: #b200ff;\n  --avatar-C19: #c700d6;\n}\n\n:root {\n  --subject-art: #7b7b06;\n  --subject-art_image: #7b7b06;\n  --subject-biology: #438454;\n  --subject-chemistry: #ba5191;\n  --subject-civics: #000080;\n  --subject-communication: #1777d5;\n  --subject-computer_science: #10893e;\n  --subject-earth_science: #8d3eb2;\n  --subject-economic: #004080;\n  --subject-english: #c25353;\n  --subject-food_science: #38846b;\n  --subject-french: #c25353;\n  --subject-geography: #378092;\n  --subject-german: #c25353;\n  --subject-grammar: #be5926;\n  --subject-graphic: #8e7406;\n  --subject-greek: #37818a;\n  --subject-history: #8b572a;\n  --subject-law: #b90000;\n  --subject-latin: #8b4513;\n  --subject-math: #266997;\n  --subject-natural_science: #318473;\n  --subject-philosophy: #5a189a;\n  --subject-physics: #4a7ba4;\n  --subject-science_middle_school: #3a7922;\n  --subject-spanish: #c25353;\n  --subject-technology: #138473;\n  --subject-topography: #ac6604;\n  --subject-technique: #752771;\n}\n\n\n\n:root {\n  --color-black: #000;\n  --color-white: #fff;\n}\n\n:root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n\n:root {\n  --space-unit: 8px;\n}\n\n:root {\n  --shadow-color-base: rgb(61 61 61 / 35%);\n  --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-0: 0 0 0 0 var(--shadow-color-base);\n  --shadow-1: 0 1px 2px 0 var(--shadow-color-base);\n  --shadow-2: 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-3: 0 3px 6px 0 var(--shadow-color-base);\n  --shadow-4: 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-6: 0 6px 12px 0 var(--shadow-color-base);\n  --shadow-8: 0 8px 16px 0 var(--shadow-color-base);\n  --shadow-12: 0 12px 24px 0 var(--shadow-color-base);\n  --shadow-16: 0 16px 32px 0 var(--shadow-color-base);\n  --shadow-24: 0 24px 48px 0 var(--shadow-color-base);\n}\n\n:root {\n  --border-no-radius: 0;\n  --border-size-small: 1px;\n  --border-size-medium: 2px;\n  --border-size-large: 4px;\n  --border-radius-small: 2px;\n  --border-radius: 4px;\n}\n\n:root {\n  --grid-mobile-viewport: 768px;\n  --grid-mobile-column: 4;\n  --grid-mobile-margin: 16px;\n  --grid-mobile-gutter: 16px;\n  --grid-tablet-viewport: 768px;\n  --grid-tablet-column: 8;\n  --grid-tablet-margin: 24px;\n  --grid-tablet-gutter: 24px;\n  --grid-desktop-viewport: 1152px;\n  --grid-desktop-column: 12;\n  --grid-desktop-margin: 24px;\n  --grid-desktop-gutter: 24px;\n  --grid-wide-viewport: 1366px;\n  --grid-wide-column: 12;\n  --grid-wide-margin: 32px;\n  --grid-wide-gutter: 32px;\n  --page-max-width: 1366px;\n\n  /* These variables automatically adapt to the viewport size,\n    that apps don't have to worry about updating the value manually. */\n  --grid-margin: var(--grid-mobile-margin);\n  --grid-gutter: var(--grid-mobile-gutter);\n  --grid-columns: var(--grid-mobile-column);\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  :root {\n    --grid-margin: var(--grid-tablet-margin);\n    --grid-gutter: var(--grid-tablet-gutter);\n    --grid-columns: var(--grid-tablet-column);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  :root {\n    --grid-margin: var(--grid-desktop-margin);\n    --grid-gutter: var(--grid-desktop-gutter);\n    --grid-columns: var(--grid-desktop-column);\n  }\n}\n\n@media (min-width: 1366px) {\n  :root {\n    --grid-margin: var(--grid-wide-margin);\n    --grid-gutter: var(--grid-wide-gutter);\n    --grid-columns: var(--grid-wide-column);\n  }\n}\n\n.z-grid {\n  display: grid;\n  width: 100%;\n  column-gap: var(--grid-gutter);\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n\n  .col-full {\n    grid-column: 1 / -1;\n  }\n\n  .col-1 {\n    grid-column: span 1;\n  }\n\n  .col-2 {\n    grid-column: span 2;\n  }\n\n  .col-3 {\n    grid-column: span 3;\n  }\n\n  .col-4,\n  .col-5,\n  .col-6,\n  .col-7,\n  .col-8,\n  .col-9,\n  .col-10,\n  .col-11,\n  .col-12 {\n    grid-column: span 4;\n  }\n\n  .col-start-1 {\n    grid-column-start: 1;\n  }\n\n  .col-start-2 {\n    grid-column-start: 2;\n  }\n\n  .col-start-3 {\n    grid-column-start: 3;\n  }\n\n  .col-start-4,\n  .col-start-5,\n  .col-start-6,\n  .col-start-7,\n  .col-start-8,\n  .col-start-9,\n  .col-start-10,\n  .col-start-11,\n  .col-start-12 {\n    grid-column-start: 4;\n  }\n\n  /*\n  .-col-start-1 is intentionally left out\n*/\n\n  .-col-start-2 {\n    grid-column-start: -2;\n  }\n\n  .-col-start-3 {\n    grid-column-start: -3;\n  }\n\n  .-col-start-4 {\n    grid-column-start: -4;\n  }\n\n  .-col-start-5,\n  .-col-start-6,\n  .-col-start-7,\n  .-col-start-8,\n  .-col-start-9,\n  .-col-start-10,\n  .-col-start-11,\n  .-col-start-12,\n  .-col-start-13 {\n    grid-column-start: -5;\n  }\n\n  .col-end-last {\n    grid-column-end: -1;\n  }\n\n  /*\n  .col-end-1 is intentionally left out\n*/\n\n  .col-end-2 {\n    grid-column-end: 2;\n  }\n\n  .col-end-3 {\n    grid-column-end: 3;\n  }\n\n  .col-end-4 {\n    grid-column-end: 4;\n  }\n\n  /*\n  This means \"end this column where column 5 start\",\n  which is the same as saying \"end this column where column 4 end\"\n*/\n  .col-end-5,\n  .col-end-6,\n  .col-end-7,\n  .col-end-8,\n  .col-end-9,\n  .col-end-10,\n  .col-end-11,\n  .col-end-12,\n  .col-end-13 {\n    grid-column-end: 5;\n  }\n\n  .-col-end-1 {\n    grid-column-end: -1;\n  }\n\n  .-col-end-2 {\n    grid-column-end: -2;\n  }\n\n  .-col-end-3 {\n    grid-column-end: -3;\n  }\n\n  .-col-end-4,\n  .-col-end-5,\n  .-col-end-6,\n  .-col-end-7,\n  .-col-end-8,\n  .-col-end-9,\n  .-col-end-10,\n  .-col-end-11,\n  .-col-end-12 {\n    grid-column-end: -4;\n  }\n\n  @media (max-width: 767px) {\n    .mobile-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .mobile-col-1 {\n      grid-column: span 1;\n    }\n\n    .mobile-col-2 {\n      grid-column: span 2;\n    }\n\n    .mobile-col-3 {\n      grid-column: span 3;\n    }\n\n    .mobile-col-4 {\n      grid-column: span 4;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .col-5 {\n      grid-column: span 5;\n    }\n\n    .col-6 {\n      grid-column: span 6;\n    }\n\n    .col-7 {\n      grid-column: span 7;\n    }\n\n    .col-8,\n    .col-9,\n    .col-10,\n    .col-11,\n    .col-12 {\n      grid-column: span 8;\n    }\n\n    .col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .col-start-8,\n    .col-start-9,\n    .col-start-10,\n    .col-start-11,\n    .col-start-12 {\n      grid-column-start: 8;\n    }\n\n    .-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-col-start-9,\n    .-col-start-10,\n    .-col-start-11,\n    .-col-start-12,\n    .-col-start-13 {\n      grid-column-start: -9;\n    }\n\n    .col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .col-end-9,\n    .col-end-10,\n    .col-end-11,\n    .col-end-12,\n    .col-end-13 {\n      grid-column-end: 9;\n    }\n\n    .-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-col-end-8,\n    .-col-end-9,\n    .-col-end-10,\n    .-col-end-11,\n    .-col-end-12 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 768px) and (max-width: 1151px) {\n    .tablet-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .tablet-col-1 {\n      grid-column: span 1;\n    }\n\n    .tablet-col-2 {\n      grid-column: span 2;\n    }\n\n    .tablet-col-3 {\n      grid-column: span 3;\n    }\n\n    .tablet-col-4 {\n      grid-column: span 4;\n    }\n\n    .tablet-col-5 {\n      grid-column: span 5;\n    }\n\n    .tablet-col-6 {\n      grid-column: span 6;\n    }\n\n    .tablet-col-7 {\n      grid-column: span 7;\n    }\n\n    .tablet-col-8 {\n      grid-column: span 8;\n    }\n\n    .tablet-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .tablet-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .tablet-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .tablet-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .tablet-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .tablet-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .tablet-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .tablet-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .-tablet-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-tablet-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-tablet-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-tablet-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-tablet-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-tablet-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-tablet-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .tablet-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .tablet-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .tablet-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .tablet-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .tablet-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .tablet-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .tablet-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-tablet-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-tablet-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-tablet-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-tablet-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-tablet-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-tablet-col-end-8 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 1152px) {\n    .col-9 {\n      grid-column: span 9;\n    }\n\n    .col-10 {\n      grid-column: span 10;\n    }\n\n    .col-11 {\n      grid-column: span 11;\n    }\n\n    .col-12 {\n      grid-column: span 12;\n    }\n\n    .col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .-col-start-13 {\n      grid-column-start: -13;\n    }\n\n    .col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .col-end-13 {\n      grid-column-end: 13;\n    }\n\n    .-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1152px) and (max-width: 1365px) {\n    .desktop-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .desktop-col-1 {\n      grid-column: span 1;\n    }\n\n    .desktop-col-2 {\n      grid-column: span 2;\n    }\n\n    .desktop-col-3 {\n      grid-column: span 3;\n    }\n\n    .desktop-col-4 {\n      grid-column: span 4;\n    }\n\n    .desktop-col-5 {\n      grid-column: span 5;\n    }\n\n    .desktop-col-6 {\n      grid-column: span 6;\n    }\n\n    .desktop-col-7 {\n      grid-column: span 7;\n    }\n\n    .desktop-col-8 {\n      grid-column: span 8;\n    }\n\n    .desktop-col-9 {\n      grid-column: span 9;\n    }\n\n    .desktop-col-10 {\n      grid-column: span 10;\n    }\n\n    .desktop-col-11 {\n      grid-column: span 11;\n    }\n\n    .desktop-col-12 {\n      grid-column: span 12;\n    }\n\n    .desktop-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .desktop-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .desktop-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .desktop-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .desktop-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .desktop-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .desktop-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .desktop-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .desktop-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .desktop-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .desktop-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .desktop-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-desktop-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-desktop-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-desktop-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-desktop-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-desktop-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-desktop-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-desktop-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-desktop-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-desktop-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-desktop-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-desktop-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .desktop-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .desktop-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .desktop-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .desktop-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .desktop-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .desktop-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .desktop-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .desktop-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .desktop-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .desktop-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .desktop-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-desktop-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-desktop-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-desktop-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-desktop-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-desktop-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-desktop-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-desktop-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-desktop-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-desktop-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-desktop-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1366px) {\n    .wide-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .wide-col-1 {\n      grid-column: span 1;\n    }\n\n    .wide-col-2 {\n      grid-column: span 2;\n    }\n\n    .wide-col-3 {\n      grid-column: span 3;\n    }\n\n    .wide-col-4 {\n      grid-column: span 4;\n    }\n\n    .wide-col-5 {\n      grid-column: span 5;\n    }\n\n    .wide-col-6 {\n      grid-column: span 6;\n    }\n\n    .wide-col-7 {\n      grid-column: span 7;\n    }\n\n    .wide-col-8 {\n      grid-column: span 8;\n    }\n\n    .wide-col-9 {\n      grid-column: span 9;\n    }\n\n    .wide-col-10 {\n      grid-column: span 10;\n    }\n\n    .wide-col-11 {\n      grid-column: span 11;\n    }\n\n    .wide-col-12 {\n      grid-column: span 12;\n    }\n\n    .wide-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .wide-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .wide-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .wide-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .wide-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .wide-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .wide-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .wide-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .wide-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .wide-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .wide-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .wide-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-wide-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-wide-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-wide-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-wide-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-wide-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-wide-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-wide-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-wide-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-wide-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-wide-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-wide-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .wide-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .wide-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .wide-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .wide-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .wide-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .wide-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .wide-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .wide-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .wide-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .wide-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .wide-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-wide-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-wide-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-wide-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-wide-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-wide-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-wide-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-wide-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-wide-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-wide-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-wide-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n}\n\n/* Default size: big. Default color variant: primary01 */\n.z-fab {\n  --z-fab-right-offset: var(--grid-margin);\n  --z-fab-bottom-offset: var(--grid-margin);\n  --z-fab-icon-size: 20px;\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  position: fixed;\n  z-index: 1;\n  right: var(--z-fab-right-offset);\n  bottom: var(--z-fab-bottom-offset);\n  display: flex;\n  max-width: 48px;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 14px;\n  background-color: var(--color-primary01);\n  border-radius: 24px;\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: 0;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.25;\n  transition: all 0.2s ease-in-out;\n}\n\n.z-fab:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nbutton.z-fab {\n  border: none;\n}\n\na.z-fab {\n  text-decoration: none;\n}\n\n.z-fab.z-fab-small {\n  --z-fab-icon-size: 18px;\n\n  max-width: 42px;\n  padding: 12px;\n  border-radius: 21px;\n  font-size: var(--font-size-2);\n  line-height: 1.285;\n}\n\n.z-fab.z-fab-x-small {\n  --z-fab-icon-size: 16px;\n\n  max-width: 36px;\n  padding: 10px;\n  border-radius: 18px;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n}\n\n.z-fab.z-fab-extended {\n  max-width: 100%;\n  column-gap: var(--space-unit);\n}\n\n.z-fab.z-fab-extended.z-fab-x-small {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n.z-fab.z-fab-extended > *:not(z-icon) {\n  opacity: 1;\n}\n\n/* color variants */\n.z-fab.z-fab-primary03 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-primary03);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface01 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-surface01);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface02 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-background);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface04 {\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  background-color: var(--color-surface04);\n  color: var(--color-text-inverse);\n}\n\n.z-fab z-icon {\n  --z-icon-width: var(--z-fab-icon-size);\n  --z-icon-height: var(--z-fab-icon-size);\n\n  fill: var(--z-fab-icon-fill);\n}\n\n.z-fab > *:not(z-icon) {\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.z-fab.z-fab-extended > *:not(z-icon:first-child) {\n  opacity: 1;\n}\n\n@media (hover: hover) {\n  .z-fab.z-fab-extendable:hover {\n    max-width: 100%;\n    column-gap: var(--space-unit);\n  }\n\n  .z-fab.z-fab-extendable:hover > *:not(z-icon:first-child) {\n    opacity: 1;\n  }\n\n  .z-fab.z-fab-x-small.z-fab-extendable:hover {\n    column-gap: calc(var(--space-unit) / 2);\n  }\n}\n\n.z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n\nbutton.z-link {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n  display: inline-flex;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  line-height: inherit;\n  text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n  --z-icon-width: 1.125em;\n  --z-icon-height: 1.125em;\n\n  align-items: center;\n  column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n  font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n  text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n  box-shadow: none;\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  outline: none;\n  pointer-events: none;\n  text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n  color: var(--color-text-link-default);\n  fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n  color: var(--color-text-link-blue);\n  fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n  color: var(--color-text-link-red);\n  fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n  color: var(--color-text-link-blue-hover);\n  fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n  color: var(--color-text-link-red-hover);\n  fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n  color: var(--color-text-link-blue-active);\n  fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n  color: var(--color-text-link-red-active);\n  fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n  color: var(--color-text-link-blue-visited);\n  fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n  color: var(--color-text-link-red-visited);\n  fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\n/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n\n\n\n:root,\n.theme-default {\n  --color-background: var(--gray50);\n  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);\n\n  /* primary */\n  --color-active-primary: var(--blue400);\n  --color-hover-primary: var(--blue800);\n  --color-pressed-primary: var(--blue400);\n  --color-primary01: var(--blue500);\n  --color-primary02: var(--blue25);\n  --color-primary03: var(--blue50);\n\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n  --color-button-secondary: var(--color-surface01);\n\n  /* surface */\n  --color-surface01: var(--color-white);\n  --color-surface02: var(--gray100);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray700);\n  --color-surface05: var(--gray900);\n\n  /* text */\n  --color-default-text: var(--gray900);\n  --color-hover-text: var(--gray800);\n  --color-pressed-text: var(--gray700);\n  --color-text-inverse: var(--color-white);\n  --color-text02: var(--gray100);\n  --color-text03: var(--gray300);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray300);\n  --color-disabled02: var(--gray100);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--blue400);\n  --color-default-icon: var(--gray900);\n  --color-disabled01-icon: var(--gray300);\n  --color-disabled02-icon: var(--gray100);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--color-black);\n  --color-hover-primary-icon: var(--blue800);\n  --color-inverse-icon: var(--color-white);\n  --color-pressed-icon: var(--gray700);\n  --color-primary01-icon: var(--blue500);\n\n  /* alert */\n  --color-default-error: var(--red500);\n  --color-default-success: var(--green500);\n  --color-default-warning: var(--yellow500);\n  --color-hover-error: var(--red800);\n  --color-hover-success: var(--green800);\n  --color-hover-warning: var(--yellow800);\n  --color-inverse-error: var(--red50);\n  --color-inverse-hover-error: var(--red500);\n  --color-inverse-hover-success: var(--green500);\n  --color-inverse-hover-warning: var(--yellow500);\n  --color-inverse-success: var(--green50);\n  --color-inverse-warning: var(--yellow50);\n\n  /* forms */\n  --color-form-active-primary: var(--blue400);\n  --color-form-background: var(--color-white);\n  --color-form-default-icon: var(--gray900);\n  --color-form-default-text: var(--gray900);\n  --color-form-disabled-text: var(--gray500);\n  --color-form-disabled01-icon: var(--gray500);\n  --color-form-disabled03: var(--gray500);\n  --color-form-hover-error: var(--red800);\n  --color-form-hover-primary: var(--blue800);\n  --color-form-hover-success: var(--green800);\n  --color-form-hover-warning: var(--yellow800);\n  --color-form-inverse-error: var(--red50);\n  --color-form-inverse-success: var(--green50);\n  --color-form-inverse-warning: var(--yellow50);\n  --color-form-placeholder-text: var(--gray600);\n  --color-form-success01: var(--green500);\n  --color-form-surface03: var(--gray200);\n  --color-form-surface04: var(--gray600);\n  --color-form-warning01: var(--yellow500);\n\n  /* links */\n  --color-text-link-blue: var(--blue500);\n  --color-text-link-blue-hover: var(--blue800);\n  --color-text-link-blue-active: var(--blue800);\n  --color-text-link-blue-visited: var(--blue800);\n  --color-text-link-blue-pressed: var(--blue400);\n  --color-text-link-red: var(--red500);\n  --color-text-link-red-hover: var(--red800);\n  --color-text-link-red-active: var(--red800);\n  --color-text-link-red-visited: var(--red800);\n  --color-text-link-red-pressed: var(--red400);\n  --color-text-link-inverse: var(--color-white);\n  --color-text-link-default: var(--gray900);\n}\n\n.theme-black {\n  /* primary */\n  --color-active-primary: var(--gray600);\n  --color-hover-primary: var(--gray700);\n  --color-pressed-primary: var(--gray600);\n  --color-primary01: var(--gray950);\n  --color-primary02: var(--gray100);\n  --color-primary03: var(--gray200);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray700);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray800);\n  --color-secondary02: var(--gray800);\n  --color-secondary03: var(--gray100);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray600);\n  --color-hover-primary-icon: var(--gray700);\n  --color-primary01-icon: var(--gray950);\n\n  /* forms */\n  --color-form-active-primary: var(--gray600);\n  --color-form-hover-primary: var(--gray700);\n}\n\n/* --- Black theme variants --- Use them in combination with `theme-black` css class: `<div class=\"theme-black theme-black--red\">` */\n\n.theme-black.theme-black--red {\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n}\n\n.theme-black.theme-black--yellow {\n  /* secondary */\n  --color-active-secondary: var(--yellow400);\n  --color-hover-secondary: var(--yellow800);\n  --color-pressed-secondary: var(--yellow400);\n  --color-secondary01: var(--yellow500);\n  --color-secondary02: var(--yellow25);\n  --color-secondary03: var(--yellow50);\n}\n\n.theme-dark {\n  --color-background: var(--gray900);\n  --shadow-focus-primary: 0 0 0 2px var(--gray900), 0 0 2px 5px var(--blue25);\n\n  /* primary */\n  --color-active-primary: var(--gray25);\n  --color-hover-primary: var(--gray100);\n  --color-pressed-primary: var(--gray25);\n  --color-primary01: var(--color-white);\n  --color-primary02: var(--gray800);\n  --color-primary03: var(--gray700);\n\n  /* secondary */\n  --color-hover-secondary: var(--red200);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red900);\n  --color-secondary03: var(--red800);\n  --color-button-secondary: transparent;\n\n  /* surface */\n  --color-surface01: var(--gray900);\n  --color-surface02: var(--gray700);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray100);\n  --color-surface05: var(--color-white);\n\n  /* text */\n  --color-default-text: var(--gray100);\n  --color-hover-text: var(--gray300);\n  --color-pressed-text: var(--gray300);\n  --color-text-inverse: var(--gray900);\n  --color-text02: var(--gray900);\n  --color-text03: var(--gray700);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray700);\n  --color-disabled02: var(--gray900);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray300);\n  --color-default-icon: var(--gray100);\n  --color-disabled01-icon: var(--gray700);\n  --color-disabled02-icon: var(--gray900);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--gray300);\n  --color-hover-primary-icon: var(--gray300);\n  --color-inverse-icon: var(--gray900);\n  --color-pressed-icon: var(--gray300);\n  --color-primary01-icon: var(--color-white);\n\n  /* alert */\n  --color-default-error: var(--red200);\n  --color-default-success: var(--green200);\n  --color-default-warning: var(--yellow200);\n  --color-hover-error: var(--red50);\n  --color-hover-success: var(--green50);\n  --color-hover-warning: var(--yellow50);\n  --color-inverse-error: var(--red800);\n  --color-inverse-hover-error: var(--red200);\n  --color-inverse-hover-success: var(--green200);\n  --color-inverse-hover-warning: var(--yellow200);\n  --color-inverse-success: var(--green800);\n  --color-inverse-warning: var(--yellow800);\n\n  /* forms */\n  --color-form-active-primary: var(--gray800);\n  --color-form-hover-primary: var(--gray800);\n\n  /* links */\n  --color-text-link-blue-active: var(--color-white);\n  --color-text-link-blue-hover: var(--color-white);\n  --color-text-link-blue-pressed: var(--color-white);\n  --color-text-link-blue-visited: var(--color-white);\n  --color-text-link-blue: var(--color-white);\n  --color-text-link-default: var(--color-white);\n  --color-text-link-inverse: var(--gray900);\n  --color-text-link-red-active: var(--color-white);\n  --color-text-link-red-hover: var(--color-white);\n  --color-text-link-red-pressed: var(--color-white);\n  --color-text-link-red-visited: var(--color-white);\n  --color-text-link-red: var(--color-white);\n}\n\n.theme-red {\n  /* primary */\n  --color-active-primary: var(--red400);\n  --color-hover-primary: var(--red800);\n  --color-pressed-primary: var(--red400);\n  --color-primary01: var(--red500);\n  --color-primary02: var(--red25);\n  --color-primary03: var(--red50);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray800);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray500);\n  --color-secondary02: var(--gray25);\n  --color-secondary03: var(--gray50);\n\n  /* icons */\n  --color-active-primary-icon: var(--red400);\n  --color-hover-primary-icon: var(--red800);\n  --color-primary01-icon: var(--red500);\n\n  /* forms */\n  --color-form-active-primary: var(--red400);\n  --color-form-hover-primary: var(--red800);\n}\n\n\n/* Styles for stacked z-accordions */\n\nz-accordion + z-accordion {\n  border-top: none;\n}\n\n/* all z-accordions with some sibling z-accordion */\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content)::before {\n  border-radius: 0;\n}\n\n/* first z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(content),\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(content)::before {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* last z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(content)::before {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n";
+const globalStyles = "@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n@import url(\"https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap\");\n:root {\n  --gray950: #121212;\n  --gray900: #292929;\n  --gray800: #3d3d3d;\n  --gray700: #525252;\n  --gray600: #666;\n  --gray500: #9b9b9b;\n  --gray400: #adadad;\n  --gray300: #c2c2c2;\n  --gray200: #d6d6d6;\n  --gray100: #ebebeb;\n  --gray50: #f6f6f6;\n  --gray25: #fafafa;\n}\n\n:root {\n  --blue950: #001229;\n  --blue900: #001f46;\n  --blue800: #002c63;\n  --blue700: #003981;\n  --blue600: #0047a0;\n  --blue500: #0056c1;\n  --blue400: #2e76ce;\n  --blue300: #5893db;\n  --blue200: #82b0e7;\n  --blue100: #accdf3;\n  --blue50: #d6eaff;\n  --blue25: #ebf5ff;\n}\n\n:root {\n  --green950: #19200a;\n  --green900: #22330a;\n  --green800: #2b4808;\n  --green700: #355d06;\n  --green600: #407305;\n  --green500: #568818;\n  --green400: #6f9d2f;\n  --green300: #8ab14a;\n  --green200: #a6c66b;\n  --green100: #c3da92;\n  --green50: #effce0;\n  --green25: #f5fdec;\n}\n\n:root {\n  --yellow950: #33280f;\n  --yellow900: #5c4615;\n  --yellow800: #85641a;\n  --yellow700: #ab8125;\n  --yellow600: #d09e30;\n  --yellow500: #f6bb3b;\n  --yellow400: #f9c852;\n  --yellow300: #fbd468;\n  --yellow200: #fee17f;\n  --yellow150: #ffde72;\n  --yellow100: #ffea91;\n  --yellow50: #fbf4e6;\n  --yellow25: #fcf7ed;\n}\n\n:root {\n  --red950: #2a0005;\n  --red900: #4c0009;\n  --red800: #6f000d;\n  --red700: #940111;\n  --red600: #ba0115;\n  --red500: #e4011c;\n  --red400: #ec5163;\n  --red300: #f07a88;\n  --red200: #f49fa9;\n  --red100: #f8bfc4;\n  --red50: #fdeeed;\n  --red25: #fef6f6;\n}\n\n:root {\n  --avatar-C01: #99005b;\n  --avatar-C02: #b01300;\n  --avatar-C03: #e62200;\n  --avatar-C04: #7c4000;\n  --avatar-C05: #c25600;\n  --avatar-C06: #6e6d6d;\n  --avatar-C07: #667d00;\n  --avatar-C08: #008741;\n  --avatar-C09: #00612f;\n  --avatar-C10: #007d8a;\n  --avatar-C11: #007db3;\n  --avatar-C12: #00548c;\n  --avatar-C13: #0028b1;\n  --avatar-C14: #00019c;\n  --avatar-C15: #6400ee;\n  --avatar-C16: #5f3fff;\n  --avatar-C17: #8b00a5;\n  --avatar-C18: #b200ff;\n  --avatar-C19: #c700d6;\n}\n\n:root {\n  --subject-art: #7b7b06;\n  --subject-art_image: #7b7b06;\n  --subject-biology: #438454;\n  --subject-chemistry: #ba5191;\n  --subject-civics: #000080;\n  --subject-communication: #1777d5;\n  --subject-computer_science: #10893e;\n  --subject-earth_science: #8d3eb2;\n  --subject-economic: #004080;\n  --subject-english: #c25353;\n  --subject-food_science: #38846b;\n  --subject-french: #c25353;\n  --subject-geography: #378092;\n  --subject-german: #c25353;\n  --subject-grammar: #be5926;\n  --subject-graphic: #8e7406;\n  --subject-greek: #37818a;\n  --subject-history: #8b572a;\n  --subject-law: #b90000;\n  --subject-latin: #8b4513;\n  --subject-math: #266997;\n  --subject-natural_science: #318473;\n  --subject-philosophy: #5a189a;\n  --subject-physics: #4a7ba4;\n  --subject-science_middle_school: #3a7922;\n  --subject-spanish: #c25353;\n  --subject-technology: #138473;\n  --subject-topography: #ac6604;\n  --subject-technique: #752771;\n}\n\n\n\n:root {\n  --color-black: #000;\n  --color-white: #fff;\n}\n\n:root {\n  /* font-family */\n  --font-family-sans: \"IBM Plex Sans\", sans-serif;\n  --font-family-serif: \"IBM Plex Serif\", serif;\n\n  /* font-weight */\n  --font-lt: 300;\n  --font-rg: 400;\n  --font-sb: 600;\n  --font-bd: 700;\n\n  /* font-size type scale */\n  --font-size-1: 0.75rem; /* 12px */\n  --font-size-2: 0.875rem; /* 14px */\n  --font-size-3: 1rem; /* assuming 16px */\n  --font-size-4: 1.125rem; /* 18px */\n  --font-size-5: 1.25rem; /* 20px */\n  --font-size-6: 1.5rem; /* 24px */\n  --font-size-7: 1.75rem; /* 28px */\n  --font-size-8: 2rem; /* 32px */\n  --font-size-9: 2.25rem; /* 36px */\n  --font-size-10: 2.625rem; /* 42px */\n  --font-size-11: 3rem; /* 48px */\n  --font-size-12: 3.375rem; /* 54px */\n  --font-size-13: 3.75rem; /* 60px */\n  --font-size-14: 4.25rem; /* 68px */\n  --font-size-15: 4.75rem; /* 76px */\n  --font-size-16: 5.25rem; /* 84px */\n  --font-size-17: 5.75rem; /* 92px */\n\n  /* cssprops to use with `font` shorthand property */\n  --section-title-1: var(--font-sb) var(--font-size-11) / 1.083 var(--font-family-serif);\n  --section-title-2: var(--font-sb) var(--font-size-10) / 1.142 var(--font-family-serif);\n  --section-title-3: var(--font-sb) var(--font-size-9) / 1.222 var(--font-family-serif);\n  --section-title-4: var(--font-sb) var(--font-size-8) / 1.25 var(--font-family-serif);\n  --section-title-5: var(--font-sb) var(--font-size-7) / 1.2857 var(--font-family-serif);\n  --section-title-6: var(--font-sb) var(--font-size-6) / 1.333 var(--font-family-serif);\n}\n\n/* Typography classes */\n.heading-1,\n.heading-1-sb,\n.heading-1-lt {\n  font-size: var(--font-size-7);\n  font-weight: var(--font-rg);\n  line-height: 1.28;\n}\n\n.heading-2,\n.heading-2-sb,\n.heading-2-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-3,\n.heading-3-sb,\n.heading-3-lt {\n  font-size: var(--font-size-6);\n  font-weight: var(--font-rg);\n  line-height: 1.333;\n}\n\n.heading-4,\n.heading-4-sb,\n.heading-4-lt {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-1,\n.body-1-sb {\n  font-size: var(--font-size-5);\n  font-weight: var(--font-rg);\n  line-height: 1.4;\n}\n\n.body-2,\n.body-2-sb {\n  font-size: var(--font-size-4);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-3,\n.body-3-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.body-4,\n.body-4-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.body-5,\n.body-5-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.interactive-1,\n.interactive-1-sb {\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.5;\n}\n\n.interactive-2,\n.interactive-2-sb {\n  font-size: var(--font-size-2);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.16px;\n  line-height: 1.4;\n}\n\n.interactive-3,\n.interactive-3-sb {\n  font-size: var(--font-size-1);\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n.helper,\n.helper-sb {\n  font-size: var(--font-size-1);\n  font-style: italic;\n  font-weight: var(--font-rg);\n  letter-spacing: 0.32px;\n  line-height: 1.333;\n}\n\n/* section title */\n.section-title-1 {\n  font: var(--section-title-1);\n}\n\n.section-title-2 {\n  font: var(--section-title-2);\n}\n\n.section-title-3 {\n  font: var(--section-title-3);\n}\n\n.section-title-4 {\n  font: var(--section-title-4);\n}\n\n.section-title-5 {\n  font: var(--section-title-5);\n}\n\n.section-title-6 {\n  font: var(--section-title-6);\n}\n\n/* heading-1/2 for desktop and wide viewports */\n@media (min-width: 1152px) {\n  .heading-1,\n  .heading-1-sb,\n  .heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .heading-2,\n  .heading-2-sb,\n  .heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n}\n\n/* viewport classes */\n@media (max-width: 767px) {\n  .mobile-heading-1,\n  .mobile-heading-1-sb,\n  .mobile-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .mobile-heading-2,\n  .mobile-heading-2-sb,\n  .mobile-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-3,\n  .mobile-heading-3-sb,\n  .mobile-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .mobile-heading-4,\n  .mobile-heading-4-sb,\n  .mobile-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-1,\n  .mobile-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .mobile-body-2,\n  .mobile-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-3,\n  .mobile-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-body-4,\n  .mobile-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-body-5,\n  .mobile-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-interactive-1,\n  .mobile-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .mobile-interactive-2,\n  .mobile-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .mobile-interactive-3,\n  .mobile-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .mobile-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .mobile-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .mobile-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .mobile-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .mobile-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .mobile-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .mobile-heading-1-lt,\n  .mobile-heading-2-lt,\n  .mobile-heading-3-lt,\n  .mobile-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .mobile-heading-1-sb,\n  .mobile-heading-2-sb,\n  .mobile-heading-3-sb,\n  .mobile-heading-4-sb,\n  .mobile-body-1-sb,\n  .mobile-body-2-sb,\n  .mobile-body-3-sb,\n  .mobile-body-4-sb,\n  .mobile-body-5-sb,\n  .mobile-interactive-1-sb,\n  .mobile-interactive-2-sb,\n  .mobile-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  .tablet-heading-1,\n  .tablet-heading-1-sb,\n  .tablet-heading-1-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .tablet-heading-2,\n  .tablet-heading-2-sb,\n  .tablet-heading-2-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-3,\n  .tablet-heading-3-sb,\n  .tablet-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .tablet-heading-4,\n  .tablet-heading-4-sb,\n  .tablet-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-1,\n  .tablet-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .tablet-body-2,\n  .tablet-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-3,\n  .tablet-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-body-4,\n  .tablet-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-body-5,\n  .tablet-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-interactive-1,\n  .tablet-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .tablet-interactive-2,\n  .tablet-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .tablet-interactive-3,\n  .tablet-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .tablet-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .tablet-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .tablet-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .tablet-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .tablet-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .tablet-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .tablet-heading-1-lt,\n  .tablet-heading-2-lt,\n  .tablet-heading-3-lt,\n  .tablet-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .tablet-heading-1-sb,\n  .tablet-heading-2-sb,\n  .tablet-heading-3-sb,\n  .tablet-heading-4-sb,\n  .tablet-body-1-sb,\n  .tablet-body-2-sb,\n  .tablet-body-3-sb,\n  .tablet-body-4-sb,\n  .tablet-body-5-sb,\n  .tablet-interactive-1-sb,\n  .tablet-interactive-2-sb,\n  .tablet-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  .desktop-heading-1,\n  .desktop-heading-1-sb,\n  .desktop-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .desktop-heading-2,\n  .desktop-heading-2-sb,\n  .desktop-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .desktop-heading-3,\n  .desktop-heading-3-sb,\n  .desktop-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .desktop-heading-4,\n  .desktop-heading-4-sb,\n  .desktop-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-1,\n  .desktop-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .desktop-body-2,\n  .desktop-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-3,\n  .desktop-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-body-4,\n  .desktop-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-body-5,\n  .desktop-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-interactive-1,\n  .desktop-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .desktop-interactive-2,\n  .desktop-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .desktop-interactive-3,\n  .desktop-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .desktop-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .desktop-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .desktop-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .desktop-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .desktop-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .desktop-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .desktop-heading-1-lt,\n  .desktop-heading-2-lt,\n  .desktop-heading-3-lt,\n  .desktop-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .desktop-heading-1-sb,\n  .desktop-heading-2-sb,\n  .desktop-heading-3-sb,\n  .desktop-heading-4-sb,\n  .desktop-body-1-sb,\n  .desktop-body-2-sb,\n  .desktop-body-3-sb,\n  .desktop-body-4-sb,\n  .desktop-body-5-sb,\n  .desktop-interactive-1-sb,\n  .desktop-interactive-2-sb,\n  .desktop-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n@media (min-width: 1366px) {\n  .wide-heading-1,\n  .wide-heading-1-sb,\n  .wide-heading-1-lt {\n    font-size: var(--font-size-8);\n    font-weight: var(--font-rg);\n    line-height: 1.25;\n  }\n\n  .wide-heading-2,\n  .wide-heading-2-sb,\n  .wide-heading-2-lt {\n    font-size: var(--font-size-7);\n    font-weight: var(--font-rg);\n    line-height: 1.28;\n  }\n\n  .wide-heading-3,\n  .wide-heading-3-sb,\n  .wide-heading-3-lt {\n    font-size: var(--font-size-6);\n    font-weight: var(--font-rg);\n    line-height: 1.333;\n  }\n\n  .wide-heading-4,\n  .wide-heading-4-sb,\n  .wide-heading-4-lt {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-1,\n  .wide-body-1-sb {\n    font-size: var(--font-size-5);\n    font-weight: var(--font-rg);\n    line-height: 1.4;\n  }\n\n  .wide-body-2,\n  .wide-body-2-sb {\n    font-size: var(--font-size-4);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-3,\n  .wide-body-3-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-body-4,\n  .wide-body-4-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-body-5,\n  .wide-body-5-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-interactive-1,\n  .wide-interactive-1-sb {\n    font-size: var(--font-size-3);\n    font-weight: var(--font-rg);\n    line-height: 1.5;\n  }\n\n  .wide-interactive-2,\n  .wide-interactive-2-sb {\n    font-size: var(--font-size-2);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.16px;\n    line-height: 1.4;\n  }\n\n  .wide-interactive-3,\n  .wide-interactive-3-sb {\n    font-size: var(--font-size-1);\n    font-weight: var(--font-rg);\n    letter-spacing: 0.32px;\n    line-height: 1.333;\n  }\n\n  .wide-section-title-1 {\n    font: var(--section-title-1);\n  }\n\n  .wide-section-title-2 {\n    font: var(--section-title-2);\n  }\n\n  .wide-section-title-3 {\n    font: var(--section-title-3);\n  }\n\n  .wide-section-title-4 {\n    font: var(--section-title-4);\n  }\n\n  .wide-section-title-5 {\n    font: var(--section-title-5);\n  }\n\n  .wide-section-title-6 {\n    font: var(--section-title-6);\n  }\n\n  .wide-heading-1-lt,\n  .wide-heading-2-lt,\n  .wide-heading-3-lt,\n  .wide-heading-4-lt {\n    font-weight: var(--font-lt);\n  }\n\n  .wide-heading-1-sb,\n  .wide-heading-2-sb,\n  .wide-heading-3-sb,\n  .wide-heading-4-sb,\n  .wide-body-1-sb,\n  .wide-body-2-sb,\n  .wide-body-3-sb,\n  .wide-body-4-sb,\n  .wide-body-5-sb,\n  .wide-interactive-1-sb,\n  .wide-interactive-2-sb,\n  .wide-interactive-3-sb {\n    font-weight: var(--font-sb);\n  }\n}\n\n/* font-weight variants */\n.heading-1-lt,\n.heading-2-lt,\n.heading-3-lt,\n.heading-4-lt {\n  font-weight: var(--font-lt);\n}\n\n.heading-1-sb,\n.heading-2-sb,\n.heading-3-sb,\n.heading-4-sb,\n.body-1-sb,\n.body-2-sb,\n.body-3-sb,\n.body-4-sb,\n.body-5-sb,\n.interactive-1-sb,\n.interactive-2-sb,\n.interactive-3-sb,\n.helper-sb {\n  font-weight: var(--font-sb);\n}\n\n:root {\n  --space-unit: 8px;\n}\n\n:root {\n  --shadow-color-base: rgb(61 61 61 / 35%);\n  --shadow-inset-2: inset 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-inset-4: inset 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-0: 0 0 0 0 var(--shadow-color-base);\n  --shadow-1: 0 1px 2px 0 var(--shadow-color-base);\n  --shadow-2: 0 2px 4px 0 var(--shadow-color-base);\n  --shadow-3: 0 3px 6px 0 var(--shadow-color-base);\n  --shadow-4: 0 4px 8px 0 var(--shadow-color-base);\n  --shadow-6: 0 6px 12px 0 var(--shadow-color-base);\n  --shadow-8: 0 8px 16px 0 var(--shadow-color-base);\n  --shadow-12: 0 12px 24px 0 var(--shadow-color-base);\n  --shadow-16: 0 16px 32px 0 var(--shadow-color-base);\n  --shadow-24: 0 24px 48px 0 var(--shadow-color-base);\n}\n\n:root {\n  --border-no-radius: 0;\n  --border-size-small: 1px;\n  --border-size-medium: 2px;\n  --border-size-large: 4px;\n  --border-radius-small: 2px;\n  --border-radius: 4px;\n}\n\n:root {\n  --grid-mobile-viewport: 768px;\n  --grid-mobile-column: 4;\n  --grid-mobile-margin: 16px;\n  --grid-mobile-gutter: 16px;\n  --grid-tablet-viewport: 768px;\n  --grid-tablet-column: 8;\n  --grid-tablet-margin: 24px;\n  --grid-tablet-gutter: 24px;\n  --grid-desktop-viewport: 1152px;\n  --grid-desktop-column: 12;\n  --grid-desktop-margin: 24px;\n  --grid-desktop-gutter: 24px;\n  --grid-wide-viewport: 1366px;\n  --grid-wide-column: 12;\n  --grid-wide-margin: 32px;\n  --grid-wide-gutter: 32px;\n  --page-max-width: 1366px;\n\n  /* These variables automatically adapt to the viewport size,\n    that apps don't have to worry about updating the value manually. */\n  --grid-margin: var(--grid-mobile-margin);\n  --grid-gutter: var(--grid-mobile-gutter);\n  --grid-columns: var(--grid-mobile-column);\n}\n\n@media (min-width: 768px) and (max-width: 1151px) {\n  :root {\n    --grid-margin: var(--grid-tablet-margin);\n    --grid-gutter: var(--grid-tablet-gutter);\n    --grid-columns: var(--grid-tablet-column);\n  }\n}\n\n@media (min-width: 1152px) and (max-width: 1365px) {\n  :root {\n    --grid-margin: var(--grid-desktop-margin);\n    --grid-gutter: var(--grid-desktop-gutter);\n    --grid-columns: var(--grid-desktop-column);\n  }\n}\n\n@media (min-width: 1366px) {\n  :root {\n    --grid-margin: var(--grid-wide-margin);\n    --grid-gutter: var(--grid-wide-gutter);\n    --grid-columns: var(--grid-wide-column);\n  }\n}\n\n.z-grid {\n  display: grid;\n  width: 100%;\n  column-gap: var(--grid-gutter);\n  grid-template-columns: repeat(var(--grid-columns), 1fr);\n\n  .col-full {\n    grid-column: 1 / -1;\n  }\n\n  .col-1 {\n    grid-column: span 1;\n  }\n\n  .col-2 {\n    grid-column: span 2;\n  }\n\n  .col-3 {\n    grid-column: span 3;\n  }\n\n  .col-4,\n  .col-5,\n  .col-6,\n  .col-7,\n  .col-8,\n  .col-9,\n  .col-10,\n  .col-11,\n  .col-12 {\n    grid-column: span 4;\n  }\n\n  .col-start-1 {\n    grid-column-start: 1;\n  }\n\n  .col-start-2 {\n    grid-column-start: 2;\n  }\n\n  .col-start-3 {\n    grid-column-start: 3;\n  }\n\n  .col-start-4,\n  .col-start-5,\n  .col-start-6,\n  .col-start-7,\n  .col-start-8,\n  .col-start-9,\n  .col-start-10,\n  .col-start-11,\n  .col-start-12 {\n    grid-column-start: 4;\n  }\n\n  /*\n  .-col-start-1 is intentionally left out\n*/\n\n  .-col-start-2 {\n    grid-column-start: -2;\n  }\n\n  .-col-start-3 {\n    grid-column-start: -3;\n  }\n\n  .-col-start-4 {\n    grid-column-start: -4;\n  }\n\n  .-col-start-5,\n  .-col-start-6,\n  .-col-start-7,\n  .-col-start-8,\n  .-col-start-9,\n  .-col-start-10,\n  .-col-start-11,\n  .-col-start-12,\n  .-col-start-13 {\n    grid-column-start: -5;\n  }\n\n  .col-end-last {\n    grid-column-end: -1;\n  }\n\n  /*\n  .col-end-1 is intentionally left out\n*/\n\n  .col-end-2 {\n    grid-column-end: 2;\n  }\n\n  .col-end-3 {\n    grid-column-end: 3;\n  }\n\n  .col-end-4 {\n    grid-column-end: 4;\n  }\n\n  /*\n  This means \"end this column where column 5 start\",\n  which is the same as saying \"end this column where column 4 end\"\n*/\n  .col-end-5,\n  .col-end-6,\n  .col-end-7,\n  .col-end-8,\n  .col-end-9,\n  .col-end-10,\n  .col-end-11,\n  .col-end-12,\n  .col-end-13 {\n    grid-column-end: 5;\n  }\n\n  .-col-end-1 {\n    grid-column-end: -1;\n  }\n\n  .-col-end-2 {\n    grid-column-end: -2;\n  }\n\n  .-col-end-3 {\n    grid-column-end: -3;\n  }\n\n  .-col-end-4,\n  .-col-end-5,\n  .-col-end-6,\n  .-col-end-7,\n  .-col-end-8,\n  .-col-end-9,\n  .-col-end-10,\n  .-col-end-11,\n  .-col-end-12 {\n    grid-column-end: -4;\n  }\n\n  @media (max-width: 767px) {\n    .mobile-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .mobile-col-1 {\n      grid-column: span 1;\n    }\n\n    .mobile-col-2 {\n      grid-column: span 2;\n    }\n\n    .mobile-col-3 {\n      grid-column: span 3;\n    }\n\n    .mobile-col-4 {\n      grid-column: span 4;\n    }\n  }\n\n  @media (min-width: 768px) {\n    .col-5 {\n      grid-column: span 5;\n    }\n\n    .col-6 {\n      grid-column: span 6;\n    }\n\n    .col-7 {\n      grid-column: span 7;\n    }\n\n    .col-8,\n    .col-9,\n    .col-10,\n    .col-11,\n    .col-12 {\n      grid-column: span 8;\n    }\n\n    .col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .col-start-8,\n    .col-start-9,\n    .col-start-10,\n    .col-start-11,\n    .col-start-12 {\n      grid-column-start: 8;\n    }\n\n    .-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-col-start-9,\n    .-col-start-10,\n    .-col-start-11,\n    .-col-start-12,\n    .-col-start-13 {\n      grid-column-start: -9;\n    }\n\n    .col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .col-end-9,\n    .col-end-10,\n    .col-end-11,\n    .col-end-12,\n    .col-end-13 {\n      grid-column-end: 9;\n    }\n\n    .-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-col-end-8,\n    .-col-end-9,\n    .-col-end-10,\n    .-col-end-11,\n    .-col-end-12 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 768px) and (max-width: 1151px) {\n    .tablet-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .tablet-col-1 {\n      grid-column: span 1;\n    }\n\n    .tablet-col-2 {\n      grid-column: span 2;\n    }\n\n    .tablet-col-3 {\n      grid-column: span 3;\n    }\n\n    .tablet-col-4 {\n      grid-column: span 4;\n    }\n\n    .tablet-col-5 {\n      grid-column: span 5;\n    }\n\n    .tablet-col-6 {\n      grid-column: span 6;\n    }\n\n    .tablet-col-7 {\n      grid-column: span 7;\n    }\n\n    .tablet-col-8 {\n      grid-column: span 8;\n    }\n\n    .tablet-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .tablet-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .tablet-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .tablet-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .tablet-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .tablet-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .tablet-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .tablet-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .-tablet-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-tablet-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-tablet-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-tablet-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-tablet-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-tablet-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-tablet-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .tablet-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .tablet-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .tablet-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .tablet-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .tablet-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .tablet-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .tablet-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-tablet-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-tablet-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-tablet-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-tablet-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-tablet-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-tablet-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-tablet-col-end-8 {\n      grid-column-end: -8;\n    }\n  }\n\n  @media (min-width: 1152px) {\n    .col-9 {\n      grid-column: span 9;\n    }\n\n    .col-10 {\n      grid-column: span 10;\n    }\n\n    .col-11 {\n      grid-column: span 11;\n    }\n\n    .col-12 {\n      grid-column: span 12;\n    }\n\n    .col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .-col-start-13 {\n      grid-column-start: -13;\n    }\n\n    .col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .col-end-13 {\n      grid-column-end: 13;\n    }\n\n    .-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1152px) and (max-width: 1365px) {\n    .desktop-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .desktop-col-1 {\n      grid-column: span 1;\n    }\n\n    .desktop-col-2 {\n      grid-column: span 2;\n    }\n\n    .desktop-col-3 {\n      grid-column: span 3;\n    }\n\n    .desktop-col-4 {\n      grid-column: span 4;\n    }\n\n    .desktop-col-5 {\n      grid-column: span 5;\n    }\n\n    .desktop-col-6 {\n      grid-column: span 6;\n    }\n\n    .desktop-col-7 {\n      grid-column: span 7;\n    }\n\n    .desktop-col-8 {\n      grid-column: span 8;\n    }\n\n    .desktop-col-9 {\n      grid-column: span 9;\n    }\n\n    .desktop-col-10 {\n      grid-column: span 10;\n    }\n\n    .desktop-col-11 {\n      grid-column: span 11;\n    }\n\n    .desktop-col-12 {\n      grid-column: span 12;\n    }\n\n    .desktop-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .desktop-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .desktop-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .desktop-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .desktop-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .desktop-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .desktop-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .desktop-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .desktop-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .desktop-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .desktop-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .desktop-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-desktop-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-desktop-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-desktop-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-desktop-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-desktop-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-desktop-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-desktop-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-desktop-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-desktop-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-desktop-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-desktop-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .desktop-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .desktop-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .desktop-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .desktop-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .desktop-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .desktop-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .desktop-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .desktop-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .desktop-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .desktop-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .desktop-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-desktop-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-desktop-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-desktop-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-desktop-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-desktop-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-desktop-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-desktop-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-desktop-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-desktop-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-desktop-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-desktop-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n\n  @media (min-width: 1366px) {\n    .wide-col-full {\n      grid-column: 1 / -1;\n    }\n\n    .wide-col-1 {\n      grid-column: span 1;\n    }\n\n    .wide-col-2 {\n      grid-column: span 2;\n    }\n\n    .wide-col-3 {\n      grid-column: span 3;\n    }\n\n    .wide-col-4 {\n      grid-column: span 4;\n    }\n\n    .wide-col-5 {\n      grid-column: span 5;\n    }\n\n    .wide-col-6 {\n      grid-column: span 6;\n    }\n\n    .wide-col-7 {\n      grid-column: span 7;\n    }\n\n    .wide-col-8 {\n      grid-column: span 8;\n    }\n\n    .wide-col-9 {\n      grid-column: span 9;\n    }\n\n    .wide-col-10 {\n      grid-column: span 10;\n    }\n\n    .wide-col-11 {\n      grid-column: span 11;\n    }\n\n    .wide-col-12 {\n      grid-column: span 12;\n    }\n\n    .wide-col-start-1 {\n      grid-column-start: 1;\n    }\n\n    .wide-col-start-2 {\n      grid-column-start: 2;\n    }\n\n    .wide-col-start-3 {\n      grid-column-start: 3;\n    }\n\n    .wide-col-start-4 {\n      grid-column-start: 4;\n    }\n\n    .wide-col-start-5 {\n      grid-column-start: 5;\n    }\n\n    .wide-col-start-6 {\n      grid-column-start: 6;\n    }\n\n    .wide-col-start-7 {\n      grid-column-start: 7;\n    }\n\n    .wide-col-start-8 {\n      grid-column-start: 8;\n    }\n\n    .wide-col-start-9 {\n      grid-column-start: 9;\n    }\n\n    .wide-col-start-10 {\n      grid-column-start: 10;\n    }\n\n    .wide-col-start-11 {\n      grid-column-start: 11;\n    }\n\n    .wide-col-start-12 {\n      grid-column-start: 12;\n    }\n\n    .-wide-col-start-2 {\n      grid-column-start: -2;\n    }\n\n    .-wide-col-start-3 {\n      grid-column-start: -3;\n    }\n\n    .-wide-col-start-4 {\n      grid-column-start: -4;\n    }\n\n    .-wide-col-start-5 {\n      grid-column-start: -5;\n    }\n\n    .-wide-col-start-6 {\n      grid-column-start: -6;\n    }\n\n    .-wide-col-start-7 {\n      grid-column-start: -7;\n    }\n\n    .-wide-col-start-8 {\n      grid-column-start: -8;\n    }\n\n    .-wide-col-start-9 {\n      grid-column-start: -9;\n    }\n\n    .-wide-col-start-10 {\n      grid-column-start: -10;\n    }\n\n    .-wide-col-start-11 {\n      grid-column-start: -11;\n    }\n\n    .-wide-col-start-12 {\n      grid-column-start: -12;\n    }\n\n    .wide-col-end-2 {\n      grid-column-end: 2;\n    }\n\n    .wide-col-end-3 {\n      grid-column-end: 3;\n    }\n\n    .wide-col-end-4 {\n      grid-column-end: 4;\n    }\n\n    .wide-col-end-6 {\n      grid-column-end: 6;\n    }\n\n    .wide-col-end-7 {\n      grid-column-end: 7;\n    }\n\n    .wide-col-end-8 {\n      grid-column-end: 8;\n    }\n\n    .wide-col-end-9 {\n      grid-column-end: 9;\n    }\n\n    .wide-col-end-10 {\n      grid-column-end: 10;\n    }\n\n    .wide-col-end-11 {\n      grid-column-end: 11;\n    }\n\n    .wide-col-end-12 {\n      grid-column-end: 12;\n    }\n\n    .wide-col-end-last {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-1 {\n      grid-column-end: -1;\n    }\n\n    .-wide-col-end-2 {\n      grid-column-end: -2;\n    }\n\n    .-wide-col-end-3 {\n      grid-column-end: -3;\n    }\n\n    .-wide-col-end-4 {\n      grid-column-end: -4;\n    }\n\n    .-wide-col-end-5 {\n      grid-column-end: -5;\n    }\n\n    .-wide-col-end-6 {\n      grid-column-end: -6;\n    }\n\n    .-wide-col-end-7 {\n      grid-column-end: -7;\n    }\n\n    .-wide-col-end-8 {\n      grid-column-end: -8;\n    }\n\n    .-wide-col-end-9 {\n      grid-column-end: -9;\n    }\n\n    .-wide-col-end-10 {\n      grid-column-end: -10;\n    }\n\n    .-wide-col-end-11 {\n      grid-column-end: -11;\n    }\n\n    .-wide-col-end-12 {\n      grid-column-end: -12;\n    }\n  }\n}\n\n/* Default size: big. Default color variant: primary01 */\n.z-fab {\n  --z-fab-right-offset: var(--grid-margin);\n  --z-fab-bottom-offset: var(--grid-margin);\n  --z-fab-icon-size: 20px;\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  position: fixed;\n  z-index: 1;\n  right: var(--z-fab-right-offset);\n  bottom: var(--z-fab-bottom-offset);\n  display: flex;\n  max-width: 48px;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 14px;\n  background-color: var(--color-primary01);\n  border-radius: 24px;\n  box-shadow: var(--shadow-4);\n  color: var(--color-text-inverse);\n  column-gap: 0;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-3);\n  font-weight: var(--font-rg);\n  line-height: 1.25;\n  transition: all 0.2s ease-in-out;\n}\n\n.z-fab:focus {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\nbutton.z-fab {\n  border: none;\n}\n\na.z-fab {\n  text-decoration: none;\n}\n\n.z-fab.z-fab-small {\n  --z-fab-icon-size: 18px;\n\n  max-width: 42px;\n  padding: 12px;\n  border-radius: 21px;\n  font-size: var(--font-size-2);\n  line-height: 1.285;\n}\n\n.z-fab.z-fab-x-small {\n  --z-fab-icon-size: 16px;\n\n  max-width: 36px;\n  padding: 10px;\n  border-radius: 18px;\n  font-size: var(--font-size-1);\n  line-height: 1.333;\n}\n\n.z-fab.z-fab-extended {\n  max-width: 100%;\n  column-gap: var(--space-unit);\n}\n\n.z-fab.z-fab-extended.z-fab-x-small {\n  column-gap: calc(var(--space-unit) / 2);\n}\n\n.z-fab.z-fab-extended > *:not(z-icon) {\n  opacity: 1;\n}\n\n/* color variants */\n.z-fab.z-fab-primary03 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-primary03);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface01 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-surface01);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface02 {\n  --z-fab-icon-fill: var(--color-primary01-icon);\n\n  background-color: var(--color-background);\n  color: var(--color-primary01-icon);\n}\n\n.z-fab.z-fab-surface04 {\n  --z-fab-icon-fill: var(--color-inverse-icon);\n\n  background-color: var(--color-surface04);\n  color: var(--color-text-inverse);\n}\n\n.z-fab z-icon {\n  --z-icon-width: var(--z-fab-icon-size);\n  --z-icon-height: var(--z-fab-icon-size);\n\n  fill: var(--z-fab-icon-fill);\n}\n\n.z-fab > *:not(z-icon) {\n  overflow: hidden;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n  white-space: nowrap;\n}\n\n.z-fab.z-fab-extended > *:not(z-icon:first-child) {\n  opacity: 1;\n}\n\n@media (hover: hover) {\n  .z-fab.z-fab-extendable:hover {\n    max-width: 100%;\n    column-gap: var(--space-unit);\n  }\n\n  .z-fab.z-fab-extendable:hover > *:not(z-icon:first-child) {\n    opacity: 1;\n  }\n\n  .z-fab.z-fab-x-small.z-fab-extendable:hover {\n    column-gap: calc(var(--space-unit) / 2);\n  }\n}\n\n.z-label {\n  display: block;\n  padding-bottom: var(--space-unit);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-size: var(--font-size-1);\n  font-weight: var(--font-sb);\n  text-align: left;\n  text-transform: uppercase;\n}\n\nbutton.z-link {\n  padding: 0;\n  border: 0;\n  margin: 0;\n  background-color: transparent;\n}\n\na.z-link,\nbutton.z-link {\n  display: inline-flex;\n  cursor: pointer;\n  font-family: var(--font-family-sans);\n  line-height: inherit;\n  text-decoration: none;\n}\n\na.z-link.z-link-icon,\nbutton.z-link.z-link-icon {\n  --z-icon-width: 1.125em;\n  --z-icon-height: 1.125em;\n\n  align-items: center;\n  column-gap: 0.5em;\n}\n\na.z-link.z-link-sb,\nbutton.z-link.z-link-sb {\n  font-weight: var(--font-sb);\n}\n\na.z-link.z-link-underline,\nbutton.z-link.z-link-underline {\n  text-decoration: underline;\n}\n\na.z-link:hover,\nbutton.z-link:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link:active,\nbutton.z-link:active {\n  text-decoration: underline;\n}\n\na.z-link:focus-visible,\nbutton.z-link:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\na.z-link.z-link-disabled,\nbutton.z-link.z-link-disabled {\n  box-shadow: none;\n  color: var(--color-disabled03);\n  cursor: default;\n  fill: var(--color-disabled03);\n  outline: none;\n  pointer-events: none;\n  text-decoration: none;\n}\n\na.z-link,\nbutton.z-link,\na.z-link.z-link-active,\nbutton.z-link.z-link-active,\na.z-link:hover,\nbutton.z-link:hover,\na.z-link.z-link-active:hover,\nbutton.z-link.z-link-active:hover,\na.z-link:focus-visible,\nbutton.z-link:focus-visible,\na.z-link.z-link-active:focus-visible,\nbutton.z-link.z-link-active:focus-visible,\na.z-link:active,\nbutton.z-link:active,\na.z-link.z-link-active:active,\nbutton.z-link.z-link-active:active,\na.z-link:visited,\nbutton.z-link:visited,\na.z-link.z-link-active:visited,\nbutton.z-link.z-link-active:visited {\n  color: var(--color-text-link-default);\n  fill: var(--color-text-link-default);\n}\n\na.z-link.z-link-blue,\nbutton.z-link.z-link-blue,\na.z-link.z-link-blue.z-link-active,\nbutton.z-link.z-link-blue.z-link-active {\n  color: var(--color-text-link-blue);\n  fill: var(--color-text-link-blue);\n}\n\na.z-link.z-link-red,\nbutton.z-link.z-link-red,\na.z-link.z-link-red.z-link-active,\nbutton.z-link.z-link-red.z-link-active {\n  color: var(--color-text-link-red);\n  fill: var(--color-text-link-red);\n}\n\na.z-link.z-link-inverse,\nbutton.z-link.z-link-inverse,\na.z-link.z-link-inverse.z-link-active,\nbutton.z-link.z-link-inverse.z-link-active {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:hover,\nbutton.z-link.z-link-blue:hover {\n  color: var(--color-text-link-blue-hover);\n  fill: var(--color-text-link-blue-hover);\n}\n\na.z-link.z-link-red:hover,\nbutton.z-link.z-link-red:hover {\n  color: var(--color-text-link-red-hover);\n  fill: var(--color-text-link-red-hover);\n}\n\na.z-link.z-link-inverse:hover,\nbutton.z-link.z-link-inverse:hover {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:active,\nbutton.z-link.z-link-blue:active,\na.z-link.z-link-blue:focus-visible,\nbutton.z-link.z-link-blue:focus-visible {\n  color: var(--color-text-link-blue-active);\n  fill: var(--color-text-link-blue-active);\n}\n\na.z-link.z-link-red:active,\nbutton.z-link.z-link-red:active,\na.z-link.z-link-red:focus-visible,\nbutton.z-link.z-link-red:focus-visible {\n  color: var(--color-text-link-red-active);\n  fill: var(--color-text-link-red-active);\n}\n\na.z-link.z-link-inverse:active,\nbutton.z-link.z-link-inverse:active,\na.z-link.z-link-inverse:focus-visible,\nbutton.z-link.z-link-inverse:focus-visible {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\na.z-link.z-link-blue:visited,\nbutton.z-link.z-link-blue:visited {\n  color: var(--color-text-link-blue-visited);\n  fill: var(--color-text-link-blue-visited);\n}\n\na.z-link.z-link-red:visited,\nbutton.z-link.z-link-red:visited {\n  color: var(--color-text-link-red-visited);\n  fill: var(--color-text-link-red-visited);\n}\n\na.z-link.z-link-inverse:visited,\nbutton.z-link.z-link-inverse:visited {\n  color: var(--color-text-link-inverse);\n  fill: var(--color-text-link-inverse);\n}\n\n/* Webkit Scrollbar */\n.z-scrollbar::-webkit-scrollbar {\n  width: 6px;\n  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb {\n  background-color: var(--color-primary01);\n}\n\n.z-scrollbar::-webkit-scrollbar-thumb:hover {\n  background-color: var(--color-hover-primary);\n}\n\n:host([theme=\"dark\"]) .z-scrollbar,\n.z-scrollbar--dark {\n  --z-scrollbar-track-gradient: linear-gradient(\n    to right,\n    transparent 0 1px,\n    var(--gray600) 1px 5px,\n    transparent 5px 6px\n  );\n  --z-scrollbar-track-color: var(--gray600);\n  --z-scrollbar-thumb-color: var(--color-primary03);\n  --z-scrollbar-thumb-hover-color: var(--color-hover-primary);\n  --z-scrollbar-corner-color: transparent;\n}\n\n/* Firefox scrollbar */\n@supports not selector(.z-scrollbar::-webkit-scrollbar-track) {\n  .z-scrollbar {\n    scrollbar-color: var(--color-primary01) transparent;\n  }\n\n  :host([theme=\"dark\"]) .z-scrollbar,\n  .z-scrollbar--dark {\n    scrollbar-color: var(--z-scrollbar-thumb-color, var(--color-primary03))\n      var(--z-scrollbar-track-color, var(--gray600));\n  }\n}\n\nz-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n\n\n\n:root,\n.theme-default {\n  --color-background: var(--gray50);\n  --shadow-focus-primary: 0 0 0 2px var(--color-white), 0 0 2px 5px var(--blue800);\n\n  /* primary */\n  --color-active-primary: var(--blue400);\n  --color-hover-primary: var(--blue800);\n  --color-pressed-primary: var(--blue400);\n  --color-primary01: var(--blue500);\n  --color-primary02: var(--blue25);\n  --color-primary03: var(--blue50);\n\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n  --color-button-secondary: var(--color-surface01);\n\n  /* surface */\n  --color-surface01: var(--color-white);\n  --color-surface02: var(--gray100);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray700);\n  --color-surface05: var(--gray900);\n\n  /* text */\n  --color-default-text: var(--gray900);\n  --color-hover-text: var(--gray800);\n  --color-pressed-text: var(--gray700);\n  --color-text-inverse: var(--color-white);\n  --color-text02: var(--gray100);\n  --color-text03: var(--gray300);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray300);\n  --color-disabled02: var(--gray100);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--blue400);\n  --color-default-icon: var(--gray900);\n  --color-disabled01-icon: var(--gray300);\n  --color-disabled02-icon: var(--gray100);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--color-black);\n  --color-hover-primary-icon: var(--blue800);\n  --color-inverse-icon: var(--color-white);\n  --color-pressed-icon: var(--gray700);\n  --color-primary01-icon: var(--blue500);\n\n  /* alert */\n  --color-default-error: var(--red500);\n  --color-default-success: var(--green500);\n  --color-default-warning: var(--yellow500);\n  --color-hover-error: var(--red800);\n  --color-hover-success: var(--green800);\n  --color-hover-warning: var(--yellow800);\n  --color-inverse-error: var(--red50);\n  --color-inverse-hover-error: var(--red500);\n  --color-inverse-hover-success: var(--green500);\n  --color-inverse-hover-warning: var(--yellow500);\n  --color-inverse-success: var(--green50);\n  --color-inverse-warning: var(--yellow50);\n\n  /* forms */\n  --color-form-active-primary: var(--blue400);\n  --color-form-background: var(--color-white);\n  --color-form-default-icon: var(--gray900);\n  --color-form-default-text: var(--gray900);\n  --color-form-disabled-text: var(--gray500);\n  --color-form-disabled01-icon: var(--gray500);\n  --color-form-disabled03: var(--gray500);\n  --color-form-hover-error: var(--red800);\n  --color-form-hover-primary: var(--blue800);\n  --color-form-hover-success: var(--green800);\n  --color-form-hover-warning: var(--yellow800);\n  --color-form-inverse-error: var(--red50);\n  --color-form-inverse-success: var(--green50);\n  --color-form-inverse-warning: var(--yellow50);\n  --color-form-placeholder-text: var(--gray600);\n  --color-form-success01: var(--green500);\n  --color-form-surface03: var(--gray200);\n  --color-form-surface04: var(--gray600);\n  --color-form-warning01: var(--yellow500);\n\n  /* links */\n  --color-text-link-blue: var(--blue500);\n  --color-text-link-blue-hover: var(--blue800);\n  --color-text-link-blue-active: var(--blue800);\n  --color-text-link-blue-visited: var(--blue800);\n  --color-text-link-blue-pressed: var(--blue400);\n  --color-text-link-red: var(--red500);\n  --color-text-link-red-hover: var(--red800);\n  --color-text-link-red-active: var(--red800);\n  --color-text-link-red-visited: var(--red800);\n  --color-text-link-red-pressed: var(--red400);\n  --color-text-link-inverse: var(--color-white);\n  --color-text-link-default: var(--gray900);\n}\n\n.theme-black {\n  /* primary */\n  --color-active-primary: var(--gray600);\n  --color-hover-primary: var(--gray700);\n  --color-pressed-primary: var(--gray600);\n  --color-primary01: var(--gray950);\n  --color-primary02: var(--gray100);\n  --color-primary03: var(--gray200);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray700);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray800);\n  --color-secondary02: var(--gray800);\n  --color-secondary03: var(--gray100);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray600);\n  --color-hover-primary-icon: var(--gray700);\n  --color-primary01-icon: var(--gray950);\n\n  /* forms */\n  --color-form-active-primary: var(--gray600);\n  --color-form-hover-primary: var(--gray700);\n}\n\n/* --- Black theme variants --- Use them in combination with `theme-black` css class: `<div class=\"theme-black theme-black--red\">` */\n\n.theme-black.theme-black--red {\n  /* secondary */\n  --color-active-secondary: var(--red400);\n  --color-hover-secondary: var(--red800);\n  --color-pressed-secondary: var(--red400);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red25);\n  --color-secondary03: var(--red50);\n}\n\n.theme-black.theme-black--yellow {\n  /* secondary */\n  --color-active-secondary: var(--yellow400);\n  --color-hover-secondary: var(--yellow800);\n  --color-pressed-secondary: var(--yellow400);\n  --color-secondary01: var(--yellow500);\n  --color-secondary02: var(--yellow25);\n  --color-secondary03: var(--yellow50);\n}\n\n.theme-dark {\n  --color-background: var(--gray900);\n  --shadow-focus-primary: 0 0 0 2px var(--gray900), 0 0 2px 5px var(--blue25);\n\n  /* primary */\n  --color-active-primary: var(--gray25);\n  --color-hover-primary: var(--gray100);\n  --color-pressed-primary: var(--gray25);\n  --color-primary01: var(--color-white);\n  --color-primary02: var(--gray800);\n  --color-primary03: var(--gray700);\n\n  /* secondary */\n  --color-hover-secondary: var(--red200);\n  --color-secondary01: var(--red500);\n  --color-secondary02: var(--red900);\n  --color-secondary03: var(--red800);\n  --color-button-secondary: transparent;\n\n  /* surface */\n  --color-surface01: var(--gray900);\n  --color-surface02: var(--gray700);\n  --color-surface03: var(--gray300);\n  --color-surface04: var(--gray100);\n  --color-surface05: var(--color-white);\n\n  /* text */\n  --color-default-text: var(--gray100);\n  --color-hover-text: var(--gray300);\n  --color-pressed-text: var(--gray300);\n  --color-text-inverse: var(--gray900);\n  --color-text02: var(--gray900);\n  --color-text03: var(--gray700);\n  --color-text05: var(--gray500);\n\n  /* disabled */\n  --color-disabled01: var(--gray700);\n  --color-disabled02: var(--gray900);\n  --color-disabled03: var(--gray500);\n\n  /* icons */\n  --color-active-primary-icon: var(--gray300);\n  --color-default-icon: var(--gray100);\n  --color-disabled01-icon: var(--gray700);\n  --color-disabled02-icon: var(--gray900);\n  --color-disabled03-icon: var(--gray500);\n  --color-hover-icon: var(--gray300);\n  --color-hover-primary-icon: var(--gray300);\n  --color-inverse-icon: var(--gray900);\n  --color-pressed-icon: var(--gray300);\n  --color-primary01-icon: var(--color-white);\n\n  /* alert */\n  --color-default-error: var(--red200);\n  --color-default-success: var(--green200);\n  --color-default-warning: var(--yellow200);\n  --color-hover-error: var(--red50);\n  --color-hover-success: var(--green50);\n  --color-hover-warning: var(--yellow50);\n  --color-inverse-error: var(--red800);\n  --color-inverse-hover-error: var(--red200);\n  --color-inverse-hover-success: var(--green200);\n  --color-inverse-hover-warning: var(--yellow200);\n  --color-inverse-success: var(--green800);\n  --color-inverse-warning: var(--yellow800);\n\n  /* forms */\n  --color-form-active-primary: var(--gray800);\n  --color-form-hover-primary: var(--gray800);\n\n  /* links */\n  --color-text-link-blue-active: var(--color-white);\n  --color-text-link-blue-hover: var(--color-white);\n  --color-text-link-blue-pressed: var(--color-white);\n  --color-text-link-blue-visited: var(--color-white);\n  --color-text-link-blue: var(--color-white);\n  --color-text-link-default: var(--color-white);\n  --color-text-link-inverse: var(--gray900);\n  --color-text-link-red-active: var(--color-white);\n  --color-text-link-red-hover: var(--color-white);\n  --color-text-link-red-pressed: var(--color-white);\n  --color-text-link-red-visited: var(--color-white);\n  --color-text-link-red: var(--color-white);\n}\n\n.theme-red {\n  /* primary */\n  --color-active-primary: var(--red400);\n  --color-hover-primary: var(--red800);\n  --color-pressed-primary: var(--red400);\n  --color-primary01: var(--red500);\n  --color-primary02: var(--red25);\n  --color-primary03: var(--red50);\n\n  /* secondary */\n  --color-active-secondary: var(--gray400);\n  --color-hover-secondary: var(--gray800);\n  --color-pressed-secondary: var(--gray400);\n  --color-secondary01: var(--gray500);\n  --color-secondary02: var(--gray25);\n  --color-secondary03: var(--gray50);\n\n  /* icons */\n  --color-active-primary-icon: var(--red400);\n  --color-hover-primary-icon: var(--red800);\n  --color-primary01-icon: var(--red500);\n\n  /* forms */\n  --color-form-active-primary: var(--red400);\n  --color-form-hover-primary: var(--red800);\n}\n\n\n/* Styles for stacked z-accordions */\n\nz-accordion + z-accordion {\n  border-top: none;\n}\n\n/* all z-accordions with some sibling z-accordion */\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content),\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"]:not(:first-of-type, :last-of-type)::part(content)::before {\n  border-radius: 0;\n}\n\n/* first z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"]:first-of-type:not(:only-of-type)::part(content),\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:first-of-type:not(:only-of-type)::part(content)::before {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n/* last z-accordion with some sibling z-accordion */\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type),\nz-accordion[variant=\"background\"]:last-of-type:not(:only-of-type)::part(summary),\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(summary)::before,\nz-accordion[variant=\"background\"][highlight]:last-of-type:not(:only-of-type)::part(content)::before {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n";
 /*
  Stencil Client Platform v4.43.3 | MIT Licensed | https://stenciljs.com
@@ -275,10 +275,6 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './z-stepper-item.entry.js').then(processMod, consoleError);
-                case 'z-table':
-                    return import(
-                      /* webpackMode: "lazy" */
-                      './z-table.entry.js').then(processMod, consoleError);
                 case 'z-toast-notification-list':
                     return import(
                       /* webpackMode: "lazy" */
@@ -343,6 +339,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './z-input-range.entry.js').then(processMod, consoleError);
+                case 'z-table':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './z-table.entry.js').then(processMod, consoleError);
                 case 'z-tool':
                     return import(
                       /* webpackMode: "lazy" */
@@ -2692,6 +2692,6 @@ function transformTag(tag) {
 }
 export { Fragment as F, Host as H, H as a, bootstrapLazy as b, createEvent as c, getElement as d, globalScripts as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
-//# sourceMappingURL=index-BEHxru6n.js.map
+//# sourceMappingURL=index-BcDWN4F1.js.map
-//# sourceMappingURL=index-BEHxru6n.js.map
+//# sourceMappingURL=index-BcDWN4F1.js.map