@charset "UTF-8";

:root {
    /* color palette */
    --lumo-color-blue: #296FD7;
    --lumo-color-navy: #305C9F;
    --lumo-color-indigo: #471ED9;
    --lumo-color-purple: #7827E9;
    --lumo-color-pink: #CA2BE3;
    --lumo-color-red: #D82F37;
    --lumo-color-brown: #8B5B0F;
    --lumo-color-orange: #DA9018;
    --lumo-color-yellow: #FAC131;
    --lumo-color-green: #26BA5F;
    --lumo-color-darkgreen: #16813F;
    --lumo-color-cyan: #26CCD2;
    --lumo-color-teal: #19D8C2;
    --lumo-color-graphite: #8E8E8E;
    --lumo-primary-color: #FAC131;
    --lumo-secondary-color: #007AFF;
    --lumo-text-light: #FFFFFF;
    --lumo-text-dark: #1d1d1d;
    /* ================================ */
    --lumo-primary-button-text: var(--lumo-text-dark);
    --lumo-secondary-button-text: var(--lumo-text-light);
    --lumo-text-color: var(--lumo-text-dark);
    --lumo-shadow-s: 0 0.125rem 0.25rem rgb(from var(--lumo-text-color) r g b / 0.1);
    --lumo-shadow-m: 0 0.35rem 0.65rem rgb(from var(--lumo-text-color) r g b / 0.1);
    --lumo-shadow-l: 0 0.75rem 1.5rem rgb(from var(--lumo-text-color) r g b / 0.1);
    --lumo-font-family: system-ui, sans-serif;
    --lumo-font-size: 16px;
    --lumo-transition: 200ms ease-in-out;
    --lumo-spacing: 1rem;
    --lumo-grip-row-gap: var(--lumo-spacing);
    --lumo-grip-column-gap: var(--lumo-spacing);
    --lumo-border-radius-scale: 1;
    --lumo-font-weight: 400;
    --lumo-line-height: 1.5;
    --lumo-header-height: 5rem;
    --lumo-breadcrumb-divider: "/";
    --lumo-cw: calc(75vw + var(--lumo-spacing));
    --lumo-cw-bp-l: calc(85vw + var(--lumo-spacing));
    --lumo-cw-bp-m: 90vw;
    --lumo-cw-bp-s: 100vw;
    --lumo-bg-color: #FFFFFF;
    --lumo-dropdown-bg-color: #fafafa;
    --lumo-modal-bg-color: rgba(0, 0, 0, 0.25);
    --lumo-border-light: 1px solid rgb(from var(--lumo-text-color) r g b / 0.1);
    --lumo-border-default: 1px solid rgb(from var(--lumo-text-color) r g b / 0.2);
    --lumo-border-hard: 1px solid rgb(from var(--lumo-text-color) r g b / 0.45);
    --lumo-accent-color: #007AFF;
    --lumo-link-color: #007AFF;
    --lumo-tab-accent: var(--lumo-accent-color);
    --lumo-tab-text: var(--lumo-text-light);
    --lumo-accent-contrast-color: var(--lumo-text-light);
    --lumo-scrollbar-color: var(--lumo-text-color);
    --lumo-menu-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 17H19M5 12H19M5 7H19' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --lumo-close-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --lumo-dropdown-icon: url("data:image/svg+xml,%3Csvg width='87' height='53' viewBox='0 0 87 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72.2277 4.05023C74.9607 1.31754 79.3914 1.31735 82.1242 4.05023C84.8566 6.7831 84.8566 11.2138 82.1242 13.9467L48.0344 48.0366C45.3867 50.6839 41.1456 50.7668 38.3986 48.2846L38.1379 48.0366L4.04902 13.9467C1.31626 11.2138 1.31642 6.7832 4.04902 4.05023C6.78195 1.31745 11.2136 1.31638 13.9465 4.04925L43.0871 33.1909L72.2277 4.05023Z' fill='black'/%3E%3C/svg%3E");
    --lumo-select-icon: url("data:image/svg+xml,%3Csvg width='87' height='139' viewBox='0 0 87 139' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M72.2277 90.049C74.9607 87.3163 79.3914 87.3161 82.1242 90.049C84.8566 92.7819 84.8566 97.2126 82.1242 99.9455L48.0344 134.035C45.3867 136.683 41.1456 136.766 38.3986 134.283L38.1379 134.035L4.04902 99.9455C1.31626 97.2126 1.31642 92.782 4.04902 90.049C6.78195 87.3162 11.2136 87.3152 13.9465 90.048L43.0871 119.19L72.2277 90.049ZM14.284 47.9549C11.556 50.6825 7.13314 50.6825 4.40511 47.9549C1.67736 45.2268 1.67739 40.804 4.40511 38.076L38.4344 4.04568C38.5194 3.96071 38.606 3.8783 38.6942 3.79861C38.9594 3.55903 39.2388 3.34285 39.5291 3.15115C41.466 1.87218 43.9003 1.6589 46.0028 2.51151C46.2128 2.59669 46.4193 2.69313 46.6219 2.79959C46.8248 2.90621 47.0238 3.02319 47.2176 3.15115C47.508 3.34289 47.7873 3.55898 48.0526 3.79862L48.3133 4.04569L82.3426 38.076C85.0701 40.804 85.0703 45.2269 82.3426 47.9549C79.6146 50.6827 75.1908 50.6827 72.4627 47.9549L43.3739 18.866L14.284 47.9549Z' fill='black'/%3E%3C/svg%3E");
    --lumo-accordion-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L16 12L9 19' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    overflow-wrap: break-word;
    color-scheme: light;
}

/* Begin accessibility theme definition */

/* When user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* When <body data-reduce-motion="true"> is set */
body[data-reduce-motion="true"] * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

body[data-reduce-motion="true"] details:not(:has(menu)) summary::before {
    transition: none !important;
}

/* End accessibility theme definition */

/* begin dark theme definition */

:root:has(body[data-theme="dark"]) {
    color-scheme: dark;
}

body[data-theme="dark"] {
    --lumo-bg-color: #1b1b1b;
    --lumo-text-light: #F9FAFB;
    --lumo-text-color: var(--lumo-text-light);
    --lumo-modal-bg-color: rgba(12, 10, 9, 0.72);
    --lumo-shadow-s: 0 0.125rem 0.25rem rgba(12, 10, 9, 0.6), inset 0 1px 0 rgba(232, 226, 217, 0.05);
    --lumo-shadow-m: 0 0.35rem 0.65rem rgba(12, 10, 9, 0.7), inset 0 1px 0 rgba(232, 226, 217, 0.06);
    --lumo-shadow-l: 0 0.75rem 1.5rem rgba(12, 10, 9, 0.75), inset 0 1px 0 rgba(232, 226, 217, 0.07);
    --lumo-border-light: 1px solid rgba(232, 226, 217, 0.2);
    --lumo-border-default: 1px solid rgba(232, 226, 217, 0.3);
    --lumo-border-hard: 1px solid rgba(232, 226, 217, 0.5);
    --lumo-secondary-color: #0A84FF;
    --lumo-accent-color: #0A84FF;
    --lumo-link-color: #0A84FF;
    --lumo-dropdown-bg-color: #292929;
    --lumo-tab-accent: var(--lumo-accent-color);
    --lumo-tab-text: var(--lumo-text-light);
    --lumo-accordion-icon: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M300 166.667L533.333 400L300 633.333' stroke='white' stroke-width='66.6667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --lumo-menu-icon: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M166.667 566.667H633.333M166.667 400H633.333M166.667 233.333H633.333' stroke='white' stroke-width='66.6667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --lumo-close-icon: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M600 600L400 400M400 400L200 200M400 400L600 200M400 400L200 600' stroke='white' stroke-width='66.6667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body[data-theme="dark"] {
    --lumo-color-blue: #276DEF;
    --lumo-color-navy: #2050AA;
    --lumo-color-indigo: #5229E8;
    --lumo-color-purple: #853AEE;
    --lumo-color-pink: #D244E8;
    --lumo-color-red: #D82F45;
    --lumo-color-brown: #885E1A;
    --lumo-color-orange: #E59A21;
    --lumo-color-yellow: #F4BE0D;
    --lumo-color-green: #30C86A;
    --lumo-color-darkgreen: #198141;
    --lumo-color-cyan: #2BDCE2;
    --lumo-color-teal: #19D8C2;
    --lumo-color-graphite: #555555;
}

body[data-theme="dark"] pre,
body[data-theme="dark"] code {
    /* Slightly lighter warm surface for code blocks */
    background-color: #292929;
}

body[data-theme="dark"] [aria-busy="true"]:is(article, section, div, h1, h2, h3, h4, h5, h6, p)::before {
    filter: brightness(0) invert(1);
}

body[data-theme="dark"] [role="region"]:is(a).variant-pastel::before {
    filter: brightness(0) invert(1);
}

body[data-theme="dark"] details:has(menu) menu li:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.125);
}

body[data-theme="dark"] dialog>section button.close:hover {
    background-color: rgb(from var(--lumo-primary-color) r g b / 0.25);
}

