@charset "UTF-8";

* {
    -webkit-font-smoothing: antialiased;
    font-smooth: always;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    box-sizing: border-box
}

body {
    margin: 0
}

:root {
    font-size: 16px;
    --zs-12: .125rem;
    --zs-25: .25rem;
    --zs-50: .5rem;
    --zs-75: .75rem;
    --zs-100: 1rem;
    --zs-150: 1.5rem;
    --zs-200: 2rem;
    --zs-250: 2.5rem;
    --zs-300: 3rem;
    --zs-400: 4rem;
    --zs-600: 6rem;
    --zs-1000: 10rem;
    --zs-grid-gutter: 1.875rem
}

:root {
    --zc-azure-100: #4870C6;
    --zc-azure-80: #6D8DD1;
    --zc-azure-60: #91A9DD;
    --zc-azure-40: #B6C6E8;
    --zc-azure-20: #DAE2F4;
    --zc-moss-100: #77A984;
    --zc-moss-80: #92BA9D;
    --zc-moss-60: #ADCBB5;
    --zc-moss-40: #C9DDCE;
    --zc-moss-20: #E4EEE6;
    --zc-moss-aa: #428351;
    --zc-moss-aaa: #32623D;
    --zc-teal-100: #19BAB6;
    --zc-teal-80: #47C8C5;
    --zc-teal-60: #75D6D3;
    --zc-teal-40: #A3E3E2;
    --zc-teal-20: #D1F1F0;
    --zc-teal-aa: #088487;
    --zc-mint-100: #A6E9AB;
    --zc-mint-80: #B8EDBC;
    --zc-mint-60: #CAF2CD;
    --zc-mint-40: #DBF6DD;
    --zc-mint-20: #EDFBEE;
    --zc-lime-100: #E1EE92;
    --zc-lime-80: #E7F1A8;
    --zc-lime-60: #EDF5BE;
    --zc-lime-40: #F3F8D3;
    --zc-lime-20: #F9FCE9;
    --zc-lemon-100: #FFF773;
    --zc-lemon-80: #FFF98F;
    --zc-lemon-60: #FFFAAB;
    --zc-lemon-40: #FFFCC7;
    --zc-lemon-20: #FFFDE3;
    --zc-lemon-aa: #FFC828;
    --zc-peach-100: #FF7569;
    --zc-peach-80: #FF9187;
    --zc-peach-60: #FFACA5;
    --zc-peach-40: #FFC8C3;
    --zc-peach-20: #FFE3E1;
    --zc-peach-10: #FAEDEC;
    --zc-peach-aa: #CB4B40;
    --zc-peach-aaa: #9D342B;
    --zc-candy-100: #E18EBA;
    --zc-candy-80: #E7A5C8;
    --zc-candy-60: #EDBBD6;
    --zc-candy-40: #F3D2E3;
    --zc-candy-20: #F9E8F1;
    --zc-candy-aa: #C96BA4;
    --zc-powder-pink-100: #FFC5EA;
    --zc-powder-pink-80: #FFD1EE;
    --zc-powder-pink-60: #FFDCF2;
    --zc-powder-pink-40: #FFE8F7;
    --zc-powder-pink-20: #FFF3FB;
    --zc-blue-sky-aa: #1390CD;
    --zc-blue-sky-80: #4CC1EB;
    --zc-blue-sky-40: #A5E0F5;
    --zc-blue-sky-25: #C7EBF9;
    --zc-blue-sky-10: #E9F7FC;
    --zc-lilac-100: #6D6BCF;
    --zc-lilac-80: #8A89D9;
    --zc-lilac-60: #A7A6E2;
    --zc-lilac-40: #C5C4EC;
    --zc-lilac-20: #E2E1F5;
    --zg-1: #0D1115;
    --zg-2: #2B2E31;
    --zg-3: #45484A;
    --zg-4: #5D6162;
    --zg-5: #74797A;
    --zg-6: #7F8788;
    --zg-7: #929A9C;
    --zg-8: #A6ADAF;
    --zg-9: #C9D0D2;
    --zc-blue-zurich: #2167AE;
    --zc-blue-zurich-90: #3776B6;
    --zc-blue-dark: #23366F;
    --zc-blue-dark-90: #2C438B;
    --zc-blue-mid: #5495CF;
    --zc-blue-light: #91BFE3;
    --zc-blue-light-40: #D3E5F4;
    --zc-blue-light-10: #F4F9FC;
    --zc-blue-sky: #1FB1E6;
    --zc-sand-stone: #DAD2BD;
    --zc-dove: #DDE4E3;
    --zc-dove-light: #E4E9EC;
    --zg-white-zurich: #ECEEEF;
    --zg-white: #FFF;
    --zg-black: #000;
    --zo-black: rgba(0, 0, 0, .54);
    --zo-white: rgba(255, 255, 255, .89);
    --zo-blue-zurich: rgba(33, 103, 174, .89)
}

*[z-color=teal] {
    --z-color: var(--zc-teal-aa)
}

*[z-color=moss] {
    --z-color: var(--zc-moss-aa)
}

*[z-color=lilac] {
    --z-color: var(--zc-lilac-100)
}

*[z-color=peach] {
    --z-color: var(--zc-peach-aa)
}

*[z-color=candy] {
    --z-color: var(--zc-candy-aa)
}

*[z-color=mint] {
    --z-color: var(--zc-mint-100)
}

*[z-color=lime] {
    --z-color: var(--zc-lime-100)
}

*[z-color=lemon] {
    --z-color: var(--zc-lemon-100)
}

*[z-color=powder-pink] {
    --z-color: var(--zc-powder-pink-100)
}

*[z-color=blue-dark] {
    --z-color: var(--zc-blue-dark)
}

*[z-color=blue-sky] {
    --z-color: var(--zc-blue-sky)
}

*[z-color=blue-zurich] {
    --z-color: var(--zc-blue-zurich)
}

*[z-color=grey-9] {
    --z-color: var(--zg-9)
}

*[z-color=white] {
    --z-color: var(--zg-white)
}

:root {
    --zsh-7: rgba(0, 0, 0, .07);
    --zsh-5: rgba(0, 0, 0, .05);
    --zsh-3: rgba(0, 0, 0, .03);
    --zd-1: 0 1px 5px 0 var(--zsh-7), 0 2px 2px 0 var(--zsh-5), 0 3px 1px -2px var(--zsh-3);
    --zd-2: 0 2px 4px -1px var(--zsh-7), 0 4px 5px 0 var(--zsh-5), 0 1px 10px 0 var(--zsh-3);
    --zd-3: 0 3px 5px -1px var(--zsh-7), 0 6px 10px 0 var(--zsh-5), 0 1px 18px 0 var(--zsh-3);
    --zd-4: 0 5px 5px -3px var(--zsh-7), 0 8px 10px 1px var(--zsh-5), 0 3px 14px 2px var(--zsh-3);
    --zd-5: 0 6px 6px -3px var(--zsh-7), 0 10px 14px 1px var(--zsh-5), 0 4px 18px 3px var(--zsh-3);
    --zd-6: 0 7px 8px -4px var(--zsh-7), 0 12px 17px 2px var(--zsh-5), 0 5px 22px 4px var(--zsh-3);
    --zd-7: 0 7px 9px -4px var(--zsh-7), 0 14px 21px 2px var(--zsh-5), 0 5px 26px 4px var(--zsh-3);
    --zd-8: 0 8px 10px -5px var(--zsh-7), 0 16px 24px 2px var(--zsh-5), 0 6px 30px 5px var(--zsh-3);
    --zd-9: 0 10px 13px -6px var(--zsh-7), 0 20px 31px 3px var(--zsh-5), 0 8px 38px 7px var(--zsh-3);
    --zd-10: 0 10px 13px -6px var(--zsh-7), 0 20px 31px 3px var(--zsh-5), 0 8px 38px 7px var(--zsh-3);
    --zd-card: 0px 0px 15px 0px var(--zsh-5)
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Light.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Light.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Light.woff2) format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/LightItalic.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/LightItalic.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/LightItalic.woff2) format("woff2");
    font-weight: 300;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Regular.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Regular.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Italic.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Italic.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Italic.woff2) format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Medium.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Medium.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Medium.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/MediumItalic.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/MediumItalic.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/MediumItalic.woff2) format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/SemiBold.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/SemiBold.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/SemiBold.woff2) format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/SemiBoldItalic.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/SemiBoldItalic.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/SemiBoldItalic.woff2) format("woff2");
    font-weight: 600;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Bold.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Bold.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: ZurichSans;
    src: url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/BoldItalic.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/BoldItalic.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/ZurichSans/BoldItalic.woff2) format("woff2");
    font-weight: 700;
    font-style: italic;
    font-display: swap
}

:root {
    --z-sans: ZurichSans, Arial, Helvetica, sans-serif;
    --z-ogg: Ogg, Times New Roman, Times, serif
}

@media (width >= 315px) {
    :root {
        --zf-body-12-b: .75rem/1.125rem var(--z-sans);
        --zf-body-14-b: .875rem/1.25rem var(--z-sans);
        --zf-body-16-b: .875rem/1.25rem var(--z-sans);
        --zf-body-18-b: 1rem/1.5rem var(--z-sans);
        --zf-body-20-b: 1.125rem/1.5rem var(--z-sans);
        --zf-capt-10-b: .625rem/1rem var(--z-sans);
        --zf-capt-12-b: .625rem/1rem var(--z-sans);
        --zf-capt-14-b: .75rem/1.125rem var(--z-sans)
    }
}

@media (width >= 768px) {
    :root {
        --zf-capt-12-b: .75rem/1.125rem var(--z-sans);
        --zf-capt-14-b: .875rem/1.25rem var(--z-sans)
    }
}

@media (width >= 992px) {
    :root {
        --zf-body-16-b: 1rem/1.5rem var(--z-sans);
        --zf-body-18-b: 1.125rem/1.5rem var(--z-sans);
        --zf-body-20-b: 1.25rem/1.875rem var(--z-sans)
    }
}

:root {
    --zf-body-12: 400 var(--zf-body-12-b);
    --zf-body-12--300: 300 var(--zf-body-12-b);
    --zf-body-12--500: 500 var(--zf-body-12-b);
    --zf-body-12--600: 600 var(--zf-body-12-b);
    --zf-body-12--700: 700 var(--zf-body-12-b);
    --zf-body-14: 400 var(--zf-body-14-b);
    --zf-body-14--300: 300 var(--zf-body-14-b);
    --zf-body-14--500: 500 var(--zf-body-14-b);
    --zf-body-14--600: 600 var(--zf-body-14-b);
    --zf-body-14--700: 700 var(--zf-body-14-b);
    --zf-body-16: 400 var(--zf-body-16-b);
    --zf-body-16--300: 300 var(--zf-body-16-b);
    --zf-body-16--500: 500 var(--zf-body-16-b);
    --zf-body-16--600: 600 var(--zf-body-16-b);
    --zf-body-16--700: 700 var(--zf-body-16-b);
    --zf-body-18: 400 var(--zf-body-18-b);
    --zf-body-18--300: 300 var(--zf-body-18-b);
    --zf-body-18--500: 500 var(--zf-body-18-b);
    --zf-body-18--600: 600 var(--zf-body-18-b);
    --zf-body-18--700: 700 var(--zf-body-18-b);
    --zf-body-20: 400 var(--zf-body-20-b);
    --zf-body-20--300: 300 var(--zf-body-20-b);
    --zf-body-20--500: 500 var(--zf-body-20-b);
    --zf-body-20--600: 600 var(--zf-body-20-b);
    --zf-body-20--700: 700 var(--zf-body-20-b);
    --zf-capt-10: 400 var(--zf-capt-10-b);
    --zf-capt-10--300: 300 var(--zf-capt-10-b);
    --zf-capt-10--500: 500 var(--zf-capt-10-b);
    --zf-capt-10--600: 600 var(--zf-capt-10-b);
    --zf-capt-10--700: 700 var(--zf-capt-10-b);
    --zf-capt-12: 400 var(--zf-capt-12-b);
    --zf-capt-12--300: 300 var(--zf-capt-12-b);
    --zf-capt-12--500: 500 var(--zf-capt-12-b);
    --zf-capt-12--600: 600 var(--zf-capt-12-b);
    --zf-capt-12--700: 700 var(--zf-capt-12-b);
    --zf-capt-14: 400 var(--zf-capt-14-b);
    --zf-capt-14--300: 300 var(--zf-capt-14-b);
    --zf-capt-14--500: 500 var(--zf-capt-14-b);
    --zf-capt-14--600: 600 var(--zf-capt-14-b);
    --zf-capt-14--700: 700 var(--zf-capt-14-b)
}

* {
    font-family: var(--z-sans)
}

