:root {
    font-size: 18px;
    font-size: var(--step-0, 18px);

    --font-size: var(--step-0, 18px);
    --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --lumo-font-family: var(--font-family);

    --brand: hsl(203, 99%, 39%);
    --on-brand: #fff;
    /* --brand: rgb(1, 123, 197); */
    /* --brand: #017bc5; /* hsl(203, 99%, 39%) / rgb(1, 123, 197) */

    /* --brand: #359946; hsl(130, 49%, 40%) / rgb(52, 152, 69) */
    /* --on-brand: #fff; */

    /* --lumo-primary-color: var(--brand, #359946); hsl(130, 49%, 40%) */
    /* --lumo-primary-color-50pct: hsla(130, 49%, 40%, 0.5); */
    /* --lumo-primary-color-10pct: hsla(130, 49%, 40%, 0.1); */
    /* --lumo-primary-contrast-color: #fff; */

    /* --lumo-primary-color: var(--brand, #359946); /* hsl(130, 49%, 40%) */
    /* --lumo-primary-color-50pct: hsla(130, 49%, 40%, 0.5); */
    /* --lumo-primary-color-10pct: hsla(130, 49%, 40%, 0.1); */
    /* --lumo-primary-contrast-color: #fff; */

    /* navbar */
    --app-navbar-bg: #017bc5;
    /* --app-navbar-height: 72px; */
    /* --app-navbar-bg: #193534; */
    /* --app-navbar-text: #fff; */
}

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html * {
    box-sizing: border-box;
}

body {
    min-height: calc(100dvh - 0px);
    font-family: var(--font-family, sans-serif);
    line-height: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

*::selection {
    color: #000;
    background-color: #fd0;
}

@view-transition {
    navigation: auto;
}

:root {
    --surface-1: hsl(from var(--lumo-base-color) h s l / 0.3);
    --surface-2: hsl(from var(--lumo-base-color) h s l / 0.5);
    --surface-3: hsl(from var(--lumo-base-color) h s l / 0.7);
    --surface-4: hsl(from var(--lumo-base-color) h s l / 0.8);
    --surface-5: hsl(from var(--lumo-base-color) h s l / 1);
}

[theme~='dark'] {
    --surface-1: hsl(from var(--lumo-base-color) h s calc(l + 2));
    --surface-2: hsl(from var(--lumo-base-color) h s calc(l + 5));
    --surface-3: hsl(from var(--lumo-base-color) h s calc(l + 9));
    --surface-4: hsl(from var(--lumo-base-color) h s calc(l + 13));
    --surface-5: hsl(from var(--lumo-base-color) h s calc(l + 17));
}

.surface-1 {
    background-color: var(--surface-1);
}
.surface-2 {
    background-color: var(--surface-2);
}
.surface-3 {
    background-color: var(--surface-3);
}
.surface-4 {
    background-color: var(--surface-4);
}
.surface-5 {
    background-color: var(--surface-5);
}

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.2,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.125,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.067,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* @link https://utopia.fyi/type/calculator?c=420,16,1.2,1280,20,1.067,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

/* @link https://utopia.fyi/type/calculator?c=420,16,1.2,1280,18,1.067,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --step--2: clamp(0.6944rem, 0.551rem + 0.5464vw, 0.9882rem);
    --step--1: clamp(0.8333rem, 0.7254rem + 0.4112vw, 1.0544rem);
    --step-0: clamp(1rem, 0.939rem + 0.2326vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1998rem + 0.0007vw, 1.2004rem);
    --step-2: clamp(1.2808rem, 1.5177rem + -0.2962vw, 1.44rem);
    --step-3: clamp(1.3666rem, 1.9045rem + -0.6723vw, 1.728rem);
    --step-4: clamp(1.4582rem, 2.3742rem + -1.145vw, 2.0736rem);
    --step-5: clamp(1.5559rem, 2.9437rem + -1.7348vw, 2.4883rem);
}

:where(h1, h2, h3, h4, h5, h6) {
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
    margin-block: 0 var(--vertical-spacing, 1rem);
    scroll-margin-top: var(--vertical-spacing, 1rem);
}

:where(h1) {
    font-size: var(--step-5);
    /* font-size: var(--lumo-font-size-xxl); */
}

:where(h2) {
    font-size: var(--step-5);
    /* font-size: var(--lumo-font-size-m); */
}

:where(h3) {
    font-size: var(--step-3);
    /* font-size: var(--lumo-font-size-m); */
}