/*body[data-theme="dark"] article.tabs [role="tablist"]>button[role="tab"][aria-selected="true"] {
    background-color: var(--lumo-text-light);
    color: var(--lumo-text-dark);
    font-weight: bold;
}*/

body[data-theme="dark"] button.tertiary.outline:hover,
body[data-theme="dark"] [role=button].tertiary.outline:hover,
body[data-theme="dark"] input[type=button].tertiary.outline:hover,
body[data-theme="dark"] input[type=submit].tertiary.outline:hover,
body[data-theme="dark"] input[type=reset].tertiary.outline:hover {
    color: var(--lumo-text-dark);
}

/* end dark theme definition */

:focus-visible {
    outline: 2px solid var(--lumo-accent-color);
    outline-offset: 3px;
}

* {
    position: relative;
    max-width: 100%;
    accent-color: var(--lumo-accent-color);
    scrollbar-width: auto;
    scrollbar-color: initial transparent;
}

*[id] {
    scroll-margin-top: 5rem
}

*,
::after,
::before {
    box-sizing: border-box;
}

html {
    font-family: var(--lumo-font-family);
    font-size: var(--lumo-font-size)
}

body {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: var(--lumo-line-height);
    background-color: var(--lumo-bg-color);
    color: var(--lumo-text-color);
}

body:has(dialog[open]) {
    overflow-y: hidden;
}

a {
    text-decoration: none;
    color: var(--lumo-link-color);
}

a:not([role="button"], :has(img)):hover {
    text-decoration: underline;
    background-color: rgb(from var(--lumo-link-color) r g b / 0.15);
}

/*
 * Progress
 */
progress {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 0.75rem;
    border: none;
    border-radius: calc(999px * var(--lumo-border-radius-scale));
    overflow: hidden;
    vertical-align: middle;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.075);
}

/* Track — Chrome / Safari / Edge */
progress::-webkit-progress-bar {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.075);
    border-radius: calc(999px * var(--lumo-border-radius-scale));
}

/* Fill — Chrome / Safari / Edge */
progress::-webkit-progress-value {
    border-radius: calc(999px * var(--lumo-border-radius-scale));
    background: var(--lumo-accent-color);
    transition: width var(--lumo-transition);
}

/* Fill — Firefox */
progress::-moz-progress-bar {
    border-radius: calc(999px * var(--lumo-border-radius-scale));
    background: var(--lumo-accent-color);
    transition: width var(--lumo-transition);
}

/* Indeterminate sweep animation */
progress:indeterminate {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.12);
    background-image: linear-gradient(90deg, transparent 0%, var(--lumo-accent-color) 50%, transparent 100%);
    background-size: 60% 100%;
    background-repeat: no-repeat;
    animation: mac-progress-sweep 1.4s ease-in-out infinite;
}

progress:indeterminate::-webkit-progress-bar {
    background-color: transparent;
    box-shadow: none;
}

progress:indeterminate::-webkit-progress-value {
    background: none;
}

@keyframes mac-progress-sweep {
    0% {
        background-position: -60% 0;
    }

    50% {
        background-position: 160% 0;
    }

    100% {
        background-position: -60% 0;
    }
}

/*
 * Container
 */
.container {
    width: var(--lumo-cw);
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--lumo-spacing);
}

.container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-inline: var(--lumo-spacing);
}

@media screen and (max-width: 1280px) {
    .container {
        width: var(--lumo-cw-bp-l);
    }
}

@media screen and (max-width: 1024px) {
    .container {
        width: var(--lumo-cw-bp-m);
    }
}

@media screen and (max-width: 768px) {
    .container {
        width: var(--lumo-cw-bp-s);
    }
}

/*
 * Header
 */
body>header {
    width: 100vw;
    display: flex;
    padding: 0.35rem 0;
    border-bottom: var(--lumo-border-light);
    background-color: var(--lumo-bg-color);
    z-index: 99999;
}

header nav>button[role="menu"],
header nav button[aria-label="close"],
body>nav button[role="menu"],
body>nav ul button[aria-label="close"] {
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border: none;
    background-image: var(--lumo-menu-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

body:has(>nav)>header {
    box-shadow: none;
}

body>nav {
    width: 100%;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.035);
}

header nav button[aria-label="close"],
body>nav ul button[aria-label="close"] {
    display: none;
    position: absolute;
    top: 1.25rem;
    right: 0.65rem;
    background-image: var(--lumo-close-icon);
}

header.sticky {
    position: sticky;
    top: 0;
}

body>header.glass {
    background: rgb(from var(--lumo-bg-color) r g b / 0.62);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(9.5px);
    -webkit-backdrop-filter: blur(9.5px);
    border-bottom: 1px solid rgb(from var(--lumo-text-color) r g b / 0.1);
}

body>header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body>header {
    height: var(--lumo-header-height);
}

header a,
body>nav a {
    color: var(--lumo-text-color);
}

header>.container>a {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
}

header>.container>a:has(img):hover {
    background-color: transparent;
}

header nav {
    position: relative;
    height: 100%;
    display: flex;
}

@media screen and (max-width: 1024px) {

    header nav:has(button[role="menu"])>ul,
    html body>nav>.container>ul {
        width: 100%;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 1rem;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        top: var(--lumo-header-height);
        background-color: var(--lumo-bg-color);
        z-index: 9998;
        box-shadow: none;
        border-bottom: var(--lumo-border-light);
        box-shadow: var(--lumo-shadow-s);
    }

    header nav>button[role="menu"] {
        display: flex;
    }

    header nav button[aria-label="close"],
    body>nav ul button[aria-label="close"] {
        display: flex;
    }

}

/*
 * Nav (main)
 */

header nav {
    justify-content: space-between;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

header nav>ul,
body>nav .container>ul {
    width: fit-content;
    display: flex;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
}

header nav details:has(menu) summary:hover,
body>nav details:has(menu) summary:hover {
    text-decoration: underline;
}

/*
 * Dropdown
 */

details:has(menu) {
    display: inline-flex;
    width: max-content;
}

details:has(menu) summary {
    cursor: pointer;
    margin: 0;
    align-items: center;
    display: flex;
    gap: 0.4rem;
    user-select: none;
    -moz-user-select: none;
}

details:has(menu) summary::after {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 0.4rem;
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: var(--lumo-dropdown-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}


details>summary:first-of-type {
    list-style-type: none;
}

details:has(menu) summary::marker {
    display: none;
}

details:has(menu) menu {
    list-style: none;
    background-color: var(--lumo-dropdown-bg-color);
    border: var(--lumo-border-light);
    padding: 0.25rem;
    margin: 0;
    width: max-content;
    max-width: 300px;
    border-radius: calc(0.65rem * var(--lumo-border-radius-scale));
    box-shadow: var(--lumo-shadow-m);
    position: absolute;
    text-align: left !important;
    top: 100%;
    left: 0;
    z-index: 999;
}

details:has(menu).size-large menu {
    border-radius: calc(0.75rem * var(--lumo-border-radius-scale));
    padding: 0.25rem;
}

details:has(menu).size-large menu li>* {
    padding: 0.55rem 1rem !important;
    font-size: 1rem;
}

details:has(menu).size-large menu li {
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
}

details:has(menu) menu[dir=rtl] {
    right: 0;
    left: auto;
    align-items: left;
}

details:has(menu) menu[dir=rtl] li {
    direction: ltr;
}

details:has(menu) menu li a {
    color: var(--lumo-text-color);
}

details:has(menu) menu li {
    text-align: left;
    align-items: left;
    border-radius: calc(0.4rem * var(--lumo-border-radius-scale));
}

details:has(menu) menu li:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.13);
}

details:has(menu) menu li:hover>a {
    background-color: transparent !important;
    text-decoration: none !important;
}

details:has(menu).accent menu li:hover {
    background-color: var(--lumo-accent-color) !important;
    color: var(--lumo-accent-contrast-color) !important;
}

details:has(menu).accent menu li:hover>* {
    color: var(--lumo-accent-contrast-color) !important;
}

details:has(menu) menu li:hover * {
    text-decoration: none;
}

details:has(menu) menu li>* {
    padding: 0.35rem 0.75rem !important;
    display: flex;
    align-items: center;
    justify-content: start;
    text-align: left;
    gap: 0.5rem;
}

/*
 * Button
 */

button,
[role=button],
input[type=button],
input[type=submit],
input[type=reset],
input[type="file"]::-webkit-file-upload-button {
    --lumo-bg-color: var(--lumo-primary-color);
    --lumo-transition: 150ms ease-in-out;
    display: inline-flex;
    gap: 0.35rem;
    width: auto;
    background-color: var(--lumo-bg-color);
    color: var(--lumo-primary-button-text);
    padding: 0.4rem 0.8rem;
    border-radius: calc(0.375rem * var(--lumo-border-radius-scale));
    min-height: 2.35rem;
    font-size: 0.95rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: brightness(1);
    border: 1px solid var(--lumo-bg-color);
    line-height: var(--lumo-line-height);
    font-family: var(--lumo-font-family);
    font-weight: bold;
    user-select: none;
    -moz-user-select: none;
    transition: box-shadow var(--lumo-transition);
}

:where(button,
    [role=button],
    input[type=button],
    input[type=submit],
    input[type=reset],
    input[type="file"]::-webkit-file-upload-button,
    input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week], textarea, select).shape-pill,