@font-face {
    font-family: Ogg;
    src: url(https://zds.zurich.com/0.7.0/fonts/Ogg/Regular.ttf) format("truetype"),url(https://zds.zurich.com/0.7.0/fonts/Ogg/Regular.woff) format("woff"),url(https://zds.zurich.com/0.7.0/fonts/Ogg/Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

:root {
    --zf-h-72: 300 4.5rem / 6rem var(--z-sans);
    --zf-h-60: 300 3.75rem / 5rem var(--z-sans);
    --zf-h-48: 300 3rem / 4rem var(--z-sans);
    --zf-h-44: 300 2.75rem / 3.75rem var(--z-sans);
    --zf-h-36: 300 2.25rem / 3rem var(--z-sans);
    --zf-h-32: 300 2rem / 2.75rem var(--z-sans);
    --zf-h-30: 300 1.875rem / 2.625rem var(--z-sans);
    --zf-h-28: 300 1.75rem / 2.5rem var(--z-sans);
    --zf-h-24: 300 1.5rem / 2.25rem var(--z-sans);
    --zf-h-22: 300 1.375rem / 2rem var(--z-sans);
    --zf-h-20: 300 1.25rem / 1.875rem var(--z-sans)
}

@media (width >= 315px) {
    :root {
        --zf-ht-1: var(--zf-h-32) !important;
        --zf-ht-2: var(--zf-h-30) !important;
        --zf-ht-3: var(--zf-h-28) !important;
        --zf-ht-4: var(--zf-h-24) !important;
        --zf-ht-5: var(--zf-h-22) !important;
        --zf-ht-6: var(--zf-h-20) !important
    }
}

@media (width >= 768px) {
    :root {
        --zf-ht-1: var(--zf-h-36) !important;
        --zf-ht-2: var(--zf-h-32) !important
    }
}

@media (width >= 992px) {
    :root {
        --zf-ht-1: var(--zf-h-48) !important;
        --zf-ht-2: var(--zf-h-44) !important;
        --zf-ht-3: var(--zf-h-36) !important;
        --zf-ht-4: var(--zf-h-32) !important;
        --zf-ht-5: var(--zf-h-28) !important;
        --zf-ht-6: var(--zf-h-24) !important
    }
}

*[z-heading^="72"] {
    font: var(--zf-h-72) !important
}

*[z-heading^="60"] {
    font: var(--zf-h-60) !important
}

*[z-heading^="48"] {
    font: var(--zf-h-48) !important
}

*[z-heading^="44"] {
    font: var(--zf-h-44) !important
}

*[z-heading^="36"] {
    font: var(--zf-h-36) !important
}

*[z-heading^="32"] {
    font: var(--zf-h-32) !important
}

*[z-heading^="30"] {
    font: var(--zf-h-30) !important
}

*[z-heading^="28"] {
    font: var(--zf-h-28) !important
}

*[z-heading^="24"] {
    font: var(--zf-h-24) !important
}

*[z-heading^="22"] {
    font: var(--zf-h-22) !important
}

*[z-heading^="20"] {
    font: var(--zf-h-20) !important
}

@media (width >= 315px) {
    :is(h1,h2)[z-heading=display] {
        font: var(--zf-h-36) !important
    }
}

@media (width >= 768px) {
    :is(h1,h2)[z-heading=display] {
        font: var(--zf-h-44) !important
    }
}

@media (width >= 992px) {
    :is(h1,h2)[z-heading=display] {
        font: var(--zf-h-60) !important
    }
}

@media (width >= 1200px) {
    :is(h1,h2)[z-heading=display] {
        font: var(--zf-h-72) !important
    }
}

*[z-text=error] {
    color: var(--z-color--error)
}

*[z-text=disabled] {
    color: var(--z-color--disabled)
}

*[z-text=warning] {
    color: var(--z-color--warning)
}

*[z-text=success] {
    color: var(--z-color--success)
}

*[z-text=info] {
    color: var(--z-color--info)
}

body, :is(div,article,section,main,body,aside,header,footer)[z-theme] {
    background: var(--z-bg);
    color: var(--z-color)
}

:root {
    --z-smiling-z: url(https://zds.zurich.com/0.7.0/brand/smiling-z.svg);
    --z-logo: url(https://zds.zurich.com/0.7.0/brand/logo.svg);
    --z-logo--inline: url(https://zds.zurich.com/0.7.0/brand/logo--inline.svg);
    --z-safe-space--2: url(https://zds.zurich.com/0.7.0/brand/safe-space--2.svg);
    --z-safe-space--3: url(https://zds.zurich.com/0.7.0/brand/safe-space--3.svg);
    --z-safe-space--4: url(https://zds.zurich.com/0.7.0/brand/safe-space--4.svg);
    --z-safe-space--5: url(https://zds.zurich.com/0.7.0/brand/safe-space--5.svg)
}

:root, ::part(z-light), *[z-theme=light] {
    --z-shape--1: url(https://zds.zurich.com/0.7.0/shapes/1.svg);
    --z-shape--1--dark: url(https://zds.zurich.com/0.7.0/shapes/1--dark.svg);
    --z-shape--3: url(https://zds.zurich.com/0.7.0/shapes/3.svg);
    --z-shape--3--dark: url(https://zds.zurich.com/0.7.0/shapes/3--dark.svg);
    --z-shape--2: url(https://zds.zurich.com/0.7.0/shapes/2.svg);
    --z-shape--2--dark: url(https://zds.zurich.com/0.7.0/shapes/2--dark.svg);
    --z-shape--5: url(https://zds.zurich.com/0.7.0/shapes/5.svg);
    --z-shape--5--dark: url(https://zds.zurich.com/0.7.0/shapes/5--dark.svg);
    --z-shape--4: url(https://zds.zurich.com/0.7.0/shapes/4.svg);
    --z-shape--4--dark: url(https://zds.zurich.com/0.7.0/shapes/4--dark.svg);
    --z-shape--6: url(https://zds.zurich.com/0.7.0/shapes/6.svg);
    --z-shape--6--dark: url(https://zds.zurich.com/0.7.0/shapes/6--dark.svg)
}

::part(z-dark), *[z-theme=dark] {
    --z-shape--1: var(--z-shape--1--dark);
    --z-shape--3: var(--z-shape--3--dark);
    --z-shape--2: var(--z-shape--2--dark);
    --z-shape--5: var(--z-shape--5--dark);
    --z-shape--4: var(--z-shape--4--dark);
    --z-shape--6: var(--z-shape--6--dark)
}

:root {
    --z-root-size: 16px;
    --z-fc-outline-color: var(--z-br-focus);
    --z-fc-outline: 2px solid var(--z-fc-outline-color);
    --z-fc-outline-offset: var(--zs-12);
    --z-op-disabled: .5;
    --z-rd-s: var(--zs-100);
    --z-rd-m: var(--zs-150);
    --z-rd-l: var(--zs-250);
    font-size: var(--z-root-size, 16px)
}

:root, ::part(z-light), *[z-theme=light] {
    --z-theme: "light";
    color-scheme: light;
    --z-sf-base: var(--zg-white);
    --z-sf-base--eq: var(--zg-white);
    --z-sf-brand: var(--zg-white-zurich);
    --z-sf-placeholder: var(--zg-white);
    --z-sf-subtle--negative: var(--zc-peach-10);
    --z-sf-subtle: var(--zc-blue-light-10);
    --z-bg-active: var(--zc-blue-dark);
    --z-bg-alert: var(--zc-lemon-aa);
    --z-bg-brand: var(--zc-blue-zurich);
    --z-bg-brand--bold: var(--zc-blue-dark);
    --z-bg-brand--eq: var(--zc-blue-zurich);
    --z-bg-brand--inv: var(--zg-white-zurich);
    --z-bg-highlighted: var(--zc-blue-light-40);
    --z-bg-disabled--eq: var(--zg-8);
    --z-bg-disabled: var(--zg-8);
    --z-bg-hover: var(--zc-blue-zurich-90);
    --z-bg-hover--inv: var(--zc-dove);
    --z-bg-info: var(--zc-blue-sky-aa);
    --z-bg-light-base: var(--zg-white-zurich);
    --z-bg-light-base--active: var(--zg-white);
    --z-bg-light-base--inv: var(--zg-white);
    --z-bg-muted: var(--zg-8);
    --z-bg-muted-disabled: var(--zc-dove);
    --z-bg-negative: var(--zc-peach-aa);
    --z-bg-negative--hover: var(--zc-peach-aaa);
    --z-bg-eq: var(--zg-white);
    --z-bg-placeholder: var(--zg-white);
    --z-bg-positive: var(--zc-moss-aa);
    --z-bg-positive--hover: var(--zc-moss-aaa);
    --z-bg-pressed: var(--zc-blue-dark);
    --z-bg-primary: var(--zc-blue-zurich);
    --z-bg-primary--eq: var(--zc-blue-zurich);
    --z-bg-primary--inv: var(--zg-white);
    --z-bg-status-alert: var(--zc-lemon-aa);
    --z-bg-status-info: var(--zc-blue-sky-aa);
    --z-bg-status-negative: var(--zc-peach-aa);
    --z-bg-status-negative--hover: var(--zc-peach-aaa);
    --z-bg-status-none: var(--zc-dove);
    --z-bg-status-positive: var(--zc-moss-aa);
    --z-bg-status-positive--hover: var(--zc-moss-aaa);
    --z-bg-transparent: transparent;
    --z-bg-moss: var(--zc-moss-aa);
    --z-bg-azure: var(--zc-azure-100);
    --z-bg-teal: var(--zc-teal-aa);
    --z-bg-lilac: var(--zc-lilac-100);
    --z-bg-candy: var(--zc-candy-100);
    --z-bg-peach: var(--zc-peach-aa);
    --z-bg-mint: var(--zc-mint-100);
    --z-bg-lime: var(--zc-lime-100);
    --z-bg-lemon: var(--zc-lemon-100);
    --z-bg-powder-pink: var(--zc-powder-pink-100);
    --z-ct-active: var(--zc-blue-dark);
    --z-ct-clickable--eq: var(--zc-blue-zurich);
    --z-ct-clickable--inv--eq: var(--zg-white);
    --z-ct-clickable--inv: var(--zg-white);
    --z-ct-clickable--secondary: var(--zc-blue-dark);
    --z-ct-clickable: var(--zc-blue-zurich);
    --z-ct-disabled--eq: var(--zg-2);
    --z-ct-disabled: var(--zg-2);
    --z-ct-hover: var(--zc-blue-sky-aa);
    --z-ct-hover--eq: var(--zc-blue-sky-aa);
    --z-ct-inactive: var(--zg-8);
    --z-ct-negative--eq: var(--zc-peach-aa);
    --z-ct-negative--inv: var(--zc-peach-60);
    --z-ct-negative: var(--zc-peach-aa);
    --z-ct-on-hover: var(--zg-white);
    --z-ct-on-pressed: var(--zg-white);
    --z-ct-on-status--eq: var(--zc-blue-dark);
    --z-ct-on-status--info: var(--zc-blue-dark);
    --z-ct-positive--eq: var(--zc-moss-aa);
    --z-ct-positive--inv: var(--zc-moss-60);
    --z-ct-positive: var(--zc-moss-aa);
    --z-ct-on-status: var(--zg-white);
    --z-ct-pressed: var(--zc-blue-dark);
    --z-ct-primary--eq: var(--zc-blue-dark);
    --z-ct-primary--inv: var(--zg-white);
    --z-ct-primary: var(--zc-blue-dark);
    --z-ct-secondary--eq: var(--zg-4);
    --z-ct-secondary: var(--zg-4);
    --z-br-active: var(--zc-blue-dark);
    --z-br-disabled: var(--zg-8);
    --z-br-focus: var(--zc-blue-sky);
    --z-br-hover: var(--zc-blue-light);
    --z-br-inactive: var(--zg-white-zurich);
    --z-br-negative: var(--zc-peach-aa);
    --z-br-placeholder: var(--zg-white);
    --z-br-pressed: var(--zc-blue-dark);
    --z-br-primary: var(--zc-blue-zurich);
    --z-br-separator: var(--zc-blue-light);
    --z-br-subtle: var(--zc-dove);
    --z-color--highlight: var(--zc-blue-zurich);
    --z-color--heading: var(--zc-blue-zurich);
    --z-color--disabled: var(--zg-7);
    --z-color--error: var(--zc-peach-aa);
    --z-color--warning: var(--zc-lemon-aa);
    --z-color--success: var(--zc-moss-aa);
    --z-color--info: var(--zc-blue-sky-aa);
    --z-heading-margin: .2em 0;
    --z-data--data-axes-color: #000;
    --z-data--data-axes-style: solid;
    --z-data--data-axes-width: 1px;
    --z-data--primary-axis-color: #929A9C;
    --z-data--primary-axis-style: solid;
    --z-data--primary-axis-width: 1px;
    --z-data--heading-size: 0px;
    --z-data--labels-align: center;
    --z-data--data-gap: 1rem;
    --z-data--labels-size: 1.5rem;
    --primary-axis-width: 0px;
    --z-bg: var(--z-sf-base);
    --z-color: var(--z-ct-primary)
}

::part(z-dark), *[z-theme=dark] {
    --z-theme: "dark";
    color-scheme: dark;
    --z-sf-base: var(--zc-blue-dark);
    --z-sf-brand: var(--zc-blue-zurich);
    --z-sf-placeholder: var(--zc-blue-dark);
    --z-sf-subtle: var(--zc-blue-dark-90);
    --z-bg-active: var(--zc-blue-sky-40);
    --z-bg-alert: var(--zc-lemon-80);
    --z-bg-brand: var(--zg-white-zurich);
    --z-bg-brand--bold: var(--zg-white);
    --z-bg-brand--inv: var(--zc-blue-zurich);
    --z-bg-highlighted: var(--zc-blue-zurich);
    --z-bg-disabled: var(--zg-white);
    --z-bg-hover: var(--zc-dove);
    --z-bg-hover--inv: var(--zc-blue-zurich-90);
    --z-bg-info: var(--zc-blue-sky-80);
    --z-bg-light-base: var(--zg-white);
    --z-bg-light-base--active: var(--zg-white-zurich);
    --z-bg-light-base--inv: var(--zg-white-zurich);
    --z-bg-negative: var(--zc-peach-80);
    --z-bg-negative--hover: var(--zc-peach-40);
    --z-bg-placeholder: var(--zc-blue-dark);
    --z-bg-positive: var(--zc-moss-80);
    --z-bg-positive--hover: var(--zc-moss-40);
    --z-bg-pressed: var(--zc-blue-sky-40);
    --z-bg-primary: var(--zg-white);
    --z-bg-primary--inv: var(--zc-blue-zurich);
    --z-bg-status-alert: var(--zc-lemon-80);
    --z-bg-status-negative: var(--zc-peach-80);
    --z-bg-status-negative--hover: var(--zc-peach-40);
    --z-bg-status-none: var(--zc-dove-light);
    --z-bg-status-positive: var(--zc-moss-80);
    --z-bg-status-positive--hover: var(--zc-moss-40);
    --z-bg-moss: var(--zc-moss-40);
    --z-bg-azure: var(--zc-azure-40);
    --z-bg-teal: var(--zc-teal-60);
    --z-bg-lilac: var(--zc-lilac-40);
    --z-bg-candy: var(--zc-candy-60);
    --z-bg-peach: var(--zc-peach-60);
    --z-bg-mint: var(--zc-mint-40);
    --z-bg-lime: var(--zc-lime-40);
    --z-bg-lemon: var(--zc-lemon-40);
    --z-bg-powder-pink: var(--zc-powder-pink-40);
    --z-ct-active: var(--zc-blue-sky-25);
    --z-ct-clickable--inv: var(--zc-blue-zurich);
    --z-ct-clickable--secondary: var(--zg-white);
    --z-ct-clickable: var(--zg-white);
    --z-ct-disabled: var(--zg-white);
    --z-ct-hover: var(--zc-blue-sky-40);
    --z-ct-negative--inv: var(--zc-peach-aa);
    --z-ct-negative: var(--zc-peach-60);
    --z-ct-on-hover: var(--zc-blue-zurich);
    --z-ct-on-pressed: var(--zc-blue-dark);
    --z-ct-positive--inv: var(--zc-moss-aa);
    --z-ct-positive: var(--zc-moss-60);
    --z-ct-on-status: var(--zc-blue-dark);
    --z-ct-pressed: var(--zc-blue-sky-25);
    --z-ct-primary--inv: var(--zc-blue-dark);
    --z-ct-primary: var(--zg-white);
    --z-ct-secondary: var(--zc-blue-light-40);
    --z-br-active: var(--zc-blue-sky-40);
    --z-br-disabled: var(--zg-white);
    --z-br-inactive: var(--zg-white);
    --z-br-negative: var(--zc-peach-60);
    --z-br-placeholder: var(--zc-blue-dark);
    --z-br-pressed: var(--zc-blue-sky-40);
    --z-br-primary: var(--zg-white);
    --z-br-subtle: var(--zg-8);
    --z-color--highlight: var(--zc-blue-mid);
    --z-color--heading: var(--zg-white);
    --z-color--disabled: var(--zg-8);
    --z-color--error: var(--zc-peach-80);
    --z-color--warning: var(--zc-lemon-80);
    --z-color--success: var(--zc-moss-80);
    --z-color--info: var(--zc-blue-sky-80);
    --z-bg: var(--z-sf-base);
    --z-color: var(--z-ct-primary)
}

@media (width < 315px) {
    body[min-resolution] {
        position: absolute;
        display: grid !important;
        width: 100vw !important;
        height: 100vh !important;
        justify-content: center !important;
        align-items: center !important;
        background-color: var(--zc-blue-zurich) !important;
        text-align: center !important
    }

        body[min-resolution] > * {
            display: none !important
        }

        body[min-resolution]:before {
            content: "🙁 Sorry, we don't support this resolution.";
            font: 500 1rem/1.5rem ZurichSans;
            padding: var(--zs-150);
            color: var(--zg-white)
        }

    html[lang=es] body:before {
        content: "🙁 Lo sentimos, no damos soporte a esta resolución."
    }

    html[lang=de] body:before {
        content: "🙁 Leider unterstützen wir diese Resolution nicht."
    }

    html[lang=it] body:before {
        content: "🙁 Spiacenti, non supportiamo questa risoluzione."
    }

    html[lang=fr] body:before {
        content: "🙁 Désolé, nous ne soutenons pas cette résolution."
    }
}

*[z-center] {
    display: grid;
    place-items: center
}

@media (width >= 315px) {
    :root {
        --z-grid--columns: 6;
        --z-grid--columns-gutter: var(--zs-grid-gutter);
        --z-grid--columns-width: 1fr
    }
}

@media (width >= 768px) {
    :root {
        --z-grid--columns: 12;
        --z-grid--columns-gutter: var(--zs-grid-gutter);
        --z-grid--columns-width: 30px
    }
}

@media (width >= 992px) {
    :root {
        --z-grid--columns: 12;
        --z-grid--columns-gutter: var(--zs-grid-gutter);
        --z-grid--columns-width: 50px
    }
}

@media (width >= 1200px) {
    :root {
        --z-grid--columns: 12;
        --z-grid--columns-gutter: var(--zs-grid-gutter);
        --z-grid--columns-width: 65px
    }
}

*[z-grid] {
    display: grid
}

*[z-grid^=row] {
    grid-auto-flow: column;
    grid-template-columns: var(--z-grid--template);
    -moz-column-gap: var(--z-grid--columns-gutter);
    column-gap: var(--z-grid--columns-gutter)
}

*[z-grid^=column] {
    grid-auto-flow: row;
    grid-template-rows: var(--z-grid--template);
    row-gap: var(--z-grid--columns-gutter)
}

*[z-grid=main] {
    grid-template-columns: repeat(var(--z-grid--columns),var(--z-grid--columns-width));
    -moz-column-gap: var(--z-grid--columns-gutter);
    column-gap: var(--z-grid--columns-gutter);
    justify-content: center;
    overflow: visible;
    margin: 0 auto
}

    *[z-grid=main] > *[column^="1:"] {
        grid-column-start: 1
    }

    *[z-grid=main] > *[column$=":1"] {
        grid-column-end: 2
    }

    *[z-grid=main] > *[column="1"] {
        grid-column: 1
    }

    *[z-grid=main] > *[column^="2:"] {
        grid-column-start: 2
    }

    *[z-grid=main] > *[column$=":2"] {
        grid-column-end: 3
    }

    *[z-grid=main] > *[column="2"] {
        grid-column: 2
    }

    *[z-grid=main] > *[column^="3:"] {
        grid-column-start: 3
    }

    *[z-grid=main] > *[column$=":3"] {
        grid-column-end: 4
    }

    *[z-grid=main] > *[column="3"] {
        grid-column: 3
    }

    *[z-grid=main] > *[column^="4:"] {
        grid-column-start: 4
    }

    *[z-grid=main] > *[column$=":4"] {
        grid-column-end: 5
    }

    *[z-grid=main] > *[column="4"] {
        grid-column: 4
    }

    *[z-grid=main] > *[column^="5:"] {
        grid-column-start: 5
    }

    *[z-grid=main] > *[column$=":5"] {
        grid-column-end: 6
    }

    *[z-grid=main] > *[column="5"] {
        grid-column: 5
    }

    *[z-grid=main] > *[column^="6:"] {
        grid-column-start: 6
    }

    *[z-grid=main] > *[column$=":6"] {
        grid-column-end: 7
    }

    *[z-grid=main] > *[column="6"] {
        grid-column: 6
    }

    *[z-grid=main] > *[column^="7:"] {
        grid-column-start: 7
    }

    *[z-grid=main] > *[column$=":7"] {
        grid-column-end: 8
    }

    *[z-grid=main] > *[column="7"] {
        grid-column: 7
    }

    *[z-grid=main] > *[column^="8:"] {
        grid-column-start: 8
    }

    *[z-grid=main] > *[column$=":8"] {
        grid-column-end: 9
    }

    *[z-grid=main] > *[column="8"] {
        grid-column: 8
    }

    *[z-grid=main] > *[column^="9:"] {
        grid-column-start: 9
    }

    *[z-grid=main] > *[column$=":9"] {
        grid-column-end: 10
    }

    *[z-grid=main] > *[column="9"] {
        grid-column: 9
    }

    *[z-grid=main] > *[column^="10:"] {
        grid-column-start: 10
    }

    *[z-grid=main] > *[column$=":10"] {
        grid-column-end: 11
    }

    *[z-grid=main] > *[column="10"] {
        grid-column: 10
    }

    *[z-grid=main] > *[column^="11:"] {
        grid-column-start: 11
    }

    *[z-grid=main] > *[column$=":11"] {
        grid-column-end: 12
    }

    *[z-grid=main] > *[column="11"] {
        grid-column: 11
    }

    *[z-grid=main] > *[column^="12:"] {
        grid-column-start: 12
    }

    *[z-grid=main] > *[column$=":12"] {
        grid-column-end: 13
    }

    *[z-grid=main] > *[column="12"] {
        grid-column: 12
    }

    *[z-grid=main] > *[column^="m:1:"] {
        grid-column-start: 1
    }

    *[z-grid=main] > *[column^="m:"][column$=":1"] {
        grid-column-end: 3
    }

    *[z-grid=main] > *[column="m:1"] {
        grid-column: 1
    }

    *[z-grid=main] > *[column^="m:2:"] {
        grid-column-start: 3
    }

    *[z-grid=main] > *[column^="m:"][column$=":2"] {
        grid-column-end: 5
    }

    *[z-grid=main] > *[column="m:2"] {
        grid-column: 3
    }

    *[z-grid=main] > *[column^="m:3:"] {
        grid-column-start: 5
    }

    *[z-grid=main] > *[column^="m:"][column$=":3"] {
        grid-column-end: 7
    }

    *[z-grid=main] > *[column="m:3"] {
        grid-column: 5
    }

    *[z-grid=main] > *[column^="m:4:"] {
        grid-column-start: 7
    }

    *[z-grid=main] > *[column^="m:"][column$=":4"] {
        grid-column-end: 9
    }

    *[z-grid=main] > *[column="m:4"] {
        grid-column: 7
    }

    *[z-grid=main] > *[column^="m:5:"] {
        grid-column-start: 9
    }

    *[z-grid=main] > *[column^="m:"][column$=":5"] {
        grid-column-end: 11
    }

    *[z-grid=main] > *[column="m:5"] {
        grid-column: 9
    }

    *[z-grid=main] > *[column^="m:6:"] {
        grid-column-start: 11
    }

    *[z-grid=main] > *[column^="m:"][column$=":6"] {
        grid-column-end: 13
    }

    *[z-grid=main] > *[column="m:6"] {
        grid-column: 11
    }

@media (width < 768px) {
    *[z-grid=main] > *[column^="1:"] {
        grid-column-start: 1
    }

    *[z-grid=main] > *[column$=":1"] {
        grid-column-end: 2
    }

    *[z-grid=main] > *[column="1"] {
        grid-column: 1
    }

    *[z-grid=main] > *[column^="2:"] {
        grid-column-start: 1
    }

    *[z-grid=main] > *[column$=":2"] {
        grid-column-end: 2
    }

    *[z-grid=main] > *[column="2"] {
        grid-column: 1
    }

    *[z-grid=main] > *[column^="3:"] {
        grid-column-start: 2
    }

    *[z-grid=main] > *[column$=":3"] {
        grid-column-end: 3
    }

    *[z-grid=main] > *[column="3"] {
        grid-column: 2
    }

    *[z-grid=main] > *[column^="4:"] {
        grid-column-start: 2
    }

    *[z-grid=main] > *[column$=":4"] {
        grid-column-end: 3
    }

    *[z-grid=main] > *[column="4"] {
        grid-column: 2
    }

    *[z-grid=main] > *[column^="5:"] {
        grid-column-start: 3
    }

    *[z-grid=main] > *[column$=":5"] {
        grid-column-end: 4
    }

    *[z-grid=main] > *[column="5"] {
        grid-column: 3
    }

    *[z-grid=main] > *[column^="6:"] {
        grid-column-start: 3
    }

    *[z-grid=main] > *[column$=":6"] {
        grid-column-end: 4
    }

    *[z-grid=main] > *[column="6"] {
        grid-column: 3
    }

    *[z-grid=main] > *[column^="7:"] {
        grid-column-start: 4
    }

    *[z-grid=main] > *[column$=":7"] {
        grid-column-end: 5
    }

    *[z-grid=main] > *[column="7"] {
        grid-column: 4
    }

    *[z-grid=main] > *[column^="8:"] {
        grid-column-start: 4
    }

    *[z-grid=main] > *[column$=":8"] {
        grid-column-end: 5
    }

    *[z-grid=main] > *[column="8"] {
        grid-column: 4
    }

    *[z-grid=main] > *[column^="9:"] {
        grid-column-start: 5
    }

    *[z-grid=main] > *[column$=":9"] {
        grid-column-end: 6
    }

    *[z-grid=main] > *[column="9"] {
        grid-column: 5
    }

    *[z-grid=main] > *[column^="10:"] {
        grid-column-start: 5
    }

    *[z-grid=main] > *[column$=":10"] {
        grid-column-end: 6
    }

    *[z-grid=main] > *[column="10"] {
        grid-column: 5
    }

    *[z-grid=main] > *[column^="11:"] {
        grid-column-start: 6
    }

    *[z-grid=main] > *[column$=":11"] {
        grid-column-end: 7
    }

    *[z-grid=main] > *[column="11"] {
        grid-column: 6
    }

    *[z-grid=main] > *[column^="12:"] {
        grid-column-start: 6
    }

    *[z-grid=main] > *[column$=":12"] {
        grid-column-end: 7
    }

    *[z-grid=main] > *[column="12"] {
        grid-column: 6
    }

    *[z-grid=main] > *[column^="m:1:"] {
        grid-column-start: 1
    }

    *[z-grid=main] > *[column^="m:"][column$=":1"] {
        grid-column-end: 2
    }

    *[z-grid=main] > *[column="m:1"] {
        grid-column: 1
    }

    *[z-grid=main] > *[column^="m:2:"] {
        grid-column-start: 2
    }

    *[z-grid=main] > *[column^="m:"][column$=":2"] {
        grid-column-end: 3
    }

    *[z-grid=main] > *[column="m:2"] {
        grid-column: 2
    }

    *[z-grid=main] > *[column^="m:3:"] {
        grid-column-start: 3
    }

    *[z-grid=main] > *[column^="m:"][column$=":3"] {
        grid-column-end: 4
    }

    *[z-grid=main] > *[column="m:3"] {
        grid-column: 3
    }

    *[z-grid=main] > *[column^="m:4:"] {
        grid-column-start: 4
    }

    *[z-grid=main] > *[column^="m:"][column$=":4"] {
        grid-column-end: 5
    }

    *[z-grid=main] > *[column="m:4"] {
        grid-column: 4
    }

    *[z-grid=main] > *[column^="m:5:"] {
        grid-column-start: 5
    }

    *[z-grid=main] > *[column^="m:"][column$=":5"] {
        grid-column-end: 6
    }

    *[z-grid=main] > *[column="m:5"] {
        grid-column: 5
    }

    *[z-grid=main] > *[column^="m:6:"] {
        grid-column-start: 6
    }

    *[z-grid=main] > *[column^="m:"][column$=":6"] {
        grid-column-end: 7
    }

    *[z-grid=main] > *[column="m:6"] {
        grid-column: 6
    }
}

:is(section,ul)[z-gallery] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(var(--z-gallery--min, 200px),1fr));
    gap: var(--z-gallery--gap)
}

    :is(section,ul)[z-gallery] > * {
        width: 100% !important
    }

:is(section,ul)[z-gallery="50"] {
    gap: var(--zs-50)
}

:is(section,ul)[z-gallery="75"] {
    gap: var(--zs-75)
}

:is(section,ul)[z-gallery="100"] {
    gap: var(--zs-100)
}

:is(section,ul)[z-gallery="150"] {
    gap: var(--zs-150)
}

:is(section,ul)[z-gallery="200"] {
    gap: var(--zs-200)
}

:is(section,ul)[z-gallery="300"] {
    gap: var(--zs-300)
}

*[z-flex] {
    display: flex;
    flex-direction: row
}

*[z-flex^=col] {
    flex-direction: column
}

*[z-flex^=column-rev], *[z-flex^=rev] {
    flex-direction: column-reverse
}

*[z-flex^=row-rev], *[z-flex^=rev] {
    flex-direction: row-reverse
}

*[z-flex^=wrap], *[z-flex*=":wrap"] {
    flex-wrap: wrap
}

*[z-flex^=wrap-rev], *[z-flex*=":wrap-rev"] {
    flex-wrap: wrap-reverse
}

*[z-flex="50"], *[z-flex$=":50"] {
    gap: var(--zs-50)
}

*[z-flex="75"], *[z-flex$=":75"] {
    gap: var(--zs-75)
}

*[z-flex="100"], *[z-flex$=":100"] {
    gap: var(--zs-100)
}

*[z-flex="150"], *[z-flex$=":150"] {
    gap: var(--zs-150)
}

*[z-flex="200"], *[z-flex$=":200"] {
    gap: var(--zs-200)
}

*[z-flex="300"], *[z-flex$=":300"] {
    gap: var(--zs-300)
}

*[z-flex="400"], *[z-flex$=":400"] {
    gap: var(--zs-400)
}

*[z-flex="600"], *[z-flex$=":600"] {
    gap: var(--zs-600)
}

*[z-align^=center] {
    justify-content: center
}

*[z-align^=right] {
    justify-content: end
}

*[z-align^=left] {
    justify-content: start
}

*[z-align^=even] {
    justify-content: space-evenly
}

*[z-align^=between] {
    justify-content: space-between
}

*[z-align^=around] {
    justify-content: space-around
}

*[z-align*=":top"] {
    align-items: flex-start
}

*[z-align*=":bottom"] {
    align-items: flex-end
}

*[z-align*=":center"] {
    align-items: center
}

*[z-align*=":stretch"] {
    align-items: stretch
}

*[z-align*=":baseline"] {
    align-items: baseline
}

*[z-align$=":join"] {
    align-content: center
}

*[z-align$=":start"] {
    align-content: flex-start
}

*[z-align$=":end"] {
    align-content: flex-end
}

*[z-align$=":fill"] {
    align-content: stretch
}

*[z-align$=":disperse"] {
    align-content: space-between
}

*[z-align$=":uniform"] {
    align-content: space-around
}

:root {
    --z-layout--width: calc( (var(--z-grid--columns-width) * var(--z-grid--columns)) + (var(--z-grid--columns-gutter) * (var(--z-grid--columns) - 1)) )
}

@media (width < 768px) {
    :root {
        --z-layout--width: calc(100vw - 60px)
    }
}

*[z-layout] {
    position: relative;
    display: grid;
    grid-auto-columns: var(--z-layout--width);
    grid-auto-flow: row;
    justify-content: center
}

section[z-scroll] {
    max-width: 100vw;
    width: 100%;
    overflow-x: visible;
    overflow-y: hidden;
    box-sizing: border-box;
    padding: var(--z-scroll--padding, var(--zs-100) var(--zs-50));
    margin-bottom: var(--zs-100)
}

    section[z-scroll] > div {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(var(--z-scroll--min, 200px),1fr));
        grid-auto-flow: column;
        gap: var(--z-scroll--gap, var(--zs-100));
        align-items: flex-start;
        box-sizing: content-box;
        min-width: 100%
    }

        section[z-scroll] > div:after {
            content: "";
            width: var(--z-scroll--after, var(--zs-100));
            height: 1px;
            display: inline-block
        }

*[z-button-group], *[z-input-group] {
    display: flex
}

:root, ::part(z-light), *[z-theme=light] {
    --z-social--bluesky: url(https://zds.zurich.com/0.7.0/social/bluesky.svg);
    --z-social--bluesky--mono: url(https://zds.zurich.com/0.7.0/social/bluesky--w.svg);
    --z-social--facebook: url(https://zds.zurich.com/0.7.0/social/facebook.svg);
    --z-social--facebook--mono: url(https://zds.zurich.com/0.7.0/social/facebook--w.svg);
    --z-social--instagram: url(https://zds.zurich.com/0.7.0/social/instagram.svg);
    --z-social--instagram--mono: url(https://zds.zurich.com/0.7.0/social/instagram--w.svg);
    --z-social--line: url(https://zds.zurich.com/0.7.0/social/line.svg);
    --z-social--line--mono: url(https://zds.zurich.com/0.7.0/social/line--w.svg);
    --z-social--linkedin: url(https://zds.zurich.com/0.7.0/social/linkedin.svg);
    --z-social--linkedin--mono: url(https://zds.zurich.com/0.7.0/social/linkedin--w.svg);
    --z-social--pinterest: url(https://zds.zurich.com/0.7.0/social/pinterest.svg);
    --z-social--pinterest--mono: url(https://zds.zurich.com/0.7.0/social/pinterest--w.svg);
    --z-social--reddit: url(https://zds.zurich.com/0.7.0/social/reddit.svg);
    --z-social--reddit--mono: url(https://zds.zurich.com/0.7.0/social/reddit--w.svg);
    --z-social--spotify: url(https://zds.zurich.com/0.7.0/social/spotify.svg);
    --z-social--spotify--mono: url(https://zds.zurich.com/0.7.0/social/spotify--w.svg);
    --z-social--telegram: url(https://zds.zurich.com/0.7.0/social/telegram.svg);
    --z-social--telegram--mono: url(https://zds.zurich.com/0.7.0/social/telegram--w.svg);
    --z-social--threads: url(https://zds.zurich.com/0.7.0/social/threads.svg);
    --z-social--threads--mono: url(https://zds.zurich.com/0.7.0/social/threads--w.svg);
    --z-social--tiktok: url(https://zds.zurich.com/0.7.0/social/tiktok.svg);
    --z-social--tiktok--mono: url(https://zds.zurich.com/0.7.0/social/tiktok--w.svg);
    --z-social--twitter: url(https://zds.zurich.com/0.7.0/social/twitter.svg);
    --z-social--twitter--mono: url(https://zds.zurich.com/0.7.0/social/twitter--w.svg);
    --z-social--wechat: url(https://zds.zurich.com/0.7.0/social/wechat.svg);
    --z-social--wechat--mono: url(https://zds.zurich.com/0.7.0/social/wechat--w.svg);
    --z-social--whatsapp: url(https://zds.zurich.com/0.7.0/social/whatsapp.svg);
    --z-social--whatsapp--mono: url(https://zds.zurich.com/0.7.0/social/whatsapp--w.svg);
    --z-social--workplace: url(https://zds.zurich.com/0.7.0/social/workplace.svg);
    --z-social--workplace--mono: url(https://zds.zurich.com/0.7.0/social/workplace--w.svg);
    --z-social--youtube: url(https://zds.zurich.com/0.7.0/social/youtube.svg);
    --z-social--youtube--mono: url(https://zds.zurich.com/0.7.0/social/youtube--w.svg)
}

::part(z-dark), *[z-theme=dark] {
    --z-social--bluesky: var(--z-social--bluesky--mono);
    --z-social--facebook: var(--z-social--facebook--mono);
    --z-social--instagram: var(--z-social--instagram--mono);
    --z-social--line: var(--z-social--line--mono);
    --z-social--linkedin: var(--z-social--linkedin--mono);
    --z-social--pinterest: var(--z-social--pinterest--mono);
    --z-social--reddit: var(--z-social--reddit--mono);
    --z-social--spotify: var(--z-social--spotify--mono);
    --z-social--telegram: var(--z-social--telegram--mono);
    --z-social--threads: var(--z-social--threads--mono);
    --z-social--tiktok: var(--z-social--tiktok--mono);
    --z-social--twitter: var(--z-social--twitter--mono);
    --z-social--wechat: var(--z-social--wechat--mono);
    --z-social--whatsapp: var(--z-social--whatsapp--mono);
    --z-social--workplace: var(--z-social--workplace--mono);
    --z-social--youtube: var(--z-social--youtube--mono)
}

* {
    outline-color: var(--z-fc-outline-color);
    outline-offset: var(--z-fc-outline-offset)
}

:where(:where(input[type=checkbox],label):is([z-checkbox],[z-switch],[z-boolean-icon]),*[z-theme=light] :where(input[type=checkbox],label):is([z-checkbox],[z-switch],[z-boolean-icon]),:where(input[type=checkbox],label):is([z-checkbox],[z-switch],[z-boolean-icon])[z-theme=light],fieldset[z-radio-select]>label,*[z-theme=light] fieldset[z-radio-select]>label,fieldset[z-radio-select]>label[z-theme=light]) {
    --_color--checked: var(--z-bg-active);
    --_color--error: var(--z-bg-negative)
}

input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]), label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox], fieldset[z-radio-select] > label > input[type=radio] {
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--z-boolean-input--bg, var(--z-sf-base--eq));
    width: var(--z-boolean-input--size, var(--zs-150));
    height: var(--z-boolean-input--size, var(--zs-150));
    display: grid;
    aspect-ratio: 1;
    color-scheme: light;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 2px solid var(--z-boolean-input--border-color, var(--z-br-subtle));
    margin: 0;
    transition: background-color .2s ease-in-out,border-color .2s ease-in-out,border-width .2s ease-in-out,outline-offset .2s ease-in-out,outline-width .2s ease-in-out
}

    input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):focus, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:focus, fieldset[z-radio-select] > label > input[type=radio]:focus {
        outline-offset: var(--z-fc-outline-offset);
        outline: var(--z-fc-outline)
    }

    input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):not(:disabled)[aria-invalid], label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:not(:disabled)[aria-invalid], fieldset[z-radio-select] > label > input[type=radio]:not(:disabled)[aria-invalid] {
        border-color: var(--z-boolean-input--border-color--invalid, var(--z-br-negative))
    }

    input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):disabled, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:disabled, fieldset[z-radio-select] > label > input[type=radio]:disabled {
        background-color: var(--z-boolean-input--bg--disabled, var(--z-bg-muted-disabled));
        border-color: var(--z-boolean-input--border-color--disabled, var(--z-br-disabled));
        opacity: var(--z-op-disabled);
        cursor: not-allowed
    }

    input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):not(:focus):hover, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:not(:focus):hover, fieldset[z-radio-select] > label > input[type=radio]:not(:focus):hover {
        border-color: var(--z-boolean-input--border-color--hover, var(--z-br-hover))
    }

    input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):checked, input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):indeterminate, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:checked, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:indeterminate, fieldset[z-radio-select] > label > input[type=radio]:checked, fieldset[z-radio-select] > label > input[type=radio]:indeterminate {
        background-color: var(--z-boolean-input--color--checked, var(--z-bg-active))
    }

        input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):checked:not(:disabled)[aria-invalid], input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):indeterminate:not(:disabled)[aria-invalid], label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:checked:not(:disabled)[aria-invalid], label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:indeterminate:not(:disabled)[aria-invalid], fieldset[z-radio-select] > label > input[type=radio]:checked:not(:disabled)[aria-invalid], fieldset[z-radio-select] > label > input[type=radio]:indeterminate:not(:disabled)[aria-invalid] {
            background-color: var(--z-boolean-input--color--invalid, var(--z-bg-status-negative))
        }

            input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):checked:not(:disabled)[aria-invalid]:hover, input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):indeterminate:not(:disabled)[aria-invalid]:hover, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:checked:not(:disabled)[aria-invalid]:hover, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:indeterminate:not(:disabled)[aria-invalid]:hover, fieldset[z-radio-select] > label > input[type=radio]:checked:not(:disabled)[aria-invalid]:hover, fieldset[z-radio-select] > label > input[type=radio]:indeterminate:not(:disabled)[aria-invalid]:hover {
                background-color: var(--z-boolean-input--color--invalid--hover, var(--z-bg-status-negative--hover))
            }

        input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):checked:disabled, input[type=checkbox]:where([z-checkbox],[z-switch],[z-boolean-icon]):indeterminate:disabled, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:checked:disabled, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input[type=checkbox]:indeterminate:disabled, fieldset[z-radio-select] > label > input[type=radio]:checked:disabled, fieldset[z-radio-select] > label > input[type=radio]:indeterminate:disabled {
            background-color: var(--z-boolean-input--color--disabled, var(--z-bg-disabled))
        }

label:where([z-checkbox],[z-switch],[z-boolean-icon]), fieldset[z-radio-select] > label {
    cursor: pointer;
    font: var(--zf-body-16--300);
    display: grid;
    grid-template: "i l" max-content "v v" max-content/max-content 1fr;
    position: relative;
    -moz-column-gap: var(--zs-50);
    column-gap: var(--zs-50);
    color: currentColor;
    justify-content: flex-end;
    align-items: center;
    justify-content: left;
    text-align: left
}

    label:where([z-checkbox],[z-switch],[z-boolean-icon]):has(input:disabled), fieldset[z-radio-select] > label:has(input:disabled) {
        color: var(--z-boolean-input--text--disabled, var(--z-ct-disabled));
        opacity: var(--z-op-disabled)
    }

    label:where([z-checkbox],[z-switch],[z-boolean-icon]) > input:is([type=checkbox],[type=radio]), fieldset[z-radio-select] > label > input:is([type=checkbox],[type=radio]) {
        grid-area: i
    }

    label:where([z-checkbox],[z-switch],[z-boolean-icon]) > span, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > small, fieldset[z-radio-select] > label > span, fieldset[z-radio-select] > label > small {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    label:where([z-checkbox],[z-switch],[z-boolean-icon]) > span, fieldset[z-radio-select] > label > span {
        text-wrap: wrap;
        grid-area: l
    }

        label:where([z-checkbox],[z-switch],[z-boolean-icon]) > span:has(~input:not(:disabled)[aria-invalid]), fieldset[z-radio-select] > label > span:has(~input:not(:disabled)[aria-invalid]) {
            color: var(--z-boolean-input--text--invalid, var(--z-ct-negative))
        }

        label:where([z-checkbox],[z-switch],[z-boolean-icon]) > span:has(~input:disabled), fieldset[z-radio-select] > label > span:has(~input:disabled) {
            opacity: var(--z-op-disabled);
            color: var(--z-boolean-input--text--disabled, var(--z-ct-disabled));
            cursor: not-allowed
        }

    label:where([z-checkbox],[z-switch],[z-boolean-icon]) > small, fieldset[z-radio-select] > label > small {
        grid-area: v;
        font: var(--zf-capt-12--500);
        text-wrap: nowrap;
        margin-top: var(--zs-12);
        display: flex;
        gap: var(--zs-25)
    }

        input:not(:disabled)[aria-invalid] + label:where([z-checkbox],[z-switch],[z-boolean-icon]) > small, label:where([z-checkbox],[z-switch],[z-boolean-icon]) > small:has(~input:not(:disabled)[aria-invalid]), input:not(:disabled)[aria-invalid] + fieldset[z-radio-select] > label > small, fieldset[z-radio-select] > label > small:has(~input:not(:disabled)[aria-invalid]) {
            color: var(--z-boolean-input--text--invalid, var(--z-ct-negative))
        }

    label:where([z-checkbox],[z-switch],[z-boolean-icon]) > span:has(~input[type=checkbox]:required):after {
        content: "*";
        padding-left: var(--zs-25)
    }

:where(label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]),*[z-theme=light] label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]),label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider])[z-theme=light],div:where([z-select]),*[z-theme=light] div:where([z-select]),div:where([z-select])[z-theme=light]) {
    --_label-color: var(--z-input--label-color);
    --_border-width: 1px;
    --_color: var(--z-input--color);
    --_color--shaped: var(--z-input--color--shaped);
    --_icon-size: var(--zs-150);
    --_padding-extra: 0rem
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]), div:where([z-select]) {
    margin: 0;
    min-width: -moz-max-content;
    min-width: max-content;
    color-scheme: only light;
    cursor: pointer;
    display: grid;
    grid-template: "l" max-content "i" max-content "v" max-content/100%;
    position: relative;
    font: var(--zf-body-16--300);
    color: var(--z-input--color, var(--z-ct-primary));
    background: transparent !important;
    max-width: var(--z-input--max-width, 800px);
    width: 100%
}

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > :is(output,small), div:where([z-select]) > :is(output,small) {
        margin-top: var(--zs-12)
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]):has(>output), div:where([z-select]):has(>output) {
        grid-template: "l l" max-content "i i" max-content "v o" max-content/1fr minmax(auto,50px)
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]):has(*[aria-invalid]), div:where([z-select]):has(*[aria-invalid]) {
        color: var(--z-input--color--invalid, var(--z-ct-negative)) !important
    }

        label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]):has(*[aria-invalid]) > span, div:where([z-select]):has(*[aria-invalid]) > span {
            color: var(--z-input--label-color--invalid, var(--z-ct-negative)) !important
        }

        label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]):has(*[aria-invalid]) > output, label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]):has(*[aria-invalid]) > small, div:where([z-select]):has(*[aria-invalid]) > output, div:where([z-select]):has(*[aria-invalid]) > small {
            color: var(--z-input--help-text-color--invalid, var(--z-ct-negative)) !important
        }

        label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]):has(*[aria-invalid]) > input, div:where([z-select]):has(*[aria-invalid]) > input {
            border-color: var(--z-input--border-color--invalid, var(--z-br-negative))
        }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > span, div:where([z-select]) > span {
        grid-area: l;
        position: relative;
        top: calc(var(--_padding-extra) + var(--zs-75));
        display: flex;
        pointer-events: none;
        width: -moz-max-content;
        width: max-content;
        margin-bottom: 0;
        order: -1;
        z-index: 1;
        color: var(--z-input--label-color, var(--z-ct-clickable));
        height: var(--zs-100);
        transition: all .25s ease-in-out;
        box-sizing: border-box;
        white-space: nowrap
    }

        label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > span:has(~:is(input:not([type=checkbox]),textarea)[required]):after, div:where([z-select]) > span:has(~:is(input:not([type=checkbox]),textarea)[required]):after {
            content: "*";
            padding-left: .25em;
            font-weight: 600
        }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > :is(output,small), div:where([z-select]) > :is(output,small) {
        font: var(--zf-capt-12--300);
        align-self: center
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > output, div:where([z-select]) > output {
        grid-area: o;
        padding-left: var(--zs-50);
        text-align: right;
        font: var(--zf-capt-12--500);
        color: var(--z-input--help-text-color, var(--z-ct-primary));
        text-wrap: nowrap
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > small, div:where([z-select]) > small {
        display: none
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > small, div:where([z-select]) > small {
        grid-area: v;
        max-width: 100%;
        display: flex;
        gap: var(--zs-25);
        font: var(--zf-capt-12--500) !important;
        color: var(--z-input--help-text-color, var(--z-ct-primary));
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap
    }

        label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input],[z-range-slider],[z-slider]) > small:after, div:where([z-select]) > small:after {
            content: attr(title)
        }

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea) {
    grid-area: i;
    cursor: pointer;
    font: var(--zf-body-18--300);
    display: inline-block;
    position: relative;
    width: 100%;
    height: var(--zs-150);
    background-color: transparent;
    border: none;
    border-bottom: var(--_border-width) solid var(--z-input--border-color, var(--z-br-primary));
    color: currentColor;
    padding-right: var(--z-input--padding-right, 0px);
    margin: 0;
    transition: box-shadow .2s ease-in-out,border-color .2s ease-in-out,border-width .2s ease-in-out;
    box-sizing: border-box
}

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea)::-moz-placeholder {
        color: transparent
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea)::placeholder {
        color: transparent
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):not([readonly]):focus {
        --_border-width: 3px;
        border-color: var(--z-input--border-color--hover, var(--z-br-hover))
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:placeholder-shown))::-moz-placeholder {
        color: currentColor
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:-moz-placeholder-shown))::placeholder {
        color: currentColor
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:placeholder-shown))::placeholder {
        color: currentColor
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):disabled {
        cursor: not-allowed
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea)[readonly] {
        background-color: transparent !important;
        border-bottom-color: transparent
    }

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > span:has(~:is(input:not([type=checkbox]),textarea):is(:not([readonly]):focus,:not(:empty),:not(:-moz-placeholder-shown))) {
    top: 0;
    left: 0;
    font: var(--zf-capt-12--500)
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > span:has(~:is(input:not([type=checkbox]),textarea):is(:not([readonly]):focus,:not(:empty),:not(:placeholder-shown))) {
    top: 0;
    left: 0;
    font: var(--zf-capt-12--500)
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > small {
    display: inline-block
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > output, label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > small {
    color: var(--z-input--help-text-color--invalid)
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > small:not(:empty) {
    display: inline-block
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea):disabled) {
    opacity: var(--z-op-disabled);
    cursor: not-allowed
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(input[required]) > span:after {
    content: "*"
}

label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea) {
    border-radius: 0;
    padding: 0 0 1px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none
}

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:-moz-placeholder-shown)) {
        outline: none
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:placeholder-shown)) {
        outline: none
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea)::-webkit-input-placeholder {
        color: transparent
    }

    label:where([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):-ms-input-placeholder {
        color: transparent
    }

label:where([z-number-input],[z-text-input])[icon]:not(:has(>input[readonly])):after, label:where([z-date-input],[z-time-input]):not(:has(>input[readonly])):after, div:where([z-select]):not(:has(>input[readonly])):after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 1em;
    right: var(--zs-50);
    top: calc(var(--zs-50) + var(--_padding-extra));
    font-size: var(--_icon-size);
    order: 1;
    -webkit-mask: var(--zi);
    mask: var(--zi);
    -webkit-mask-size: 1em;
    mask-size: 1em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: currentColor;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

label:not(:where([z-number-input^=shaped],[z-text-input^=shaped]))[icon]:after, label:not(:where([z-date-input^=shaped],[z-time-input^=shaped])):after, div:not(:where([z-select^=shaped])):after {
    top: calc(var(--_padding-extra) + var(--zs-75));
    right: calc(var(--zs-100) + var(--z-input--padding-right, 0px))
}

label:where([z-number-input],[z-text-input])[icon] > input {
    padding-right: calc(var(--_icon-size) + var(--zs-50))
}

label:not(:where([z-number-input^=shaped],[z-text-input^=shaped]))[icon] > input {
    padding-right: calc(var(--_icon-size) + var(--zs-100))
}

label:where([z-date-input],[z-time-input]) > input {
    padding-right: var(--zs-50)
}

    label:where([z-date-input],[z-time-input]) > input::-ms-reveal {
        cursor: pointer;
        filter: opacity(0) !important;
        z-index: 10;
        top: calc(-1 * var(--25))
    }

    label:where([z-date-input],[z-time-input]) > input::-webkit-calendar-picker-indicator {
        cursor: pointer;
        filter: opacity(0) !important;
        z-index: 10;
        top: calc(-1 * var(--zs-25))
    }

    label:where([z-date-input],[z-time-input]) > input::-webkit-datetime-edit-fields-wrapper {
        display: block
    }

label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) {
    color: var(--z-input--color--shaped, var(--zc-blue-dark));
    grid-template: "l" 0 "i" max-content "v" max-content/100%
}

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(output,small):not(:empty), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(output,small):not(:empty) {
        margin-top: var(--zs-25)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > output, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > output {
        padding-right: var(--zs-150)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > small, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > small {
        padding-left: var(--zs-150)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(>output), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(>output) {
        grid-template: "l l" 0 "i i" max-content "v o" max-content/1fr minmax(auto,6rem)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(*[aria-invalid]), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(*[aria-invalid]) {
        color: var(--z-input--color--shaped--invalid, var(--z-ct-negative--eq)) !important
    }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(*[aria-invalid]) > span, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(*[aria-invalid]) > span {
            color: var(--z-input--label--shaped--invalid, var(--z-ct-negative--eq)) !important
        }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(*[aria-invalid]) > input, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(*[aria-invalid]) > input {
            border-color: var(--z-input--border-color--invalid, var(--z-br-negative))
        }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(input:not([type=checkbox]),textarea), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea) {
        min-height: calc(3rem + var(--_padding-extra) * 2);
        padding: calc(1.25rem + var(--_padding-extra)) calc(var(--zs-100) + var(--z-input--padding-right, 0px)) calc(var(--zs-25) + var(--_padding-extra)) var(--zs-150);
        position: relative;
        gap: var(--sp-50);
        align-self: stretch;
        border: var(--_border-width) solid transparent;
        border-radius: var(--z-input--radius, 1.75rem);
        background-color: var(--z-input--bg--shaped, var(--z-bg-light-base));
        box-sizing: border-box;
        transition: border-radius .05s ease-in-out
    }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:-moz-placeholder-shown)), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:-moz-placeholder-shown)) {
            padding-top: calc(1.25rem + var(--_padding-extra))
        }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:placeholder-shown)), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):is(:focus,:not(:empty),:not(:placeholder-shown)) {
            padding-top: calc(1.25rem + var(--_padding-extra))
        }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(input:not([type=checkbox]),textarea):not([disabled]):not([readonly]):is(:hover,:focus), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):not([disabled]):not([readonly]):is(:hover,:focus) {
            border-color: var(--z-input--border-color--shaped--hover, var(--zc-blue-light));
            box-shadow: var(--zd-2)
        }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(input:not([type=checkbox]),textarea):not([readonly]):focus, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea):not([readonly]):focus {
            outline: var(--z-fc-outline);
            transition: outline-offset .2s ease-in-out,outline-width .2s ease-in-out
        }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > :is(input:not([type=checkbox]),textarea)[readonly], :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > :is(input:not([type=checkbox]),textarea)[readonly] {
            color: var(--z-input--color--shaped--readonly, var(--z-ct-primary));
            border-color: var(--z-input--border-color--readonly, var(--z-br-disabled))
        }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > span, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > span {
        color: var(--z-color--error)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > :is(input:not([type=checkbox]),textarea), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea)[aria-invalid]) > :is(input:not([type=checkbox]),textarea) {
        border-color: var(--z-color--error)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])):has(:is(input:not([type=checkbox]),textarea):disabled), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]):has(:is(input:not([type=checkbox]),textarea):disabled) {
        opacity: var(--z-op-disabled)
    }

    label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > span, :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > span {
        color: var(--z-input--label--shaped, var(--z-ct-clickable--eq));
        left: calc(var(--zs-150) + var(--_border-width)) !important
    }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > span:has(~:is(input:not([type=checkbox]),textarea):is(:not([readonly]):focus,:not(:empty),:not(:-moz-placeholder-shown))), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > span:has(~:is(input:not([type=checkbox]),textarea):is(:not([readonly]):focus,:not(:empty),:not(:-moz-placeholder-shown))) {
            top: calc(var(--zs-25) + var(--_padding-extra)) !important
        }

        label:where([z-date-input]:not([z-date-input^=line]),[z-number-input]:not([z-number-input^=line]),[z-password-input]:not([z-password-input^=line]),[z-text-input]:not([z-text-input^=line]),[z-color-input]:not([z-color-input^=line]),[z-file-input]:not([z-file-input^=line]),[z-textarea]:not([z-textarea^=line]),[z-time-input]:not([z-time-input^=line])) > span:has(~:is(input:not([type=checkbox]),textarea):is(:not([readonly]):focus,:not(:empty),:not(:placeholder-shown))), :is(form[z-form^=shaped],fieldset[z-fieldset^=shaped],fieldset[z-input-group]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-color-input],[z-file-input],[z-textarea],[z-time-input]) > span:has(~:is(input:not([type=checkbox]),textarea):is(:not([readonly]):focus,:not(:empty),:not(:placeholder-shown))) {
            top: calc(var(--zs-25) + var(--_padding-extra)) !important
        }

label:where([z-date-input$=":l"],[z-date-input=l],[z-number-input$=":l"],[z-number-input=l],[z-password-input$=":l"],[z-password-input=l],[z-text-input$=":l"],[z-text-input=l],[z-textarea$=":l"],[z-textarea=l],[z-time-input$=":l"] [z-time-input=l]), :is(form[z-form$=":l"],form[z-form=l],fieldset[z-fieldset$=":l"],fieldset[z-fieldset=l],fieldset[z-input-group=l]) label:is([z-date-input],[z-number-input],[z-password-input],[z-text-input],[z-textarea],[z-time-input]) {
    --_padding-extra: var(--zs-25)
}

:where(*[z-badge],*[z-theme=light] *[z-badge],*[z-badge][z-theme=light]) {
    --_size: 1.375rem;
    --_icon-size: var(--zs-100)
}

*[z-badge] {
    position: relative;
    display: inline-block;
    order: 3
}

    *[z-badge]:after, *[z-badge]:before {
        color: var(--z-badge--color, var(--z-ct-on-status));
        box-sizing: border-box;
        position: absolute;
        top: var(--z-badge--top, calc(var(--_size) / -2));
        right: var(--z-badge--right, 0);
        width: var(--_size);
        height: var(--_size);
        min-width: var(--_size);
        z-index: 1;
        transform-origin: center center
    }

    *[z-badge]:before {
        content: "";
        display: grid;
        place-items: center;
        background-color: var(--z-badge--bg, var(--z-bg-brand));
        font: var(--zf-capt-12--500);
        border-radius: 100px;
        order: 2
    }

    *[z-badge]:after {
        -webkit-mask: var(--zi);
        mask: var(--zi);
        background-color: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: var(--z-badge--icon-size, var(--_icon-size));
        mask-size: var(--z-badge--icon-size, var(--_icon-size));
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        order: 3
    }

    *[z-badge][icon]:after {
        content: ""
    }

    *[z-badge][fill=bold]:before {
        background-color: var(--z-bg-brand--bold)
    }

    *[z-badge][fill=blue-sky]:before {
        background-color: var(--z-bg-info)
    }

    *[z-badge][fill=moss]:before {
        background-color: var(--z-bg-positive)
    }

    *[z-badge][fill=peach]:before {
        background-color: var(--z-bg-negative)
    }

    *[z-badge][fill=lemon]:before {
        background-color: var(--z-bg-alert)
    }

    *[z-badge][fill=lemon]:after, *[z-badge][fill=lemon]:before {
        color: var(--z-ct-on-status--eq)
    }

    *[z-badge][fill=dove]:before {
        background-color: var(--zc-dove)
    }

    *[z-badge][fill=dove]:after, *[z-badge][fill=dove]:before {
        color: var(--z-ct-on-status--eq)
    }

    *[z-badge][fill=dove]:after, *[z-badge][fill=dove]:before {
        color: var(--zg-4)
    }

    *[z-badge][fill=mint]:before {
        background-color: var(--z-bg-mint)
    }

    *[z-badge][fill=mint]:after, *[z-badge][fill=mint]:before {
        color: var(--z-ct-on-status--eq)
    }

    *[z-badge][z-badge^=text]:before {
        width: -moz-max-content;
        width: max-content;
        line-height: var(--_size);
        text-align: center;
        padding: 0 calc(var(--_size) / 3);
        white-space: nowrap;
        content: attr(text)
    }

    *[z-badge]:is([z-badge*=":outline"],[z-badge^=outline]):before {
        outline: 2px solid var(--z-badge--border-color, var(--z-br-placeholder))
    }

    *[z-badge]:is([z-badge^=l],[z-badge$=":l"]) {
        --_size: 1.75rem;
        --_icon-size: var(--zs-150)
    }

        *[z-badge]:is([z-badge^=l],[z-badge$=":l"]):before {
            font: var(--zf-capt-14--500)
        }

    *[z-badge]:is([z-badge^=s],[z-badge$=":s"]) {
        --_size: 1.125rem;
        --_icon-size: var(--zs-75)
    }

        *[z-badge]:is([z-badge^=s],[z-badge$=":s"]):before {
            font: var(--zf-capt-12--500)
        }

    *[z-badge]:is([z-badge^=xs],[z-badge$=":xs"]) {
        --_size: .875rem;
        --_icon-size: var(--zs-75)
    }

        *[z-badge]:is([z-badge^=xs],[z-badge$=":xs"]):before {
            font: var(--zf-capt-10--500)
        }

:where(button[z-button],*[z-theme=light] button[z-button],button[z-button][z-theme=light],a[role=button][z-button],*[z-theme=light] a[role=button][z-button],a[role=button][z-button][z-theme=light],input[type=submit][z-button],*[z-theme=light] input[type=submit][z-button],input[type=submit][z-button][z-theme=light]) {
    --_bg: var(--z-bg-primary);
    --_bg--hover: var(--z-bg-hover);
    --_bg--disabled: var(--z-bg-disabled);
    --_bg--active: var(--z-bg-pressed);
    --_color: var(--z-ct-clickable--inv);
    --_color--hover: var(--z-ct-clickable--inv);
    --_color--disabled: var(--z-ct-disabled--eq);
    --_color--loading: var(--z-ct-primary--inv);
    --_opacity--disabled: var(--z-op-disabled);
    --_pad-h: var(--zs-150);
    --_pad-v: var(--zs-75);
    --_icon-size: var(--zs-150)
}

button[z-button], a[role=button][z-button], input[type=submit][z-button] {
    --z-icon--size: var(--_icon-size);
    --z-icon--color: currentColor;
    cursor: pointer;
    font: var(--zf-body-18);
    display: inline-block;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--zs-50);
    padding: calc(var(--_pad-v) - 2px) calc(var(--_pad-h) - 2px);
    height: var(--zs-300);
    min-width: var(--zs-300);
    border: 2px solid transparent;
    border-radius: var(--z-button--radius, 28px) !important;
    background-color: var(--z-button--bg, var(--_bg)) !important;
    color: var(--z-button--color, var(--_color)) !important;
    margin: 0;
    width: -moz-max-content;
    width: max-content;
    text-align: center;
    text-decoration-line: none;
    text-wrap: nowrap;
    white-space: nowrap;
    transition: background-color .2s,color .2s,border-color .2s,border-radius .2s,box-shadow .2s
}

    button[z-button]:focus, a[role=button][z-button]:focus, input[type=submit][z-button]:focus {
        outline-offset: var(--z-fc-outline-offset);
        outline: var(--z-fc-outline);
        transition: outline-offset .2s ease-in-out,outline-width .2s ease-in-out
    }

    button[z-button]:not(:disabled,[loading]):not(:active):hover, a[role=button][z-button]:not(:disabled,[loading]):not(:active):hover, input[type=submit][z-button]:not(:disabled,[loading]):not(:active):hover {
        background-color: var(--z-button--bg--hover, var(--_bg--hover)) !important;
        color: var(--z-button--color--hover, var(--_color--hover)) !important;
        box-shadow: var(--z-button--shadow, var(--zd-2))
    }

    button[z-button]:active, a[role=button][z-button]:active, input[type=submit][z-button]:active {
        background-color: var(--z-button--bg--active, var(--_bg--active)) !important
    }

    button[z-button]:empty, a[role=button][z-button]:empty, input[type=submit][z-button]:empty {
        padding: calc(var(--_pad-v) - 2px)
    }

    button[z-button]:not([loading]):disabled, a[role=button][z-button]:not([loading]):disabled, input[type=submit][z-button]:not([loading]):disabled {
        color: var(--z-button--color--disabled, var(--_color--disabled)) !important;
        background-color: var(--z-button--bg--disabled, var(--_bg--disabled)) !important;
        cursor: not-allowed;
        opacity: var(--z-button--opacity--disabled, var(--_opacity--disabled))
    }

    section:is([z-button-group*=":s"],[z-button-group=s]) > button[z-button], button[z-button]:is([z-button*=":s"],[z-button=s]), section:is([z-button-group*=":s"],[z-button-group=s]) > a[role=button][z-button], a[role=button][z-button]:is([z-button*=":s"],[z-button=s]), section:is([z-button-group*=":s"],[z-button-group=s]) > input[type=submit][z-button], input[type=submit][z-button]:is([z-button*=":s"],[z-button=s]) {
        height: 2.5rem;
        min-width: 2.5rem;
        --_pad-v: var(--zs-50);
        --_pad-h: var(--zs-100)
    }

    section:is([z-button-group*=":xs"],[z-button-group=xs]) > button[z-button], button[z-button]:is([z-button*=":xs"],[z-button=xs]), section:is([z-button-group*=":xs"],[z-button-group=xs]) > a[role=button][z-button], a[role=button][z-button]:is([z-button*=":xs"],[z-button=xs]), section:is([z-button-group*=":xs"],[z-button-group=xs]) > input[type=submit][z-button], input[type=submit][z-button]:is([z-button*=":xs"],[z-button=xs]) {
        height: 2.25rem;
        min-width: 2.25rem;
        gap: var(--zs-25);
        font: var(--zf-capt-14);
        --_pad-v: var(--zs-50);
        --_pad-h: var(--zs-100);
        --_icon-size: var(--zs-100)
    }

    section:is([z-button-group*=":l"],[z-button-group=l]) > button[z-button], button[z-button]:is([z-button*=":l"],[z-button=l]), section:is([z-button-group*=":l"],[z-button-group=l]) > a[role=button][z-button], a[role=button][z-button]:is([z-button*=":l"],[z-button=l]), section:is([z-button-group*=":l"],[z-button-group=l]) > input[type=submit][z-button], input[type=submit][z-button]:is([z-button*=":l"],[z-button=l]) {
        height: 3.5rem;
        min-width: 3.5rem;
        --_pad-v: var(--zs-100)
    }

    button[z-button][z-button^=link], section[z-button-group^=secondary] > button[z-button], div[z-segmented-control] > label > button[z-button]:has(+input[type=radio]:not(:checked)), button[z-button][z-button^=secondary], a[role=button][z-button][z-button^=link], section[z-button-group^=secondary] > a[role=button][z-button], div[z-segmented-control] > label > a[role=button][z-button]:has(+input[type=radio]:not(:checked)), a[role=button][z-button][z-button^=secondary], input[type=submit][z-button][z-button^=link], section[z-button-group^=secondary] > input[type=submit][z-button], div[z-segmented-control] > label > input[type=submit][z-button]:has(+input[type=radio]:not(:checked)), input[type=submit][z-button][z-button^=secondary] {
        --_bg--disabled: transparent;
        --_bg--hover: transparent;
        --_bg--active: transparent;
        --_bg: transparent;
        --_color: var(--z-ct-clickable);
        --_color--hover: var(--z-ct-hover);
        --_color--active: var(--z-ct-pressed);
        --_color--loading: var(--z-ct-primary);
        --_color--disabled: var(--z-ct-disabled)
    }

    button[z-button][z-button^=link], a[role=button][z-button][z-button^=link], input[type=submit][z-button][z-button^=link] {
        padding: var(--zs-50) 0;
        border-radius: var(--z-button--radius, 0) !important;
        border-color: transparent !important;
        box-shadow: none !important
    }

        button[z-button][z-button^=link]:hover, a[role=button][z-button][z-button^=link]:hover, input[type=submit][z-button][z-button^=link]:hover {
            box-shadow: none !important
        }

    section[z-button-group^=secondary] > button[z-button], button[z-button][z-button^=secondary], section[z-button-group^=secondary] > a[role=button][z-button], a[role=button][z-button][z-button^=secondary], section[z-button-group^=secondary] > input[type=submit][z-button], input[type=submit][z-button][z-button^=secondary] {
        border-color: currentColor
    }

    button[z-button][z-button^=positive], a[role=button][z-button][z-button^=positive], input[type=submit][z-button][z-button^=positive] {
        --_bg: var(--z-bg-positive);
        --_bg--hover: var(--z-bg-positive--hover);
        --_bg--active: var(--z-bg-status-positive--hover)
    }

    button[z-button][z-button^=negative], a[role=button][z-button][z-button^=negative], input[type=submit][z-button][z-button^=negative] {
        --_bg: var(--z-bg-negative);
        --_bg--hover: var(--z-bg-negative--hover);
        --_bg--active: var(--z-bg-status-negative--hover)
    }

    button[z-button][icon][icon-right]:after, button[z-button][icon]:not([icon-right]):before, a[role=button][z-button][icon][icon-right]:after, a[role=button][z-button][icon]:not([icon-right]):before, input[type=submit][z-button][icon][icon-right]:after, input[type=submit][z-button][icon]:not([icon-right]):before {
        content: "";
        display: inline-block;
        width: var(--_icon-size);
        height: var(--_icon-size);
        -webkit-mask: var(--zi);
        mask: var(--zi);
        -webkit-mask-size: var(--_icon-size);
        mask-size: var(--_icon-size);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: currentColor
    }

    button[z-button][z-button$=round]:not([wide]), button[z-button]:empty:not([wide]), a[role=button][z-button][z-button$=round]:not([wide]), a[role=button][z-button]:empty:not([wide]), input[type=submit][z-button][z-button$=round]:not([wide]), input[type=submit][z-button]:empty:not([wide]) {
        box-sizing: content-box;
        width: var(--_icon-size);
        min-width: var(--_icon-size);
        height: var(--_icon-size);
        padding: calc(var(--_pad-v) - 2px)
    }

    button[z-button][loading], a[role=button][z-button][loading], input[type=submit][z-button][loading] {
        --_bg: var(--_bg--active) !important;
        --_color: transparent !important;
        border-color: var(--z-button--color--loading, var(--_color--loading))
    }

        button[z-button][loading]:after, a[role=button][z-button][loading]:after, input[type=submit][z-button][loading]:after {
            content: "";
            width: 1em;
            height: 1em;
            position: absolute;
            box-sizing: border-box;
            border-radius: 50%;
            display: inline-block;
            animation: loader 1s linear infinite;
            border: 3px solid var(--z-button--color--loading, var(--_color--loading));
            border-bottom-color: transparent !important
        }

    button[z-button][wide], a[role=button][z-button][wide], input[type=submit][z-button][wide] {
        width: 100%
    }

    button[z-button][wide=spread], a[role=button][z-button][wide=spread], input[type=submit][z-button][wide=spread] {
        justify-content: space-between
    }

:is(button,output)[z-chip] {
    cursor: pointer;
    font: var(--zf-capt-14--500);
    border: none;
    border-radius: var(--zs-75);
    padding: var(--z-chip--padding, 0 var(--zs-50));
    gap: var(--zs-25);
    display: flex;
    place-items: center;
    background-color: var(--z-chip--bg, var(--z-bg-primary)) !important;
    color: var(--z-chip--color, var(--z-ct-clickable--inv)) !important;
    width: -moz-max-content;
    width: max-content;
    transition: box-shadow .2s ease-in-out,background-color .2s ease-in-out
}

button[z-chip]:after {
    --zi: url(https://zds.zurich.com/0.7.0/i/close--o.svg);
    content: "";
    width: 1rem;
    height: 1rem;
    display: inline-block;
    box-sizing: content-box;
    background-color: currentColor;
    margin: 0;
    mask: var(--zi) center/1rem no-repeat;
    -webkit-mask: var(--zi) center/1rem no-repeat
}

button[z-chip]:not(:disabled):not(:active):hover {
    color: var(--z-chip--color--hover, var(--z-ct-clickable--inv)) !important;
    background-color: var(--z-chip--bg--hover, var(--z-bg-hover)) !important;
    box-shadow: var(--zd-2)
}

button[z-chip]:focus {
    outline-offset: var(--z-fc-outline-offset);
    outline: var(--z-fc-outline) !important;
    transition: outline-offset .2s ease-in-out,outline-width .2s ease-in-out
}

button[z-chip]:active {
    color: var(--z-chip--color--active, var(--z-ct-on-pressed)) !important;
    background-color: var(--z-chip--bg--active, var(--z-bg-pressed)) !important
}

button[z-chip]:disabled {
    color: var(--z-chip--color--disabled, var(--z-ct-disabled--eq)) !important;
    background-color: var(--z-chip--bg--disabled, var(--z-bg-disabled)) !important;
    opacity: var(--z-op-disabled);
    cursor: not-allowed
}

div[z-flag] {
    content-visibility: auto;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--z-flag--size, 3rem);
    background: var(--z-flag--url, var(--zl)) no-repeat center center;
    background-color: var(--z-flag--bg, var(--z-sf-brand));
    background-size: cover;
    border-radius: 50%
}

i[z-icon] {
    content-visibility: auto;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--z-icon--size, var(--_size));
    background-color: var(--z-icon--color, currentColor);
    -webkit-mask: var(--z-icon--url, var(--zi)) no-repeat;
    mask: var(--z-icon--url, var(--zi)) no-repeat;
    -webkit-mask-size: 1em;
    mask-size: 1em;
    line-height: 1em
}

:where(i[z-icon],*[z-theme=light] i[z-icon],i[z-icon][z-theme=light]) {
    --_size: var(--zs-150)
}

i[z-icon]:not([icon]) {
    display: none
}

i[z-icon][z-icon=xs], i[z-icon][z-icon$=":xs"] {
    --_size: var(--zs-75)
}

i[z-icon][z-icon=s], i[z-icon][z-icon$=":s"] {
    --_size: var(--zs-100)
}

i[z-icon][z-icon=m], i[z-icon][z-icon$=":m"] {
    --_size: var(--zs-150)
}

i[z-icon][z-icon=l], i[z-icon][z-icon$=":l"] {
    --_size: 3.75rem
}

i[z-icon][z-icon=xl], i[z-icon][z-icon$=":xl"] {
    --_size: 5rem
}

i[z-icon][z-icon^=black] {
    color: #000
}

i[z-icon][z-icon^=white] {
    color: var(--zg-white)
}

i[z-icon][z-icon^=teal] {
    color: var(--zc-teal-100)
}

i[z-icon][z-icon^=moss] {
    color: var(--zc-moss-100)
}

i[z-icon][z-icon^=lilac] {
    color: var(--zc-lilac-100)
}

i[z-icon][z-icon^=peach] {
    color: var(--zc-peach-100)
}

i[z-icon][z-icon^=candy] {
    color: var(--zc-candy-100)
}

i[z-icon][z-icon^=mint] {
    color: var(--zc-mint-100)
}

i[z-icon][z-icon^=lime] {
    color: var(--zc-lime-100)
}

i[z-icon][z-icon^=lemon] {
    color: var(--zc-lemon-100)
}

i[z-icon][z-icon^=powder-pink] {
    color: var(--zc-powder-pink-100)
}

:is(picture,div)[z-image] img {
    border-radius: var(--z-image--radius, 0);
    -o-object-fit: var(--z-image--fit, cover);
    object-fit: var(--z-image--fit, cover);
    -o-object-position: 50% 50%;
    object-position: 50% 50%;
    width: var(--z-image--width, 100%);
    height: var(--z-image--height, auto);
    max-width: 100%;
    background-color: var(--z-image--bg, transparent);
    aspect-ratio: var(--z-image--ratio);
    content-visibility: auto;
    animation: z-skeleton-loading var(--z-skeleton--time, 1.2s) linear infinite alternate
}

    :is(picture,div)[z-image] img[src$="/fallback.svg"] {
        animation: none
    }

    :is(picture,div)[z-image] img[loaded] {
        animation: none;
        background-color: transparent
    }

:is(picture,div)[z-image][image-size] img {
    width: calc((var(--z-image--width, 100%) + var(--z-grid--columns-width)) * var(--_columns) + var(--z-image--width, 100%)) !important
}

:is(picture,div)[z-image][image-copyright] {
    position: relative
}

    :is(picture,div)[z-image][image-copyright]:after {
        content: attr(image-copyright);
        position: absolute;
        right: var(--zs-50);
        color: var(--z-image--copyright-color, var(--zg-white));
        font: var(--zf-capt-12--500);
        top: calc(100% - var(--zs-75) - 1.5em)
    }

:is(picture,div)[z-image="3:2"] img {
    aspect-ratio: 1.5
}

:is(picture,div)[z-image="16:9"] img {
    aspect-ratio: 1.7777777778
}

:is(picture,div)[z-image="4:3"] img {
    aspect-ratio: 1.3333333333
}

:is(picture,div):is([z-image=round],[z-image="1:1:round"],[z-image="1:1"]) img {
    aspect-ratio: 1
}

:is(picture,div):is([z-image=round],[z-image="1:1:round"]) img {
    border-radius: 50%
}

:is(picture,div)[z-image=full-width] img {
    width: 100vw;
    aspect-ratio: 1.5
}

:is(picture,div)[image-size="2"] img {
    --_columns: 1;
    grid-column-end: span 2
}

:is(picture,div)[image-size="3"] img {
    --_columns: 2;
    grid-column-end: span 3
}

:is(picture,div)[image-size="4"] img {
    --_columns: 3;
    grid-column-end: span 4
}

:is(picture,div)[image-size="5"] img {
    --_columns: 4;
    grid-column-end: span 5
}

:is(picture,div)[image-size="6"] img {
    --_columns: 5;
    grid-column-end: span 6
}

@media only screen and (width >= 315px) and (width < 768px) {
    :is(picture,div)[z-image] img {
        width: var(--z-image--width, calc((100% / var(--z-grid--columns) + var(--z-grid--columns-width)) * 2 + 100% / var(--z-grid--columns)))
    }
}

a[z-link] {
    cursor: pointer;
    font: var(--zf-body-16);
    color: var(--z-link--color, var(--z-ct-clickable));
    text-decoration-line: none;
    padding: var(--zs-100) 0rem;
    transition: color .2s ease-in-out;
    text-wrap: nowrap
}

    a[z-link]:focus {
        outline-offset: var(--z-fc-outline-offset);
        outline: var(--z-fc-outline);
        transition: outline-offset .2s ease-in-out,outline-width .2s ease-in-out
    }

    a[z-link]:visited {
        color: var(--z-link--color, var(--z-ct-clickable))
    }

    a[z-link]:is(:hover,[aria-current=page]) {
        color: var(--z-link--color--hover, var(--z-ct-hover))
    }

p > a[z-link] {
    -webkit-text-decoration: underline .5px !important;
    text-decoration: underline .5px !important
}

@keyframes loader {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

div[z-loader] {
    font-size: var(--z-loader--size, var(--_size));
    padding-top: 1em;
    min-width: 1em;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    color: var(--z-loader--fill, var(--z-bg-brand--bold));
    text-align: center
}

:where(div[z-loader],*[z-theme=light] div[z-loader],div[z-loader][z-theme=light]) {
    --_size: 56px;
    --_stroke: var(--zs-50)
}

div[z-loader]:before, div[z-loader]:after {
    content: "";
    position: absolute;
    box-sizing: border-box;
    border-radius: 50%;
    display: inline-block;
    animation: loader 1s linear infinite
}

div[z-loader]:before {
    width: 1em;
    height: 1em;
    border: var(--z-loader--stroke, var(--_stroke)) solid var(--z-loader--fill, var(--z-bg-brand--bold));
    border-bottom-color: transparent;
    margin: 0;
    top: 0;
    left: calc(50% - var(--z-loader--size, var(--_size)) / 2);
    rotate: -45deg
}

div[z-loader]:after {
    font-size: var(--z-loader--stroke, var(--_stroke));
    height: 1em;
    width: 1em;
    background-color: var(--z-loader--fill, var(--z-bg-brand--bold));
    top: calc(var(--z-loader--size, var(--_size)) / 2 - var(--z-loader--stroke, var(--_stroke)) / 2);
    left: calc(50% - 1em);
    margin-left: calc(var(--z-loader--size, var(--_size)) / 2);
    transform-origin: calc(-1 * var(--z-loader--size, var(--_size)) / 2 + var(--z-loader--stroke, var(--_stroke))) center
}

div[z-loader] > span {
    font: var(--zf-capt-14--500);
    color: var(--z-loader--color, var(--z-ct-primary))
}

div[z-loader][small] {
    --_size: 24px;
    --_stroke: var(--zs-25)
}

div[z-logo] {
    content-visibility: auto;
    display: inline-block;
    width: 1em;
    height: var(--z-logo--height, .6717em);
    font-size: var(--z-logo--size, var(--_size));
    background: var(--z-logo--fill, var(--_fill));
    -webkit-mask: var(--z-logo--url, var(--z-logo)) no-repeat;
    mask: var(--z-logo--url, var(--z-logo)) no-repeat;
    -webkit-mask-size: 1em;
    -webkit-mask-position: center center;
    mask-position: center center;
    mask-size: 1em;
    line-height: 1em;
    padding: .24em;
    box-sizing: border-box
}

:where(div[z-logo],*[z-theme=light] div[z-logo],div[z-logo][z-theme=light]) {
    --_size: 8rem;
    --_fill: var(--z-bg-brand)
}

div[z-logo][inline] {
    --_size: 7.13rem;
    height: .2456em;
    padding: .13em;
    -webkit-mask-image: var(--z-logo--url-inline, var(--z-logo--inline));
    mask-image: var(--z-logo--url-inline, var(--z-logo--inline))
}

div[z-logo][z-logo^=🏳️‍🌈] {
    --_fill: linear-gradient(290deg, rgb(237, 34, 36) 25%, rgb(249, 150, 33), rgb(241, 235, 27), rgb(99, 199, 32), rgb(57, 84, 165), rgb(147, 40, 142) 75%)
}

div[z-pictogram] {
    content-visibility: auto;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--z-pictogram--size, 8.75rem);
    background: var(--z-pictogram--url, var(--zp)) no-repeat center center;
    background-color: var(--z-pictogram--bg, var(--z-sf-brand));
    background-size: 1em;
    border-radius: 50%
}

div[z-profile] {
    background: var(--z-profile--bg, var(--z-bg-primary)) !important;
    color: var(--z-profile--color, var(--z-ct-clickable--inv)) !important;
    width: var(--z-profile--size, var(--_size));
    height: var(--z-profile--size, var(--_size));
    border-radius: 50%;
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    box-sizing: border-box
}

:where(div[z-profile],*[z-theme=light] div[z-profile],div[z-profile][z-theme=light]) {
    --_img: url(https://zds.zurich.com/0.7.0/img/profile.svg);
    --_img--outline: url(https://zds.zurich.com/0.7.0/img/profile--dark.svg);
    --_size: 3.5rem;
    --_bg--1: var(--z-bg-primary);
    --_bg--2: var(--z-bg-peach);
    --_bg--3: var(--z-bg-azure);
    --_bg--4: var(--z-bg-moss);
    --_bg--5: var(--z-bg-teal);
    --_bg--6: var(--z-bg-lilac)
}

:where(*[z-theme=dark] div[z-profile],div[z-profile][z-theme=dark]) {
    --_img: url(https://zds.zurich.com/0.7.0/img/profile--dark.svg);
    --_img--outline: url(https://zds.zurich.com/0.7.0/img/profile.svg)
}

div[z-profile][z-profile*="1"] {
    background-color: var(--_bg--1) !important
}

div[z-profile][z-profile*="2"] {
    background-color: var(--_bg--2) !important
}

div[z-profile][z-profile*="3"] {
    background-color: var(--_bg--3) !important
}

div[z-profile][z-profile*="4"] {
    background-color: var(--_bg--4) !important
}

div[z-profile][z-profile*="5"] {
    background-color: var(--_bg--5) !important
}

div[z-profile][z-profile*="6"] {
    background-color: var(--_bg--6) !important
}

div[z-profile][status]:after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid var(--z-bg);
    bottom: 1px;
    right: 1px;
    box-sizing: border-box;
    z-index: 2
}

div[z-profile][z-profile*=outline] {
    background: transparent !important;
    border: 2px solid currentColor;
    color: var(--z-profile--color, var(--z-profile--border-color, var(--z-br-primary))) !important
}

div[z-profile] > img {
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1;
    -o-object-fit: cover;
    object-fit: cover
}

div[status=online]:after {
    background-color: var(--z-bg-positive)
}

div[status=absent]:after {
    background-color: var(--z-bg-alert)
}

div[status=occupied]:after {
    background-color: var(--z-bg-negative)
}

div[status=offline]:after {
    background-color: var(--z-bg-negative)
}

div[z-avatar-list=s] > [z-profile], div[z-profile^=s] {
    --_size: var(--zs-250) !important;
    font: var(--zf-body-14--300)
}

    div[z-avatar-list=s] > [z-profile]:after, div[z-profile^=s]:after {
        font-size: .875rem
    }

div[z-avatar-list=m] > [z-profile], div[z-profile^=m] {
    --_size: 3.5rem !important;
    font: var(--zf-h-20)
}

    div[z-avatar-list=m] > [z-profile]:after, div[z-profile^=m]:after {
        font-size: 1.125rem
    }

div[z-avatar-list=l] > [z-profile], div[z-profile^=l] {
    --_size: 5rem !important;
    font: var(--zf-h-28)
}

    div[z-avatar-list=l] > [z-profile]:after, div[z-profile^=l]:after {
        font-size: 1.375rem
    }

div[z-profile]:is(:empty,:has(>img)) {
    background-image: var(--_img) !important;
    background-size: 1.4em !important;
    background-repeat: no-repeat !important;
    background-position: center center !important
}

    div[z-profile]:is(:empty,:has(>img))[z-profile*=outline] {
        background-image: var(--_img--outline) !important
    }

*[z-badge]:has(>div[z-profile]) {
    --z-badge--top: 0
}

    *[z-badge]:has(>div[z-profile]):before, *[z-badge]:has(>div[z-profile]):after {
        right: 0;
        transform: translate(50%)
    }

    *[z-badge]:has(>div[z-profile]):before {
        outline: 2px solid var(--z-badge--border-color, var(--z-br-placeholder))
    }

figure[z-figure]:has(>progress[z-progress-bar]) {
    --z-figure--font: var(--zf-body-20--500)
}

figure[z-figure]:has(>progress[z-progress-bar^=round]) {
    --z-figure--font: var(--zf-capt-12--500)
}

progress[z-progress-bar] {
    --_value: calc((var(--_dec, 0) * 10) + var(--_unit, 0));
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    gap: var(--zs-75);
    display: grid
}

:where(progress[z-progress-bar],*[z-theme=light] progress[z-progress-bar],progress[z-progress-bar][z-theme=light]) {
    --_color: var(--z-bg-primary);
    --_time: 2s;
    --_size: 64
}

progress[z-progress-bar]:before {
    content: attr(progress-bar-title);
    left: 0;
    color: var(--z-progress-bar--title-color, var(--z-ct-secondary))
}

progress[z-progress-bar]:not([no-percentage]):after {
    content: attr(value) "%";
    color: var(--z-progress-bar--percentage-color, var(--z-ct-secondary))
}

progress[z-progress-bar][no-percentage]:not([progress-bar-title]) {
    padding-top: 0;
    height: var(--z-progress-bar--stroke, var(--_stroke));
    margin-bottom: 0
}

    progress[z-progress-bar][no-percentage]:not([progress-bar-title]) + figcaption {
        margin-top: var(--zs-12)
    }

progress[z-progress-bar]:not([z-progress-bar^=round]) {
    --_stroke: var(--zs-50);
    padding-top: var(--zs-150);
    margin-bottom: var(--z-progress-bar--stroke, var(--_stroke))
}

    progress[z-progress-bar]:not([z-progress-bar^=round]):before, progress[z-progress-bar]:not([z-progress-bar^=round]):after {
        font: var(--zf-body-16--600);
        position: absolute;
        top: 0
    }

    progress[z-progress-bar]:not([z-progress-bar^=round]):after {
        right: 0
    }

    progress[z-progress-bar]:not([z-progress-bar^=round])::-webkit-progress-bar {
        background-color: var(--z-progress-bar--track, var(--z-bg-muted));
        border-radius: var(--zs-25)
    }

    progress[z-progress-bar]:not([z-progress-bar^=round])::-webkit-progress-value {
        background-color: var(--z-progress-bar--color, var(--_color));
        border-radius: var(--zs-25)
    }

    progress[z-progress-bar]:not([z-progress-bar^=round])::-webkit-progress-inner-element {
        height: var(--z-progress-bar--stroke, var(--_stroke));
        border-radius: var(--zs-25)
    }

progress[z-progress-bar][z-progress-bar="linear:s"], progress[z-progress-bar][z-progress-bar=s] {
    --_stroke: var(--zs-25)
}

progress[z-progress-bar][z-progress-bar^=round] {
    --_stroke: 4;
    font-size: calc(var(--z-progress-bar--size, var(--_size)) * 1px);
    justify-items: center;
    width: -moz-max-content;
    width: max-content
}

    progress[z-progress-bar][z-progress-bar^=round]:before {
        --_half: calc(var(--z-progress-bar--size, var(--_size)) / 2);
        --_horizon: calc(((var(--_half) - var(--z-progress-bar--stroke, var(--_stroke))) / var(--_half)) * 100%);
        content: "";
        display: inline-block;
        width: 1em;
        height: 1em;
        border-radius: 50%;
        background: radial-gradient(closest-side,var(--z-progress-bar--bg, var(--z-sf-base)) calc(var(--_horizon) - 1%),transparent calc(var(--_horizon) - 1%) 100%),conic-gradient(var(--z-progress-bar--color, var(--_color)) calc(var(--_value) * 1%),var(--z-progress-bar--track, var(--z-bg-muted)) 0);
        animation: progress var(--z-progress-bar--time, var(--_time)) 1 forwards
    }

    progress[z-progress-bar][z-progress-bar^=round]:after {
        font: var(--zf-body-20);
        color: var(--z-progress-bar--percentage-color, var(--z-ct-secondary));
        position: absolute;
        align-self: center;
        justify-self: center
    }

    progress[z-progress-bar][z-progress-bar^=round]::-webkit-progress-inner-element {
        display: none
    }

    progress[z-progress-bar][z-progress-bar^=round][z-progress-bar*=":solid"] {
        border-radius: 50%
    }

    progress[z-progress-bar][z-progress-bar^=round][z-progress-bar$=s] {
        --_stroke: 8;
        --_size: 48;
        grid-template-columns: max-content 1fr;
        align-items: center;
        width: 100%
    }

        progress[z-progress-bar][z-progress-bar^=round][z-progress-bar$=s]:after {
            font: var(--zf-body-18);
            position: relative;
            top: auto
        }

    progress[z-progress-bar][z-progress-bar^=round][z-progress-bar$=l]:after {
        font-size: 1.75rem
    }

    progress[z-progress-bar][z-progress-bar^=round][z-progress-bar$=":xl"] {
        --_stroke: 6;
        --_size: 120
    }

    progress[z-progress-bar][z-progress-bar^=round][z-progress-bar$=":l"] {
        --_stroke: 5;
        --_size: 96
    }

    progress[z-progress-bar][z-progress-bar^=round][z-progress-bar$=":xs"] {
        --_stroke: 6;
        --_size: 24
    }

progress[z-progress-bar][value^="1"] {
    --_dec: 1
}

progress[z-progress-bar][value$="1"] {
    --_unit: 1
}

progress[z-progress-bar][value^="2"] {
    --_dec: 2
}

progress[z-progress-bar][value$="2"] {
    --_unit: 2
}

progress[z-progress-bar][value^="3"] {
    --_dec: 3
}

progress[z-progress-bar][value$="3"] {
    --_unit: 3
}

progress[z-progress-bar][value^="4"] {
    --_dec: 4
}

progress[z-progress-bar][value$="4"] {
    --_unit: 4
}

progress[z-progress-bar][value^="5"] {
    --_dec: 5
}

progress[z-progress-bar][value$="5"] {
    --_unit: 5
}

progress[z-progress-bar][value^="6"] {
    --_dec: 6
}

progress[z-progress-bar][value$="6"] {
    --_unit: 6
}

progress[z-progress-bar][value^="7"] {
    --_dec: 7
}

progress[z-progress-bar][value$="7"] {
    --_unit: 7
}

progress[z-progress-bar][value^="8"] {
    --_dec: 8
}

progress[z-progress-bar][value$="8"] {
    --_unit: 8
}

progress[z-progress-bar][value^="9"] {
    --_dec: 9
}

progress[z-progress-bar][value$="9"] {
    --_unit: 9
}

progress[z-progress-bar]:is([value="1"],[value="2"],[value="3"],[value="4"],[value="5"],[value="6"],[value="7"],[value="8"],[value="9"]) {
    --_dec: 0
}

progress[z-progress-bar][value="100"] {
    --_dec: 10
}

progress[z-progress-bar][highlight] {
    --_color: var(--z-bg-status-info)
}

progress[z-progress-bar]:invalid, progress[z-progress-bar][aria-invalid] {
    --_color: var(--z-bg-status-negative)
}

:is(div,picture)[z-safe-space] {
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    font-size: var(--z-safe-space--size, var(--_size));
    max-width: -moz-max-content;
    max-width: max-content;
    aspect-ratio: 1
}

:where(:is(div,picture)[z-safe-space],*[z-theme=light] :is(div,picture)[z-safe-space],:is(div,picture)[z-safe-space][z-theme=light]) {
    --_size: 20rem;
    --_mask: var(--z-safe-space--2)
}

:is(div,picture)[z-safe-space][z-safe-space$=":20"] {
    --_size: 20rem
}

:is(div,picture)[z-safe-space][z-safe-space$=":25"] {
    --_size: 25rem
}

:is(div,picture)[z-safe-space][z-safe-space$=":30"] {
    --_size: 30rem
}

:is(div,picture)[z-safe-space][z-safe-space$=":35"] {
    --_size: 35rem
}

:is(div,picture)[z-safe-space][z-safe-space$=":40"] {
    --_size: 40rem
}

:is(div,picture)[z-safe-space][z-safe-space$=":45"] {
    --_size: 45rem
}

:is(div,picture)[z-safe-space][z-safe-space$=":50"] {
    --_size: 50rem
}

:is(div,picture)[z-safe-space][z-safe-space^="2"] {
    --_mask: var(--z-safe-space--2)
}

:is(div,picture)[z-safe-space][z-safe-space^="3"] {
    --_mask: var(--z-safe-space--3)
}

:is(div,picture)[z-safe-space][z-safe-space^="4"] {
    --_mask: var(--z-safe-space--4)
}

:is(div,picture)[z-safe-space][z-safe-space^="5"] {
    --_mask: var(--z-safe-space--5)
}

div[z-safe-space]:after, picture[z-safe-space] img {
    content-visibility: auto;
    mask: var(--_mask);
    -webkit-mask: var(--_mask);
    mask-size: 1em;
    -webkit-mask-size: 1em;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: var(--z-safe-space--bg, var(--z-bg-brand)) !important
}

div[z-safe-space]:after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    aspect-ratio: 1;
    background: var(--z-safe-space--bg, var(--z-bg-brand)) !important;
    border-radius: 50%
}

picture[z-safe-space] img {
    content-visibility: auto;
    mask: var(--_mask);
    -webkit-mask: var(--_mask);
    mask-size: 1em;
    -webkit-mask-size: 1em;
    -webkit-mask-position: center center;
    mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background: var(--z-safe-space--bg, var(--z-bg-brand)) !important;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%;
    height: 100%;
    -o-object-position: var(--z-safe-space--image-x, center) var(--z-safe-space--image-y, center);
    object-position: var(--z-safe-space--image-x, center) var(--z-safe-space--image-y, center)
}

div[z-shape] {
    display: inline-block;
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    overflow: visible;
    position: relative;
    font-size: var(--z-shape--size, 9rem);
    background-color: transparent !important
}

:where(div[z-shape],*[z-theme=light] div[z-shape],div[z-shape][z-theme=light]) {
    --_shape: var(--z-shape--1)
}

:where(*[z-theme=dark] div[z-shape],div[z-shape][z-theme=dark]) {
    --_shape: var(--z-shape--1--dark)
}

div[z-shape]:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(var(--_w) * var(--z-shape--size, 9rem));
    height: calc(var(--_h) * var(--z-shape--size, 9rem));
    content: "";
    display: inline-block;
    background-image: var(--_shape);
    background-repeat: no-repeat;
    background-size: 100%
}

div[z-shape$=":flip"] {
    transform-origin: center center;
    transform: rotateY(180deg)
}

div[z-shape^="1"] {
    --_shape: var(--z-shape--1) !important;
    --_w: calc(188 / 144);
    --_h: calc(174 / 144)
}

div[z-shape^="3"] {
    --_shape: var(--z-shape--3) !important;
    --_w: calc(218 / 144);
    --_h: calc(201 / 144)
}

div[z-shape^="2"] {
    --_shape: var(--z-shape--2) !important;
    --_w: calc(192 / 144);
    --_h: calc(178 / 144)
}

div[z-shape^="5"] {
    --_shape: var(--z-shape--5) !important;
    --_w: calc(239 / 144);
    --_h: calc(145 / 144)
}

div[z-shape^="4"] {
    --_shape: var(--z-shape--4) !important;
    --_w: 1.5625;
    --_h: calc(182 / 144)
}

div[z-shape^="6"] {
    --_shape: var(--z-shape--6) !important;
    --_w: calc(218 / 144);
    --_h: calc(177 / 144)
}

@keyframes z-skeleton-loading {
    0% {
        background-color: var(--z-skeleton--bg-1, var(--zg-8))
    }

    to {
        background-color: var(--z-skeleton--bg-2, var(--zg-4))
    }
}

div[z-skeleton] {
    display: inline-block;
    box-sizing: content-box;
    animation: z-skeleton-loading var(--z-skeleton--time, 1.2s) linear infinite alternate;
    width: var(--z-skeleton--width, 9rem);
    height: var(--z-skeleton--height, 9rem);
    border-radius: var(--z-skeleton--radius, 0);
    min-width: var(--zs-50);
    min-height: var(--zs-50)
}

    div[z-skeleton][round] {
        border-radius: 1000px
    }

div[z-smiling-z] {
    content-visibility: auto;
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--z-smiling-z--size, 28px);
    background: var(--z-smiling-z--fill, var(--z-bg-brand));
    -webkit-mask: var(--z-smiling-z--url, var(--z-smiling-z)) no-repeat;
    mask: var(--z-smiling-z--url, var(--z-smiling-z)) no-repeat;
    -webkit-mask-size: 1em;
    -webkit-mask-position: center center;
    mask-position: center center;
    mask-size: 1em;
    line-height: 1em;
    padding: .21em;
    box-sizing: content-box
}

    div[z-smiling-z][z-smiling-z=🏳️‍🌈] {
        --_fill: linear-gradient(120deg, rgb(237, 34, 36), rgb(249, 150, 33), rgb(241, 235, 27), rgb(99, 199, 32), rgb(57, 84, 165), rgb(147, 40, 142))
    }

i[z-social-media-icon] {
    display: inline-block;
    width: 1em;
    height: 1em;
    font-size: var(--z-social-media-icon--size, var(--_size));
    background: var(--z-social-media-icon--url, var(--zi)) no-repeat center center;
    background-size: 1em
}

:where(i[z-social-media-icon],*[z-theme=light] i[z-social-media-icon],i[z-social-media-icon][z-theme=light]) {
    --_size: var(--zs-150)
}

i[z-social-media-icon]:not([brand]) {
    display: none
}

i[z-social-media-icon][brand^=bluesky] {
    --zi: var(--z-social--bluesky)
}

    i[z-social-media-icon][brand^=bluesky][brand$=":mono"] {
        --zi: var(--z-social--bluesky--mono)
    }

i[z-social-media-icon][brand^=facebook] {
    --zi: var(--z-social--facebook)
}

    i[z-social-media-icon][brand^=facebook][brand$=":mono"] {
        --zi: var(--z-social--facebook--mono)
    }

i[z-social-media-icon][brand^=instagram] {
    --zi: var(--z-social--instagram)
}

    i[z-social-media-icon][brand^=instagram][brand$=":mono"] {
        --zi: var(--z-social--instagram--mono)
    }

i[z-social-media-icon][brand^=line] {
    --zi: var(--z-social--line)
}

    i[z-social-media-icon][brand^=line][brand$=":mono"] {
        --zi: var(--z-social--line--mono)
    }

i[z-social-media-icon][brand^=linkedin] {
    --zi: var(--z-social--linkedin)
}

    i[z-social-media-icon][brand^=linkedin][brand$=":mono"] {
        --zi: var(--z-social--linkedin--mono)
    }

i[z-social-media-icon][brand^=pinterest] {
    --zi: var(--z-social--pinterest)
}

    i[z-social-media-icon][brand^=pinterest][brand$=":mono"] {
        --zi: var(--z-social--pinterest--mono)
    }

i[z-social-media-icon][brand^=reddit] {
    --zi: var(--z-social--reddit)
}

    i[z-social-media-icon][brand^=reddit][brand$=":mono"] {
        --zi: var(--z-social--reddit--mono)
    }

i[z-social-media-icon][brand^=spotify] {
    --zi: var(--z-social--spotify)
}

    i[z-social-media-icon][brand^=spotify][brand$=":mono"] {
        --zi: var(--z-social--spotify--mono)
    }

i[z-social-media-icon][brand^=telegram] {
    --zi: var(--z-social--telegram)
}

    i[z-social-media-icon][brand^=telegram][brand$=":mono"] {
        --zi: var(--z-social--telegram--mono)
    }

i[z-social-media-icon][brand^=threads] {
    --zi: var(--z-social--threads)
}

    i[z-social-media-icon][brand^=threads][brand$=":mono"] {
        --zi: var(--z-social--threads--mono)
    }

i[z-social-media-icon][brand^=tiktok] {
    --zi: var(--z-social--tiktok)
}

    i[z-social-media-icon][brand^=tiktok][brand$=":mono"] {
        --zi: var(--z-social--tiktok--mono)
    }

i[z-social-media-icon][brand^=twitter] {
    --zi: var(--z-social--twitter)
}

    i[z-social-media-icon][brand^=twitter][brand$=":mono"] {
        --zi: var(--z-social--twitter--mono)
    }

i[z-social-media-icon][brand^=wechat] {
    --zi: var(--z-social--wechat)
}

    i[z-social-media-icon][brand^=wechat][brand$=":mono"] {
        --zi: var(--z-social--wechat--mono)
    }

i[z-social-media-icon][brand^=whatsapp] {
    --zi: var(--z-social--whatsapp)
}

    i[z-social-media-icon][brand^=whatsapp][brand$=":mono"] {
        --zi: var(--z-social--whatsapp--mono)
    }

i[z-social-media-icon][brand^=workplace] {
    --zi: var(--z-social--workplace)
}

    i[z-social-media-icon][brand^=workplace][brand$=":mono"] {
        --zi: var(--z-social--workplace--mono)
    }

i[z-social-media-icon][brand^=youtube] {
    --zi: var(--z-social--youtube)
}

    i[z-social-media-icon][brand^=youtube][brand$=":mono"] {
        --zi: var(--z-social--youtube--mono)
    }

i[z-social-media-icon][z-social-media-icon=xs], i[z-social-media-icon][z-social-media-icon$=":xs"] {
    --_size: var(--zs-75)
}

i[z-social-media-icon][z-social-media-icon=s], i[z-social-media-icon][z-social-media-icon$=":s"] {
    --_size: var(--zs-100)
}

i[z-social-media-icon][z-social-media-icon=m], i[z-social-media-icon][z-social-media-icon$=":m"] {
    --_size: var(--zs-150)
}

i[z-social-media-icon][z-social-media-icon=l], i[z-social-media-icon][z-social-media-icon$=":l"] {
    --_size: 3.75rem
}

i[z-social-media-icon][z-social-media-icon=xl], i[z-social-media-icon][z-social-media-icon$=":xl"] {
    --_size: 5rem
}

div[z-tag] {
    --z-icon--size: 1.25rem;
    font: var(--zf-capt-14--500);
    display: inline-flex;
    padding: var(--z-tag--padding, var(--zs-12) var(--zs-100));
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: var(--zs-150);
    background: var(--z-tag--bg, var(--z-bg-azure)) !important;
    color: var(--z-tag--color, var(--z-ct-on-status)) !important;
    gap: var(--z-tag--gap, var(--zs-25))
}

    div[z-tag][icon][icon-right]:after, div[z-tag][icon]:not([icon-right]):before {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        -webkit-mask: var(--zi);
        mask: var(--zi);
        -webkit-mask-size: 1.5em;
        mask-size: 1.5em;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: currentColor
    }

    div[z-tag][z-tag=teal] {
        background-color: var(--z-bg-teal) !important
    }

    div[z-tag][z-tag=moss] {
        background-color: var(--z-bg-moss) !important
    }

    div[z-tag][z-tag=lilac] {
        background-color: var(--z-bg-lilac) !important
    }

    div[z-tag][z-tag=peach] {
        background-color: var(--z-bg-peach) !important
    }

    div[z-tag][z-tag=candy] {
        background-color: var(--z-bg-candy) !important;
        color: var(--z-ct-on-status--eq) !important
    }

    div[z-tag][z-tag=mint] {
        background-color: var(--z-bg-mint) !important;
        color: var(--z-ct-on-status--eq) !important
    }

    div[z-tag][z-tag=lime] {
        background-color: var(--z-bg-lime) !important;
        color: var(--z-ct-on-status--eq) !important
    }

    div[z-tag][z-tag=lemon] {
        background-color: var(--z-bg-lemon) !important;
        color: var(--z-ct-on-status--eq) !important
    }

    div[z-tag][z-tag=powder-pink] {
        background-color: var(--z-bg-powder-pink) !important;
        color: var(--z-ct-on-status--eq) !important
    }

div[z-toast] {
    display: grid;
    padding: var(--zs-75) var(--zs-100);
    border-radius: var(--z-toast--radius, var(--zs-150));
    box-shadow: var(--zd-2);
    font: var(--zf-body-16--600);
    min-width: 20rem;
    width: var(--z-toast--width, 20rem);
    justify-items: center;
    color: var(--z-toast--color, var(--z-ct-on-status));
    background: var(--z-toast--bg, var(--z-bg-info)) !important
}

    div[z-toast][timestamp]:after {
        content: attr(timestamp);
        font: var(--zf-capt-12--500);
        margin-top: var(--zs-50)
    }

    div[z-toast][z-toast=positive] {
        background-color: var(--z-bg-positive) !important
    }

    div[z-toast][z-toast=alert] {
        background-color: var(--z-bg-alert) !important;
        color: var(--z-ct-on-status--eq)
    }

    div[z-toast][z-toast=negative] {
        background-color: var(--z-bg-negative) !important
    }

:is(em,td)[z-tooltip] {
    position: relative
}

    :is(em,td)[z-tooltip]:after, :is(em,td)[z-tooltip]:before {
        visibility: hidden;
        position: absolute;
        background-color: var(--z-tooltip--bg, var(--z-sf-brand));
        color: var(--z-tooltip--color, var(--z-ct-primary));
        left: 100%;
        top: 100%;
        opacity: 0;
        z-index: var(--z-tooltip--z-index, 999);
        transition: opacity .2s ease-in-out
    }

    :is(em,td)[z-tooltip]:after {
        opacity: 0;
        font: var(--zf-capt-12--500);
        padding: var(--zs-100);
        border-radius: 16px;
        width: -moz-max-content;
        width: max-content;
        text-align: left
    }

    :is(em,td)[z-tooltip]:before {
        content: " ";
        height: 1rem;
        width: 1rem
    }

    :is(em,td)[z-tooltip]:hover:after, :is(em,td)[z-tooltip]:hover:before, :is(em,td)[z-tooltip]:focus-within:after, :is(em,td)[z-tooltip]:focus-within:before {
        visibility: visible;
        opacity: 1
    }

    :is(em,td)[z-tooltip]:after {
        content: attr(tooltip-text)
    }

    :is(em,td)[z-tooltip][tooltip-theme=light]:after, :is(em,td)[z-tooltip][tooltip-theme=light]:before {
        background-color: var(--zc-blue-dark);
        color: var(--zg-white)
    }

:is(em,td)[z-tooltip$=-left]:after, :is(em,td)[z-tooltip$=-left]:before, :is(em,td)[z-tooltip*="-left:"]:after, :is(em,td)[z-tooltip*="-left:"]:before {
    left: auto;
    right: 100%
}

:is(em,td)[z-tooltip=top]:before, :is(em,td)[z-tooltip=bottom]:before, :is(em,td)[z-tooltip^="top:"]:before, :is(em,td)[z-tooltip^="bottom:"]:before {
    rotate: 45deg;
    left: calc(50% - 9px)
}

:is(em,td)[z-tooltip=top]:after, :is(em,td)[z-tooltip=bottom]:after, :is(em,td)[z-tooltip^="top:"]:after, :is(em,td)[z-tooltip^="bottom:"]:after {
    left: 50%;
    transform: translate(-50%)
}

:is(em,td)[z-tooltip=bottom]:before, :is(em,td)[z-tooltip^="bottom:"]:before {
    top: 100%
}

:is(em,td)[z-tooltip=bottom]:after, :is(em,td)[z-tooltip^="bottom:"]:after {
    top: calc(100% + 7px)
}

:is(em,td)[z-tooltip^=top]:after, :is(em,td)[z-tooltip^=top]:before {
    top: auto;
    bottom: 100%
}

:is(em,td)[z-tooltip=top]:before, :is(em,td)[z-tooltip^="top:"]:before {
    bottom: 100%
}

:is(em,td)[z-tooltip=top]:after, :is(em,td)[z-tooltip^="top:"]:after {
    bottom: calc(100% + 7px)
}

:is(em,td)[z-tooltip$=":xs"]:after, :is(em,td)[z-tooltip$=":xs"]:before {
    display: inline-flex
}

:is(em,td)[z-tooltip$=":s"]:after, :is(em,td)[z-tooltip$=":s"]:before {
    max-width: 10rem
}

:is(em,td)[z-tooltip$=":m"]:after, :is(em,td)[z-tooltip$=":m"]:before {
    max-width: 15rem
}

:is(em,td)[z-tooltip$=":l"]:after, :is(em,td)[z-tooltip$=":l"]:before {
    max-width: 20rem
}

:where(input[type=checkbox][z-boolean-icon],*[z-theme=light] input[type=checkbox][z-boolean-icon],input[type=checkbox][z-boolean-icon][z-theme=light],label[z-boolean-icon],*[z-theme=light] label[z-boolean-icon],label[z-boolean-icon][z-theme=light]) {
    --_mask--on: url(https://zds.zurich.com/i/close.svg);
    --_mask--off: url(https://zds.zurich.com/i/close.svg)
}

:where(*[z-theme=dark] input[type=checkbox][z-boolean-icon],input[type=checkbox][z-boolean-icon][z-theme=dark],*[z-theme=dark] label[z-boolean-icon],label[z-boolean-icon][z-theme=dark]) {
    --_bg: var(--zg-white)
}

input[type=checkbox][z-boolean-icon], label[z-boolean-icon] > input[type=checkbox] {
    font-size: var(--z-boolean-icon--size, var(--zs-150));
    border: none !important;
    background-color: transparent !important;
    aspect-ratio: 1;
    width: 1em;
    height: 1em;
    border-radius: 50%
}

    input[type=checkbox][z-boolean-icon]:after, label[z-boolean-icon] > input[type=checkbox]:after {
        content: "";
        transition: background-color .2s ease-in-out;
        display: inline-block;
        width: 1em;
        height: 1em;
        mask: var(--_mask--on) center/1em no-repeat;
        -webkit-mask: var(--_mask--on) center/1em no-repeat;
        box-sizing: content-box;
        background-color: var(--z-boolean-icon--color--off, var(--z-boolean-input--border-color, var(--z-br-subtle)));
        margin: 0
    }

    input[type=checkbox][z-boolean-icon]:checked:after, label[z-boolean-icon] > input[type=checkbox]:checked:after {
        mask: var(--_mask--off) center/1em no-repeat;
        -webkit-mask: var(--_mask--off) center/1em no-repeat;
        background-color: var(--z-boolean-icon--color, var(--z-boolean-input--color--checked, var(--z-bg-active)))
    }

    input[type=checkbox][z-boolean-icon][aria-invalid], input[type=checkbox][z-boolean-icon][aria-invalid]:after, label[z-boolean-icon] > input[type=checkbox][aria-invalid], label[z-boolean-icon] > input[type=checkbox][aria-invalid]:after {
        background-color: var(--z-boolean-icon--color--invalid, var(--z-boolean-input--color--invalid, var(--z-bg-status-negative)))
    }

label[z-boolean-icon^=star], input[type=checkbox][z-boolean-icon^=star] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/star--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/star.svg) !important
}

label[z-boolean-icon^=heart], input[type=checkbox][z-boolean-icon^=heart] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/heart--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/heart.svg) !important
}