:where(h4) {
    font-size: var(--step-0);
    /* font-size: var(--lumo-font-size-m); */
}

:where(h5) {
    font-weight: 400;
    font-size: var(--step-0);
    /* font-size: var(--lumo-font-size-m); */
}


body {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    color: var(--lumo-body-text-color, #333);
    background-color: var(--lumo-base-color-gp, #eee);
    accent-color: var(--lumo-primary-color);
    overflow: auto;
    overflow-x: hidden;
    /* background-image: url('../images/start/start-bg.png'); */
    /* background-repeat: no-repeat; */
    /* background-size: cover; */
    /* -moz-osx-font-smoothing: grayscale; */
    /* -webkit-font-smoothing: antialiased; */
    /* margin: 0; */
    /* padding: 0; */
    /* font-family: var(--lumo-font-family, ui-sans-serif, system-ui, -apple, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif); */
}

header,
footer,
main {
    margin-inline: auto;
    /* padding-block: 1rem; */
    /* padding-inline: 1rem; */
    width: 100%;
    box-sizing: border-box;
}

.svgdefs {
    display: none;
    height: 0;
    width: 0;
}

a:where(:any-link) {
    color: var(--lumo-primary-text-color);
    outline-color: var(--lumo-contrast-90pct, #000);
}

a:where(:any-link):hover {
    text-decoration-thickness: .1em;
}

a:where(:any-link):focus-visible {
    outline: 2px solid var(--lumo-contrast-90pct, #000);
    outline-offset: 2px;
}

a:not(:any-link) {
    color: var(--lumo-disabled-text-color);
}

img {
    width: auto;
    max-width: 100%;
}

ul:not([class]) li:not(:last-child) {
    margin-block-end: 0.5em;
}

/* ul[class] {
    list-style: none;
} */

ul.flex,
ul.grid {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.flex li,
ul.grid li {
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

header {
    padding-block: 0;
    height: var(--app-navbar-height, 96px);
    color: var(--app-navbar-text, #fff);
    background-color: var(--app-navbar-bg, var(--lumo-primary-color-50pct));
}

/* .branding {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-inline: auto;
} */

.branding .logo {
    height: var(--app-navbar-height, 96px);
}

.branding a {
    color: currentColor;
    outline-color: currentColor;
}

.branding h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 400;
}

.branding h1 a {
    text-decoration: none;
}

.branding nav {
    /* display: flex; */
    /* align-items: center; */
    /* gap: var(--lumo-space-s); */
    margin-inline-start: auto;
    /* padding-block: 0.5em; */
}
.branding nav a {
    display: grid;
    place-items: center;
    gap: var(--lumo-space-xs);
    padding: 0.5em;
    min-width: 5em;
    font-size: 0.875em;
    text-decoration: none;
    border-radius: 0.25em;

    &:hover {
        background-color: hsl(from currentColor h s l / 0.125);
    }
}
.branding nav a .icon {
    opacity: 0.875;
}

.breadcrumbs {
    color: var(--lumo-contrast-70pct);
}

.breadcrumbs a {
    color: currentColor;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--lumo-contrast-90pct);
    text-decoration: underline;
}

main {
    padding-block: var(--lumo-space-xl, 2.5rem);
}
.breadcrumbs ~ main {
    padding-block-start: var(--lumo-space-m);
}

main > * {
    margin-block: 0 var(--lumo-space-l, 2.5rem);
}

footer {
    padding-block: 0;
    margin-block: auto 0;
    color: var(--lumo-secondary-text-color);
    background-color: var(--lumo-contrast-5pct);
}
footer *:last-child {
    margin-block-end: 0;
}

@media screen and (max-width: 810px) {
    footer {
        margin-block-start: 2rem;
    }
}

@media screen and (max-height: 900px) {
    footer {
        margin-block-start: 2rem;
    }
}

footer h4 {
    font-size: var(--step--2);
}

footer .links {
    display: flex;
    gap: 1rem;
}

footer .links a {
    color: currentColor;
    /* text-decoration: none; */
    text-decoration-color: rgba(0, 0, 0, 0.125);
    text-decoration-thickness: 0.125em;
}

footer .links a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: 0.2em;
}

footer #contact .logo {
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
}

footer .address img {
    filter: var(--footer-address-img-filter, none);
}

footer #funding img {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
}

footer:has(#compact) {
    padding-block: 0;
    margin-block: auto 0;
    color: var(--lumo-secondary-text-color);
    background-color: transparent;
}
[theme='dark'] footer:has(#compact) {
    color: var(--lumo-tertiary-text-color);
}

footer #compact {
    background-color: transparent;
    /* background-color: var(--lumo-tint-50pct); */
    /* border-start-start-radius: var(--lumo-border-radius-s); */
    /* border-start-end-radius: var(--lumo-border-radius-s); */
}
[theme='dark'] footer #compact {
    background-color: transparent;
    /* background-image: none; */
    /* background-color: var(--lumo-shade-5pct); */
}