input[type="file"].shape-pill::-webkit-file-upload-button {
    border-radius: 9999px !important;
}

input[type=search] {
    border-radius: 999px;
}

:where(button,
    [role=button],
    input[type=button],
    input[type=submit],
    input[type=reset]).size-square,
input[type="file"].size-square::-webkit-file-upload-button {
    aspect-ratio: 1/1;
    height: 2.35rem;
    padding: 0.5rem !important;
    flex-shrink: 0;
    margin: 0;
}

button:disabled,
[role="button"]:disabled,
input[type="file"]:disabled::-webkit-file-upload-button {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.35);
    border-color: transparent;
    color: var(--lumo-text-dark) !important;
    cursor: not-allowed;
}

button.secondary,
[role=button].secondary,
input[type=button].secondary,
input[type=submit].secondary,
input[type=reset].secondary {
    --lumo-bg-color: var(--lumo-secondary-color);
    color: var(--lumo-secondary-button-text);
}

button.outline,
[role=button].outline,
input[type=button].outline,
input[type=submit].outline,
input[type=reset].outline {
    background-color: transparent;
    border-color: var(--lumo-bg-color);
    color: var(--lumo-bg-color);
}

button.tertiary.outline,
[role=button].tertiary.outline,
input[type=button].tertiary.outline,
input[type=submit].tertiary.outline,
input[type=reset].tertiary.outline {
    --lumo-bg-color: var(--lumo-text-color);
    background-color: transparent;
    border: var(--lumo-border-default);
    color: var(--lumo-text-color);
}

button:hover,
[role=button]:hover,
input[type=button]:hover,
input[type=submit]:hover,
input[type=reset]:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: oklch(from var(--lumo-bg-color) calc(l - 0.08) c h);
    border-color: oklch(from var(--lumo-bg-color) calc(l - 0.08) c h);
}

label:has(input)[aria-orientation="horizontal"] {
    display: flex;
    flex-direction: row;
    align-items: center;
}

label:has(input)[aria-orientation="horizontal"]>input:first-of-type {
    margin-left: 0.5rem;
}

button.outline:hover,
[role=button].outline:hover,
input[type=button].outline:hover,
input[type=submit].outline:hover,
input[type=reset].outline:hover {
    background-color: var(--lumo-bg-color);
    border-color: var(--lumo-bg-color);
}

button.outline.secondary:hover,
[role=button].outline.secondary:hover,
input[type=button].outline.secondary:hover,
input[type=submit].outline.secondary:hover,
input[type=reset].outline.secondary:hover {
    color: var(--lumo-secondary-button-text);
}

button.tertiary.outline:hover,
[role=button].tertiary.outline:hover,
input[type=button].tertiary.outline:hover,
input[type=submit].tertiary.outline:hover,
input[type=reset].tertiary.outline:hover {
    color: var(--lumo-text-light);
}

button.outline:not(.secondary, .tertiary):hover,
[role=button].outline:not(.secondary, .tertiary):hover,
input[type=button].outline:not(.secondary, .tertiary):hover,
input[type=submit].outline:not(.secondary, .tertiary):hover,
input[type=reset].outline:not(.secondary, .tertiary):hover {
    color: var(--lumo-primary-button-text);
}

/*:where(button,
    [role=button],
    input[type=button],
    input[type=submit],
    input[type=reset],
    input[role="switch"],
    input[type=color], input[type=radio],
    input[type=checkbox],
    input[type="file"]::-webkit-file-upload-button):focus {
    box-shadow: 0 0 0 3px rgb(from var(--lumo-bg-color) r g b / 0.5);
}*/

:where(input[type=radio],
    input[type=checkbox]:not([role=switch])):focus {
    box-shadow: 0 0 0 3px rgb(from var(--lumo-accent-color) r g b / 0.35);
}

button:active,
[role=button]:active,
input[type=button]:active,
input[type=submit]:active,
input[type=reset]:active,
input[type="file"]::-webkit-file-upload-button:active {
    filter: brightness(0.85);
}

/*
 * Buttons group
 */
[role="group"].buttons {
    width: 100%;
    max-width: unset;
    overflow-y: visible;
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0.25rem;
    margin: -0.25rem;
}

[role="group"].buttons>*:where(button, [role=button], input[type=button], input[type=submit], input[type=reset]) {
    white-space: nowrap;
}

[role="group"].buttons>*:where(button, [role=button], input[type=button], input[type=submit], input[type=reset]):not(:last-child) {
    border-right-color: color-mix(in srgb, var(--lumo-bg-color) 80%, black) !important;
}

[role="group"].buttons>*:where(button, [role=button], input[type=button], input[type=submit], input[type=reset]):not(:last-child, :first-child) {
    border-radius: 0 !important;
}

[role="group"].buttons>*:where(button.outline, [role=button].outline, input[type=button].outline, input[type=submit].outline, input[type=reset].outline):not(:last-child, :first-child) {
    border-left: 0 !important;
}

[role="group"].buttons>*:where(button, [role=button], input[type=button], input[type=submit], input[type=reset]):last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

[role="group"].buttons>*:where(button, [role=button], input[type=button], input[type=submit], input[type=reset]):first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

[role="group"].buttons.align-center {
    justify-content: center;
}

[role="group"].buttons.align-right {
    justify-content: end;
}

[role="group"].buttons.align-left {
    justify-content: left;
}

/*
 * Heading
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    padding: 0;
    margin: 0.35rem 0;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 1rem;
    color: rgb(from var(--lumo-text-color) r g b / 0.5)
}

p {
    margin: 0.25rem 0;
    width: fit-content;
}

/*
 * Main
 */

body:has(header)>main {
    margin-top: calc(var(--lumo-spacing) * 5);
}

@media screen and (max-width: 1024px) {
    main {
        margin-top: calc(var(--lumo-spacing) * 3);
    }

}

main>.container {
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr;
    column-gap: var(--lumo-grip-column-gap);
    grid-template-areas:
        "page"
    ;
}

main>.container:has(#navigation, #page, #table-of-content) {
    grid-template-columns: 15rem 1fr 10rem;
    grid-template-areas:
        "navigation page table-of-content"
    ;
}

main>.container:has(#navigation, #page):not(:has(#table-of-content)) {
    grid-template-columns: 15rem 1fr;
    grid-template-areas:
        "navigation page"
    ;
}

main>.container:has(#page):not(:has(#navigation, #table-of-content)) {
    grid-template-columns: 1fr;
    grid-template-areas:
        "page"
    ;
}

main>.container #page {
    display: flex;
    row-gap: var(--lumo-grip-row-gap);
    column-gap: var(--lumo-grip-column-gap);
    flex-direction: column;
}

main #navigation,
main #navigation nav {
    position: sticky;
    top: 7rem;
}

main #navigation details summary {
    background-color: transparent;
    font-size: inherit !important;
    border: none;
    margin: 0;
}

main #navigation details {
    border: none;
    padding: 0;
}

@media screen and (max-width: 1024px) {
    main>.container #navigation {
        position: static;
        border-bottom: 1px solid rgb(from var(--lumo-text-color) r g b / 0.15);
        padding-bottom: var(--lumo-spacing);
    }

    main>.container #table-of-content {
        display: none;
    }

    main>.container {
        display: grid;
        grid-template-columns: 1fr;
    }

    main>.container:has(#navigation, #page, #table-of-content) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "navigation"
            "page"
            "table-of-content";
    }

    main>.container:has(#navigation, #page):not(:has(#table-of-content)) {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "navigation"
            "page";
    }


    main>.container:has(#page):not(:has(#navigation, #table-of-content)) {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "page";
    }
}


main aside#navigation nav {
    width: 100%;
}

main aside#navigation nav ul {
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--lumo-grip-row-gap) * 0.25);
    list-style: none;
    padding: 0;
    margin: 0;
}

main aside#navigation nav ul li>*,
main aside#navigation nav ul li:has(details) summary {
    padding: 0.5rem 1rem;
    display: flex;
    color: var(--lumo-text-color);
    border-radius: calc(0.375rem * var(--lumo-border-radius-scale));
    column-gap: calc(var(--lumo-spacing) * 0.5);
    cursor: pointer;
}

main aside#navigation nav ul li>a {
    user-select: none;
    -moz-user-select: none;
}

main aside#navigation nav ul li[aria-current="page"]>*:not(details),
main aside#navigation nav ul li[aria-current="page"]>*:is(details)>summary {
    background-color: rgb(from var(--lumo-accent-color) r g b / 0.25);
    /*color: var(--lumo-accent-contrast-color);*/
    font-weight: bold;
}

main aside#navigation nav ul li[aria-current="page"]>*:not(details):hover,
main aside#navigation nav ul li[aria-current="page"]>*:is(details)>summary:hover {
    background-color: rgb(from var(--lumo-accent-color) r g b / 0.4);
}