label[z-boolean-icon^=like], input[type=checkbox][z-boolean-icon^=like] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/thumbs-up--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/thumbs-up.svg) !important
}

label[z-boolean-icon^=dislike], input[type=checkbox][z-boolean-icon^=dislike] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/thumbs-down--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/thumbs-down.svg) !important
}

label[z-boolean-icon^=bookmark], input[type=checkbox][z-boolean-icon^=bookmark] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/bookmark--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/bookmark.svg) !important
}

label[z-boolean-icon^=mute], input[type=checkbox][z-boolean-icon^=mute] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/mic-on--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/mic-off.svg) !important
}

label[z-boolean-icon^=unmute], input[type=checkbox][z-boolean-icon^=unmute] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/mic-off--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/mic-on.svg) !important
}

label[z-boolean-icon^=lock], input[type=checkbox][z-boolean-icon^=lock] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/lock-open--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/lock-closed.svg) !important
}

label[z-boolean-icon^=unlock], input[type=checkbox][z-boolean-icon^=unlock] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/lock-closed--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/lock-open.svg) !important
}

label[z-boolean-icon^=visible], input[type=checkbox][z-boolean-icon^=visible] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/visibility-off--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/visibility-on.svg) !important
}

label[z-boolean-icon^=invisible], input[type=checkbox][z-boolean-icon^=invisible] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/visibility-on--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/visibility-off.svg) !important
}