footer #compact img {
    width: auto;
    max-height: 96px;
}
footer #compact img.funding {
    display: block;
    margin-inline: auto;
}

/* footer #compact > .funding {
    grid-column: span 1 / span 1;
} */

/* md */
/* @media (min-width: 768px) {
    footer #compact > .funding {
        grid-column: span 2 / span 2;
    }
} */

/* lg */
/* @media (min-width: 1024px) {
    footer #compact > .funding {
        grid-column: span 3 / span 3;
    }
} */

.home-grid {
    h2,
    h3,
    h4 {
        font-size: var(--step-0);
    }

    > *:first-child {
        grid-column: span 1;
        /* background-color: #ee0; */
    }

    > *:last-child {
        grid-column: span 1;
        /* background-color: #e0e; */
    }
}

@media (min-width: 768px) {
    .home-grid {
        > *:first-child {
            grid-column: span 1;
        }

        > *:last-child {
            grid-column: span 2 / span 2;
        }
    }
}

@media (min-width: 1024px) {
        .home-grid {
        > *:first-child {
            grid-column: span 1;
        }

        > *:last-child {
            grid-column: span 3 / span 3;
        }
    }
}

body,
body.waves {
    color: var(--lumo-body-text-color, #333);
    background-color: var(--lumo-base-color-gp, #eee);
    background-image: url(../images/bg/waves-1.svg);
    background-repeat: no-repeat;
    background-position: 0% calc(100% - 0px);
    background-size: 100% auto;
    
    [theme~='dark'] & {
        background-image: url(../images/bg/waves-1-dark.svg);
        /* background-image: none; */
    }
}

.bg-content {
    margin-inline: calc(-1 * var(--lumo-space-m));
    padding-inline: var(--lumo-space-m);
    padding-block-end: var(--lumo-space-m);
    background-color: hsl(from var(--lumo-base-color-gp) h s l / 0.825);
    border-end-start-radius: var(--lumo-border-radius-l);
    border-end-end-radius: var(--lumo-border-radius-l);
}

/* containers */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    --gutter-x: var(--lumo-space-l, 1.5rem);
    --gutter-y: 0;
    width: 100%;
    padding-inline: calc(var(--gutter-x) * 0.5);
    margin-inline: auto;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .container,
    .container-sm {
        max-width: 537px;
    }
}

@media (min-width: 768px) {
    .container,
    .container-md,
    .container-sm {
        max-width: 720px;
    }
}

@media (max-height: 768px) {
    body.login {
        --footer-h: var(--footer-compact-h);
    }
}

@media (min-width: 992px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }
}

/* @link https://utopia.fyi/space/calculator?c=420,16,1.2,1280,20,1.067,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
    --space-3xs: clamp(0.25rem, 0.2195rem + 0.1163vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.439rem + 0.2326vw, 0.625rem);
    --space-xs: clamp(0.75rem, 0.6584rem + 0.3488vw, 0.9375rem);
    --space-s: clamp(1rem, 0.8779rem + 0.4651vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.3169rem + 0.6977vw, 1.875rem);
    --space-l: clamp(2rem, 1.7558rem + 0.9302vw, 2.5rem);
    --space-xl: clamp(3rem, 2.6337rem + 1.3953vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.5116rem + 1.8605vw, 5rem);
    --space-3xl: clamp(6rem, 5.2674rem + 2.7907vw, 7.5rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.25rem, 0.0669rem + 0.6977vw, 0.625rem);
    --space-2xs-xs: clamp(0.5rem, 0.2863rem + 0.814vw, 0.9375rem);
    --space-xs-s: clamp(0.75rem, 0.5058rem + 0.9302vw, 1.25rem);
    --space-s-m: clamp(1rem, 0.5727rem + 1.6279vw, 1.875rem);
    --space-m-l: clamp(1.5rem, 1.0116rem + 1.8605vw, 2.5rem);
    --space-l-xl: clamp(2rem, 1.1453rem + 3.2558vw, 3.75rem);
    --space-xl-2xl: clamp(3rem, 2.0233rem + 3.7209vw, 5rem);
    --space-2xl-3xl: clamp(4rem, 2.2907rem + 6.5116vw, 7.5rem);

    /* Custom pairs */
    --space-s-l: clamp(1rem, 0.2674rem + 2.7907vw, 2.5rem);
}