main aside#navigation nav ul li[aria-current="page"]>*:is(details)>summary::before {
    filter: brightness(0) invert(1);
}

main aside#navigation nav ul li:not(:has(details))>*[aria-current="false"]:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.11);
}

main aside#navigation nav ul li:has(details) {
    padding: 0 !important;
    cursor: default;
}

main aside#navigation nav ul li:has(details):not([aria-current="page"]) summary:hover,
main aside#navigation nav ul li:not(:has(details), [aria-current="page"])>*:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.11);
    text-decoration: underline;
}

main aside#navigation nav ul li details {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    cursor: default;
}

main aside#navigation nav ul li details summary {
    width: 100% !important;
    max-width: 100% !important;
}

main aside#navigation nav ul li:has(details[open]) summary {
    font-weight: bold;
}

main aside#navigation nav ul li details ul {
    padding-left: 1rem;
}

main aside#navigation nav ul li[aria-current="page"]>*,
main aside#navigation nav ul li[aria-current="page"]>*:is(details)>summary {
    --lumo-transition: 150ms ease-in-out;
    transition: box-shadow var(--lumo-transition);
}

main aside#navigation nav ul li[aria-current="page"]>*:hover {
    filter: brightness(0.9);
}

main aside#navigation nav ul li[aria-current="page"]>*:active,
main aside#navigation nav ul li[aria-current="page"]>*:is(details)>summary:active {
    filter: brightness(0.8);
    outline: none;
}

@media screen and (max-width: 1024px) {

    main aside#navigation nav ul li>*,
    main aside#navigation nav ul li:has(details) summary {
        padding: 0.55rem 0.8rem;
    }
}

/*
 * Section
 */
section:has(article, div),
.grid {
    display: flex;
    flex-direction: row;
    gap: var(--lumo-grip-column-gap);
}

section>*:not(hr),
.grid>*:not(hr) {
    width: 100%;
}

@media screen and (max-width: 1024px) {

    section,
    .grid {
        flex-direction: column;
    }
}

/*
 * Region (card)
 */
[role="region"] {
    border: var(--lumo-border-default);
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    padding: 1rem;
    overflow: hidden;
    display: block;
}

[role="region"]:has(header, footer) {
    border: var(--lumo-border-light);
}

[role="region"].shadow {
    background-color: var(--lumo-bg-color);
    box-shadow: var(--lumo-shadow-m),
        0.15rem -0.15rem 0.75rem rgb(from var(--lumo-text-color) r g b / 0.05);
    border: none;
    padding: 1rem 1.25rem;
    border-radius: calc(0.75rem * var(--lumo-border-radius-scale));
}

[role="region"].align-center {
    text-align: center;
}

[role="region"].align-center>*:not(hr) {
    margin-left: auto;
    margin-right: auto;
}

[role="region"].no-border {
    border: none;
}

[role="region"]>hr {
    width: calc(100% + 2rem);
    max-width: unset;
    margin-left: -1rem;
    margin-top: calc(var(--lumo-spacing) * 0.75);
    margin-bottom: calc(var(--lumo-spacing) * 0.75);
    border-color: rgb(from var(--lumo-text-color) r g b / 0.2);
}

[role="region"]>:where(h1, h2, h3, h4, h5, h6):first-child {
    padding-top: 0;
    margin-top: 0;
}

[role="region"]:is(a) {
    color: var(--lumo-text-color);
    cursor: pointer;
    background-color: var(--lumo-bg-color);
}

[role="region"]:is(a):hover,
[role="region"]:is(a):focus-visible {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.035);
    border: 1px solid var(--lumo-accent-color);
}

[role="region"]:is(a).variant-pastel {
    background-color: rgb(from var(--lumo-accent-color) r g b / 0.08);
    border: 1px solid transparent;
    transition: background-color var(--lumo-transition), transform var(--lumo-transition), box-shadow var(--lumo-transition);
    padding-right: 2.25rem;
    box-shadow: none;
}

[role="region"]:is(a).variant-pastel:hover {
    background-color: rgb(from var(--lumo-accent-color) r g b / 0.15);
    border: 1px solid transparent;
    box-shadow: var(--lumo-shadow-s);
}

[role="region"]:is(a).variant-elevated {
    background-color: var(--lumo-bg-color);
    border: none;
    box-shadow: var(--lumo-shadow-s);
    transition: box-shadow var(--lumo-transition), transform var(--lumo-transition);
}

[role="region"]:is(a).variant-elevated:hover {
    box-shadow: var(--lumo-shadow-m);
    transform: translateY(-4px);
    border: none;
}

[role="region"]:is(a).variant-subtle {
    background-color: transparent;
    border: 1px solid rgb(from var(--lumo-text-color) r g b / 0.1);
    transition: background-color var(--lumo-transition), border-color var(--lumo-transition);
}

[role="region"]:is(a).variant-subtle:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.035);
    border: 1px solid rgb(from var(--lumo-text-color) r g b / 0.2);
}

[role="region"]:is(a).variant-filled {
    background-color: rgb(from var(--lumo-accent-color) r g b / 0.1);
    border: 2px solid rgb(from var(--lumo-accent-color) r g b / 0.2);
    transition: all var(--lumo-transition);
}

[role="region"]:is(a).variant-filled:hover {
    background-color: rgb(from var(--lumo-accent-color) r g b / 0.2);
    border-color: var(--lumo-accent-color);
}

[role="region"]:is(a).variant-pastel::before {
    content: "";
    background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='-2.4 -2.4 28.80 28.80' fill='none' xmlns='http://www.w3.org/2000/svg' transform='rotate(0)matrix(1, 0, 0, 1, 0, 0)'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' stroke='%23CCCCCC' stroke-width='0.144'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M5 12H19M19 12L13 6M19 12L13 18' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
    opacity: 0;
    transition: opacity var(--lumo-transition), transform var(--lumo-transition);
}

[role="region"]:is(a).variant-pastel:hover::before,
[role="region"]:is(a).variant-pastel:focus-visible::before {
    opacity: 1;
    transform: translateX(4px);
}

[role="region"]>header {
    box-shadow: none;
    margin-left: -1rem;
    margin-top: -1rem;
    border: none;
    margin-bottom: 1rem;
    z-index: inherit;
}

[role="region"].shadow>header {
    margin-left: -1.25rem;
    margin-top: -1.25rem;
    width: calc(100% + 2.5rem);
}

[role="region"]>header>*:where(h1, h2, h3, h4, h5, h6) {
    padding: 0;
    margin: 0;
}

[role="region"]>footer {
    box-shadow: none;
    margin-left: -1rem;
    margin-bottom: -1rem;
    margin-top: 1rem;
}

[role="region"]>header,
[role="region"]>footer {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.045);
    max-width: unset;
    width: calc(100% + 2rem);
    padding: 0.5rem 1rem;
}

/*
 * footer
 */
footer {
    margin-top: calc(var(--lumo-spacing) * 3);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.05);
}

/*
 * hr
 */
hr {
    border: var(--lumo-border-default);
    border-bottom: 0;
    margin: calc(var(--lumo-spacing) * 0.5) 0;
}

hr[aria-orientation="vertical"] {
    border-right: 0;
    width: 1px;
    margin: 0 calc(var(--lumo-spacing) * 0.5);
}

@media screen and (max-width: 1024px) {
    hr[aria-orientation="vertical"] {
        width: 100%;
        margin: calc(var(--lumo-spacing) * 0.5) 0;
    }
}

/*
 * input
 */
:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week], textarea, select) {
    --lumo-transition: 75ms linear;
    --lumo-contrast-color: var(--lumo-accent-color);
    display: inline-flex;
    width: 100%;
    border: var(--lumo-border-default);
    border-radius: calc(0.375rem * var(--lumo-border-radius-scale));
    font-size: 0.95rem;
    padding: 0.4rem 0.8rem;
    color: var(--lumo-text-color);
    text-align: left;
    line-height: var(--lumo-line-height);
    margin: calc(var(--lumo-spacing) * 0.25) 0;
    background-color: var(--lumo-bg-color);
    outline: 0 solid transparent;
    box-shadow: 0 0 0 2px transparent;
    outline-offset: 0;
    cursor: text;
    height: calc(2.35rem * 1.1);
    font-family: var(--lumo-font-family);
    box-shadow: 0 0 0 0 #FFFFFF;
    /*transition: outline var(--lumo-transition), border-color var(--lumo-transition), box-shadow var(--lumo-transition);*/
}

/*:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week], textarea, select):not(:focus, [aria-invalid], :disabled):hover {
    border: var(--lumo-border-hard)
}*/

/*:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea, select):focus {
    outline: 2px solid var(--lumo-accent-color);
    box-shadow: 0 0 0 2px #FFFFFF;
}*/

:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea, select):focus {
    /*border-color: rgb(from var(--lumo-contrast-color) r g b / 0.65);*/
    border-color: var(--lumo-contrast-color);
    outline-offset: -2px;
    /*outline: 3px solid rgb(from var(--lumo-contrast-color) r g b / 0.35);*/
    outline: 2px solid var(--lumo-contrast-color);
    box-shadow: 0 0 0 3px rgb(from var(--lumo-contrast-color) r g b / 0.3);
}

:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea, select)[aria-invalid="false"]:focus {
    --lumo-contrast-color: var(--lumo-color-green);
}

:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea, select)[aria-invalid="true"]:focus {
    --lumo-contrast-color: var(--lumo-color-red);
}

input[type=checkbox]:not([role="switch"]),
input[type=radio] {
    --lumo-transition: 150ms ease-in-out;
    width: 1.125rem;
    height: 1.125rem;
    display: inline-flex;
    aspect-ratio: 1/1;
    padding: 0;
    margin: 0;
    accent-color: var(--lumo-accent-color);
    border: var(--lumo-border-hard);
    border-width: 1px;
    cursor: pointer;
    /*transition: box-shadow var(--lumo-transition);*/
}

input[type=checkbox]:not([role="switch"]),
input[type=checkbox][role="switch"],
input[type=radio] {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.025);
}

input[type=checkbox]:not([role="switch"]):focus,
input[type=radio]:focus {
    border-color: var(--lumo-accent-color);
}

input[type=checkbox]:not([role="switch"]) {
    appearance: none;
    flex-shrink: 0;
    vertical-align: top;
    border-radius: 0.25rem;
    margin: 0;
}

input[type=checkbox]:not([role="switch"])::before {
    content: "";
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    background-image: none;
    background-position: center -1px;
    background-repeat: no-repeat;
    background-size: cover;
}

input[type=checkbox]:not([role="switch"]):checked {
    background-color: var(--lumo-accent-color);
    border-color: var(--lumo-accent-color);
}

input[type=checkbox]:not([role="switch"]):not(:checked):hover,
input[type=radio]:not(:checked):hover {
    border-color: var(--lumo-accent-color);
}

input[type=checkbox]:not([role="switch"]):checked::before {
    content: "";
    display: block;
    background-color: var(--lumo-accent-contrast-color);
    mask-image: url("data:image/svg+xml,%3Csvg width='230' height='230' viewBox='0 0 230 230' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M179.347 63.9584C182.862 67.4731 182.861 73.1716 179.347 76.6863L103.686 152.347C103.577 152.456 103.465 152.563 103.351 152.666C99.9317 155.755 94.7131 155.755 91.294 152.666L90.9584 152.347L50.6533 112.042C47.1386 108.527 47.1386 102.828 50.6533 99.3137C54.1681 95.799 59.8666 95.799 63.3813 99.3137L97.3224 133.255L166.619 63.9584C170.134 60.4436 175.832 60.4437 179.347 63.9584Z' fill='black'/%3E%3Cpath d='M179.347 63.9584L182.882 60.4228L179.347 63.9584ZM179.347 76.6863L182.882 80.2218V80.2218L179.347 76.6863ZM103.686 152.347L107.222 155.882V155.882L103.686 152.347ZM103.351 152.666L106.703 156.376V156.376L103.351 152.666ZM91.294 152.666L87.8491 156.29L87.895 156.333L87.9419 156.376L91.294 152.666ZM90.9584 152.347L87.4229 155.882L87.4676 155.927L87.5135 155.971L90.9584 152.347ZM50.6533 112.042L54.1889 108.506V108.506L50.6533 112.042ZM50.6533 99.3137L47.1178 95.7782L50.6533 99.3137ZM63.3813 99.3137L66.9168 95.7782V95.7782L63.3813 99.3137ZM97.3224 133.255L93.7869 136.79L97.3224 140.326L100.858 136.79L97.3224 133.255ZM166.619 63.9584L170.154 67.4939V67.4939L166.619 63.9584ZM179.347 63.9584L175.811 67.4939C177.373 69.056 177.373 71.5887 175.811 73.1508L179.347 76.6863L182.882 80.2218C188.35 74.7545 188.35 65.8902 182.882 60.4228L179.347 63.9584ZM179.347 76.6863L175.811 73.1508L100.151 148.811L103.686 152.347L107.222 155.882L182.882 80.2218L179.347 76.6863ZM103.686 152.347L100.151 148.811C100.101 148.861 100.05 148.909 99.9986 148.956L103.351 152.666L106.703 156.376C106.879 156.216 107.052 156.052 107.222 155.882L103.686 152.347ZM103.351 152.666L99.9986 148.956C98.4833 150.325 96.1615 150.325 94.6462 148.956L91.294 152.666L87.9419 156.376C93.2647 161.185 101.38 161.185 106.703 156.376L103.351 152.666ZM91.294 152.666L94.739 149.042L94.4034 148.723L90.9584 152.347L87.5135 155.971L87.8491 156.29L91.294 152.666ZM90.9584 152.347L94.494 148.811L54.1889 108.506L50.6533 112.042L47.1178 115.577L87.4229 155.882L90.9584 152.347ZM50.6533 112.042L54.1889 108.506C52.6268 106.944 52.6268 104.411 54.1889 102.849L50.6533 99.3137L47.1178 95.7782C41.6505 101.246 41.6505 110.11 47.1178 115.577L50.6533 112.042ZM50.6533 99.3137L54.1889 102.849C55.751 101.287 58.2836 101.287 59.8457 102.849L63.3813 99.3137L66.9168 95.7782C61.4495 90.3108 52.5852 90.3108 47.1178 95.7782L50.6533 99.3137ZM63.3813 99.3137L59.8457 102.849L93.7869 136.79L97.3224 133.255L100.858 129.719L66.9168 95.7782L63.3813 99.3137ZM97.3224 133.255L100.858 136.79L170.154 67.4939L166.619 63.9584L163.083 60.4228L93.7869 129.719L97.3224 133.255ZM166.619 63.9584L170.154 67.4939C171.716 65.9318 174.249 65.9318 175.811 67.4939L179.347 63.9584L182.882 60.4228C177.415 54.9555 168.551 54.9555 163.083 60.4228L166.619 63.9584Z' fill='black'/%3E%3C/svg%3E%0A");
    mask-size: 100%;
    mask-position: center;
    mask-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

:where(input, textarea, select)[aria-invalid="false"] {
    border-color: #1FBC36;
    background-image: url("data:image/svg+xml,%3Csvg width='160' height='160' viewBox='0 0 160 160' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M80 0C124.183 0 160 35.8172 160 80C160 124.183 124.183 160 80 160C35.8172 160 0 124.183 0 80C0 35.8172 35.8172 0 80 0ZM80 14C43.5492 14 14 43.5492 14 80C14 116.451 43.5492 146 80 146C116.451 146 146 116.451 146 80C146 43.5492 116.451 14 80 14ZM115.56 53.8193C118.293 51.0859 122.725 51.0861 125.459 53.8193C128.193 56.553 128.193 60.9861 125.459 63.7197L71.7197 117.459C71.6343 117.544 71.5467 117.628 71.458 117.708C68.7101 120.19 64.4685 120.107 61.8203 117.459L34.9502 90.5898C32.2165 87.8562 32.2165 83.4231 34.9502 80.6895C37.6839 77.9562 42.1161 77.956 44.8496 80.6895L66.7695 102.61L115.56 53.8193Z' fill='%231FBC36'/%3E%3C/svg%3E%0A");
}

:where(input, textarea, select)[aria-invalid="false"],
:where(input, textarea, select)[aria-invalid="true"] {
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: 1.75rem;
    background-position: center right 0.25rem;
}

:where(select)[aria-invalid="false"],
:where(select)[aria-invalid="true"] {
    padding-right: 1.5rem;
    background-position: center right 1rem;
}

:where(input, textarea, select)[aria-invalid="true"] {
    border-color: #FF453A;
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_82_4)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M400 750C206.7 750 50 593.25 50 400C50 206.75 206.7 50 400 50C593.3 50 750 206.75 750 400C750 593.25 593.3 750 400 750ZM400 0C179.075 0 0 179 0 400C0 621 179.075 800 400 800C620.925 800 800 621 800 400C800 179 620.925 0 400 0ZM542.924 257.001C533.074 247.251 517.15 247.251 507.3 257.001L399.85 364.499L293.95 258.499C284.175 248.749 268.325 248.749 258.6 258.499C248.825 268.249 248.825 284.25 258.6 294L364.5 399.75L257.851 506.5C248.026 516.25 248.026 532.249 257.851 542.249C267.701 551.999 283.65 551.999 293.5 542.249L400.15 435.501L506.05 541.501C515.825 551.251 531.675 551.251 541.425 541.501C551.2 531.751 551.2 515.75 541.425 506L435.5 400.25L542.924 292.749C552.749 282.749 552.749 267.001 542.924 257.001Z' fill='%23FF453A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_82_4'%3E%3Crect width='800' height='800' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    border-radius: 1rem;
}

input[type=radio]:checked {
    border: 0.35rem solid var(--lumo-accent-color);
    background-color: var(--lumo-accent-contrast-color);
}

input[type=color] {
    --lumo-transition: 150ms ease-in-out;
    --lumo-bg-color: var(--lumo-primary-color);
    border: none;
    background-color: var(--lumo-primary-color);
    border-radius: calc(0.375rem * var(--lumo-border-radius-scale));
    padding: 0.35rem;
    cursor: pointer;
    height: 2rem;
    margin: 0;
    transition: box-shadow var(--lumo-transition);
}