label[z-boolean-icon^=sound-on], input[type=checkbox][z-boolean-icon^=sound-on] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/sound-off--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/sound-on.svg) !important
}

label[z-boolean-icon^=sound-off], input[type=checkbox][z-boolean-icon^=sound-off] {
    --_mask--on: url(https://zds.zurich.com/0.7.0/i/sound-on--o.svg) !important;
    --_mask--off: url(https://zds.zurich.com/0.7.0/i/sound-off.svg) !important
}

label[z-checkbox] > input[type=checkbox], input[type=checkbox][z-checkbox] {
    border-radius: 5px;
    border-color: var(--z-checkbox--border-color, var(--z-boolean-input--border-color, var(--z-br-subtle)))
}

    label[z-checkbox] > input[type=checkbox]:after, input[type=checkbox][z-checkbox]:after {
        content: "";
        width: 1em;
        height: .5em;
        opacity: 0;
        margin-top: -.25em;
        border-bottom: 1.5px solid var(--z-ct-on-pressed);
        border-left: 1.5px solid var(--z-ct-on-pressed);
        rotate: -45deg;
        transform-origin: center;
        transition: opacity .2s ease-in-out
    }

    label[z-checkbox] > input[type=checkbox]:checked, label[z-checkbox] > input[type=checkbox]:indeterminate, input[type=checkbox][z-checkbox]:checked, input[type=checkbox][z-checkbox]:indeterminate {
        background-color: var(--z-checkbox--bg, var(--z-boolean-input--color--checked, var(--z-bg-active)))
    }

        label[z-checkbox] > input[type=checkbox]:checked:not(:hover), label[z-checkbox] > input[type=checkbox]:indeterminate:not(:hover), input[type=checkbox][z-checkbox]:checked:not(:hover), input[type=checkbox][z-checkbox]:indeterminate:not(:hover) {
            border-color: transparent !important
        }

        label[z-checkbox] > input[type=checkbox]:checked:after, label[z-checkbox] > input[type=checkbox]:indeterminate:after, input[type=checkbox][z-checkbox]:checked:after, input[type=checkbox][z-checkbox]:indeterminate:after {
            opacity: 1
        }

        label[z-checkbox] > input[type=checkbox]:indeterminate:after, input[type=checkbox][z-checkbox]:indeterminate:after {
            border-left: none;
            margin-top: 0;
            height: 0;
            rotate: 0deg
        }

label[z-color-input] input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0
}

label[z-color-input] input[type=color]::-webkit-color-swatch {
    border-radius: var(--zs-25)
}

label[z-color-input] input[type=color]:disabled {
    opacity: var(--z-op-disabled)
}

label[z-date-input] {
    position: relative;
    height: -moz-max-content;
    height: max-content
}

:where(label[z-date-input],*[z-theme=light] label[z-date-input],label[z-date-input][z-theme=light]) {
    --zi: url(https://zds.zurich.com/0.7.0/i/calendar-end--o.svg)
}

label[z-date-input] > input:is([type=date],[type=datetime-local],[type=month],[type=week]) {
    min-width: 12rem
}

label[z-date-input]:after, label[z-date-input] > input::-webkit-calendar-picker-indicator {
    top: var(--zs-75) !important;
    right: var(--zs-100) !important
}

label[z-date-input][z-date-input^=line] {
    --_color: var(--_color--line)
}

    label[z-date-input][z-date-input^=line]:after, label[z-date-input][z-date-input^=line] input::-webkit-calendar-picker-indicator {
        position: absolute;
        right: var(--zs-50);
        margin: 0;
        padding: 0
    }

    label[z-date-input][z-date-input^=line] > input:is(:hover,:focus) {
        box-shadow: var(--zd-2)
    }

section[z-multi-selectable-cards] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--zs-50)
}

    section[z-multi-selectable-cards] > article {
        box-shadow: var(--zd-2);
        padding: var(--z-selectable-cards--padding, var(--zs-150));
        border-radius: var(--zs-50);
        border: 2px solid var(--z-br-inactive);
        background: var(--z-sf-base);
        color: var(--z-ct-primary);
        display: flex;
        gap: var(--zs-100);
        box-sizing: border-box;
        align-items: center;
        cursor: pointer;
        max-width: 20rem;
        justify-content: space-between
    }

        section[z-multi-selectable-cards] > article > div {
            font: var(--zf-body-16);
            height: 100%
        }

        section[z-multi-selectable-cards] > article:not(:has(>*[disabled])):hover {
            box-shadow: var(--zd-4);
            border-color: var(--z-br-hover)
        }

        section[z-multi-selectable-cards] > article:has(>*:is([invalid],[aria-invalid])) {
            border-color: var(--z-br-negative)
        }

        section[z-multi-selectable-cards] > article:has(>*[disabled]) {
            cursor: not-allowed;
            opacity: var(--z-op-disabled)
        }

        section[z-multi-selectable-cards] > article:has(>[model],input[type=checkbox]:checked) {
            border-color: var(--z-br-active)
        }