.grid-cols {
    display: grid;
    grid-template-columns: 3fr 1fr;
}

/* flex */
.d-flex {
    display: flex;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

/* sm */
@media (min-width: 640px) {
    .sm\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .sm\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .sm\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .sm\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .sm\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .sm\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .sm\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .sm\:col-span-9 {
        grid-column: span 9 / span 9;
    }
    .sm\:col-span-10 {
        grid-column: span 10 / span 10;
    }
    .sm\:col-span-11 {
        grid-column: span 11 / span 11;
    }
    .sm\:col-span-12 {
        grid-column: span 12 / span 12;
    }
}

/* md */
@media (min-width: 768px) {
    .md\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .md\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .md\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .md\:col-span-9 {
        grid-column: span 9 / span 9;
    }
    .md\:col-span-10 {
        grid-column: span 10 / span 10;
    }
    .md\:col-span-11 {
        grid-column: span 11 / span 11;
    }
    .md\:col-span-12 {
        grid-column: span 12 / span 12;
    }
}

/* lg */
@media (min-width: 1024px) {
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }
    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }
    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }
    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }
    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }
    .lg\:col-span-9 {
        grid-column: span 9 / span 9;
    }
    .lg\:col-span-10 {
        grid-column: span 10 / span 10;
    }
    .lg\:col-span-11 {
        grid-column: span 11 / span 11;
    }
    .lg\:col-span-12 {
        grid-column: span 12 / span 12;
    }
}

.sticky {
    position: sticky;
    top: 1rem;

    container-type: scroll-state;
}

@container scroll-state(stuck: top) {

    .sticky {
        /* font-size: 1.125rem; */
        /* border-radius: var(--lumo-border-radius-s, 0.2rem); */
        /* box-shadow: var(--lumo-box-shadow-s); */
        background-color: #e0e;
    }
}

pre {
    margin-inline: calc(var(--space-s)*-1);
    padding-block: var(--space-xs);
    padding-inline: var(--space-s);
    line-height: var(--line-height-md);
    overflow: auto;
}
code {
    :is(pre) & {
        background-color: #0000;
        border: none;
        padding-block: 0;
        padding-inline: 0;
        overflow: auto;
    }
}

.bg {
    position: absolute;
    inset: 0;
    display: block;
    block-size: 100%;
    inline-size: 100%;
    fill: none;
    stroke: #e0e;
    /* z-index: -1; */
}


.links-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    row-gap: 1rem;
}

.links-container:not(:last-of-type) {
    margin-bottom: var(--vertical-spacing, 4vh);
}

.links-container--modules {
    grid-template-columns: 1fr;
    gap: 1rem;
    /* margin-bottom: calc(2 * var(--vertical-spacing, 1rem)); */
}

.links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2rem;
    row-gap: 1rem;
    align-self: baseline;
    margin: 0;
    padding: 0;
    list-style: none;

    font-size: var(--link-fs, 0.875rem);
}

.links-modules {
    grid-column-start: 1;
    grid-column-end: 3;

    grid-template-columns: repeat(4, 1fr);

    /* --link-fs: 1rem; */
}

.links-external-single {
    grid-column-start: 1;
    grid-column-end: 3;

    grid-template-columns: repeat(4, 1fr);
}

.links-external {
    --icon-size: 24px;
    --icon-margin: 4px;
}

@media screen and (max-width: 480px) {
    .links-container {
        grid-template-columns: 1fr;
    }

    .links {
        grid-template-columns: 1fr;
    }

    .links-modules {
        grid-column-start: initial;
        grid-column-end: initial;
    }
}