input[type=color]::-webkit-color-swatch-wrapper {
    padding: 0;
    margin: 0;
    background-color: var(--lumo-primary-color);

}

input[type=color]::-webkit-color-swatch {
    border: var(--lumo-border-hard);
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

select {
    cursor: pointer;
    position: relative;
}

/* Select wrapper — bezklasowy, działa tylko dla div/span jako bezpośredniego rodzica select */
:is(div, span):has(> select:not([multiple])) {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}

label :is(div, span):has(> select:not([multiple])) {
    width: 100%;
}

:is(div, span):has(> select:not([multiple]))>select:not([multiple]) {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.25rem;
    width: 100%;
}

:is(div, span):has(> select:not([multiple]))::after {
    content: "";
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-color: currentColor;
    mask-image: var(--lumo-select-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    pointer-events: none;
    flex-shrink: 0;
}

/* Przesuń ikonę walidacji select żeby nie nakładała się na strzałkę */
:is(div, span):has(> select:not([multiple]))>select:not([multiple])[aria-invalid="false"],
:is(div, span):has(> select:not([multiple]))>select:not([multiple])[aria-invalid="true"] {
    padding-right: 3.75rem;
    background-position: center right 2rem;
}

select[multiple] {
    height: max-content;
    max-height: 300px;
    cursor: default;
}

label {
    font-size: 0.95rem;
    font-weight: bold;
    width: 100%;
    display: block;
}

label>*,
label:has(input[type=checkbox], input[type=radio]) {
    font-weight: normal !important;
}

label:has(small) *:where(input, textarea, select) {
    margin-bottom: 0;
}

:where(input[type=date],
    input[type=datetime-local],
    input[type=month],
    input[type=week],
    input[type=time]) {
    appearance: none;
    width: 100%;
    background-clip: padding-box;
    display: block;
}

label *:where(input[type=date],
    input[type=datetime-local],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    textarea, select) {
    width: 100%;
}

label[aria-required="true"]::before {
    content: "*";
    margin-right: 0.25rem;
    color: red;
    font-weight: bold;
}

input:disabled,
textarea:disabled {
    cursor: default;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.075);
    color: rgb(from var(--lumo-text-color) r g b / 0.85);
    opacity: 0.85;
}

input[role="switch"]:disabled,
input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

input[role="switch"]:disabled {
    opacity: 0.7;
}

/*
 * Range slider
 */
input[type=range]::-webkit-slider-thumb {
    cursor: pointer;
}

input[type=range] {
    width: 100%;
}

label:has([aria-invalid="true"])>small {
    color: #FF453A;
}


label:has([aria-invalid="false"])>small {
    color: #1FBC36;
}

input[role="switch"] {
    --lumo-transition: 150ms ease-in-out;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--lumo-bg-color);
    border-radius: 2rem;
    padding: 0;
    margin: 0;
    width: 3.1rem;
    height: 1.8rem;
    cursor: pointer;
    border: var(--lumo-border-hard);
    border-width: 1px;
    transition: background-color var(--lumo-transition), background-position var(--lumo-transition)
        /*, box-shadow var(--lumo-transition)*/
    ;
}

input[role="switch"]::before {
    content: "";
    background-color: rgb(from var(--lumo-text-color) r g b / 0.45);
    display: block;
    mask-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 5C22.0751 5 27 9.92487 27 16C27 22.0751 22.0751 27 16 27C9.92487 27 5 22.0751 5 16C5 9.92487 9.92487 5 16 5ZM20.5098 11.3174C20.0868 10.8945 19.4016 10.8947 18.9785 11.3174L15.9141 14.3818L12.8486 11.3174C12.4255 10.8948 11.7403 10.8945 11.3174 11.3174C10.8945 11.7403 10.8948 12.4255 11.3174 12.8486L14.3818 15.9141L11.3174 18.9785C10.8948 19.4016 10.8946 20.0868 11.3174 20.5098C11.7403 20.9327 12.4255 20.9324 12.8486 20.5098L15.9141 17.4453L18.9785 20.5098C19.4016 20.9325 20.0868 20.9327 20.5098 20.5098C20.9327 20.0868 20.9325 19.4016 20.5098 18.9785L17.4453 15.9141L20.5098 12.8486C20.9325 12.4255 20.9327 11.7403 20.5098 11.3174Z' fill='white'/%3E%3C/svg%3E%0A");
    height: 100%;
    width: 100%;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center left;
    transition: background-color var(--lumo-transition), mask-position var(--lumo-transition)
        /*, box-shadow var(--lumo-transition)*/
    ;
}

input[role="switch"]:checked {
    border-color: var(--lumo-accent-color);
}

input[role="switch"]:checked::before {
    background-color: var(--lumo-accent-contrast-color);
    mask-position: center right;
    mask-image: url("data:image/svg+xml,%3Csvg width='28' height='28' viewBox='0 0 28 28' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 3C20.0751 3 25 7.92487 25 14C25 20.0751 20.0751 25 14 25C7.92487 25 3 20.0751 3 14C3 7.92487 7.92487 3 14 3ZM20.0205 9.29297C19.63 8.90248 18.997 8.90248 18.6064 9.29297L11.5361 16.3633L8.70703 13.5352C8.31651 13.1448 7.68345 13.1447 7.29297 13.5352C6.9025 13.9256 6.90259 14.5587 7.29297 14.9492L10.8281 18.4854C10.8525 18.5097 10.8782 18.5324 10.9043 18.5537C11.2971 18.8738 11.8772 18.8513 12.2432 18.4854L20.0205 10.707C20.411 10.3165 20.4109 9.68349 20.0205 9.29297Z' fill='white'/%3E%3C/svg%3E%0A");
}

@media screen and (max-width: 1024px) {
    input[role="switch"] {
        width: 3.5rem;
        height: 1.95rem;
    }

    input[type="checkbox"]:not([role="switch"]),
    input[type="radio"] {
        width: 1.5rem;
        height: 1.5rem;
    }
}

input[role="switch"]:checked {
    background-color: var(--lumo-accent-color);
    background-position: center right;
}

input[type="file"]::-webkit-file-upload-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/*
 * Table
 */
table {
    min-width: 100%;
    border-collapse: collapse;
    text-align: left;
    padding: 0;
    margin: 0;
    margin-bottom: 1rem;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale)) calc(0.5rem * var(--lumo-border-radius-scale)) 0 0;
    overflow: hidden;
}

table.striped tr:nth-child(even) td,
table.striped tr:nth-child(even) th {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.035);
}

table thead {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.05);
}

table thead th {
    border-bottom: 2px solid rgb(from var(--lumo-text-color) r g b / 0.15);
    white-space: nowrap;
}

table tfoot th,
table tfoot td {
    border-top: 2px solid rgb(from var(--lumo-text-color) r g b / 0.15);
    border-bottom: none;
    background-color: var(--lumo-bg-color) !important;
}

table th,
table td {
    padding: 0.35rem 0.5rem;
}

table td,
table tbody tr th {
    border-bottom: 1px solid rgb(from var(--lumo-text-color) r g b / 0.1);
}

.overflow-auto {
    overflow: auto !important;
    margin-bottom: 1rem !important;
}

.overflow-auto>table {
    width: max-content;
    max-width: none;
    margin-bottom: 0;
    border-radius: 0;
    overflow: initial;
}

.overflow-auto>table>tbody>tr:last-child>td,
.overflow-auto>table>tbody>tr:last-child>th {
    border-bottom: none;
}

.overflow-auto:has(table) {
    border: var(--lumo-border-default);
    padding: 0;
    margin: 0;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
}

main>.container #page,
section,
section article {
    min-width: 0;
}

/*
 * Breadcrumb
 */
nav.breadcrumb>ol {
    max-width: 100%;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    height: unset;
    gap: calc(var(--lumo-spacing) * 0.35);
    padding: 0;
    margin: 0;
    list-style: none;
}

nav.breadcrumb>ol li:not(:last-child)::after {
    content: var(--lumo-breadcrumb-divider);
    margin-left: calc(var(--lumo-spacing) * 0.35);
}

nav.breadcrumb>ol li:last-child a {
    cursor: default;
    pointer-events: none;
    color: rgb(from var(--lumo-text-color) r g b / 0.75) !important;
    text-decoration: none !important;
}

/*
 * Fieldset
 */
fieldset {
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    row-gap: calc(var(--lumo-spacing) * 0.5);
    margin-bottom: calc(var(--lumo-spacing) * 0.5);
}

fieldset[role=group] {
    display: flex;
    flex-direction: row;
    gap: 0;
}

fieldset[role=group] input:not([type=submit], [type=reset]),
fieldset[role=group] select {
    width: 100%;
    margin: 0;
    height: calc(2.35rem * 1.1);
}

fieldset[role=group]>*:first-child {
    border-radius: calc(0.375rem * var(--lumo-border-radius-scale)) 0 0 calc(0.375rem * var(--lumo-border-radius-scale));
}