:where(label[z-number-input],*[z-theme=light] label[z-number-input],label[z-number-input][z-theme=light]) {
    --_icon-size: var(--zs-150)
}

label[z-number-input] input[type=number]::-webkit-inner-spin-button {
    display: none
}

label[z-number-input][align-right] > input[type=number] {
    text-align: right
}

label[z-password-input] > input[type=checkbox] {
    --zi: url(https://zds.zurich.com/0.7.0/i/visibility-on--o.svg);
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 1em;
    right: var(--zs-50);
    top: calc(var(--zs-50) + var(--_padding-extra));
    font-size: var(--_icon-size);
    order: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    color: currentColor
}

    label[z-password-input] > input[type=checkbox]:after {
        content: "";
        display: inline-block;
        -webkit-mask: var(--zi);
        mask: var(--zi);
        -webkit-mask-size: 1em;
        mask-size: 1em;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        background-color: currentColor;
        width: 1em;
        height: 1em;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 0
    }

    label[z-password-input] > input[type=checkbox]:checked {
        --zi: url(https://zds.zurich.com/0.7.0/i/visibility-off--o.svg)
    }

label[z-password-input] > input:is([type=text],[type=password])::-ms-reveal {
    display: none
}

label[z-password-input] > input:is([type=text],[type=password]):not(:empty) ~ input[type=checkbox] {
    display: inline-block !important
}

fieldset[z-radio-select] {
    display: flex;
    flex-direction: column;
    grid-auto-flow: row;
    gap: var(--zs-50);
    justify-items: left;
    border: none;
    position: relative;
    padding: 0;
    margin: 0
}

:where(fieldset[z-radio-select],*[z-theme=light] fieldset[z-radio-select],fieldset[z-radio-select][z-theme=light]) {
    --_radio-color: var(--zc-blue-dark)
}

fieldset[z-radio-select] > legend {
    font: var(--z-radio-select--font, var(--zf-capt-14--600));
    color: var(--z-fieldset--color, var(--z-ct-primary));
    padding-bottom: var(--zs-50);
    padding-left: 0
}

    fieldset[z-radio-select] > legend:has(~label>input[type=radio]:required):after {
        content: "*";
        padding-left: var(--zs-25)
    }

fieldset[z-radio-select] > label {
    position: initial !important;
    display: grid;
    grid-template: "i l" max-content "v v" max-content/max-content 1fr
}

    fieldset[z-radio-select] > label > span {
        white-space: nowrap;
        text-wrap: nowrap
    }

fieldset[z-radio-select] input[type=radio] {
    border-radius: 50%;
    background-color: var(--z-boolean-input--bg, var(--z-sf-base--eq)) !important
}

    fieldset[z-radio-select] input[type=radio]:checked {
        border-color: var(--z-radio-select--color--checked, var(--z-boolean-input--color--checked, var(--z-bg-active))) !important;
        border-width: .45rem !important;
        background-color: var(--z-bg-placeholder) !important
    }

        fieldset[z-radio-select] input[type=radio]:checked:invalid, fieldset[z-radio-select] input[type=radio]:checked[aria-invalid] {
            border-color: var(--z-radio-select--color--invalid, var(--z-boolean-input--color--invalid, var(--z-bg-status-negative))) !important
        }

fieldset[z-radio-select] > small {
    font: var(--zf-capt-12--500) !important;
    text-wrap: nowrap;
    color: var(--z-ct-primary)
}

fieldset[z-radio-select]:has(input[type=radio]:is(:invalid,[aria-invalid])) > small {
    color: var(--z-ct-negative)
}

fieldset[z-radio-select][z-radio-select^=inline] {
    flex-direction: row;
    gap: var(--zs-150)
}

    fieldset[z-radio-select][z-radio-select^=inline]:has(label>input[type=radio]:invalid) {
        padding-bottom: var(--zs-150)
    }

        fieldset[z-radio-select][z-radio-select^=inline]:has(label>input[type=radio]:invalid) > label > small {
            position: absolute;
            left: calc(-100% - var(--zs-150));
            bottom: 0
        }

fieldset[z-radio-select] > label:has(>input[type=radio]:disabled) {
    opacity: var(--z-op-disabled);
    cursor: not-allowed
}

div[z-rating] {
    box-sizing: border-box;
    overflow: hidden;
    height: 24px;
    margin: 0;
    width: 144px;
    clip-path: path("M15.7 7.9 12 0 8.3 7.9 0 9.17l6 6.15L4.58 24 12 19.9l7.42 4.1L18 15.32l6-6.15-8.3-1.27ZM45.7 7.9 42 0l-3.7 7.9L30 9.17l6 6.15L34.58 24 42 19.9l7.42 4.1L48 15.32l6-6.15-8.3-1.27ZM75.7 7.9 72 0l-3.7 7.9L60 9.17l6 6.15L64.58 24 72 19.9l7.42 4.1L78 15.32l6-6.15-8.3-1.27ZM105.7 7.9 102 0l-3.7 7.9L90 9.17l6 6.15L94.58 24l7.42-4.1 7.42 4.1-1.42-8.68 6-6.15-8.3-1.27ZM135.7 7.9 132 0l-3.7 7.9-8.3 1.27 6 6.15-1.42 8.68 7.42-4.1 7.42 4.1-1.42-8.68 6-6.15-8.3-1.27Z")
}

:where(div[z-rating],*[z-theme=light] div[z-rating],div[z-rating][z-theme=light]) {
    --_color--focus: var(--zc-blue-dark)
}

:where(*[z-theme=dark] div[z-rating],div[z-rating][z-theme=dark]) {
    --_color--focus: var(--zg-white)
}

div[z-rating] input[type=range] {
    position: relative;
    height: 24px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    cursor: pointer;
    overflow: hidden;
    margin: 0 0 0 -27px;
    width: 174px
}

    div[z-rating] input[type=range]::-moz-range-thumb {
        border: none;
        background: var(--z-rating--color, var(--z-ct-clickable));
        border-image-source: linear-gradient(90deg,var(--z-rating--color, var(--z-ct-clickable)) 50%,var(--z-rating--bg, var(--z-bg-muted)) 0);
        border-image-slice: 1;
        border-image-width: 200px;
        border-image-outset: 200px;
        height: 24px;
        -webkit-appearance: none;
        appearance: none;
        -moz-transition: border .2s ease-in-out,background .2s ease-in-out;
        transition: border .2s ease-in-out,background .2s ease-in-out;
        width: 24px;
        border-radius: 0;
        -moz-appearance: none
    }

    div[z-rating] input[type=range]::-webkit-slider-thumb {
        border: none;
        background: var(--z-rating--color, var(--z-ct-clickable));
        border-image-source: linear-gradient(90deg,var(--z-rating--color, var(--z-ct-clickable)) 50%,var(--z-rating--bg, var(--z-bg-muted)) 0);
        border-image-slice: 1;
        border-image-width: 200px;
        border-image-outset: 200px;
        height: 24px;
        appearance: none;
        -webkit-transition: border .2s ease-in-out,background .2s ease-in-out;
        transition: border .2s ease-in-out,background .2s ease-in-out;
        aspect-ratio: 1;
        margin-left: 0;
        -webkit-appearance: none
    }

    div[z-rating] input[type=range][readonly] {
        pointer-events: none
    }

    div[z-rating] input[type=range]:focus::-moz-range-thumb {
        outline: none;
        --_color: $color--focus
    }

    div[z-rating] input[type=range]:focus::-webkit-slider-thumb {
        outline: none;
        --_color: $color--focus
    }

label:has(>div[z-rating]) {
    padding: 0 var(--zs-50);
    border-radius: var(--zs-150);
    display: flex;
    align-items: center
}

    label:has(>div[z-rating])[rating-score]:after {
        display: inline-block;
        font: var(--zf-body-16);
        line-height: 24px;
        color: var(--z-ct-primary);
        padding-left: var(--zs-50);
        content: attr(rating-score)
    }

div[z-segmented-control] {
    background: var(--z-segmented-control--bg, var(--_sc_bg)) !important;
    padding: var(--zs-25);
    border-radius: var(--zs-200);
    display: flex;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content;
    place-items: center
}

:where(div[z-segmented-control],*[z-theme=light] div[z-segmented-control],div[z-segmented-control][z-theme=light]) {
    --_sc_color: var(--zc-blue-zurich);
    --_sc_bg: var(--zg-white-zurich)
}

:where(*[z-theme=dark] div[z-segmented-control],div[z-segmented-control][z-theme=dark]) {
    --_sc_color: var(--zg-white);
    --_sc_bg: var(--zc-blue-zurich)
}

div[z-segmented-control] > label {
    position: relative;
    display: grid;
    align-items: center
}

    div[z-segmented-control] > label > input[type=radio] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: absolute;
        margin: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        pointer-events: none
    }

    div[z-segmented-control] > label > button[z-button]:has(+input[type=radio]:not(:checked)) {
        border: none;
        box-shadow: none
    }

section[z-selectable-cards] {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: var(--zs-50)
}

    section[z-selectable-cards] > article {
        box-shadow: var(--zd-2);
        padding: var(--z-selectable-cards--padding, var(--zs-150));
        border-radius: var(--zs-50);
        border: 2px solid var(--z-br-inactive);
        background: var(--z-sf-base);
        color: var(--z-ct-primary);
        display: flex;
        gap: var(--zs-100);
        box-sizing: border-box;
        align-items: center;
        cursor: pointer;
        max-width: 20rem;
        justify-content: space-between
    }

        section[z-selectable-cards] > article > div {
            font: var(--zf-body-16);
            height: 100%
        }

        section[z-selectable-cards] > article:not(:has(>*[disabled])):hover {
            box-shadow: var(--zd-4);
            border-color: var(--z-br-hover)
        }

        section[z-selectable-cards] > article:has(>*:is([invalid],[aria-invalid])) {
            border-color: var(--z-br-negative)
        }

        section[z-selectable-cards] > article:has(>*[disabled]) {
            cursor: not-allowed;
            opacity: var(--z-op-disabled)
        }

label[z-selection-tag] {
    font: var(--zf-capt-14--500);
    position: relative;
    display: inline-flex;
    padding: var(--zs-25) var(--zs-100);
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: var(--zs-150);
    border: 2px solid var(--z-selection-tag--bg, var(--z-bg-light-base));
    background: var(--z-selection-tag--bg, var(--z-bg-light-base)) !important;
    color: var(--z-selection-tag--color, var(--z-ct-clickable--eq)) !important;
    box-sizing: border-box;
    margin: 0
}

    label[z-selection-tag] > input[type=checkbox] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: absolute;
        inset: 0;
        cursor: pointer;
        margin: 0
    }

        label[z-selection-tag] > input[type=checkbox]:focus {
            outline: none
        }

    label[z-selection-tag]:not(:focus-within):not(:has(input[type=checkbox]:disabled)):hover {
        border-color: var(--z-selection-tag--border-color, var(--z-br-hover))
    }

    label[z-selection-tag]:focus-within {
        outline-offset: var(--z-fc-outline-offset);
        outline: var(--z-fc-outline);
        transition: outline-offset .2s ease-in-out,outline-width .2s ease-in-out
    }

    label[z-selection-tag]:has(>input[type=checkbox]:checked) {
        background-color: var(--z-selection-tag--bg--checked, var(--z-bg-active)) !important;
        color: var(--z-selection-tag--color--checked, var(--z-ct-on-pressed)) !important
    }

    label[z-selection-tag]:has(>input[type=checkbox]:disabled) {
        background-color: var(--z-selection-tag--bg--disabled, var(--z-bg-light-base)) !important;
        color: var(--z-selection-tag--color--disabled, var(--z-ct-disabled--eq)) !important;
        opacity: var(--z-op-disabled)
    }

    label[z-selection-tag]:has(>input[type=checkbox]:disabled:checked) {
        background-color: var(--z-selection-tag--bg--checked--disabled, var(--z-bg-disabled)) !important;
        color: var(--z-selection-tag--color--checked--disabled, var(--z-ct-disabled--eq)) !important;
        opacity: var(--z-op-disabled)
    }

    label[z-selection-tag]:has(>input[type=checkbox][aria-invalid]) {
        background-color: var(--z-selection-tag--bg--invalid, var(--z-bg-light-base)) !important;
        color: var(--z-selection-tag--color--invalid, var(--z-ct-negative--eq)) !important
    }

    label[z-selection-tag]:has(>input[type=checkbox][aria-invalid]:checked) {
        background-color: var(--z-selection-tag--bg--checked--disabled, var(--z-bg-negative)) !important;
        color: var(--z-selection-tag--color--checked--invalid, var(--z-ct-on-pressed)) !important
    }