@media screen and (max-width: 810px) {
    .links-container {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

    .links-modules {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media screen and (min-width: 768px) {
    .links-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .links-container--modules {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 991px) {
    .links-modules,
    .links-container {
        grid-template-columns: repeat(4, 1fr);
    }

    .links-container--modules {
        grid-template-columns: 1fr;
    }
}

.link {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.75rem;

    color: var(--lumo-contrast-80pct, currentColor);
    background-color: var(--lumo-tint-70pct, #fff);
    border-radius: var(--link-radius, 0);
    /* backdrop-filter: blur(3px); */

    line-height: normal;
    text-decoration: none;

    height: 100%;
    padding: var(--lumo-space-s, 0.25rem);

    box-shadow: var(--lumo-box-shadow-s);
    transition:
        transform,
        box-shadow 0.2s ease-in-out;
}

li[hidden] {
    display: none;
}

.link:hover,
.link:focus-visible {
    color: var(--lumo-contrast-90pct, #333);
    background-color: var(--lumo-tint-90pct, #fff);
    box-shadow: var(--lumo-box-shadow-m);
    /* border-right: var(--link-border-w, 11px) solid hsl(from var(--lumo-primary-color) h s l / 0.25); */
}

.link.current_page {
    color: var(--lumo-contrast);
    background-color: var(--lumo-tint, #fff);
    border-right: var(--link-border-w, 11px) solid var(--lumo-primary-color);
    cursor: default;
    --lumo-shade-20pct: hsl(from var(--lumo-primary-color) h s l / 0.555);
    --lumo-shade-40pct: hsl(from var(--lumo-primary-color) h s l / 0.888);
}

.link .icon {
    flex-shrink: 0;
    margin-inline: var(--icon-margin, 0);
    /* width: var(--icon-size, 32px); */
    /* height: var(--icon-size, 32px); */
    /* fill: var(--link-icon-color, var(--lumo-shade-70pct, currentColor)); */
}

.link .badge {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    place-items: center;
    min-width: none;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border-radius: 4em;
    transform: translate(0.25em, -0.25em);

    color: var(--link-badge-color, var(--lumo-primary-contrast-color));
    background-color: var(--link-badge-bg, var(--lumo-primary-color));
    box-shadow: var(--lumo-box-shadow-xs);
}
.link .badge.hidden {
    display: none;
}

/* .link:hover .icon {
    fill: var(--link-icon-color-hover, var(--lumo-shade-90pct, currentColor));
} */

.links-modules .link .icon {
    --link-icon-color: var(--lumo-primary-color, currentColor);
    --link-icon-color-hover: var(--lumo-primary-color, currentColor);
}

[theme~="dark"] .link {
    color: var(--lumo-contrast-80pct, currentColor);
    background-color: var(--lumo-tint-10pct, #fff);
}
[theme~="dark"] .link:hover,
[theme~="dark"] .link:focus-visible {
    color: var(--lumo-body-text-color, #333);
    background-color: var(--lumo-tint-20pct, #fff);
}
[theme~="dark"] .link.current_page {
    color: var(--lumo-contrast);
    background-color: var(--lumo-tint-20pct, #fff);
}

@media screen and (max-height: 1000px) {
    :root {
        --icon-size: 24px;
        --icon-margin: 0;
        --vertical-spacing: 2vh;
        --main-padding-vertical: 2vh;
        /* --vertical-spacing: var(--space-s); */
    }
    .links-external {
        --icon-margin: 0;
    }
}

/* submenu.css */

/* .submenu {} */

.submenu .item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 0.75rem;

    /* color: var(--lumo-contrast-80pct, currentColor); */
    background-color: var(--lumo-tint-5pct, #fff);
    /* border-radius: var(--link-radius, 0); */
    /* backdrop-filter: blur(3px); */

    line-height: normal;
    text-decoration: none;

    height: 100%;
    padding: var(--lumo-space-s, 0.25rem);

    border-right: 3px solid var(--lumo-primary-color-10pct);

    /* box-shadow: var(--lumo-box-shadow-s); */
    transition: all 0.2s ease-in-out;
}

.submenu .item.current_page {
    background-color: var(--lumo-tint-80pct, #fff);
    border-right: 3px solid var(--lumo-primary-color);
    cursor: default;
}

.submenu .item:not(.current_page):hover,
.submenu .item:not(.current_page):focus-visible {
    background-color: var(--lumo-tint-60pct, #fff);
    border-right: 3px solid var(--lumo-primary-color-50pct);
}

[theme~="dark"] .submenu .item {
    background-color: var(--lumo-shade-5pct);
}
[theme~="dark"] .submenu .item.current_page {
    background-color: var(--lumo-shade-30pct);
}
[theme~="dark"] .submenu .item:not(.current_page):hover,
[theme~="dark"] .submenu .item:not(.current_page):focus-visible {
    background-color: var(--lumo-shade-60pct);
}

/* .faq-list {} */

.faq-item {
    padding-block: var(--space-2xs);
    padding-inline: var(--space-2xs);
    border: 1px solid hsl(from currentColor h s l / 0.125);
    /* border-radius: .25em; */
    background-color: var(--lumo-tint-70pct, #fff);
    box-shadow: var(--lumo-box-shadow-s);
    transition:
        transform,
        box-shadow 0.2s ease-in-out;

    &:not(:last-of-type) {
        margin-block-end: var(--space-s, 1em);
    }

    &[open],
    &:hover {
    background-color: var(--lumo-tint-90pct, #fff);
        box-shadow: var(--lumo-box-shadow-m);
    }
}
[theme~="dark"] .faq-item {
    color: var(--lumo-contrast-80pct, currentColor);
    background-color: var(--lumo-tint-10pct, #fff);
}

summary.faq-question *:is(h2, h3, h4) {
    font-size: var(--lumo-font-size-m);
    /* font-weight: 400; */
}

summary.faq-question .icon:not([part]) {
    flex-shrink: 0;
    color: var(--lumo-primary-color-75pct);
}

.faq-answer {
    padding-block: var(--space-2xs) 0;
    padding-inline-start: 1.5em;
}

/* .news-list {} */

.news-item {
    h3 {
        font-size: var(--step-0);
    }

    &:not(:last-of-type) {
        margin-block-end: var(--space-l, 1em);
        /* padding-block-end: var(--space-s, 1em); */
        /* border-bottom: 1px solid hsl(from currentColor h s l /0.125); */
    }
}

/* .files-list {} */

.file-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto;
    grid-template-areas: "icon title" "icon filename";
    gap: var(--space-2xs, .5em);
    row-gap: var(--space-3xs, .5em);
}

.file-item > * {
    margin: 0;
}

.file-item .icon {
    grid-area: icon;
}

.file-item .title {
    grid-area: title;
}

.file-item .file {
    grid-area: filename;
}
.file-item .file a {
    text-underline-offset: .25em;
    text-decoration-thickness: .05em;
    text-decoration-color: transparent;
    transition: all 0.2s ease-in-out;
}
.file-item .file a:hover {
    text-decoration-color: currentColor;
    text-decoration-thickness: .1em;
}
.file-item .file .icon {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.file-item .file:has(a:hover) .icon {
    opacity: 1;
}

/* .video-list {} */

.video-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "title" "video";
    /* grid-template-areas: "icon title" "icon video"; */
    gap: var(--space-2xs, .5em);
    row-gap: var(--space-3xs, .5em);

    --plyr-color-main: var(--lumo-primary-color);
    --plyr-video-background: var(--lumo-tint-40pct);
}
[theme='dark'] .video-item {
    --plyr-color-main: var(--lumo-primary-color-75pct);
    --plyr-video-background: var(--lumo-shade-20pct);
}

.video-item:not(:last-child) {
    margin-bottom: 2em;
}

.video-item > * {
    margin: 0;
}

.video-item .icon {
    grid-area: icon;
}

.video-item .title {
    grid-area: title;
}

.video-item a {
    grid-area: filename;
}

.video-container {
    grid-area: video;
    position: relative;
    margin-bottom: 1em;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* .bento-container {} */
/* .help-col-1 {} */
/* .help-col-2 {} */

.bento-item {
    h2 {
        font-size: 1em;
        margin-block-end: 0.5rem;
    }

    h2 ~ div {
        padding-inline-start: calc(24px + var(--lumo-space-s));
    }

    a {
        font-weight: 600;
    }
}

[theme~="dark"] .bento-item {
    --lumo-tint-50pct: var(--lumo-tint-5pct);
}

@media (min-width: 640px) {
    .bento-item.contact-online {
        grid-column: 1 / -1;
    }
}

@media (min-width: 768px) {
    .help-col-1 {
        grid-column: span 1 / span 1;
    }
    .help-col-2 {
        grid-column: span 2 / span 2;
    }
}

@media (min-width: 1024px) {
    .help-col-1 {
        grid-column: span 4 / span 4;
    }
    .help-col-2 {
        grid-column: span 8 / span 8;
    }
}

details {
    summary {
        cursor: pointer;

        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--lumo-space-s, 0.25rem);

        h2,
        h3,
        h4 {
            display: flex;
            align-items: center;
            gap: var(--lumo-space-s, 0.25rem);
            font-size: var(--step-0);
        }

        [part="toggle"] {
            margin-inline-start: auto;
            transform: var(--chevron-transform);
        }
    }

    summary > * {
        display: inline-block;
        margin: 0;
    }

    &[open] > summary {
        --chevron-transform: rotate(180deg);
    }

    @media (prefers-reduced-motion: no-preference) {
        interpolate-size: allow-keywords;
    }

    &::details-content {
        opacity: 0;
        block-size: 0;
        overflow-y: clip;
        transition:
            content-visibility 0.2s allow-discrete,
            opacity 0.2s,
            block-size 0.2s;
    }

    &[open]::details-content {
        opacity: 1;
        block-size: auto;
        padding-block-start: var(--lumo-space-s);
    }
}

details.vaadin-details {
    summary {
        list-style: none;
        color: var(--details-summary-txt, var(--lumo-secondary-text-color));
        border-radius: var(--lumo-border-radius-s);

        > * {
            color: var(--details-summary-txt, var(--lumo-secondary-text-color));
            stroke: currentColor;
        }

        &:hover {
            --details-summary-txt: var(--lumo-contrast-80pct);
        }

        &:focus-visible {
            outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
        }
    }

    summary::-webkit-details-marker {
        display: none;
    }
}

dialog[popover] {
    box-sizing: border-box;
    padding: var(--lumo-space-m, 1em);
    max-inline-size: min(30em, 100% - calc(2 * var(--lumo-space-m, 1em)));
    max-block-size: calc(100% - calc(2 * var(--lumo-space-m, 1em)));
    border: none;
    border-radius: var(--lumo-border-radius-s);
    box-shadow: var(--lumo-box-shadow-s);

    overflow-y: auto;
    overscroll-behavior-block: contain;

    transition: opacity 0.1s, scale 0.1s, overlay 0.1s allow-discrete, display 0.1s allow-discrete;
	opacity: 0;
	scale: 0.9;
	position: fixed;
	/* inset-block-start: 50dvh; */
	/* translate: 0 -50%; */

	&:focus-visible {
		outline: none;
	}

	&::backdrop {
		transition: all 0.1s ease-in-out;
		backdrop-filter: blur(0.1rem);
	}

	&:popover-open {
		opacity: 1;
		scale: 1;
	}

    &:hover {
        box-shadow: var(--lumo-box-shadow-m);
    }
}

@starting-style {
	dialog:popover-open {
		opacity: 0;
		scale: 0.9;
	}
}

ul[popover],
div[popover] {
    padding: var(--lumo-space-m, 1em);
    border: none;
    border-radius: var(--lumo-border-radius-s);
    box-shadow: var(--lumo-box-shadow-s);

    li {
        list-style: none;
    }
}

[role="tooltip"] {
	position: absolute;
	inset: inherit;
	position-visibility: always;
	position-try-fallbacks: flip-block, y-start span-x-end, y-end span-x-end,
		y-start span-x-start, y-end span-x-start;
	position-area: y-start span-all;
	padding-block: var(--lumo-space-s);
	padding-inline: var(--lumo-space-m);
	margin-block: var(--lumo-space-xs);
	/* font-size: var(--font-size-sm); */
	/* background-color: var(--color-bg-dark); */
	/* border: var(--border-width-sm) solid oklch(from var(--color-border) l c h / 50%); */
	/* border-radius: var(--border-radius-lg); */
	/* box-shadow: var(--shadow-lg); */

    * {
        margin: 0;
    }
}

dialog#cookies-dialog {
    position: fixed;
    right: var(--lumo-space-m, 1em);
    bottom: var(--lumo-space-m, 1em);

    box-sizing: border-box;
    margin-block: 0;
    margin-inline-end: 0;
    padding: var(--lumo-space-m, 1em);
    max-inline-size: min(30em, 100% - calc(2 * var(--lumo-space-m, 1em)));
    max-block-size: calc(100% - calc(2 * var(--lumo-space-m, 1em)));
    border: none;
    border-radius: var(--lumo-border-radius-s);
    box-shadow: var(--lumo-box-shadow-s);
    /* border: 0.15em solid var(--lumo-contrast-70pct); */

    overflow-y: auto;
    overscroll-behavior-block: contain;

    &:hover {
        box-shadow: var(--lumo-box-shadow-m);
    }
}

dialog#cookies-dialog > * {
    margin-block: 0;
}

dialog#cookies-dialog > * + * {
    margin-block-start: var(--lumo-space-m, 1em);
}

dialog#cookies-dialog .label {
    margin-block: 0;
    font-size: var(--step--1, 1em);
    font-weight: 550;
    color: var(--lumo-header-text-color);
}

dialog#cookies-dialog > form {
    display: flex;
    flex-wrap: wrap;
    /* gap: 0.5em; */
}

dialog#cookies-dialog label ~ p {
    margin-block: .25em 0;
}
/* dialog#cookies-dialog div ~ div {
    margin-block: .5em 0;
} */

/* dialog#cookies-dialog div ~ button {
    margin-block-start: 1em;
} */

#theme_mode {
    color: var(--navbar-link, var(--lumo-secondary-text-color));
    --icon: var(--theme-dark);
    --theme-dark: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9"/><path d="M20 3v4"/><path d="M22 5h-4"/></svg>');
    --theme-light: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>');

    &:hover {
        color: var(--navbar-link-hover, var(--lumo-body-text-color));
    }

    .symbol {
        display: flex;
        place-items: center;
        width: 100%;
        height: 100%;

        &::after {
            display: block;
            margin: auto;
            width: calc(0.75 * var(--lumo-icon-size));
            height: calc(0.75 * var(--lumo-icon-size));
            /* // width: var(--lumo-icon-size-s); */
            /* // height: var(--lumo-icon-size-s); */
            content: "";
            background: currentColor;
            mask-image: var(--icon);
        }
    }
}

[theme="dark"] #theme_mode {
    --icon: var(--theme-light);
}

/* go to top button */

#gotoTop {
    position: fixed;
    bottom: var(--lumo-space-l);
    right: var(--lumo-space-l);
    min-width: 1rem;
    z-index: 101;
    opacity: 1;
    transition: all 0.2s ease-in-out;
    transform: translate(0, 0) scale(1);

    /* position: absolute; */
    /* top: 0; */
    /* color: var(--goto-txt, $col-btn-txt); */
    /* background-color: var(--goto-bg, $col-btn); */

    span {
        display: none;
    }

    &:focus-visible {
        span {
            display: block;
        }
    }

    &:not(.visible) {
        opacity: 0;
        transform: translate(0, 100%) scale(0.8);
    }

    @media (width <= 600px) {
        width: 56px;
        height: 56px;
        box-shadow: var(--lumo-box-shadow-l);
        border-width: 2px;
    }
}


.scroll-snap-slider {
    display: flex;
    flex-wrap: nowrap;
    justify-content: normal;
    overflow-x: auto;
    padding-inline: 0;
    scroll-behavior: smooth;
    scroll-snap-stop: always;
    scroll-snap-type: x mandatory;
}

@media (prefers-reduced-motion) {
    .scroll-snap-slider {
        scroll-behavior: auto;
    }
}

.scroll-snap-slider:not(.-show-scroll-bar) {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.scroll-snap-slider:not(.-show-scroll-bar)::-webkit-scrollbar {
    display: none;
}

.scroll-snap-slide {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    scroll-snap-align: start;
    width: 100%;
}

.slider-container {
    --slider-h: 300px;
    --slider-w: 400px;

    padding-block: var(--lumo-space-m, 1rem);
    margin-inline: auto;
}

.scroll-snap-slider {
    box-sizing: border-box;
    height: var(--slider-h);
    width: var(--slider-w);
    margin-block: 0 var(--lumo-space-m, 1rem);
    margin-inline: auto;

    overscroll-behavior-x: none;
    overscroll-behavior-y: auto;
}
.scroll-snap-slider.-responsive {
    max-width: calc(3 * var(--slider-w));
    width: 100%;
}

.scroll-snap-slide {
    scroll-margin-block: 8rem;
    width: var(--slider-w);
    scroll-snap-stop: always;
}

.scroll-snap-slide article {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
    color: var(--lumo-secondary-text-color);
    background-color: var(--lumo-contrast-5pct);
    /* color: var(--color-light); */
    /* background: var(--color-dark); */
}

.scroll-snap-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.indicators {
    display: flex;
    flex-direction: row;
    gap: var(--lumo-space-m);
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity var(--transition-duration) var(--transition-easing);
}

.indicators.-hidden {
    opacity: 0;
}

.indicators input[type="radio"] {
    display: none;
}

.indicator {
    background-color: var(--color-neutral);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: var(--spacer);
    transition: background-color var(--transition-duration) var(--transition-easing);
    width: var(--spacer);
}

.indicator:not(.-active):hover {
    background-color: var(--color-active);
}

.indicators .indicator.-active {
    background-color: var(--color-accent);
}

.visually-hidden:not(:focus, :active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.arrow {
    background: transparent;
    border: 0;
    cursor: pointer;
    height: var(--spacer-double);
    margin: 0 var(--spacer-half);
}

.arrow.-disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.arrow svg {
    height: 100%;
    width: auto;
}

/* .arrow.-prev svg {
    transform: rotate(180deg);
} */