fieldset[role=group]>*:last-child {
    border-radius: 0 calc(0.375rem * var(--lumo-border-radius-scale)) calc(0.375rem * var(--lumo-border-radius-scale)) 0;
}

fieldset[role=group]>* {
    border-radius: 0;
}

/*
 * Label
 */
label:has([type=checkbox], [type=radio]) {
    display: flex;
    align-items: center;
    gap: calc(var(--lumo-spacing) * 0.5);
}

/*
 * Details (accordion)
 */

details:not(:has(menu)) {
    border-top: var(--lumo-border-default);
    border-bottom: var(--lumo-border-default);
}

details:not(:has(menu)) summary {
    display: flex;
    align-items: center;
    justify-content: left;
    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
    border-radius: calc(0.75rem * var(--lumo-border-radius-scale));
    gap: 0.5rem;
    font-size: 1.15rem;
}

details:not(:has(menu)) summary:not([role="button"]):hover {
    text-decoration: underline;
}

details:not(:has(menu)) summary:not([role="button"]):hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.05);
}

details:not(:has(menu)) summary:not([role="button"]) {
    --lumo-transition: 75ms linear;
    background-color: transparent;
    padding: 0.5rem 0.75rem;
    outline: 3px solid transparent;
    outline-offset: -2px;
    transition: box-shadow var(--lumo-transition);
}

details:not(:has(menu)) summary::before {
    content: "";
    width: 1.25rem;
    height: 1.25rem;
    background-image: var(--lumo-accordion-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(0);
    transition: transform var(--lumo-transition);
}

details:not(:has(menu))[open] summary {
    margin-bottom: 0.5rem;
    font-weight: bold;
}

details:not(:has(menu))[open] summary::before {
    transform: rotate(90deg);
}

details:not(:has(menu)) summary:not([role="button"]):focus {
    outline: 2px solid var(--lumo-accent-color);
}

details:not(:has(menu)) {
    border: var(--lumo-border-default);
    border-radius: calc(0.75rem * var(--lumo-border-radius-scale));
    margin-block: 0.5rem;
}


details:not(:has(menu)) summary::before {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.125);
    border-radius: 2rem;
    width: 2rem;
    height: 2rem;
    background-size: 1.25rem;
}

details:not(:has(menu))[open] {
    padding: 1.5rem;
    padding-bottom: 1rem;
    padding-top: 0;
}

details:not(:has(menu))[open] summary {
    width: calc(100% + 3rem);
    max-width: calc(100% + 3rem);
    margin-left: -1.5rem;
}

/*
 * Tooltip
 */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:not(:hover)::after {
    transition: opacity 0.15s ease, bottom 0.15s ease;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    font-size: 0.8rem;
    background-color: var(--lumo-text-dark);
    color: var(--lumo-text-light);
    padding: 0.15rem 0.35rem;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    border: 1px solid rgb(from var(--lumo-text-color) r g b / 0.25);
    box-shadow: var(--lumo-shadow-s);
    transform: translate(-50%, 0);
    font-weight: normal;
    filter: brightness(1) !important;
    left: 50%;
    bottom: 100%;
    position: absolute;
    width: max-content;
    max-width: 250px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, bottom 0.15s ease;
    z-index: 99999;
}

[data-tooltip].placement-top::after {
    left: 50%;
    bottom: 100%;
    top: auto;
    right: auto;
    transform: translate(-50%, -0.3rem);
}

[data-tooltip].placement-bottom::after {
    left: 50%;
    top: 100%;
    bottom: auto;
    right: auto;
    transform: translate(-50%, 0.3rem);
}

[data-tooltip].placement-left::after {
    right: 100%;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-0.3rem, -50%);
}

[data-tooltip].placement-right::after {
    left: 100%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(0.3rem, -50%);
}

@keyframes tooltip_fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
 * Code/pre
 */
code {
    background-color: rgb(17, 15, 22);
    color: var(--lumo-text-light);
    box-shadow: var(--lumo-shadow-s);
    padding: 0.3rem 0.5rem;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
}

pre {
    background-color: rgb(17, 15, 22);
    color: var(--lumo-text-light);
    box-shadow: var(--lumo-shadow-s);
    padding: 0.45rem 0.65rem;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    overflow-x: auto;
}

code,
pre {
    font-size: 0.9rem;
}

pre>code {
    box-shadow: none !important;
}

/*
 * kbd
 */
kbd {
    padding: 0.1rem 0.35rem;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.05);
    border: 1px solid rgba(from var(--lumo-text-color) r g b / 0.2);
    border-bottom: 3px solid rgba(from var(--lumo-text-color) r g b / 0.2);
    font-weight: bold;
    border-radius: 0.25rem;
    margin: 0;
    font-size: 1rem;
    display: inline-block;
}

/*
 * blockqoute
 */
blockquote {
    border-left: 4px solid rgb(from var(--lumo-text-color) r g b / 0.1);
    padding: 1rem;
    margin: 0;
}

blockquote footer {
    margin: 0;
    background-color: transparent;
}

/*
 * Dialog
 */
dialog {
    width: 100vw;
    height: 100vh;
    max-width: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    opacity: 1;
    z-index: 99999;
    border: none;
    background-color: var(--lumo-modal-bg-color);
    display: none;
}

dialog::backdrop {
    background-color: #fff0;
}

dialog[open] {
    display: flex;
}

dialog>section {
    background-color: var(--lumo-bg-color);
    min-width: 30vw;
    max-width: 50vw;
    width: 30vw;
    max-height: 80vh;
    display: block;
    border-radius: calc(0.75rem * var(--lumo-border-radius-scale));
    box-shadow: var(--lumo-shadow-m);
    overflow-y: auto;
    padding: 1rem;
    color: var(--lumo-text-color);
}

dialog>section button.close {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    padding: 0;
    border: none;
    color: var(--lumo-text-color);
}

dialog>section button.close:hover {
    background-color: rgb(from var(--lumo-primary-color) r g b / 0.5);
}

dialog>section button.close::after {
    content: "";
    background-image: var(--lumo-close-icon);
    background-size: contain;
    width: 75%;
    height: 75%;
    background-repeat: no-repeat;
    background-position: center;
}

dialog>section>header {
    padding: 0.5rem 1rem;
    padding-right: 0.5rem;
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.75rem !important;
}

dialog>section>footer,
dialog>section>form:last-child>footer {
    padding: 0.5rem;
    margin-top: 0.75rem !important;
}

dialog>section>header,
dialog>section>footer,
dialog>section>form:last-child>footer {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.035);
    box-shadow: none;
    border: none;
    margin: -1rem;
    max-width: unset;
    width: calc(100% + 2rem);
}

dialog>section>form:last-child>footer {
    margin-bottom: -1.5rem;
}

dialog>section>footer,
dialog>section>form:last-child>footer {
    display: flex;
    justify-content: right;
    gap: 0.5rem;
}

dialog>section.width-s {
    min-width: 20vw;
    max-width: 30vw;
    width: 20vw;
    max-height: 50vh;
}

dialog>section.width-l {
    min-width: 40vw;
    max-width: 55vw;
    width: 40vw;
    max-height: 60vh;
}

dialog>section.width-xl {
    min-width: 60vw;
    max-width: 80vw;
    width: 60vw;
    max-height: 70vh;
}

dialog>section>:where(h1, h2, h3, h4, h5, h6):first-child {
    padding-top: 0;
    margin-top: 0;
}

@media screen and (max-width: 1024px) {
    dialog>section {
        min-width: 95vw !important;
        max-width: 95vw !important;
        width: 95vw !important;
    }
}

/*
 * Tabs
 */

article.tabs [role="tablist"] {
    display: flex;
    padding: 0;
    margin: 0 0 1rem;
    list-style: none;
    overflow-x: auto;
    padding: 0.25rem;
    border-radius: calc(0.75rem * var(--lumo-border-radius-scale));
    gap: 0.25rem;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.1);
}

article.tabs [role="tablist"].fit-content {
    width: max-content;
    max-width: max-content;
}

article.tabs [role="tablist"].style-accent.fit-content {
    width: 100%;
    max-width: unset;
}

article.tabs [role="tablist"].style-accent.fit-content>button[role="tab"] {
    width: max-content;
    max-width: max-content;
}

article.tabs [role="tablist"]>button[role="tab"] {
    background-color: transparent;
    color: var(--lumo-text-color);
    border: none;
    width: max-content;
    font-weight: normal;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    border-bottom: 2px solid transparent;
    padding: 0.45rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    transition: 100ms box-shadow linear;
    flex: 1;
}

article.tabs [role="tablist"].size-small>button[role="tab"] {
    background-color: transparent;
    color: var(--lumo-text-color);
    border: none;
    width: max-content;
    font-weight: normal;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    border-bottom: 2px solid transparent;
    padding: 0.25rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    height: auto;
    min-height: unset;
    white-space: nowrap;
    transition: 100ms box-shadow linear;
    flex: 1;
}

article.tabs [role="tablist"]>button[role="tab"]:not([aria-selected="true"]) {
    opacity: 0.7;
}

article.tabs [role="tablist"]>button[role="tab"]:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.15);
}