:where(label[z-switch]>input[type=checkbox],*[z-theme=light] label[z-switch]>input[type=checkbox],label[z-switch]>input[type=checkbox][z-theme=light],input[type=checkbox][z-switch],*[z-theme=light] input[type=checkbox][z-switch],input[type=checkbox][z-switch][z-theme=light]) {
    --_thumb--off: var(--zc-blue-dark);
    --_thumb--on: var(--z-ct-primary--inv)
}

label[z-switch] > input[type=checkbox], input[type=checkbox][z-switch] {
    aspect-ratio: 2 !important;
    border-radius: calc(var(--z-boolean-input--size, var(--zs-150)) / 2);
    width: calc(var(--z-boolean-input--size, var(--zs-150)) * 2) !important
}

    label[z-switch] > input[type=checkbox]:after, input[type=checkbox][z-switch]:after {
        position: absolute;
        content: "";
        width: calc(var(--z-boolean-input--size, var(--zs-150)) - 6px);
        aspect-ratio: 1;
        left: 1px;
        border-radius: 50%;
        background-color: var(--z-switch--thumb--off, var(--_thumb--off));
        transition: transform .2s ease-in-out,background-color .2s ease-in-out
    }

    label[z-switch] > input[type=checkbox]:checked:after, input[type=checkbox][z-switch]:checked:after {
        transform: translate(var(--z-boolean-input--size, var(--zs-150)));
        background-color: var(--z-switch--thumb--on, var(--_thumb--on))
    }

    label[z-switch] > input[type=checkbox]:disabled:not(:checked):after, input[type=checkbox][z-switch]:disabled:not(:checked):after {
        background-color: var(--z-bg-disabled)
    }

    label[z-switch] > input[type=checkbox]:disabled:checked:after, input[type=checkbox][z-switch]:disabled:checked:after {
        background-color: var(--z-bg-muted-disabled)
    }

    label[z-switch] > input[type=checkbox][aria-invalid], input[type=checkbox][z-switch][aria-invalid] {
        --_thumb--off: var(--z-bg-negative)
    }

label[z-switch=outlined] > input[type=checkbox]:not(:checked):not([aria-invalid]):after, input[type=checkbox][z-switch=outlined]:not(:checked):not([aria-invalid]):after {
    --_thumb--off: var(--_thumb--off--outlined)
}

:where(label[z-text-input],*[z-theme=light] label[z-text-input],label[z-text-input][z-theme=light]) {
    --_width: 20rem;
    --_icon-size: var(--zs-150)
}

label[z-text-input] input[type=text]::-webkit-calendar-picker-indicator {
    opacity: 0
}

label[z-text-input][z-text-input$=l] {
    --_width: 20rem
}

label[z-text-input][z-text-input$=m] {
    --_width: 19.6875rem
}

label[z-text-input][align-right] > input {
    text-align: right
}

label[z-textarea] > textarea {
    min-height: var(--z-textarea--min-height, 9rem) !important;
    resize: vertical
}

label[z-textarea][z-textarea^=line] > textarea {
    background: var(--z-textarea--bg, rgba(145, 191, 227, .1019607843)) !important
}

    label[z-textarea][z-textarea^=line] > textarea:invalid {
        background: var(--z-textarea--bg--invalid, rgba(203, 75, 64, .1019607843)) !important
    }

label[z-textarea][elastic] > textarea {
    overflow: hidden
}

:where(label[z-time-input],*[z-theme=light] label[z-time-input],label[z-time-input][z-theme=light]) {
    --zi: url(https://zds.zurich.com/0.7.0/i/clock--o.svg)
}

label[z-time-input] > input[type=time] {
    min-width: 9rem
}

label[z-time-input][z-time-input^=shaped]:after, label[z-time-input][z-time-input^=shaped] input::-webkit-calendar-picker-indicator {
    top: var(--zs-75) !important;
    right: var(--zs-100)
}

label[z-time-input][z-time-input^=shaped] > input:is(:hover,:focus) {
    box-shadow: var(--zd-2)
}

@supports not selector(::-webkit-calendar-picker-indicator) {
    label[z-date-input]:before {
        margin-top: -.6rem;
        background-color: var(--z-input--bg--shaped);
        border-radius: 0 var(--zs-200) var(--zs-200) 0
    }
}

@supports not selector(::-webkit-calendar-picker-indicator) {
    label[z-date-input^=line]:before {
        content: "";
        display: block;
        width: var(--zs-200);
        background-color: var(--z-bg);
        height: calc(100% - 5px);
        z-index: 1;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        pointer-events: none
    }
}

section[z-accordion] {
    width: var(--z-accordion--width, 100%);
    border: 1px solid var(--z-accordion--border-color, var(--z-br-separator));
    border-left-color: transparent;
    border-right-color: transparent;
    transition: border-color .2s ease-in-out;
    border-radius: var(--z-accordion--radius, var(--zs-12))
}

    section[z-accordion] > details {
        display: grid;
        height: -moz-max-content;
        height: max-content;
        box-sizing: border-box
    }

        section[z-accordion] > details > summary {
            cursor: pointer;
            font: var(--z-accordion--summary-font, var(--zf-h-22));
            color: var(--z-accordion--summary-color, var(--z-ct-clickable));
            list-style: none;
            width: 100%;
            position: relative;
            display: flex;
            align-items: center;
            padding: var(--z-accordion--summary-margin, var(--zs-150)) var(--zs-300) var(--z-accordion--summary-margin, var(--zs-150)) var(--z-accordion--summary-padding, 0);
            box-sizing: border-box;
            transition: color .2s;
            margin: 0
        }

            section[z-accordion] > details > summary::marker, section[z-accordion] > details > summary::-webkit-details-marker {
                display: none
            }

            section[z-accordion] > details > summary:after {
                --zi: url(https://zds.zurich.com/0.7.0/i/arrow-down--o.svg);
                content: "";
                width: 1.5rem;
                height: 1.5rem;
                display: inline-block;
                box-sizing: content-box;
                background-color: currentColor;
                margin: 0;
                mask: var(--zi) center/1.5rem no-repeat;
                -webkit-mask: var(--zi) center/1.5rem no-repeat;
                position: absolute;
                right: 0;
                transition: rotate .2s ease-in-out
            }

        section[z-accordion] > details[open] > summary:after {
            rotate: 180deg
        }

    section[z-accordion] > main {
        font: var(--zf-body-16);
        padding-bottom: 0;
        max-height: 0px;
        overflow: hidden;
        overflow: clip;
        color: var(--z-accordion--color, var(--z-ct-primary));
        transition: padding .2s ease-in-out,max-height .2s ease-in-out
    }

        section[z-accordion] > main > p:first-of-type {
            margin-top: 0
        }

        section[z-accordion] > main > p:last-of-type {
            margin-bottom: 0
        }

    section[z-accordion]:has(>details[open]) > main {
        padding-top: var(--zs-100);
        padding-bottom: var(--zs-150);
        max-height: 1000vh
    }

    section[z-accordion]:hover > details > summary {
        color: var(--z-accordion--summary-color--hover, var(--z-ct-hover))
    }

    section[z-accordion] > details > summary:focus {
        outline: var(--z-accordion--outline, var(--z-fc-outline));
        outline-offset: var(--z-fc-outline-offset)
    }

    section[z-accordion][borderless] {
        border-color: transparent !important
    }

        section[z-accordion][borderless] > details > summary {
            padding: 0;
            width: -moz-max-content;
            width: max-content;
            font: var(--z-accordion--summary-font, var(--zf-body-16))
        }

            section[z-accordion][borderless] > details > summary:after {
                position: relative;
                padding-left: var(--zs-100)
            }

section[z-accordion=s] {
    width: 19.7rem
}

    section[z-accordion=s] > details > summary {
        font: var(--z-accordion--summary-font, var(--zf-body-16))
    }

section[z-accordion=l] {
    width: 45.6rem
}

nav[z-action-menu] {
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: 1fr max-content;
    width: -moz-max-content;
    width: max-content;
    align-items: center;
    padding: var(--zs-50) var(--zs-150);
    color: var(--z-action-menu--color);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

:where(nav[z-action-menu],*[z-theme=light] nav[z-action-menu],nav[z-action-menu][z-theme=light]) {
    --_bg--hover: var(--z-bg-brand--inv);
    --_color: var(--z-content--clickable);
    --_color--hover: var(--z-content--clickable)
}

nav[z-action-menu] a {
    text-decoration-line: none;
    color: currentColor;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    display: flex;
    gap: var(--zs-50)
}

    nav[z-action-menu] a:focus {
        outline: none
    }

nav[z-action-menu] > ul {
    color: inherit;
    cursor: pointer;
    position: absolute;
    z-index: var(--z-action-menu--z-index, 999);
    display: none;
    grid-auto-rows: max-content;
    align-items: center;
    top: 100%;
    box-shadow: var(--zd-4);
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: var(--z-action-menu--radius, var(--zs-100));
    background-color: var(--z-action-menu--bg, var(--z-sf-base));
    min-width: 100%
}

    nav[z-action-menu] > ul hr {
        border-top: 2px solid var(--zc-blue-light);
        width: calc(100% - var(--zs-150) * 2);
        margin: 0 var(--zs-150)
    }

    nav[z-action-menu] > ul span {
        padding: var(--zs-50) var(--zs-150) 0 var(--zs-150);
        font: var(--zf-capt-12--500);
        color: var(--z-action-menu--heading-color, var(--z-ct-primary));
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    nav[z-action-menu] > ul li {
        color: var(--z-action-menu--color, var(--_color));
        display: flex;
        gap: var(--zs-25);
        align-items: center;
        margin: 0;
        padding: var(--zs-50) var(--zs-150);
        white-space: nowrap
    }

        nav[z-action-menu] > ul li:is(:hover,:focus-within) {
            color: var(--z-action-menu--color--hover, var(--_color--hover));
            background-color: var(--z-action-menu--bg--hover, var(--_bg--hover))
        }

        nav[z-action-menu] > ul li[icon] {
            padding: var(--zs-50) var(--zs-150)
        }

            nav[z-action-menu] > ul li[icon]:before {
                content: "";
                display: inline-block;
                width: var(--zs-150);
                height: var(--zs-150);
                -webkit-mask: var(--zi);
                mask: var(--zi);
                background-color: currentColor;
                transform: scale(.8)
            }

            nav[z-action-menu] > ul li[icon] > nav[z-action-menu] {
                padding-top: 0;
                padding-bottom: 0;
                padding-left: var(--zs-25)
            }

                nav[z-action-menu] > ul li[icon] > nav[z-action-menu] > ul:not(:has(li[icon])) {
                    top: 0
                }

        nav[z-action-menu] > ul li:has(nav[z-action-menu]) {
            padding: 0
        }

            nav[z-action-menu] > ul li:has(nav[z-action-menu])[icon] {
                padding-left: var(--zs-150)
            }

                nav[z-action-menu] > ul li:has(nav[z-action-menu])[icon] > nav[z-action-menu] {
                    height: var(--zs-150)
                }

        nav[z-action-menu] > ul li nav[z-action-menu] {
            padding: var(--zs-50) calc(var(--zs-150) / 2) var(--zs-50) var(--zs-150);
            width: 100%
        }

            nav[z-action-menu] > ul li nav[z-action-menu] > ul {
                left: 100%;
                top: 0;
                width: -moz-max-content;
                width: max-content;
                border-radius: 0 var(--z-action-menu--radius, var(--zs-100)) var(--z-action-menu--radius, var(--zs-100)) var(--z-action-menu--radius, var(--zs-100))
            }

                nav[z-action-menu] > ul li nav[z-action-menu] > ul li:first-child {
                    border-top-right-radius: var(--z-action-menu--radius, var(--zs-100));
                    padding-top: var(--zs-50)
                }

            nav[z-action-menu] > ul li nav[z-action-menu]:after {
                rotate: -90deg
            }

            nav[z-action-menu] > ul li nav[z-action-menu]:is(:hover,:focus,:focus-within):after, nav[z-action-menu] > ul li nav[z-action-menu]:has(ul:is(:hover,:focus-within)):after {
                rotate: 90deg
            }

    nav[z-action-menu] > ul:first-child {
        border-radius: var(--z-action-menu--radius, var(--zs-100)) var(--z-action-menu--radius, var(--zs-100)) 0 0;
        padding-top: calc(var(--zs-50) * 2)
    }

    nav[z-action-menu] > ul:last-child {
        border-radius: 0 0 var(--z-action-menu--radius, var(--zs-100)) var(--z-action-menu--radius, var(--zs-100));
        padding-bottom: calc(var(--zs-50) * 2)
    }

    nav[z-action-menu] > ul:is(:first-child,:last-child):has(nav[z-action-menu] li:has(>ul):is(:hover,:focus-within)) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0
    }

        nav[z-action-menu] > ul:is(:first-child,:last-child):has(nav[z-action-menu] li:has(>ul):is(:hover,:focus-within)) nav[z-action-menu] > ul li:first-child {
            border-top-left-radius: 0
        }

nav[z-action-menu]:has(>ul):after {
    --zi: url(https://zds.zurich.com/0.7.0/i/arrow-down--o.svg);
    content: "";
    width: 1rem;
    height: 1rem;
    display: inline-block;
    box-sizing: content-box;
    background-color: currentColor;
    margin: 0;
    mask: var(--zi) center/1rem no-repeat;
    -webkit-mask: var(--zi) center/1rem no-repeat;
    transform-origin: 50% 50%;
    transition: rotate .2s ease-in-out;
    margin-left: var(--zs-50)
}

nav[z-action-menu]:is(:hover,:focus-within) > ul {
    display: grid
}

nav[z-action-menu]:is(:hover,:focus-within):after {
    rotate: 180deg
}

nav[z-action-menu][config=round] > ul {
    border-radius: var(--z-action-menu--radius, var(--zs-100))
}

section[z-button-group] {
    display: flex;
    gap: var(--z-button-group--gap, var(--zs-12));
    border-radius: 100px
}

    section[z-button-group] > :is(a[role=button],button)[z-button] {
        --z-button--radius: 0
    }

        section[z-button-group] > :is(a[role=button],button)[z-button]:first-of-type {
            --z-button--radius: 28px 0 0 28px
        }

        section[z-button-group] > :is(a[role=button],button)[z-button]:last-of-type {
            --z-button--radius: 0 28px 28px 0
        }

    section[z-button-group][z-button-group^=secondary] button[z-button] + button[z-button] {
        margin-left: -4px;
        border-left: none
    }

article[z-card] {
    display: grid;
    color: var(--z-card--color, var(--z-ct-primary)) !important;
    border-radius: var(--z-card--radius, var(--zs-150));
    background: var(--z-card--bg, var(--z-sf-base)) !important;
    font: var(--z-card--font);
    transition: box-shadow .2s ease-in-out;
    box-shadow: var(--z-card--shadow, var(--zd-1));
    padding: var(--z-card--padding, var(--zs-150));
    width: var(--z-card--width, auto);
    height: var(--z-card--height, auto);
    gap: var(--z-card--gap, var(--zs-100));
    box-sizing: border-box;
    overflow: clip;
    border: var(--z-card--border)
}

article[card-size=desktop] {
    max-width: 320px
}

article[card-size=portrait] {
    max-width: 210px
}

article[card-size=landscape] {
    max-width: 290px
}

article[card-size=mobile] {
    max-width: 315px
}

article[clickable] {
    cursor: pointer
}

    article[clickable]:hover {
        box-shadow: var(--zd-3)
    }

article[z-card=flex], article[z-card$=":flex"] {
    display: flex;
    flex-direction: column
}

article[z-card=slim], article[z-card^=slim] {
    padding: 0
}

fieldset[z-fieldset] {
    display: grid;
    margin: 0;
    padding: 0;
    gap: var(--zs-100);
    border: none
}

    fieldset[z-fieldset] > legend {
        font: var(--z-fieldset--font, var(--zf-capt-14--600));
        color: var(--z-fieldset--color, var(--z-ct-primary));
        padding-bottom: var(--zs-50);
        padding-left: 0
    }

    fieldset[z-fieldset] > div {
        display: grid;
        gap: var(--zs-100);
        grid-template: var(--z-fieldset--template);
        height: -moz-max-content;
        height: max-content
    }

    fieldset[z-fieldset][z-fieldset^=row] {
        grid-auto-flow: column;
        grid-auto-columns: 1fr
    }

figure[z-figure] {
    display: flex;
    flex-direction: column;
    margin: 0;
    place-items: center
}

    figure[z-figure] figcaption {
        font: var(--z-figure--font, var(--zf-capt-14--500));
        padding: 0 var(--zs-100);
        color: var(--z-figure--color, var(--z-ct-primary));
        margin-top: var(--zs-50);
        text-align: center
    }

section[z-floating-banner] {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--z-floating-banner--top, 0);
    display: grid;
    text-align: center;
    justify-content: center;
    background-color: var(--z-floating-banner--bg, var(--z-sf-base));
    color: var(--z-floating-banner--color, var(--z-ct-primary));
    grid-template: "h" max-content "c" 1fr "f" max-content/1fr;
    gap: var(--zs-100);
    padding: var(--zs-300) var(--zs-600) var(--zs-200);
    box-shadow: var(--zd-2);
    z-index: 999
}

    section[z-floating-banner] > h6 {
        grid-area: h;
        margin: 0;
        font: var(--zf-h-24) !important;
        font-weight: 300
    }

    section[z-floating-banner] > main {
        grid-area: c
    }

    section[z-floating-banner] > footer {
        display: flex;
        gap: var(--zs-100);
        justify-content: center;
        align-items: center;
        grid-area: f;
        margin-top: var(--zs-150)
    }

    section[z-floating-banner] > :is(z-button,[z-button]) {
        position: absolute;
        top: 0;
        right: var(--zs-50)
    }

    section[z-floating-banner][z-floating-banner^=left] {
        --z-smiling-z--size: 5rem;
        text-align: left;
        justify-content: start;
        grid-template: "z h f" max-content "z c f" 1fr/max-content 1fr max-content;
        -moz-column-gap: var(--zs-200);
        column-gap: var(--zs-200);
        padding-top: var(--zs-200)
    }

        section[z-floating-banner][z-floating-banner^=left] > :is(div[z-smiling-z],z-smiling-z) {
            grid-area: z;
            align-self: flex-start
        }

        section[z-floating-banner][z-floating-banner^=left] > footer {
            margin-top: 0
        }

    section[z-floating-banner][z-floating-banner="left:small"] {
        --z-smiling-z--size: 2.5rem
    }

form[z-form] {
    position: relative;
    display: grid;
    gap: var(--z-form--gap, var(--zs-150));
    margin: var(--z-form--margin, var(--zs-150));
    grid-template: var(--z-form--template)
}

    form[z-form]:has(*[required]):after {
        content: "* Required input.";
        position: absolute;
        bottom: 0;
        right: 0
    }

html[lang^=es] form[z-form]:has(*[required]):after {
    content: "* Campo requerido."
}

fieldset[z-input-group] {
    margin: 0;
    padding: 0;
    border: none
}

    fieldset[z-input-group] > legend {
        font: var(--z-input-group--font, var(--zf-capt-14--600));
        color: var(--z-fieldset--color, var(--z-ct-primary));
        padding-bottom: var(--zs-50);
        padding-left: 0
    }

    fieldset[z-input-group] > div {
        display: flex;
        align-items: start
    }

    fieldset[z-input-group] > div {
        --z-button--radius: 0;
        --z-input--radius: 0
    }

        fieldset[z-input-group] > div > *:not([z-button]) + *:not([z-button]) {
            border-left: var(--z-input-group--gap, 1px) solid var(--z-input-group--separator, var(--z-br-separator))
        }

        fieldset[z-input-group] > div > *:last-child {
            --z-input--radius: 0 var(--z-input-group--radius, 28px) var(--z-input-group--radius, 28px) 0;
            --z-button--radius: 0 var(--z-input-group--radius, 28px) var(--z-input-group--radius, 28px) 0
        }

        fieldset[z-input-group] > div > *:first-child {
            --z-input--radius: var(--z-input-group--radius, 28px) 0 0 var(--z-input-group--radius, 28px);
            --z-button--radius: var(--z-input-group--radius, 28px) 0 0 var(--z-input-group--radius, 28px)
        }

        fieldset[z-input-group] > div > output {
            display: grid;
            font: var(--zf-body-18--300);
            color: var(--z-br-primary);
            box-sizing: border-box;
            border: 2px solid var(--z-br-inactive);
            height: var(--zs-300);
            padding: var(--zs-50) var(--zs-100);
            border-radius: var(--z-input--radius, 0);
            align-items: center;
            max-width: -moz-max-content;
            max-width: max-content;
            white-space: nowrap
        }

            fieldset[z-input-group] > div > output[icon]:before {
                content: "";
                display: inline-block;
                width: 1em;
                height: 1em;
                background-color: currentColor;
                -webkit-mask: var(--zi) no-repeat;
                mask: var(--zi) no-repeat;
                -webkit-mask-size: 1em;
                mask-size: 1em;
                line-height: 1em
            }

            fieldset[z-input-group] > div > output:first-child {
                padding-right: var(--zs-75)
            }

            fieldset[z-input-group] > div > output:last-child {
                padding-left: var(--zs-75)
            }

::backdrop {
    --color: var(--zc-blue-zurich)
}

main[z-modal] {
    display: none;
    background-color: var(--z-modal--backdrop, var(--zo-black)) !important;
    color: var(--z-modal--color, var(--z-color)) !important;
    position: var(--z-modal--position, fixed);
    inset: 0;
    z-index: var(--z-modal--z-index, 10000);
    place-items: center
}

    main[z-modal][open] {
        display: grid
    }

    main[z-modal] > section {
        --z-color: var(--z-modal--color, var(--z-color));
        --z-bg: var(--z-modal--bg, var(--z-sf-base));
        border: none;
        box-shadow: var(--zd-10);
        border-radius: var(--zs-150);
        min-width: 20vw;
        max-width: calc(100vw - var(--zs-100));
        padding: var(--z-modal--padding, var(--zs-150));
        padding-top: var(--zs-300);
        background-color: var(--z-modal--bg, var(--z-sf-base));
        position: relative;
        margin-inline: var(--zs-100);
        z-index: var(--z-modal--z-index, 10000)
    }

        main[z-modal] > section > button[icon^=close] {
            position: absolute;
            top: var(--zs-100);
            right: var(--zs-100);
            padding: 0;
            cursor: pointer
        }

aside[z-side-menu] {
    position: fixed;
    top: var(--z-sidebar--top, var(--zs-200));
    left: 100vw;
    width: var(--z-sidebar--width, 25vw);
    box-shadow: var(--zd-4);
    padding: var(--z-sidebar--padding, var(--zs-400) var(--zs-150) var(--zs-150));
    border-top-left-radius: var(--z-sidebar--radius, var(--zs-200));
    border-bottom-left-radius: var(--z-sidebar--radius, var(--zs-200));
    background: var(--z-sidebar--bg, var(--_bg)) !important;
    color: var(--z-sidebar--color, var(--_color)) !important;
    transition: transform .25s ease-in-out;
    transform: translate(100%);
    overflow: hidden
}

:where(aside[z-side-menu],*[z-theme=light] aside[z-side-menu],aside[z-side-menu][z-theme=light]) {
    --_bg: var(--z-bg-hover--inv);
    --_color: var(--z-ct-primary);
    --_close-icon-color: var(--z-ct-clickable)
}

aside[z-side-menu] > button:empty {
    position: absolute;
    align-items: center;
    right: var(--zs-100);
    top: var(--zs-100)
}

    aside[z-side-menu] > button:empty:before {
        color: var(--z-sidebar--close-icon-color, var(--_close-icon-color));
        --zi: url(https://zds.zurich.com/0.7.0/i/close--o.svg);
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        display: inline-block;
        box-sizing: content-box;
        background-color: currentColor;
        margin: 0;
        mask: var(--zi) center/1.5rem no-repeat;
        -webkit-mask: var(--zi) center/1.5rem no-repeat
    }

aside[z-side-menu][z-side-menu=left] {
    left: auto;
    right: 100vw;
    border-top-right-radius: var(--z-sidebar--radius, var(--zs-200));
    border-bottom-right-radius: var(--z-sidebar--radius, var(--zs-200));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transform: translate(-100%)
}

aside[z-side-menu][open] {
    left: auto;
    right: 0;
    transform: none
}

    aside[z-side-menu][open][z-side-menu=left] {
        left: 0;
        right: auto;
        transform: none
    }

aside[z-sidebar] {
    position: fixed;
    top: var(--z-sidebar--top, var(--zs-200));
    left: 100vw;
    width: var(--z-sidebar--width, 25vw);
    box-shadow: var(--zd-4);
    padding: var(--z-sidebar--padding, var(--zs-400) var(--zs-150) var(--zs-150));
    border-top-left-radius: var(--z-sidebar--radius, var(--zs-200));
    border-bottom-left-radius: var(--z-sidebar--radius, var(--zs-200));
    background: var(--z-sidebar--bg, var(--_bg)) !important;
    color: var(--z-sidebar--color, var(--_color)) !important;
    transition: transform .25s ease-in-out;
    transform: translate(100%);
    overflow: hidden
}

:where(aside[z-sidebar],*[z-theme=light] aside[z-sidebar],aside[z-sidebar][z-theme=light]) {
    --_bg: var(--z-bg-hover--inv);
    --_color: var(--z-ct-primary);
    --_close-icon-color: var(--z-ct-clickable)
}

aside[z-sidebar] > button:empty {
    position: absolute;
    align-items: center;
    right: var(--zs-100);
    top: var(--zs-100)
}

    aside[z-sidebar] > button:empty:before {
        color: var(--z-sidebar--close-icon-color, var(--_close-icon-color));
        --zi: url(https://zds.zurich.com/0.7.0/i/close--o.svg);
        content: "";
        width: 1.5rem;
        height: 1.5rem;
        display: inline-block;
        box-sizing: content-box;
        background-color: currentColor;
        margin: 0;
        mask: var(--zi) center/1.5rem no-repeat;
        -webkit-mask: var(--zi) center/1.5rem no-repeat
    }

aside[z-sidebar][z-sidebar=left] {
    left: auto;
    right: 100vw;
    border-top-right-radius: var(--z-sidebar--radius, var(--zs-200));
    border-bottom-right-radius: var(--z-sidebar--radius, var(--zs-200));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transform: translate(-100%)
}

aside[z-sidebar][open] {
    left: auto;
    right: 0;
    transform: none
}

    aside[z-sidebar][open][z-sidebar=left] {
        left: 0;
        right: auto;
        transform: none
    }

section[z-snap-scroll] {
    display: flex;
    width: var(--z-snap-scroll--width, 100%);
    gap: var(--z-snap-scroll--gap, var(--zs-50));
    overflow-x: auto;
    margin: var(--z-snap-scroll--padding, var(--zs-50));
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    white-space: nowrap;
    box-sizing: border-box
}

    section[z-snap-scroll][z-snap-scroll=vertical] {
        display: flex;
        width: auto;
        height: var(--z-snap-scroll--height, 50vh);
        flex-direction: column;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
        scroll-behavior: smooth
    }

    section[z-snap-scroll] > * {
        scroll-snap-align: start
    }

:where(table[z-table],*[z-theme=light] table[z-table],table[z-table][z-theme=light]) {
    --z-table--bg--highlighted: var(--z-sf-subtle)
}

table[z-table] {
    border-top: var(--z-table--border-stroke, 1px) solid var(--z-table--border-color, var(--z-br-separator));
    display: table !important;
    border-spacing: 0;
    border-collapse: separate !important;
    margin: var(--zs-150) auto !important;
    width: 100%
}

    table[z-table] > caption {
        display: table-caption;
        caption-side: bottom;
        text-align: center;
        padding-top: var(--zs-75);
        font: var(--zf-capt-14--600) !important
    }

    table[z-table] :is(th,td) {
        background-color: transparent;
        border: none !important;
        border-bottom: var(--z-table--border-stroke, 1px) solid var(--z-table--border-color, var(--z-br-separator)) !important;
        color: var(--z-table--color, var(--z-ct-primary)) !important;
        text-align: left;
        vertical-align: middle !important;
        padding: var(--z-table--cell-padding, var(--zs-100)) !important;
        font: var(--zf-body-16) !important
    }

        table[z-table] :is(th,td)[config*=right] {
            text-align: right
        }

        table[z-table] :is(th,td)[config*=center] {
            text-align: center
        }

    table[z-table] :is(thead,tbody) :is(th,td) {
        background-color: transparent;
        border: none !important;
        border-bottom: var(--z-table--border-stroke, 1px) solid var(--z-table--border-color, var(--z-br-separator)) !important;
        color: var(--z-table--color, var(--z-ct-primary)) !important;
        text-align: left;
        vertical-align: middle !important;
        padding: var(--z-table--cell-padding, var(--zs-100)) !important;
        font: var(--zf-body-16) !important
    }

        table[z-table] :is(thead,tbody) :is(th,td)[config*=right] {
            text-align: right
        }

        table[z-table] :is(thead,tbody) :is(th,td)[config*=center] {
            text-align: center
        }

        table[z-table] :is(thead,tbody) :is(th,td) > * {
            vertical-align: middle
        }

    table[z-table] > tr > th, table[z-table] > thead tr > :is(th,td), table[z-table] > tbody tr > th {
        font: var(--zf-body-16--600) !important
    }

    table[z-table] :is(thead,tbody) :is(th,td)[z-cell$=right] {
        text-align: right
    }

    table[z-table] :is(thead,tbody) :is(th,td)[z-cell$=center] {
        text-align: center
    }

    table[z-table] thead :is(th,td)[highlight], table[z-table] thead:has(:is(th,td)[highlight]:nth-child(1)) + tbody :is(th,td):nth-child(1), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(2)) + tbody :is(th,td):nth-child(2), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(3)) + tbody :is(th,td):nth-child(3), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(4)) + tbody :is(th,td):nth-child(4), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(5)) + tbody :is(th,td):nth-child(5), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(6)) + tbody :is(th,td):nth-child(6), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(7)) + tbody :is(th,td):nth-child(7), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(8)) + tbody :is(th,td):nth-child(8), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(9)) + tbody :is(th,td):nth-child(9), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(10)) + tbody :is(th,td):nth-child(10), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(11)) + tbody :is(th,td):nth-child(11), table[z-table] thead:has(:is(th,td)[highlight]:nth-child(12)) + tbody :is(th,td):nth-child(12) {
        background-color: var(--z-table--bg--highlighted)
    }

    table[z-table][zebra]:not([zebra=odd]) tbody tr:nth-child(2n) :is(th,td) {
        background-color: var(--z-table--bg--highlighted)
    }

    table[z-table][zebra=odd] tbody tr:nth-child(odd) :is(th,td) {
        background-color: var(--z-table--bg--highlighted)
    }