article.tabs [role="tablist"]>button[role="tab"][aria-selected="true"] {
    background-color: var(--lumo-tab-accent);
    color: var(--lumo-tab-text);
    font-weight: bold;
    box-shadow: var(--lumo-shadow-s);
}

article.tabs [role="tablist"].style-accent {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border-bottom: var(--lumo-border-light);
}

article.tabs [role="tablist"].style-accent>button[role="tab"] {
    background-color: transparent;
    box-shadow: none;
    color: var(--lumo-text-color);
    border-radius: 0.25rem 0.25rem 0 0;
    overflow: hidden;
    border: none;
}

article.tabs [role="tablist"].style-accent>button[role="tab"]:hover {
    background-color: rgb(from var(--lumo-text-color) r g b / 0.1);
}

article.tabs [role="tablist"].style-accent>button[role="tab"][aria-selected="true"]::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0px;
    border-radius: 3px 3px 0 0;
    background-color: var(--lumo-accent-color);
}

article.tabs .tabs-content>div[hidden] {
    display: none;
}

/*
 * Form
 */
form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

form fieldset {
    margin: 0 0 0.5rem 0;
}

form footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background-color: transparent;
    margin: 0;
}

/*
 * Alert
 */
[role="alert"] {
    --lumo-bg-color: rgba(from var(--lumo-text-color) r g b / 0.1);
    display: block;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 17V16.9929M12 14.8571C12 11.6429 15 12.3571 15 9.85714C15 8.27919 13.6568 7 12 7C10.6567 7 9.51961 7.84083 9.13733 9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z' stroke='%23000000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 1.75rem;
    background-position: left 0.5rem center;
    background-repeat: no-repeat;
    padding: 0.25rem;
    padding-left: 2.75rem;
    margin: 0.5rem 0;
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    background-color: var(--lumo-bg-color);
    color: var(--lumo-text-color);
    border: 1px solid var(--lumo-bg-color);
}

[role="alert"]>*:where(h1, h2, h3, h4, h5, h6) {
    margin: 0.25rem 0;
}

[role="alert"][aria-label="error"] {
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M533.333 266.667L266.667 533.333M266.667 266.667L533.333 533.333M700 400C700 565.687 565.687 700 400 700C234.315 700 100 565.687 100 400C100 234.315 234.315 100 400 100C565.687 100 700 234.315 700 400Z' stroke='%23FF453A' stroke-width='50' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

[role="alert"][aria-label="warning"] {
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400 566.333V566.667M400 233.333V466.667M700 400C700 565.687 565.687 700 400 700C234.315 700 100 565.687 100 400C100 234.315 234.315 100 400 100C565.687 100 700 234.315 700 400Z' stroke='%23FAC131' stroke-width='50' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

[role="alert"][aria-label="confirmation"] {
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M566.667 300L333.333 533.333L233.331 433.333M700 400C700 565.687 565.687 700 400 700C234.315 700 100 565.687 100 400C100 234.315 234.315 100 400 100C565.687 100 700 234.315 700 400Z' stroke='%231FBC36' stroke-width='50' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

[role="alert"][aria-label="information"] {
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M400 233.667V233.334M400 566.667V333.333M700 400C700 565.687 565.687 700 400 700C234.315 700 100 565.687 100 400C100 234.315 234.315 100 400 100C565.687 100 700 234.315 700 400Z' stroke='%2314BDDA' stroke-width='50' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

[role="alert"][aria-label="error"] {
    --lumo-bg-color: rgb(from var(--lumo-color-red) r g b / 0.18);
}

[role="alert"][aria-label="warning"] {
    --lumo-bg-color: rgb(from var(--lumo-color-orange) r g b / 0.1);
}

[role="alert"][aria-label="confirmation"] {
    --lumo-bg-color: rgb(from var(--lumo-color-green) r g b / 0.16);
}

[role="alert"][aria-label="information"] {
    --lumo-bg-color: rgb(from var(--lumo-color-cyan) r g b / 0.18);
}


/*
 * Slider
 */
[role="slider"] {
    width: 100%;
    margin: 1rem 0;
    padding-bottom: 1.5rem;
    overflow-x: hidden;
}

[role="slider"] [data-prev],
[role="slider"] [data-next] {
    width: 2.5rem !important;
    height: 2.5rem !important;
    padding: 0;
    border: none;
    border-radius: calc(0.375rem * var(--lumo-border-radius-scale));
    background-color: var(--lumo-primary-color);
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Arrow / Arrow_Right_SM'%3E%3Cpath id='Vector' d='M7 12H17M17 12L13 8M17 12L13 16' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: inherit;
}

[role="slider"]>[role="group"] {
    z-index: inherit;
    padding: 0;
    margin: 0;
    display: flex;
}

[role="slider"]>ol[role="tablist"] {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: -1rem;
}

[role="slider"] [data-prev] {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Arrow / Arrow_Left_SM'%3E%3Cpath id='Vector' d='M17 12H7M7 12L11 16M7 12L11 8' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
    left: 0.5rem;
}

[role="slider"] [data-prev]:hover,
[role="slider"] [data-next]:hover {
    outline: 2px solid var(--lumo-accent-color) !important;
    outline-offset: -2px;
}

[role="slider"] [data-prev]:disabled,
[role="slider"] [data-next]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[role="slider"]>[role="group"]::-webkit-scrollbar,
[role="slider"]::-webkit-scrollbar {
    display: none;
}

[role="slider"]>[role="group"]>* {
    width: 100%;
    flex: 0 0 100%;
}

[role="slider"]>ol[role="tablist"] {
    list-style: none;
    position: absolute;
    bottom: 0rem;
    padding: 0;
    margin: 0;
}

[role="slider"]>ol[role="tablist"]>li>button {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    min-height: 0.75rem;
    padding: 0;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.25);
    border: none;
    border-radius: 1rem;
    outline-offset: 2px;
    outline: 1px solid transparent;
}

[role="slider"]>ol[role="tablist"]>li>button:focus {
    outline: 2px solid var(--lumo-accent-color);
    border: none !important;
    box-shadow: none !important;
}

[role="slider"]>ol[role="tablist"]>li>button[aria-selected="true"] {
    background-color: var(--lumo-primary-color);
}

[role="slider"]>figure[role="group"]>*:not(img) {
    padding: 0 3.5rem;
}

/*
 * ins/del
 */
ins,
del,
mark {
    padding: 0.15rem 0.25rem;
    border-radius: calc(0.25rem * var(--lumo-border-radius-scale));
}

ins {
    background-color: rgb(from #1FBC36 r g b / 0.2);
    text-decoration: none;
}

del {
    background-color: rgb(from #FF453A r g b / 0.15);
    color: #FF453A;
}

mark {
    background-color: rgb(from #fac131 r g b / 0.5);
    color: var(--lumo-text-color);
}

/*
 * Loading state 
 */
[aria-busy="true"]::before {
    content: "";
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg stroke='rgb(0,0,0)' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dasharray' dur='1.5s' calcMode='spline' values='0 150;42 150;42 150;42 150' keyTimes='0;0.475;0.95;1' keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' dur='1.5s' calcMode='spline' values='0;-16;-59;-59' keyTimes='0;0.475;0.95;1' keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1' repeatCount='indefinite'/%3E%3C/circle%3E%3CanimateTransform attributeName='transform' type='rotate' dur='2s' values='0 12 12;360 12 12' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg stroke='rgb(0,0,0)' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3Canimate attributeName='stroke-dasharray' dur='1.5s' calcMode='spline' values='0 150;42 150;42 150;42 150' keyTimes='0;0.475;0.95;1' keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' dur='1.5s' calcMode='spline' values='0;-16;-59;-59' keyTimes='0;0.475;0.95;1' keySplines='0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1' repeatCount='indefinite'/%3E%3C/circle%3E%3CanimateTransform attributeName='transform' type='rotate' dur='2s' values='0 12 12;360 12 12' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

[aria-busy="true"]:is(article, section, div)::before {
    width: 2rem;
    height: 2rem;
}

[aria-busy="true"]:is(h1, h2, h3, h4, h5, h6, p)::before {
    width: 1em;
    height: 1em;
    margin-right: 0.5em;
}

[aria-busy="true"]:is(article, section, div) {
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

[aria-busy="true"]:is([role="button"].secondary:not(:disabled), button.secondary:not(:disabled))::before {
    filter: brightness(0) invert(1);
}

/*
 * Badge
 */
span[role="note"] {
    font-size: 0.8em;
    background-color: rgb(from var(--lumo-text-color) r g b / 0.2);
    border-radius: calc(0.5rem * var(--lumo-border-radius-scale));
    padding: 0.15rem 0.35rem;
    font-weight: bold;
    user-select: none;
    -moz-user-select: none;
    margin-inline: 0.35em;
    display: inline-flex;
    height: min-content !important;
}

span[role="note"].style-primary {
    color: var(--lumo-primary-button-text);
    background-color: var(--lumo-primary-color);
}

span[role="note"].style-secondary {
    color: var(--lumo-secondary-button-text);
    background-color: var(--lumo-secondary-color);
}