section[z-tabs] {
    font: var(--zf-body-16);
    max-width: 100vw;
    display: grid;
    width: 100%;
    overflow: visible
}

    section[z-tabs] nav[role=tablist] {
        overflow-x: auto;
        display: grid;
        grid-auto-flow: column;
        list-style: none;
        padding: 0;
        margin: 0;
        width: 100%;
        overflow: visible
    }

        section[z-tabs] nav[role=tablist] label[role=tab] {
            font: var(--zf-body-16);
            cursor: pointer;
            border-bottom: var(--zs-12) solid var(--z-tabs--border, var(--z-br-separator));
            padding: var(--zs-75) var(--zs-150);
            display: inline-block;
            color: var(--z-tabs--color, var(--z-ct-clickable));
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
            text-align: center;
            white-space: nowrap;
            position: relative;
            display: grid;
            row-gap: 8px;
            justify-items: center;
            transition: border-width .2s,padding .2s
        }

            section[z-tabs] nav[role=tablist] label[role=tab] input {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                position: absolute;
                inset: 0;
                cursor: pointer;
                margin: 0
            }

                section[z-tabs] nav[role=tablist] label[role=tab] input:focus {
                    outline: var(--z-fc-outline);
                    transition: outline-offset .2s ease-in-out,outline-width .2s ease-in-out
                }

            section[z-tabs] nav[role=tablist] label[role=tab][aria-selected], section[z-tabs] nav[role=tablist] label[role=tab]:has(input[checked]) {
                color: var(--z-tabs--color--selected, var(--z-br-active));
                border-width: var(--zs-25);
                border-color: var(--z-tabs--border--selected, var(--z-br-active));
                padding-bottom: calc(var(--zs-75) - var(--zs-25))
            }

            section[z-tabs] nav[role=tablist] label[role=tab]:hover * {
                color: var(--z-tabs--color--hover, var(--z-ct-hover))
            }

            section[z-tabs] nav[role=tablist] label[role=tab]:has(input:active) * {
                color: var(--z-tabs--color--active, var(--z-ct-pressed))
            }

            section[z-tabs] nav[role=tablist] label[role=tab]:has(input:disabled) * {
                color: var(--z-tabs--color--disabled, var(--z-ct-disabled));
                opacity: var(--z-op-disabled)
            }

    section[z-tabs] main {
        padding-top: var(--zs-100)
    }

        section[z-tabs] main > article[role=tabpanel] {
            display: none;
            width: 100%
        }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(1)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(1) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(2)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(2) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(3)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(3) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(4)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(4) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(5)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(5) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(6)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(6) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(7)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(7) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(8)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(8) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(9)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(9) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(10)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(10) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(11)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(11) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(12)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(12) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(13)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(13) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(14)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(14) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(15)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(15) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(16)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(16) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(17)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(17) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(18)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(18) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(19)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(19) {
        display: inline-block
    }

    section[z-tabs] nav[role=tablist]:has(label[role=tab]:nth-child(20)>input:is(:checked,[checked])) + main > article[role=tabpanel]:nth-child(20) {
        display: inline-block
    }

    section[z-tabs] > main > article > p:first-child {
        margin-top: 0
    }

article[z-action-card] {
    --z-image--width: 8.75rem;
    --z-image--height: 8.75rem;
    --z-image--radius: 50%;
    display: grid;
    box-shadow: var(--z-action-card--shadow, var(--zd-4));
    border-radius: var(--zs-100);
    gap: var(--zs-100);
    padding: var(--zs-150);
    align-items: flex-start;
    grid-auto-rows: max-content;
    justify-items: center;
    text-align: center;
    position: relative;
    min-width: 10rem;
    width: var(--z-action-card--width, auto);
    height: var(--z-action-card--height, auto);
    background: var(--z-action-card--bg, var(--z-sf-base)) !important;
    color: var(--z-action-card--color, var(--z-ct-primary)) !important;
    overflow: hidden;
    max-width: var(--z-action-card--max-width, 30rem)
}

    article[z-action-card] > main {
        display: grid;
        gap: var(--zs-50);
        text-align: center;
        justify-items: center
    }

        article[z-action-card] > main > div {
            display: flex;
            gap: var(--zs-50)
        }

            article[z-action-card] > main > div:empty {
                display: none
            }

            article[z-action-card] > main > div small {
                font: var(--zf-capt-14--600)
            }

        article[z-action-card] > main header {
            font: var(--zf-body-20--600)
        }

        article[z-action-card] > main p {
            font: var(--zf-body-16);
            margin: 0
        }

    article[z-action-card] > button[z-button=link][icon]:first-of-type {
        cursor: pointer;
        color: var(--zc-blue-zurich);
        padding: 0;
        background-color: transparent;
        border: none;
        position: absolute;
        top: var(--zs-75);
        right: var(--zs-75)
    }

    article[z-action-card] > div > button[z-button]:last-of-type {
        margin-top: var(--zs-50)
    }

    article[z-action-card][wide] {
        width: 100%
    }

div[z-alert] {
    min-width: 17rem;
    color: var(--z-alert--color, var(--z-ct-on-status));
    background-color: var(--z-alert--bg, var(--z-bg-info));
    padding: var(--zs-75) var(--zs-100);
    display: grid;
    gap: var(--zs-75);
    align-items: center;
    grid-template-columns: max-content 1fr;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    box-shadow: var(--zd-2);
    border-radius: var(--zs-100);
    text-align: left;
    height: -moz-max-content;
    height: max-content;
    font: var(--zf-body-16--600)
}

:where(div[z-alert],*[z-theme=light] div[z-alert],div[z-alert][z-theme=light]) {
    --zi: url(https://zds.zurich.com/0.7.0/i/alert-circle--o.svg)
}

div[z-alert] p {
    margin: 0
}

div[z-alert]:not([icon]) {
    grid-template-columns: 1fr
}

div[z-alert][icon]:before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    box-sizing: content-box;
    background-color: currentColor;
    margin: 0;
    mask: var(--zi) center/1.5rem no-repeat;
    -webkit-mask: var(--zi) center/1.5rem no-repeat
}

div[z-alert] > button {
    color: currentColor;
    border-color: currentColor;
    background-color: transparent;
    border: none;
    cursor: pointer
}

    div[z-alert] > button:not(:empty) {
        border: 2px solid currentColor;
        padding: var(--zs-25) var(--zs-50);
        border-radius: var(--zs-75);
        font: var(--zf-capt-12--500)
    }

    div[z-alert] > button:empty {
        display: flex;
        align-items: center
    }

        div[z-alert] > button:empty:before {
            --zi: url(https://zds.zurich.com/0.7.0/i/close--o.svg);
            content: "";
            width: 1.5rem;
            height: 1.5rem;
            display: inline-block;
            box-sizing: content-box;
            background-color: currentColor;
            margin: 0;
            mask: var(--zi) center/1.5rem no-repeat;
            -webkit-mask: var(--zi) center/1.5rem no-repeat
        }

div[z-alert][z-alert=positive] {
    background-color: var(--z-bg-positive)
}

div[z-alert][z-alert=alert] {
    background-color: var(--z-bg-alert);
    color: var(--z-ct-on-status--eq)
}

div[z-alert][z-alert=negative] {
    background-color: var(--z-bg-negative)
}

article[z-article-card] {
    --z-image--width: 100%;
    --z-image--height: 12rem;
    display: grid;
    box-shadow: var(--z-article-card--shadow, var(--zd-4));
    border-radius: var(--zs-100);
    align-items: flex-start;
    grid-auto-rows: max-content;
    position: relative;
    width: var(--z-article-card--width, 23.8rem);
    height: var(--z-article-card--height, auto);
    background: var(--z-article-card--bg, var(--z-sf-base)) !important;
    color: var(--z-article-card--color, var(--z-ct-primary)) !important;
    overflow: hidden;
    max-width: var(--z-article-card--max-width, 30rem)
}

    article[z-article-card] > main {
        display: grid;
        gap: var(--zs-50);
        text-align: left;
        padding: var(--zs-100)
    }

        article[z-article-card] > main > div {
            display: flex;
            gap: var(--zs-50);
            align-items: center;
            --z-icon--size: 1rem
        }

            article[z-article-card] > main > div:empty {
                display: none
            }

            article[z-article-card] > main > div small {
                font: var(--zf-capt-14--600)
            }

        article[z-article-card] > main > header {
            font: var(--zf-body-20--600)
        }

        article[z-article-card] > main > p {
            font: var(--zf-body-16);
            margin: 0
        }

    article[z-article-card] main > button {
        margin: var(--zs-100) 0 0 0
    }

    article[z-article-card][wide] {
        width: 100%
    }

div[z-avatar] {
    display: grid;
    grid-auto-flow: column;
    gap: var(--zs-50);
    --z-profile--bg: var(--z-avatar--bg);
    --z-profile--size: var(--z-avatar--size)
}

:where(div[z-avatar],*[z-theme=light] div[z-avatar],div[z-avatar][z-theme=light]) {
    --_color: var(--z-ct-clickable);
    --_color-desc: var(--z-ct-secondary)
}

div[z-avatar] header {
    display: grid;
    align-items: center;
    align-content: center
}

    div[z-avatar] header p {
        margin: 0;
        font: var(--zf-body-18);
        color: var(--z-avatar--color, var(--_color))
    }

    div[z-avatar] header span {
        font: var(--zf-capt-12--500);
        color: var(--z-avatar--color-desc, var(--_color-desc))
    }

div[z-avatar^=vertical] {
    grid-auto-flow: row;
    justify-items: center
}

    div[z-avatar^=vertical] header {
        text-align: center
    }

div[z-avatar-list] {
    --z-profile--size: var(--z-avatar-list--size, 3.5rem);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(var(--z-profile--size) - var(--zs-25))
}

:where(div[z-avatar-list],*[z-theme=light] div[z-avatar-list],div[z-avatar-list][z-theme=light]) {
    --_profile-bg--1: var(--z-bg-azure);
    --_profile-bg--2: var(--z-bg-moss);
    --_profile-bg--3: var(--z-bg-teal);
    --_profile-bg--4: var(--z-bg-peach);
    --_profile-bg--5: var(--z-bg-primary)
}

div[z-avatar-list] div[z-profile]:nth-child(1) {
    --z-profile--bg: var(--z-avatar-list--bg-1, var(--_profile-bg--1) ) !important
}

div[z-avatar-list] div[z-profile]:nth-child(2) {
    --z-profile--bg: var(--z-avatar-list--bg-2, var(--_profile-bg--2) ) !important
}

div[z-avatar-list] div[z-profile]:nth-child(3) {
    --z-profile--bg: var(--z-avatar-list--bg-3, var(--_profile-bg--3) ) !important
}

div[z-avatar-list] div[z-profile]:nth-child(4) {
    --z-profile--bg: var(--z-avatar-list--bg-4, var(--_profile-bg--4) ) !important
}

div[z-avatar-list] div[z-profile]:nth-child(5) {
    --z-profile--bg: var(--z-avatar-list--bg-5, var(--_profile-bg--5) ) !important
}

div[z-avatar-list] div[z-profile]:nth-child(6) {
    --z-profile--bg: var(--z-avatar-list--bg-6, var(--_profile-bg--6) ) !important
}

div[z-avatar-list][z-avatar-list=s] {
    --z-profile--size: 2.5rem
}

div[z-avatar-list][z-avatar-list=l] {
    --z-profile--size: 5rem
}

:where(nav[z-breadcrumbs],*[z-theme=light] nav[z-breadcrumbs],nav[z-breadcrumbs][z-theme=light]) {
    --_color--active: var(--z-ct-active)
}

nav[z-breadcrumbs] > ol {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0
}

    nav[z-breadcrumbs] > ol li {
        list-style: none;
        display: flex;
        align-items: center;
        margin: 0
    }

        nav[z-breadcrumbs] > ol li:not(:last-child):after {
            --zi: url(https://zds.zurich.com/0.7.0/i/arrow-right--o.svg);
            content: "";
            width: .75rem;
            height: .75rem;
            display: inline-block;
            box-sizing: content-box;
            background-color: currentColor;
            margin: 0;
            mask: var(--zi) center/.75rem no-repeat;
            -webkit-mask: var(--zi) center/.75rem no-repeat;
            margin: 0 var(--zs-75) 0 var(--zs-50)
        }

        nav[z-breadcrumbs] > ol li:last-child {
            color: var(--z-breadcrumbs--color--active, var(--_color--active));
            font: var(--zf-body-18)
        }

@container empty_state (width < 1200px) {
    main {
        --_padding: 3.5rem !important;
        --z-grid--columns-width: 50px !important
    }
}

@container empty_state (width < 992px) {
    main {
        --z-grid--columns-width: 30px !important
    }

        main > h3 {
            font: var(--zf-h-32) !important
        }

        main > p {
            font: var(--zf-body-18--300) !important
        }
}

@container empty_state (width < 768px) {
    main {
        --_padding: 2rem !important;
        --z-grid--columns-width: 1fr !important;
        --z-grid--columns: 6 !important;
        min-width: calc(100% - 3.75rem) !important
    }

        main > h3 {
            font: var(--zf-h-30) !important
        }
}

section[z-empty-state] {
    container: empty_state/inline-size;
    display: grid;
    place-items: center;
    text-align: center;
    background: var(--z-empty-state--bg, var(--z-sf-brand)) !important;
    color: var(--z-empty-state--color, var(--z-ct-primary)) !important;
    width: 100%;
    gap: var(--zs-200)
}

:where(section[z-empty-state],*[z-theme=light] section[z-empty-state],section[z-empty-state][z-theme=light]) {
    --_padding: 4rem
}

section[z-empty-state] [pictogram], section[z-empty-state] z-image, section[z-empty-state] [z-image] {
    padding-top: var(--_padding)
}

section[z-empty-state] main {
    width: calc(var(--z-grid--columns-width) * var(--z-grid--columns) + var(--z-grid--columns-gutter) * (var(--z-grid--columns) - 1));
    padding-bottom: var(--_padding)
}

    section[z-empty-state] main > h3 {
        font: var(--zf-h-44);
        margin: 0
    }

    section[z-empty-state] main > p {
        font: var(--zf-body-20--300);
        text-wrap: wrap
    }

    section[z-empty-state] main > button {
        display: inline-block
    }

section[z-empty-state]:not(:has(>:is([pictogram],z-image,[z-image]))) main {
    padding-top: var(--_padding)
}

li[z-event-list-item] {
    --z-image--width: 4.375rem;
    --z-pictogram--size: 4.375rem;
    display: flex;
    gap: var(--zs-150);
    align-items: center;
    border-top: 1px solid var(--z-event-list-item--border-color, var(--z-br-primary));
    border-bottom: 1px solid var(--z-event-list-item--border-color, var(--z-br-primary));
    color: var(--z-ct-primary);
    padding: var(--zs-75) 0
}

    li[z-event-list-item] > time, li[z-event-list-item] > main {
        display: grid;
        align-items: center
    }

    li[z-event-list-item] > time {
        justify-content: center;
        text-align: center
    }

        li[z-event-list-item] > time > span:first-child {
            font: var(--zf-body-16--500);
            text-transform: uppercase
        }

        li[z-event-list-item] > time > span:last-child {
            margin-top: -.25rem;
            font: var(--zf-h-30)
        }

    li[z-event-list-item] > img {
        border-radius: 50%
    }

    li[z-event-list-item] > main {
        gap: var(--zs-25)
    }

        li[z-event-list-item] > main > small {
            font: var(--zf-capt-12--500)
        }

        li[z-event-list-item] > main > header {
            font: var(--zf-body-20--500)
        }

        li[z-event-list-item] > main > p {
            margin: 0;
            font: var(--zf-capt-14)
        }

@container image_stage (width < 1200px) {
    aside {
        --_sf: 35rem !important;
        --_height: 33rem !important
    }
}

@container image_stage (width < 992px) {
    aside {
        --_sf: 25rem !important;
        --_sf-gap: 5rem !important;
        --_height: 30rem !important
    }
}

@container image_stage (width < 768px) {
    aside {
        order: 1 !important;
        --_height: 20rem !important
    }

        aside > main > div > blockquote > h1 {
            color: var(--z-image-stage--color--mobile, var(--z-ct-primary)) !important
        }
}

section[z-image-stage] {
    container: image_stage/inline-size;
    display: flex;
    flex-wrap: wrap;
    place-items: center;
    width: 100%;
    background: var(--z-image-stage--bg--fallback, var(--z-sf-brand)) !important;
    overflow: hidden;
    justify-content: center;
    position: relative
}

:where(section[z-image-stage],*[z-theme=light] section[z-image-stage],section[z-image-stage][z-theme=light]) {
    --_sf: 45rem;
    --_sf-gap: 10rem;
    --_height: 35rem
}

section[z-image-stage] > :is(z-image,z-zurich-image,[z-image],[z-zurich-image]) {
    position: absolute;
    inset: 0;
    --z-image--height: var(--_height);
    --z-image--width: 100%
}

    section[z-image-stage] > :is(z-image,z-zurich-image,[z-image],[z-zurich-image])::part(picture) {
        width: 100%
    }

section[z-image-stage] > aside {
    margin-left: 40%;
    --z-shape--size: calc(var(--_sf) / 5);
    height: var(--_height);
    position: relative;
    width: calc(var(--_sf) - var(--_sf-gap));
    overflow: visible;
    z-index: 1;
    order: 2
}

    section[z-image-stage] > aside > main {
        width: var(--_sf);
        height: var(--_sf);
        border-radius: 50%;
        background: var(--z-image-stage--bg, var(--z-sf-base)) !important;
        position: absolute;
        bottom: 0;
        display: grid;
        box-sizing: border-box
    }

        section[z-image-stage] > aside > main > div {
            height: 100%;
            width: 100%;
            position: relative;
            box-sizing: border-box;
            margin: 0
        }

            section[z-image-stage] > aside > main > div blockquote {
                height: 100%;
                text-align: center;
                white-space: normal;
                display: inline;
                margin-top: -20px
            }

                section[z-image-stage] > aside > main > div blockquote > * {
                    overflow-wrap: normal;
                    text-align: center
                }

                section[z-image-stage] > aside > main > div blockquote > h1 {
                    color: var(--z-image-stage--color, var(--z-ct-primary));
                    font: var(--zf-h-48);
                    margin: 0 0 var(--zs-75) 0 !important;
                    font-weight: 300
                }

                section[z-image-stage] > aside > main > div blockquote > p {
                    font: var(--zf-h-30);
                    margin: 0 !important;
                    font-weight: 300
                }

                section[z-image-stage] > aside > main > div blockquote > div {
                    margin-top: var(--zs-150);
                    display: inline-block;
                    align-items: center;
                    box-sizing: border-box
                }

                section[z-image-stage] > aside > main > div blockquote:before {
                    box-sizing: border-box;
                    content: "";
                    width: 50%;
                    height: 100%;
                    float: right;
                    shape-outside: polygon(2% 0%,100% 0%,100% 100%,2% 100%,50% 94%,76.6% 82.7%,94% 65.6%,100% 50%,94% 32.6%,76.6% 17.3%,50% 6%);
                    shape-margin: 7%
                }

            section[z-image-stage] > aside > main > div:before {
                content: "";
                box-sizing: border-box;
                width: 50%;
                height: 100%;
                float: left;
                shape-outside: polygon(0 0,98% 0,50% 6%,23.4% 17.3%,6% 32.6%,0 50%,6% 65.6%,23.4% 82.7%,50% 94%,98% 100%,0 100%);
                shape-margin: 7%
            }

    section[z-image-stage] > aside > div[z-shape] {
        position: absolute;
        bottom: 0;
        left: 0
    }

section[z-image-stage][z-image-stage^=left] > aside {
    margin-left: 0;
    margin-right: 40%
}

    section[z-image-stage][z-image-stage^=left] > aside > * {
        left: auto !important;
        right: 0 !important
    }

section[z-image-stage][z-image-stage$=":s"] aside > main > div > blockquote > h1, section[z-image-stage][z-image-stage=s] aside > main > div > blockquote > h1 {
    font: var(--zf-h-36)
}

section[z-image-stage][z-image-stage$=":s"] aside > main > div > blockquote > p, section[z-image-stage][z-image-stage=s] aside > main > div > blockquote > p {
    font: var(--zf-h-24)
}

section[z-image-stage][z-image-stage$=":l"] aside > main > div > blockquote > h1, section[z-image-stage][z-image-stage=l] aside > main > div > blockquote > h1 {
    font: var(--zf-h-72)
}

li[z-list-item] {
    --z-profile--size: var(--zs-250);
    display: grid;
    padding: var(--zs-100) 0;
    border-top: 1px solid var(--z-list-item--border, var(--z-br-separator));
    border-bottom: 1px solid var(--z-list-item--border, var(--z-br-separator));
    grid-auto-flow: column;
    gap: var(--zs-50);
    align-items: center;
    color: var(--z-list-item--color, var(--z-ct-primary)) !important
}

    li[z-list-item] > main {
        display: grid;
        min-width: 8rem
    }

        li[z-list-item] > main > header {
            font: var(--zf-body-18);
            color: var(--z-list-item--color, var(--z-ct-primary))
        }

        li[z-list-item] > main > p {
            font: var(--zf-capt-12--500);
            color: var(--z-list-item--desc-color, var(--z-ct-secondary));
            margin: 0
        }

    li[z-list-item] > aside {
        font: var(--zf-capt-14);
        display: flex;
        align-items: center
    }

    li[z-list-item] :is(z-icon,[z-icon]) {
        color: var(--z-ct-clickable)
    }

@container promo (width < 1200px) {
    aside, main {
        --_img-size: 17.625rem;
        --_content-width: 38rem
    }

        aside > *:first-child {
            margin-inline: .25rem !important
        }
}

@container promo (width < 992px) {
    aside {
        --z-shape--size: 6rem !important
    }

    main {
        --_content-width: 20rem
    }

        main > p {
            font: var(--zf-body-18--300)
        }
}

@container promo (width < 768px) {
    aside {
        --_height: max-content;
        --_img-size: 17rem;
        order: 1 !important;
        padding: var(--zs-250) var(--zs-200) 0
    }

        aside > *:first-child {
            margin-inline: 0 !important
        }

        aside > *:nth-child(2) {
            display: none
        }

    main {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--zs-100) var(--zs-200) var(--zs-250);
        text-align: center;
        justify-items: center !important
    }
}

@container promo_narrow (width < 1200px) {
    aside, main {
        --_img-size: 17.625rem;
        --_content-width: 18rem
    }

        aside > *:first-child {
            margin-inline: .25rem
        }
}

@container promo_narrow (width < 992px) {
    aside {
        --z-shape--size: 6rem !important
    }

    main {
        --_content-width: 13rem
    }

        main > p {
            font: var(--zf-body-18--300)
        }
}

@container promo_narrow (width < 768px) {
    aside {
        --_height: max-content;
        --_img-size: 17rem;
        order: 1 !important;
        padding: var(--zs-250) var(--zs-200) 0
    }

        aside > *:first-child {
            margin-inline: 0 !important
        }

        aside > *:nth-child(2) {
            display: none
        }

    main {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--zs-100) var(--zs-200) var(--zs-250);
        text-align: center;
        justify-items: center !important
    }
}

section[z-promo] {
    container: promo/inline-size;
    background: var(--z-promo--bg, var(--_bg)) !important;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    place-items: center;
    justify-content: center;
    -moz-column-gap: var(--z-promo--gap, var(--zs-grid-gutter));
    column-gap: var(--z-promo--gap, var(--zs-grid-gutter))
}

:where(section[z-promo],*[z-theme=light] section[z-promo],section[z-promo][z-theme=light]) {
    --_bg: var(--z-bg-primary--inv);
    --_height: 25rem;
    --_img-size: 18.75rem;
    --_content-width: 45rem
}

section[z-promo] > aside {
    order: 2;
    display: grid;
    place-items: center;
    position: relative;
    height: var(--_height);
    --z-image--width: var(--_img-size);
    --z-image--height: var(--_img-size);
    --z-image--bg: var(--z-promo--img-bg, var(--z-bg-brand));
    --z-image--radius: 50%;
    --z-shape--size: 7rem
}

    section[z-promo] > aside > *:first-child {
        margin-inline: 1.53rem
    }

    section[z-promo] > aside > *:nth-child(2) {
        position: absolute;
        bottom: 0;
        right: 0
    }

section[z-promo] > main {
    display: grid;
    justify-content: left;
    max-width: var(--_content-width);
    margin: 0
}

    section[z-promo] > main > :is(h6,h2,p) {
        color: var(--z-promo--color, var(--z-ct--primary));
        margin: 0
    }

    section[z-promo] > main > h2 {
        font: var(--zf-h-44)
    }

    section[z-promo] > main > h6 {
        font: var(--zf-capt-14--500) !important
    }

    section[z-promo] > main > p {
        font: var(--zf-body-20--300);
        margin: var(--zs-75) 0 var(--zs-150)
    }

section[z-promo][z-promo^=left] > main {
    order: 2
}

section[z-promo][z-promo^=left] > aside {
    order: 1
}

    section[z-promo][z-promo^=left] > aside > *:nth-child(2) {
        right: auto;
        left: 0
    }

section[z-promo][z-promo$=narrow] {
    container: promo_narrow/inline-size;
    --_content-width: 22rem
}

blockquote[z-quote] {
    display: grid;
    text-align: center;
    justify-items: center;
    color: var(--z-quote--color, var(--_color));
    background: var(--z-quote--bg, var(--_bg)) !important;
    position: relative;
    margin: 0;
    padding: var(--zs-200) var(--zs-600) var(--zs-400);
    overflow: visible;
    --z-image--width: 6.25rem;
    --z-image--height: 6.25rem;
    --z-image--radius: 50%
}

:where(blockquote[z-quote],*[z-theme=light] blockquote[z-quote],blockquote[z-quote][z-theme=light]) {
    --_color: var(--z-color);
    --_bg: var(--z-bg-brand--inv)
}

:where(*[z-theme=dark] blockquote[z-quote],blockquote[z-quote][z-theme=dark]) {
    --_color: var(--z-color)
}

blockquote[z-quote] > p {
    font: var(--zf-h-32) !important;
    color: var(--z-quote--color, var(--_color));
    margin: 0
}

blockquote[z-quote]:before {
    content: "";
    background-color: currentColor;
    width: 3.5rem;
    height: var(--zs-200);
    mask: url(https://zds.zurich.com/0.7.0/i/quote-open.svg) center/3.75rem no-repeat;
    -webkit-mask: url(https://zds.zurich.com/0.7.0/i/quote-open.svg) center/3.75rem no-repeat;
    margin-bottom: var(--zs-150)
}

blockquote[z-quote] footer {
    margin-top: var(--zs-100)
}

    blockquote[z-quote] footer header {
        font: var(--zf-capt-14--500);
        font-size: .875rem;
        margin: 0
    }

    blockquote[z-quote] footer small {
        font: var(--zf-capt-12--500) !important;
        margin: 0;
        font-size: .75rem
    }

blockquote[z-quote] > img, blockquote[z-quote] > z-image, blockquote[z-quote] > z-zurich-image, blockquote[z-quote] > picture, blockquote[z-quote] ::slotted(img) {
    aspect-ratio: 1;
    position: absolute;
    bottom: -3.125rem;
    left: calc(50% - 3.125rem);
    order: 1;
    z-index: 1
}

nav[z-share-bar] {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    font: var(--zf-body-18--600);
    padding: var(--z-share-bar--padding, var(--zs-100) var(--zs-200));
    justify-content: space-between;
    background: var(--z-share-bar--bg, var(--z-bg-brand--inv)) !important;
    color: var(--z-share-bar--color, var(--z-ct-clickable)) !important;
    width: 100%;
    border-radius: var(--zs-50)
}

    nav[z-share-bar] p {
        margin: 0
    }

    nav[z-share-bar] ol {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
        gap: var(--z-share-bar--gap, var(--zs-100))
    }

        nav[z-share-bar] ol li {
            margin: 0
        }

            nav[z-share-bar] ol li a {
                display: grid;
                place-items: center;
                color: var(--z-share-bar--color, var(--z-ct-clickable)) !important
            }

            nav[z-share-bar] ol li a {
                color: var(--z-share-bar--color, var(--z-ct-clickable))
            }

div[z-share-button] {
    position: relative;
    align-items: center;
    display: flex
}

    div[z-share-button] > input[type=checkbox] {
        cursor: pointer;
        background-color: var(--z-share-button--bg, var(--z-sf-brand)) !important;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
        color: var(--z-share-button--color, var(--z-ct-clickable)) !important;
        border: 2px solid currentColor;
        display: grid;
        place-items: center;
        z-index: 1;
        margin: 0;
        z-index: calc(var(--z-share-button--z-index, 998) + 1)
    }

        div[z-share-button] > input[type=checkbox]:after {
            --zi: url(https://zds.zurich.com/0.7.0/i/share--o.svg);
            content: "";
            width: 1.5rem;
            height: 1.5rem;
            display: inline-block;
            box-sizing: content-box;
            background-color: currentColor;
            margin: 0;
            mask: var(--zi) center/1.5rem no-repeat;
            -webkit-mask: var(--zi) center/1.5rem no-repeat;
            color: var(--z-share-button--color, var(--z-ct-clickable))
        }

        div[z-share-button] > input[type=checkbox]:checked:after {
            --zi: url(https://zds.zurich.com/0.7.0/i/close--o.svg);
            content: "";
            width: 1.5rem;
            height: 1.5rem;
            display: inline-block;
            box-sizing: content-box;
            background-color: currentColor;
            margin: 0;
            mask: var(--zi) center/1.5rem no-repeat;
            -webkit-mask: var(--zi) center/1.5rem no-repeat
        }

    div[z-share-button] > ol {
        list-style: none;
        margin: 0;
        position: absolute;
        display: none;
        background-color: var(--z-share-button--bg, var(--z-sf-brand));
        border-radius: 1.75rem;
        padding: 0 var(--z-share-button--gap, var(--zs-150)) 0 calc(3.5rem + var(--z-share-button--gap, var(--zs-150)));
        left: 0;
        align-items: center;
        height: 3.5rem;
        gap: var(--z-share-button--gap, var(--zs-150));
        z-index: var(--z-share-button--z-index, 998)
    }

        div[z-share-button] > ol li {
            margin: 0
        }

            div[z-share-button] > ol li a {
                display: grid;
                place-items: center;
                color: var(--z-share-button--color, var(--z-ct-clickable)) !important
            }

    div[z-share-button] input[type=checkbox]:checked + ol {
        display: flex
    }

    div[z-share-button] ol li a {
        color: var(--z-share-button--color, var(--z-ct-clickable))
    }

    div[z-share-button][z-share-button=right] ol {
        right: 0;
        left: auto;
        padding: 0 calc(3.5rem + var(--z-share-button--gap, var(--zs-150))) 0 var(--z-share-button--gap, var(--zs-150))
    }

    div[z-share-button][z-share-button=top] ol {
        flex-direction: column;
        height: auto;
        width: 100%
    }

    div[z-share-button][z-share-button=top] ol {
        top: 0;
        padding: calc(3.5rem + var(--z-share-button--gap, var(--zs-150))) 0 var(--z-share-button--gap, var(--zs-150)) 0
    }

    div[z-share-button][z-share-button=bottom] ol {
        flex-direction: column;
        height: auto;
        width: 100%
    }

    div[z-share-button][z-share-button=bottom] ol {
        bottom: 0;
        padding: var(--z-share-button--gap, var(--zs-150)) 0 calc(3.5rem + var(--z-share-button--gap, var(--zs-150))) 0
    }

@container stage (width < 1200px) {
    aside, main {
        --_sf: 35rem !important;
        --_height: 33rem !important
    }
}

@container stage (width < 992px) {
    aside, main {
        --_sf: 25rem !important;
        --_sf-gap: 5rem !important;
        --_height: 30rem !important
    }
}

@container stage (width < 768px) {
    aside {
        order: 1 !important;
        --_height: 20rem !important
    }

        aside > h1 {
            color: var(--z-stage--color--mobile, var(--z-ct-primary)) !important
        }

    main {
        order: 2 !important;
        background-color: var(--z-stage--bg--mobile, var(--z-sf-brand));
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--zs-150)
    }
}

@container stage_slim (width < 992px) {
    aside, main {
        --_sf: 20rem !important;
        --_height: 20rem !important;
        --_sf-gap: 5rem !important
    }
}

@container stage_slim (width < 768px) {
    aside {
        order: 1 !important;
        --_height: 17.5rem !important
    }

    main {
        order: 2 !important;
        background-color: var(--z-stage--bg--mobile, var(--z-sf-brand));
        width: 100% !important;
        max-width: 100% !important;
        padding: var(--zs-150)
    }

        main > h1 {
            color: var(--z-stage--color--mobile, var(--z-ct-primary)) !important
        }
}

section[z-stage] {
    container: stage/inline-size;
    display: flex;
    flex-wrap: wrap;
    place-items: center;
    width: 100%;
    background: var(--z-stage--bg, var(--z-sf-base)) !important;
    overflow: hidden;
    justify-content: center;
    -moz-column-gap: var(--z-stage--gap, var(--zs-grid-gutter));
    column-gap: var(--z-stage--gap, var(--zs-grid-gutter))
}

:where(section[z-stage],*[z-theme=light] section[z-stage],section[z-stage][z-theme=light]) {
    --_sf: 45rem;
    --_sf-gap: 10rem;
    --_height: 35rem
}

section[z-stage] > main {
    display: grid;
    justify-content: left;
    max-width: calc(var(--z-layout--width) - (var(--_sf) - var(--_sf-gap)) - var(--z-stage--gap, var(--zs-grid-gutter)));
    margin: 0;
    order: 1
}

    section[z-stage] > main > h1 {
        color: var(--z-stage--color, var(--z-ct-primary));
        font: var(--zf-h-48);
        margin: 0 0 var(--zs-75) 0 !important
    }

    section[z-stage] > main > p {
        margin: 0 !important
    }

    section[z-stage] > main > div {
        margin-top: var(--zs-150)
    }

section[z-stage] > aside {
    --z-safe-space--size: var(--_sf);
    --z-image--radius: 50%;
    --z-shape--size: calc(var(--_sf) / 5);
    height: var(--_height);
    position: relative;
    width: calc(var(--_sf) - var(--_sf-gap));
    overflow: visible;
    z-index: 1;
    order: 2
}

    section[z-stage] > aside > :is(z-image,[z-image]) {
        width: var(--_sf)
    }

    section[z-stage] > aside > :is([z-safe-space],[z-image]) {
        position: absolute;
        bottom: 0;
        left: 0
    }

    section[z-stage] > aside > div[z-shape] {
        position: absolute;
        bottom: 0;
        left: 0
    }

section[z-stage][z-stage^=left] > main {
    order: 2
}

section[z-stage][z-stage^=left] > aside {
    order: 1
}

    section[z-stage][z-stage^=left] > aside > * {
        left: auto !important;
        right: 0 !important
    }

section[z-stage][z-stage$=":slim"], section[z-stage][z-stage=slim] {
    container: stage_slim/inline-size;
    --_sf: 25rem
}

    section[z-stage][z-stage$=":slim"] aside, section[z-stage][z-stage=slim] aside {
        --_height: 23rem
    }

@container stage_banner (width < 992px) {
    main > h3 {
        font: var(--zf-h-36) !important
    }

    :is(z-shape,div[z-shape]) {
        --z-shape--size: 6rem
    }
}

@container stage_banner (width < 768px) {
    main {
        text-align: center
    }

    :is(z-shape,div[z-shape]) {
        position: relative !important
    }
}

section[z-stage-banner] {
    --z-shape--size: 8rem;
    container: stage_banner/inline-size;
    display: grid;
    text-align: center;
    justify-content: center;
    background: var(--z-stage-banner--bg, var(--z-sf-brand)) !important;
    width: 100%;
    padding: var(--zs-200) 0 0;
    grid-auto-columns: 1fr;
    gap: var(--zs-50);
    color: var(--z-stage-banner--color, var(--z-ct-primary)) !important;
    position: relative;
    --z-pictogram--size: 6.25rem;
    --z-image--width: 6.25rem;
    --z-image--height: 6.25rem;
    --z-image--radius: 50%
}

    section[z-stage-banner] > :is(z-pictogram,div[z-pictogram],picture,z-zurich-image,z-image) {
        margin-bottom: var(--zs-100);
        justify-self: center
    }

    section[z-stage-banner] > main {
        box-sizing: border-box;
        width: 100%;
        padding: 0 10% var(--zs-300)
    }

        section[z-stage-banner] > main > :is(h6,h3) {
            margin: 0 !important;
            width: 100%
        }

        section[z-stage-banner] > main > h6 {
            font: var(--zf-body-20--600) !important;
            margin-bottom: var(--zs-50)
        }

        section[z-stage-banner] > main > h3 {
            font: var(--zf-h-48) !important
        }

    section[z-stage-banner] > img[z-image] {
        border-radius: 50%
    }

    section[z-stage-banner]:has(div[z-shape]) > :is(z-shape,div[z-shape]) {
        position: absolute;
        bottom: 0;
        right: 0;
        justify-self: flex-end
    }

    section[z-stage-banner]:has(div[z-shape])[z-stage-banner^=left] > :is(z-shape,div[z-shape]) {
        justify-self: flex-start;
        right: auto;
        left: 0
    }

    section[z-stage-banner]:has(div[z-shape])[z-stage-banner=left] {
        justify-items: flex-start
    }

        section[z-stage-banner]:has(div[z-shape])[z-stage-banner=left] > main {
            padding-left: 20%
        }

    section[z-stage-banner]:has(div[z-shape]):not([z-stage-banner*=center]) {
        justify-content: flex-start;
        text-align: left
    }

article[z-tile] {
    box-shadow: var(--zd-2);
    border-radius: var(--z-tile--radius, var(--zs-75));
    padding: var(--z-tile--padding, var(--zs-150) var(--zs-100));
    padding-bottom: var(--zs-50);
    background-color: var(--z-tile--bg, var(--z-sf-base));
    color: var(--z-tile--color, var(--z-ct-primary));
    position: relative;
    width: var(--z-tile--width, 28rem);
    height: var(--z-tile--img-size, 14rem);
    overflow: hidden;
    box-sizing: border-box;
    display: grid;
    align-content: space-between;
    --z-image--width: var(--z-tile--img-size, 14rem);
    --z-image--height: 100%
}

    article[z-tile] > *:not(main,div) {
        position: absolute;
        right: 0;
        clip-path: ellipse(80% 120% at 85% 50%);
        background-color: var(--z-sf-brand);
        height: 100%
    }

    article[z-tile] > main {
        display: grid;
        margin-right: var(--z-tile--img-size, 14rem);
        height: 100%;
        gap: var(--zs-50)
    }

        article[z-tile] > main > header {
            font: var(--zf-body-20--600)
        }

        article[z-tile] > main > p {
            font: var(--zf-body-14);
            margin: 0
        }

    article[z-tile] > *:not(main,div) {
        height: 100%
    }

article[z-tile^=left] > *:first-child {
    left: 0;
    right: auto;
    clip-path: ellipse(80% 120% at 15% 50%)
}

article[z-tile^=left] > main {
    margin-left: var(--z-tile--img-size, 14rem);
    margin-right: 0
}

article[z-tile^=left] > div {
    margin-left: var(--z-tile--img-size, 14rem)
}

footer[z-footer] {
    background: var(--z-footer--bg, var(--z-sf-brand)) !important;
    color: var(--z-footer--color, var(--z-ct-clickable)) !important;
    width: 100%;
    display: grid;
    align-items: center;
    justify-content: center;
    gap: var(--zs-100);
    padding: var(--zs-100);
    box-sizing: border-box
}

    footer[z-footer] > section, footer[z-footer] > nav {
        --z-link--color: var(--z-footer--color, var(--z-ct-clickable));
        --z-link--color--hover: var(--z-footer--color, var(--z-ct-clickable))
    }

    footer[z-footer] > section {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        gap: var(--zs-100)
    }

        footer[z-footer] > section > div[data-social] ul {
            display: flex;
            gap: var(--zs-100)
        }

    footer[z-footer] h4 {
        color: var(--z-footer--color, var(--z-ct-clickable));
        font: var(--zf-body-20--300) !important;
        margin: 0 0 var(--zs-150) 0 !important
    }

    footer[z-footer] ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

        footer[z-footer] ul li {
            margin: 0
        }

    footer[z-footer] nav ul {
        display: flex;
        gap: var(--zs-100);
        justify-content: right
    }

        footer[z-footer] nav ul li a {
            font: var(--zf-capt-14)
        }

@container mobile_nav_bar (width > 768px) {
    ul {
        display: none !important
    }
}

nav[z-mobile-nav-bar] {
    container: mobile_nav_bar/inline-size;
    background: var(--z-mobile-nav-bar--bg, var(--z-sf-base)) !important;
    color: var(--z-mobile-nav-bar--color, var(--z-ct-clickable)) !important;
    position: relative;
    box-shadow: var(--zd-2);
    width: 100%;
    box-sizing: border-box
}

    nav[z-mobile-nav-bar] > ul {
        display: flex;
        justify-content: space-between;
        gap: var(--zs-200);
        margin: 0;
        list-style: none;
        padding: var(--zs-50) var(--zs-100) var(--zs-150)
    }

        nav[z-mobile-nav-bar] > ul > li {
            display: grid;
            width: 100%;
            align-items: end
        }

            nav[z-mobile-nav-bar] > ul > li > z-link::part(link), nav[z-mobile-nav-bar] > ul > li > [z-link] {
                display: grid;
                place-items: center;
                font: var(--zf-capt-12--500)
            }

    nav[z-mobile-nav-bar][z-mobile-nav-bar=rounded] {
        border-radius: var(--zs-150) var(--zs-150) 0 0
    }

::-webkit-scrollbar {
    width: var(--z-scroll-bar--size, var(--zs-50));
    height: var(--z-scroll-bar--size, var(--zs-50))
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px var(--zc-dove);
    background-color: var(--z-scroll-bar--bg, var(--z-bg-disabled));
    border-radius: var(--z-scroll-bar--size, var(--zs-50));
    margin: 5px
}

::-webkit-scrollbar-thumb {
    background: var(--z-scroll-bar--thumb, var(--z-br-primary));
    border-radius: var(--z-scroll-bar--size, var(--zs-50));
    -webkit-transition: background .2s;
    transition: background .2s
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--z-scroll-bar--thumb--hover, var(--z-br-hover))
    }

@container navigation (width < 1200px) {
    header > label > span {
        display: none
    }
}

@container navigation (width > 768px) {
    aside {
        --z-accordion--border-color: transparent
    }

        aside > main > div > [z-accordion] > main, aside > main > div > z-accordion::part(main) {
            padding: 0 !important;
            max-height: 1000vh !important
        }

        aside > main > div > [z-accordion] > details > summary, aside > main > div > z-accordion::part(summary) {
            padding: 0
        }

            aside > main > div > [z-accordion] > details > summary:after, aside > main > div > z-accordion::part(summary):after {
                display: none
            }
}

@container navigation (width > 768px) {
    header {
        --_top: 0 !important;
        border-radius: 0 !important
    }
}

@container navigation (width < 768px) {
    header {
        padding-top: calc(var(--zs-75) + var(--_top)) !important;
        height: calc(var(--z-navigation--height, 5rem) + var(--_top)) !important
    }

    aside {
        width: 100%
    }

        aside > main {
            grid-auto-flow: row !important;
            grid-auto-rows: max-content !important;
            grid-auto-columns: 1fr !important;
            justify-items: center;
            gap: 0 !important
        }

            aside > main > div {
                width: 100%;
                max-height: -moz-max-content !important;
                max-height: max-content !important;
                gap: 0 !important;
                margin-bottom: 0 !important
            }

                aside > main > div z-accordion::part(summary), aside > main > div [z-accordion] > details > summary {
                    padding: var(--zs-150) 0
                }

                aside > main > div z-accordion::part(main), aside > main > div [z-accordion] > main {
                    padding-top: 0 !important
                }

                aside > main > div > :is(z-accordion,[z-accordion]) z-accordion::part(summary), aside > main > div > :is(z-accordion,[z-accordion]) [z-accordion] > details > summary {
                    padding: 0
                }

                aside > main > div > :is(z-accordion,[z-accordion]) :is(z-accordion,[z-accordion]) {
                    --z-accordion--width: 100% !important;
                    --z-accordion--border-color: transparent
                }
}

:where(nav[z-navigation],*[z-theme=light] nav[z-navigation],nav[z-navigation][z-theme=light]) {
    --_top: 0;
    --zi--closed: url(https://zds.zurich.com/0.7.0/i/menu--o.svg);
    --zi--open: url(https://zds.zurich.com/0.7.0/i/close--o.svg)
}

nav[z-navigation] {
    position: relative;
    z-index: var(--z-navigation--index, 100);
    display: grid;
    overflow-x: clip;
    container: navigation/inline-size;
    width: 100%
}

    nav[z-navigation] > header {
        height: var(--z-navigation--height, 5rem);
        background-color: var(--z-bg);
        box-shadow: var(--zd-2);
        display: grid;
        grid-template: "l m e i" 1fr/max-content 1fr max-content max-content;
        align-items: center;
        padding: 0 var(--zs-200);
        order: 2
    }

        nav[z-navigation] > header > a {
            display: grid;
            grid-area: i
        }

        nav[z-navigation] > header > div {
            grid-area: e
        }

        nav[z-navigation] > header > ul {
            grid-area: m;
            list-style: none;
            display: flex;
            margin: 0;
            gap: var(--zs-100);
            align-items: center;
            overflow-x: auto;
            padding: 0
        }

            nav[z-navigation] > header > ul > li {
                margin: 0
            }

        nav[z-navigation] > header:not(:has(+aside)) label {
            display: none
        }

        nav[z-navigation] > header > label {
            position: relative;
            display: flex;
            align-items: center;
            gap: var(--zs-50);
            grid-area: l;
            margin-right: var(--zs-100)
        }

            nav[z-navigation] > header > label:before {
                content: "";
                display: inline-block;
                width: var(--zs-150);
                height: var(--zs-150);
                -webkit-mask: var(--zi--closed);
                mask: var(--zi--closed);
                -webkit-mask-size: var(--zs-150);
                mask-size: var(--zs-150);
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                background-color: currentColor
            }

            nav[z-navigation] > header > label > input[type=checkbox] {
                position: absolute;
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                cursor: pointer;
                z-index: 1;
                margin: 0
            }

            nav[z-navigation] > header > label:has(input[type=checkbox]:checked):before {
                -webkit-mask: var(--zi--open);
                mask: var(--zi--open)
            }

    nav[z-navigation]:has(label>input[type=checkbox]:checked) > aside {
        display: grid;
        visibility: visible;
        right: 0
    }

    nav[z-navigation] > aside {
        visibility: hidden;
        position: absolute;
        background: var(--z-navigation--bg, var(--z-sf-base)) !important;
        right: 100%;
        left: 0;
        top: var(--z-navigation--height, 5rem);
        padding: var(--zs-75) var(--zs-200) 0;
        height: calc(100vh - var(--z-navigation--height, 5rem));
        border-bottom: 1px solid var(--zc-blue-dark);
        box-sizing: border-box;
        transition: all .4s ease-in-out;
        order: 1;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        overflow: hidden;
        grid-template-rows: 1fr max-content
    }

        nav[z-navigation] > aside > main {
            display: grid;
            grid-auto-rows: 1fr;
            grid-auto-flow: column;
            grid-auto-columns: minmax(max-content,1fr);
            max-width: 100%;
            max-height: 100%;
            gap: var(--zs-150);
            overflow-x: auto
        }

            nav[z-navigation] > aside > main > div {
                display: grid;
                overflow-y: auto;
                max-height: calc(100vh - var(--z-navigation--height, 5rem) - var(--zs-150));
                padding: 1px 1px 1px var(--zs-75);
                margin-right: var(--zs-75);
                margin-bottom: var(--zs-75);
                gap: var(--zs-150);
                box-sizing: border-box
            }

                nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion])::part(summary), nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) > details > summary {
                    font: var(--zf-body-18--300);
                    color: var(--z-navigation--color, var(--z-ct-clickable--secondary));
                    display: flex;
                    gap: var(--zs-50)
                }

                nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) > ul, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) > main > ul {
                    padding-top: var(--zs-150) !important;
                    padding-left: var(--zs-200) !important;
                    display: grid;
                    gap: var(--zs-100)
                }

                nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) z-accordion::part(main), nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) [z-accordion] main {
                    padding-bottom: 0 !important
                }

                nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) :is(z-accordion,[z-accordion]) > ul, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) :is(z-accordion,[z-accordion]) > main > ul {
                    display: grid;
                    gap: var(--zs-100)
                }

                nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul {
                    list-style: none;
                    padding: 0;
                    margin: 0
                }

                    nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul > li, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul > li ul > li {
                        margin: 0;
                        padding: 0;
                        gap: var(--zs-100);
                        align-items: center;
                        color: var(--z-navigation--color, var(--z-ct-clickable--secondary));
                        font: var(--zf-body-18--300);
                        --z-accordion--width: 200px;
                        --z-accordion--summary-margin: var(--zs-25) 0;
                        --z-accordion--summary-font: var(--zf-body-18--300)
                    }

                        nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li li, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul > li li, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul > li ul > li li {
                            padding-left: var(--zs-200)
                        }

                        nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul > li > a, nav[z-navigation] > aside > main > div > :is(z-accordion,[z-accordion]) ul > li ul > li ul > li > a {
                            padding-left: var(--zs-150)
                        }

                nav[z-navigation] > aside > main > div a, nav[z-navigation] > aside > main > div p {
                    font: var(--zf-body-18--300);
                    color: var(--z-navigation--color, var(--z-ct-clickable--secondary))
                }

                nav[z-navigation] > aside > main > div a {
                    text-decoration-line: none
                }

        nav[z-navigation] > aside > footer {
            display: flex;
            justify-content: space-between;
            padding: var(--zs-100) 0;
            align-items: center;
            width: 100%
        }

            nav[z-navigation] > aside > footer > section {
                display: flex;
                gap: var(--zs-100);
                align-items: center
            }

                nav[z-navigation] > aside > footer > section > a {
                    display: grid
                }

                nav[z-navigation] > aside > footer > section > div + div:before {
                    content: "-";
                    width: 1px;
                    color: transparent;
                    height: 100%;
                    display: inline-block;
                    border-left: 1px solid var(--z-br-primary);
                    margin-right: var(--zs-100)
                }

    nav[z-navigation][z-navigation^=left] > header {
        grid-template: "i m e l" 1fr/max-content minmax(2rem,1fr) max-content max-content
    }

        nav[z-navigation][z-navigation^=left] > header > label {
            margin-right: 0;
            margin-left: var(--zs-100)
        }

        nav[z-navigation][z-navigation^=left] > header > a {
            margin-right: var(--zs-100)
        }

    nav[z-navigation][z-navigation*=rounded] header {
        border-radius: 0 0 var(--zs-150) var(--zs-150)
    }

    nav[z-navigation][with-top] header {
        --_top: var(--z-navigation--top, var(--zs-200))
    }