/* ====================================================== */
/* © HENDRIK ADONS
/* General styling.
/* ====================================================== */

:root {
    /* COLORS */
    --yellow: #F8E0A1;  --yellow-rgb: 248,224,161;
    --orange: #F89252;  --orange-rgb: 248,146,82;
    --red: #e94444;  --red-rgb: 233, 68, 68;
    --dred: #ba3636;  --dred-rgb: 186, 54, 54;
    --lred: #F8D4C6;  --lred-rgb: 248,212,198;
    --purple: #6E759D;  --purple-rgb: 110,117,157;
    --blue: #1460F8;  --blue-rgb: 20,96,248;
    --lblue: #9DC5F8;  --lblue-rgb: 157,197,248;
    --dark: #0f0f11;  --dark-rgb: 15,15,17;
    --light: #f5f5f7;  --light-rgb: 245,245,247;
    --green: #83df8f;  --green-rgb: 131,223,143;    

    /* ELEMENT COLORS (light, dark version below) */
    --color\:primary: black;  --color\:primary-rgb: 0,0,0;
    --color\:secondary: grey;  --color\:secondary-rgb: 128,128,128;
    --color\:primary-reverse: white;  --color\:primary-reverse-rgb: 255,255,255;
    --color\:background: var(--light);  --color\:background-rgb: var(--light-rgb);
    --color\:background-primary: var(--color\:background);  --color\:background-primary-rgb: var(--color\:background-rgb);
    --color\:background-secondary: white;  --color\:background-secondary-rgb: 255,255,255;
    --color\:accent: var(--blue);  --color\:accent-rgb: var(--blue-rgb);
    --color\:accent-fg: white;  --color\:accent-fg-rgb: 255,255,255;
    --color\:hover: rgba(0,0,0,0.05);

    /* GRADIENTS */
    --gradient1: linear-gradient(318.6deg, #DCDDEB, #FEFDFF);

    /* FONT */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-family\:mono: 'Fira Code', 'JetBrains Mono', 'Inconsolata', 'Monaco', 'Consolas', 'Lucida Console', 'Courier New', monospace;
    font-family: var(--font-family); font-size: 1rem; letter-spacing: -0.01em; 
    -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;
    accent-color: var(--color\:accent);

    /* SIZES */
    --header-height: calc(3.05rem + .4rem + 2px); --footer-height: 0;
    --max-width\:large: 100rem; --max-width\:small: 68rem; --max-width\:xsmall: 48rem; --scrollbar-width: 6pt;

    /* PADDING */
    --padding: 16px;
    --save-padding-left: max(env(safe-area-inset-left,0px),var(--padding));
    --save-padding-right: max(env(safe-area-inset-right,0px),var(--padding));
    --save-padding-top: max(env(safe-area-inset-top,0px),var(--padding));
    --save-padding-bottom: max(env(safe-area-inset-bottom,0px),var(--padding));

    /* OTHER DEFAULT VALUES */
    --box-radius: .7rem;
    --border: 1px solid rgba(128,128,128,0.2);
    --border\:thin: .5px solid rgb(226, 226, 226);
    --shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
}
/* [DARK] */ :root:has(body.dark), .dark {
    --color\:primary: white;  --color\:primary-rgb: 255,255,255;
    --color\:primary-reverse: black;  --color\:primary-reverse-rgb: 0,0,0;
    --color\:background: var(--dark);  --color\:background-rgb: var(--dark-rgb);
    --color\:background-secondary: black;  --color\:background-secondary-rgb: 0,0,0;
    --color\:hover: rgba(255,255,255,0.12);
    --border: 1px solid rgba(128,128,128,0.45);
    --border\:thin: .5px solid rgb(52, 52, 52);
}
@media (max-width: 768px) {
    :root { --padding: 11px; }
}



/* ===================== */
/* DEFAULT TAGS
/* ===================== */
/* #region */

html, body {
    margin: 0; padding: 0;
    background-color: var(--color\:background);
}
h1 {
    font-size: clamp(2rem,12vw,4rem);
    font-weight: 800;
    line-height: 1.1em;
    margin: 0; padding: 0;
}
h2 {
    font-size: clamp(1.7rem,10vw,3.5rem);
    font-weight: 800;
    line-height: 1.1em;
    margin: 0; padding: 0;
}
h3 {
    font-size: 2rem;
    margin: 0; padding: 0;
}
h1, h2, h3, h4 {
    color: var(--color\:primary);
    text-wrap: balance;
}
p {
    --font-size: 1.0rem;
    font-size: var(--font-size); font-weight: 410;
    line-height: calc(var(--font-size) * 1.5);
    color: var(--color\:primary);
    margin: 0; padding: 0;
    text-wrap: pretty;
}
a {
    color: var(--color\:primary);
    text-decoration: none;
}
select {
    font-size: inherit;
    font-weight: inherit;
}
input {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

/* Scrollbar stylings */
* {
    --scrollbar-color: transparent;
    &.scrollbar\:hover:hover { --scrollbar-color: rgba(var(--color\:primary-rgb),.3); }
    &.scrollbar\:scrolling.scrolling { --scrollbar-color: rgba(var(--color\:primary-rgb),.3); }
    &::-webkit-scrollbar { display: none; }
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar\:hover, .scrollbar\:scrolling {
    &::-webkit-scrollbar {
        appearance: none;
        width: var(--scrollbar-width);
        display: initial;
        -ms-overflow-style: initial;
        scrollbar-width: var(--scrollbar-width);
    }
    &::-webkit-scrollbar-track, &::-webkit-scrollbar-track-piece {
        appearance: none;
        background-color: transparent;
        border: none;
    }
    &::-webkit-scrollbar-thumb {
        appearance: none;
        background-color: var(--scrollbar-color);
        border-radius: 1.5pt;
    }
    &::-webkit-scrollbar-thumb:hover {
        appearance: none;
        background-color: rgba(var(--color\:primary-rgb),.3); 
    }
    &::-webkit-scrollbar-button {
        appearance: none;
        display: none;
    }
    /* Paste this code at the bottom of files with scrollbar:scrolling elements
    <script>
        let timer = null;
        document.querySelectorAll("."+CSS.escape("scrollbar:scrolling")).forEach(element => {
            element.addEventListener('scroll', (ev) => {
                if (timer === null) { ev.target.classList.add("scrolling"); }
                if (timer !== null) { clearTimeout(timer); timer=null; }
                timer = setTimeout(() => { ev.target.classList.remove("scrolling"); timer=null; }, 1000);
            }, false);
        });
    </script> */
}

/* #endregion */



/* ===================== */
/* ANIMATE
/* ===================== */
/* #region */

@keyframes shake {
    15% { transform: translate3d(0, 0, 0); }
    90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}
.apply-shake {
    animation-name: shake;
    animation-timing-function: cubic-bezier(.36,.07,.19,.97);
    animation-fill-mode: both;
    animation-duration: 0.82s;
}
.prevent-animation {
    animation-duration: 0s !important;
}

/* #endregion */


/* ===================== */
/* BACKGROUNDS & BACKDROP
/* ===================== */
/* #region */

.background-gradient1 { background-image: var(--gradient1); }
.background-light { background-color: var(--light); }
.background-dark { background-color: var(--dark); }
.background-purple { background-color: var(--purple); }
.background-white { background-color: white; }
.background-black { background-color: black; }
/* [DARK] */
.dark\:background-light:is(.dark *, .dark) { background-color: var(--light); }
.dark\:background-dark:is(.dark *, .dark) { background-color: var(--dark); }
.dark\:background-purple:is(.dark *, .dark) { background-color: var(--purple); }
.dark\:background-white:is(.dark *, .dark) { background-color: white; }
.dark\:background-black:is(.dark *, .dark) { background-color: black; }

.backdrop-on {
    -webkit-backdrop-filter: blur(32px) saturate(172%) contrast(120%);
    backdrop-filter: blur(32px) saturate(172%) contrast(120%);
}
.backdrop-normal {
    -webkit-backdrop-filter: blur(32px) saturate(172%);
    backdrop-filter: blur(32px) saturate(172%);
}
.backdrop-off {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* #endregion */


/* ===================== */
/* BLOCKS
/* ===================== */
/* #region */

.header-spacer {
    height: var(--header-height);
} .header-spacer\:gradient {
    height: var(--header-height); width: var(--dvw);
    background-image: linear-gradient(var(--color\:background),transparent);
} .header-spacer\:gradient-sticky {
    height: var(--header-height); width: var(--dvw);
    background-image: linear-gradient(var(--color\:background),transparent);
    z-index: 998;position: sticky;top:0;
} .header-spacer\:gradient-fixed {
    height: var(--header-height); width: var(--dvw);
    background-image: linear-gradient(var(--color\:background),transparent);
    z-index: 998;position: fixed;top:0;
}
.uftw-block { /* user friendly text width */
    max-width: 45ch;
}
.maxw-block\:large, .maxw-block\:small, .maxw-block\:xsmall { /* max width */
    width: var(--dvw);  margin-left: auto; margin-right: auto;
}
.maxw-block\:large { max-width: min(var(--max-width\:large),calc(var(--dvw) - var(--save-padding-left) - var(--save-padding-right))); }
.maxw-block\:small { max-width: min(var(--max-width\:small),calc(var(--dvw) - var(--save-padding-left) - var(--save-padding-right))); }
.maxw-block\:xsmall { max-width: min(var(--max-width\:xsmall),calc(var(--dvw) - var(--save-padding-left) - var(--save-padding-right))); }

/* #endregion */


/* ===================== */
/* BUTTONS
/* ===================== */
/* #region */

.button {
    --button-color-back: transparent;
    --button-color-front: var(--color\:primary);
    border-radius: 0.5rem;
    height: calc(1.3rem + 2*0.375rem); aspect-ratio: 1/1;
    display: flex; cursor: pointer; align-items: center; justify-content: center; gap: 0.5rem;
    transition: background-color 200ms ease, color 200ms ease;
    background-color: var(--button-color-back);
    color: var(--button-color-front);
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    &.show-border { border: var(--border); }
    &.show-shadow { box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1); }
}
.button.button-text {
    aspect-ratio: unset;
    padding-inline: 0.9em;
    font-size: small; font-weight: 500;
    word-wrap: none; text-wrap: nowrap;
    & > span {
        display: inline-block !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.button.button-text-image {
    aspect-ratio: unset;
    padding-inline: 0.9em; padding-left: .375rem;
    font-size: small; font-weight: 500;
    word-wrap: none; text-wrap: nowrap;
    &.show-border { padding-left: calc(.375rem - 1px); }
    & > span {
        display: inline-block !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
.button.button-search {
    font-size: small; font-weight: 500;
    width: 17ch;
}
.button.button-search > input {
    aspect-ratio: unset;
    padding-inline: 0.5em;
    font-size: inherit; font-weight: inherit;
    border: none; background-color: transparent;
    height: 100%; border-radius: inherit;
    padding-left: 1.9rem;
    width: 100%;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(128,128,128)" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50"><path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"></path></svg>');
    background-repeat: no-repeat;
    background-position: left 0.5rem top 50%;
    background-size: 1rem auto;
}
.button.button-search > input::placeholder {
    color: rgb(128,128,128);
}
.button > img {
    height: 1.3rem; aspect-ratio: 1/1; opacity: 0.8;
    object-fit: contain;
    transition: opacity 200ms ease;
    -webkit-user-drag: none;
    -moz-window-dragging: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.button:hover {
    background-color: var(--color\:hover);
    & > img { opacity: 1; }
}
.button.disabled, .disabled .button {
    background-color: transparent;
    box-shadow: none !important;
    pointer-events: none !important;
    opacity: 0.66;
}
.button.high-contrast {
    background-color: var(--color\:primary);
    color: var(--color\:background-secondary);
    font-weight: bold;
    &:hover {
        background-color: var(--color\:accent);
        color: var(--color\:accent-fg);
    }
}
.button.high-contrast-reverse {
    background-color: var(--color\:background-secondary);
    color: var(--color\:primary);
    font-weight: bold;
    &:hover {
        background-color: var(--color\:accent);
        color: var(--color\:accent-fg);
    }
}
.button.custom-colors {
    background-color: var(--bg);
    color: var(--fg);
    font-weight: bold;
    &:hover {
        background-color: var(--hbg);
        color: var(--hfg);
    }
}
.button.destructive {
    background-color: var(--red);
    color: white;
    font-weight: bold;
    &:hover {
        background-color: var(--dred);
    }
}
.button.processing {
    background-color: transparent;
    color: transparent;
    box-shadow: none !important;
    position: relative;
    opacity: 0.66;
    pointer-events: none;
    & > * { opacity: 0; }
    &::before {
        content: "";
        position: absolute;
        height: 1rem; width: 1rem;
        flex-shrink: 0; flex-grow: 0;
        border-radius: 50%;
        border: 2px solid var(--color\:primary);
        border-top-color: transparent !important;
        animation: spin 500ms linear 0s infinite;
    }
}
select:hover + .button {
    background-color: var(--color\:hover);
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.button-large {
    height: calc(1.3rem + 2*0.375rem + 0.5rem);
    &.button-text { font-size: .95rem; }
}
.button-small.button-text {
    height: calc(1.3rem + 2*0.225rem);
    &.button-text { font-size: small; padding-inline: 0.6em; }
    &.processing::before { height: .8rem; width: .8rem; }
}
.button-dropdown {
    padding-right: 0 !important;
    position: relative; display: flex;
    & > *:last-child {
        margin-right: -.5rem;
    }
    &::after {
        content: '';
        position: relative; margin-left: auto;
        height: 100%; aspect-ratio: 1/1;
        background-image: url('data:image/svg+xml;utf8,<svg height="48" viewBox="0 0 48 48" width="48" style="color:rgb(8,8,10);" xmlns="http://www.w3.org/2000/svg"><path d="M 0 12 L 24 36 L 48 12 Z" fill="currentColor"/></svg>');
        background-repeat: no-repeat;
        background-position: right 50% top 50%;
        background-size: 0.65rem auto;
    }
}
@media screen and (prefers-color-scheme: dark) {
    .button-dropdown::after {
        background-image: url('data:image/svg+xml;utf8,<svg height="48" viewBox="0 0 48 48" width="48" style="color:rgb(245,245,247);" xmlns="http://www.w3.org/2000/svg"><path d="M 0 12 L 24 36 L 48 12 Z" fill="currentColor"/></svg>');
    }
}
.button-ellipsis {
    padding-right: 0 !important;
    position: relative; display: flex;
    & > *:last-child {
        margin-right: -.5rem;
    }
    &::after {
        content: '•••';
        position: relative; margin-left: auto;
        height: 100%; aspect-ratio: 1/1;
        display: flex; align-items: center; justify-content: center;
        color: var(--color\:secondary);
        font-size: 0.7rem;
    }
}
.button-selector {
    padding-right: 0 !important;
    position: relative; display: flex;
    & > *:last-child {
        margin-right: -.5rem;
    }
    &::after {
        content: '';
        position: relative; margin-left: auto;
        height: 100%; aspect-ratio: 1/1;
        display: flex; align-items: center; justify-content: center;
        background-color: var(--color\:secondary);
        font-size: 0.7rem;

        mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 15L12 20L17 15M7 9L12 4L17 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: auto 50%;
    }
}
.button-plaintext {
    display: inline-flex; align-items: center;
    &.processing::after {
        content: "";
        display: inline-block;
        height: .7em; width: .7em;
        margin-left: .3em;
        border-radius: 50%;
        border: 2px solid var(--color\:secondary);
        border-top-color: transparent;
        animation: spin 500ms linear 0s infinite;
    }
}

:has(> .hoverinfo) {
    position: relative;
}
.hoverinfo {
    position: absolute; bottom: 0; left: 50%; z-index: 1001;
    word-wrap: none; text-wrap: nowrap;
    touch-action: none; pointer-events: none;
    background-color: var(--color\:primary);
    color: var(--color\:background-secondary);
    padding: 0.25rem; padding-inline: 0.5rem;
    border-radius: 0.4rem;
    font-size: small; font-weight: 500;
    height: fit-content;
    opacity: 0;
    transform: translateY(calc(100% + 0.15rem)) translateX(-50%);
    transition: opacity 200ms 0ms ease;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
}
:has(> .hoverinfo):hover > .hoverinfo {
    opacity: 1;
    transition: opacity 200ms 700ms ease;
    touch-action: unset; pointer-events: unset;
    &.no-delay {
        transition: opacity 200ms 0s ease;
    }
}
.hoverinfo::before {
    content: "";
    --h: 0.3rem; height: var(--h); width: calc(2074/784 * var(--h));
    position: absolute; top: calc(-1*var(--h) + 0.5px); left: 50%;
    transform: translateX(-50%);
    background-color: var(--color\:primary);
    mask-image: url(/images/blocked/icons/tooltip.svg);
    mask-size: auto var(--h);
    mask-repeat: no-repeat;
    mask-position: center;
}

.hoverinfo.left { left: 0; transform: translateY(calc(100% + 0.15rem)); }
.hoverinfo.right { left: unset; right: 0; transform: translateY(calc(100% + 0.15rem)); }
.hoverinfo.top { top: 0; transform: translateY(calc(-100% - 0.15rem)); }
.hoverinfo.bottom { bottom: 0; }
.hoverinfo.left::before { left: calc(0.65rem + 0.375rem); }
.hoverinfo.right::before { left: calc(100% - 0.65rem - 0.375rem); }
.hoverinfo.top::before { top: calc(100% - 1px); transform: translateX(-50%) rotate(180deg); }
.hoverinfo.bottom::before { top: calc(-1*var(--h) + 0.5px); }
.hoverinfo.ycenter.right { top: 50%; left: 100%; right: unset; transform: translateY(-50%) translateX(.15rem); }
.hoverinfo.ycenter.right::before { left: 0; top: 50%; right: unset; transform-origin: left bottom; transform: translateY(calc(-100% + .5*2074/784 * var(--h))) rotate(-90deg); }

/* #endregion */


/* ===================== */
/* DARK/LIGHT MODE
/* ===================== */
/* #region */

/* [LIGHT] */
.light\:invert-colors:not(:is(.dark *, .dark)) { filter: invert() hue-rotate(180deg) !important; }
/* [DARK] */
.dark\:brightness-100:is(.dark *, .dark) { filter: brightness(100%) !important; }
.dark\:invert-colors:is(.dark *, .dark) { filter: invert() hue-rotate(180deg) !important; }

/* #endregion */


/* ===================== */
/* GRIDS
/* ===================== */
/* #region */

.grid { display: grid; }
.col-nb-1 { grid-template-columns: repeat(1,minmax(0,1fr)); }
.col-nb-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.col-nb-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.col-nb-12 { grid-template-columns: repeat(12,minmax(0,1fr)); }
.col-start-1 { grid-column-start: 1; }
.col-start-3 { grid-column-start: 3; }
.col-span-2 { grid-column: span 2/span 2; }
.col-span-8 { grid-column: span 8/span 8; }
.col-span-12 { grid-column: span 12/span 12; }
.col-center-10of12 { grid-column: span 10/span 10; grid-column-start: 2; }
.row-nb-2 { grid-template-rows: repeat(2,minmax(0,1fr)); }
.row-span-2 { grid-row: span 2/span 2; }

@media (min-width: 480px) {
    .xs\:col-span-1 { grid-column: span 1/span 1; }
}
@media (min-width: 640px) {
    .sm\:col-nb-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .sm\:col-start-3 { grid-column-start: 3; }
    .sm\:col-span-8 { grid-column: span 8/span 8; }
}
@media (min-width: 768px) {
    .md\:col-start-3 { grid-column-start: 3; }
    .md\:col-span-8 { grid-column: span 8/span 8; }
}
@media (min-width: 1024px) {
    .lg\:col-start-3 { grid-column-start: 3; }
    .lg\:col-span-8 { grid-column: span 8/span 8; }
}

/* #endregion */


/* ===================== */
/* ICONS
/* ===================== */
/* #region */

.icon\:select {
    width: 100%; height: 100%;
    background-color: var(--color\:secondary);
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 15L12 20L17 15M7 9L12 4L17 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: auto auto;
}
.icon\:chevron {
    width: 100%; height: 100%;
    background-color: var(--color\:secondary);
    mask-image: url('data:image/svg+xml;utf8,<svg viewBox="13 5 7 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M 15 7 L 19 12 L 15 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: auto auto;
}

/* #endregion */


/* ===================== */
/* IMAGES
/* ===================== */
/* #region */

.unselectable {
    -webkit-user-drag: none;
    -moz-window-dragging: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.iconify-image {
    height: calc(1.3rem + 2*0.375rem); aspect-ratio: 1/1;
    background-color: rgba(var(--color\:primary-rgb),.17);
    border-radius: 20%; overflow: hidden;
    display: flex;
    & > img {
        height: 1.3rem; aspect-ratio: 1/1;
        object-fit: contain;
        margin: auto;
        -webkit-user-drag: none; -moz-window-dragging: none;
        user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
    }
}
.iconify-image.show-border {
    border: var(--border);
}

/* #endregion */


/* ===================== */
/* PANELS
/* ===================== */
/* #region */

.panel-box {
    --panel-margin: 0.4rem;
    display: flex; gap: var(--panel-margin); flex-grow: 1;
    width: min(var(--dvw),var(--max-width)); height: 100%;
    overflow: hidden;
}
.panel {
    position: relative; margin: var(--panel-margin);
    background-color: var(--color\:background-secondary);
    border: var(--border\:thin); border-radius: .7rem;
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.025);
    display: flex; flex-direction: column; flex: 1 1 0;
}
.panel:not(:only-of-type,:last-of-type) { margin-right: 0; }
.panel:not(:only-of-type):last-of-type { margin-left: 0; }
@media (max-width: 640px) {
    .panel-box { flex-direction: column; }
    .panel { margin-inline: 0; border: none; }
    .panel:not(:only-of-type,:last-of-type) { margin-bottom: 0; }
    .panel:not(:only-of-type):last-of-type { margin-top: 0; }
}

/* #endregion */


/* ===================== */
/* RESPONSIVE
/* ===================== */
/* #region */

.flex-row, .flex-column { display: flex; }
.flex-row { flex-direction: row; }
.flex-column { flex-direction: column; }
.flex-alignstart { align-items: start; }

/* extra small */
@media (max-width: 480px) {
    .xs\:show { display: none !important; }
}
@media (min-width: 480px) {
    .xs\:flex-row { flex-direction: row; display: flex; }
    .xs\:flex-column { flex-direction: column; display: flex; }
    .xs\:flex-aligncenter { align-items: center; }
}
/* small */
@media (max-width: 640px) {
    .sm\:show { display: none !important; }
}
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; display: flex; }
    .sm\:flex-column { flex-direction: column; display: flex; }
    .sm\:flex110 { flex: 1 1 0; }

    .sm\:hide { display: none !important; }

    .sm\:min-width-sm { min-width: 640px; }
}
/* medium */
@media (max-width: 768px) {
    .md\:show { display: none !important; }
}
@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; display: flex; }
    .md\:flex-column { flex-direction: column; display: flex; }

    .md\:hide { display: none !important; }
}
/* large */
@media (max-width: 1024px) {
    .lg\:show { display: none !important; }
}
@media (min-width: 1024px) {
    .lg\:flex-row { flex-direction: row; display: flex; }
    .lg\:flex-column { flex-direction: column; display: flex; }

    .lg\:hide { display: none !important; }
}


/* xs:class-name (.xs\:class-name) */
@media (min-width: 480px) {}
/* sm:class-name (.sm\:class-name) */
@media (min-width: 640px) {}
/* md:class-name (.md\:class-name) */
@media (min-width: 768px) {}
/* lg:class-name (.lg\:class-name) */
@media (min-width: 1024px) {}
/* xl:class-name (.xl\:class-name) */
@media (min-width: 1280px) {}
/* 2xl:class-name (.2xl\:class-name) */
@media (min-width: 1536px) {}

/* #endregion */


/* ===================== */
/* SIZING & SPACING
/* ===================== */
/* #region */

* {
    /* Include padding and border in size calculation */
    box-sizing: border-box;
}

body {
    --size-w-fullfixed: var(--lvw);
    --size-h-fullfixed: var(--lvh);
    --size-w-fulldyn: var(--dvw);
    --size-h-fulldyn: var(--dvh);
}
@media (max-width: 640px) {
    body {
        --size-w-fulldyn: var(--lvw);
        --size-h-fulldyn: var(--lvh);
    }
}

.size\:w-fullrel { width: 100%;}
.size\:h-fullrel { height: 100%; }
.size\:minh-fullrel { min-height: 100%; }
.size\:wh-fullrel { width: 100%; height: 100%; }
.size\:wminh-fullrel { width: 100%; min-height: 100%; }
.size\:wminh-fullrel-footer { width: 100%; min-height: calc(100% - var(--footer-height)); }

.size\:w-fullfixed { width: var(--size-w-fullfixed); }
.size\:h-fullfixed { height: var(--size-h-fullfixed); }
.size\:minh-fullfixed { min-height: var(--size-h-fullfixed); }
.size\:wh-fullfixed { width: var(--size-w-fullfixed); height: var(--size-h-fullfixed); }
.size\:wminh-fullfixed { width: var(--size-w-fullfixed); min-height: var(--size-h-fullfixed); }
.size\:wminh-fullfixed-footer { width: var(--size-w-fulldyn); min-height: calc(var(--size-h-fullfixed) - var(--footer-height)); }

.size\:w-fulldyn { width: var(--size-w-fulldyn); }
.size\:h-fulldyn { height: var(--size-h-fulldyn); }
.size\:minh-fulldyn { min-height: var(--size-h-fulldyn); }
.size\:wh-fulldyn { width: var(--size-w-fulldyn); height: var(--size-h-fulldyn); }
.size\:wminh-fulldyn { width: var(--size-w-fulldyn); min-height: var(--size-h-fulldyn); }
.size\:wminh-fulldyn-footer { width: var(--size-w-fulldyn); min-height: calc(var(--size-h-fulldyn) - var(--footer-height)); }

.save-lr-padding {
    padding-left: var(--save-padding-left);
    padding-right: var(--save-padding-right);
}
.save-lr-margin {
    margin-left: var(--save-padding-left);
    margin-right: var(--save-padding-right);
}

/* #endregion */


/* ===================== */
/* SMALL FAST STYLES
/* ===================== */
/* #region */

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-bounce {
    overscroll-behavior: none;
}

.cursor-default {
    cursor: default;
}
.cursor-pointer {
    cursor: pointer;
}

.opacity-30 {
    opacity: 0.3;
}
.opacity-40 {
    opacity: 0.4;
}
.opacity-50 {
    opacity: 0.5;
}
.opacity-60 {
    opacity: 0.6;
}
.opacity-70 {
    opacity: 0.7;
}

.flex-center {
    align-items: center; justify-content: center;
}
.show-when-only-child { display: none; }
.show-when-only-child:only-child { display: block; }
.show-when-empty-list { display: none; }
.empty-list .show-when-empty-list { display: block; }

.prevent-webkit-shake-on-hover {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0) scale(1.0, 1.0);
}

/* #endregion */


/* ===================== */
/* TEXT
/* ===================== */
/* #region */

.text\:secondary {
    font-size: small; font-weight: 500;
    color: var(--color\:secondary);
}
.text\:ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.text\:link {
    opacity: .8; text-decoration: underline; font-weight: 500;
    transition: color 200ms ease, opacity 200ms ease;
    &:hover { opacity: 1; color: var(--color\:accent); }
}

/* #endregion */


/* ===================== */
/* TEXTURES
/* ===================== */
/* #region */

.texture-glass {
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    background-image: linear-gradient(rgba(255,255,255,0.45),rgba(255,255,255,0.25));
    border: 0.9px solid rgba(255,255,255,0.5);
}
.texture-glass.shadow {
    box-shadow: 0px 0px 30px rgba(0,0,0,0.02) inset, 0px 0px 50px 10px rgba(0,0,0,0.05);
}
.texture-dots {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='rgba(0,0,0,0.3)' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
.texture-gradient {
    background-color: hsl(41, 77%, 73%);
    background-image: radial-gradient(ellipse farthest-side at right top, hsl(248, 61%, 55%) 0%, hsl(214, 91%, 55%) 46%, hsl(241, 30%, 72%) 73%, hsl(277, 19%, 71%) 82%, hsl(41, 77%, 73%) 100%);;
}
.texture-gradientmesh {
    background-color:hsla(41,76%,72%,1);
    background-image:
    radial-gradient(at 49% 0%, hsla(321,74%,65%,0.27) 0px, transparent 50%),
    radial-gradient(at 86% 14%, hsla(248,100%,54%,1) 0px, transparent 50%),
    radial-gradient(at 54% 76%, hsla(30,84%,62%,0.56) 0px, transparent 50%),
    radial-gradient(at 39% 79%, hsla(41,100%,72%,0.13) 0px, transparent 50%),
    radial-gradient(at 23% 33%, hsla(214,100%,55%,1) 0px, transparent 50%),
    radial-gradient(at 85% 78%, hsla(276,100%,70%,1) 0px, transparent 50%);
}
/* [DARK] */
.texture-dots:is(.dark *, .dark) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='rgba(255,255,255,0.5)' fill-opacity='0.4' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}

/* #endregion */



/* ========================================== */
/* COMPONENTS
/* ========================================== */
/* #region */

/* ===================== */
/* COMPONENTS > PICKER
/* ===================== */
/* #region */

.picker {
    --padding: .15rem;
    --selected: 0;
    --nboptions: 2;
    display: flex;
    padding: var(--padding);
    border-radius: .5rem;
    border: var(--border);
    width: fit-content;
    position: relative;
    &.picker\:full-width { width: 100%; }
    & > div:not(.picker-indicator) {
        display: flex; align-items: center; justify-content: center; flex: 1 1 0;
        font-size: .875rem; font-weight: 500;
        opacity: .8; cursor: pointer;
        position: relative; z-index: 2;
        padding: .25em;
        &.selected {
            opacity: 1;
            font-weight: 700;
        }
    }
    & > div.picker-indicator {
        height: calc(100% - 2*var(--padding)); width: calc((100% - 2*var(--padding))/var(--nboptions));
        position: absolute; top: var(--padding); left: var(--padding); z-index: 1;
        transform: translateX(calc(var(--selected)*100%));
        transition: transform 300ms ease;
        background-color: var(--color\:hover);
        border: var(--border); border-radius: calc(.5rem - var(--padding));
    }
}

/* #endregion */


/* ===================== */
/* COMPONENTS > DROPDOWN
/* ===================== */
/* #region */

.dropdown {
    position: relative; z-index: 1001;
    transition: width 100ms ease;
    & > div:nth-of-type(1) { justify-content: start; overflow: hidden; }
    &.dropdown\:fontsize-875 > div:nth-of-type(1),
    &.dropdown\:fontsize-875 .dropdown-list > div > div > span { font-size: .875rem; }
    &.dropdown\:bold > div:nth-of-type(1) { font-weight: 700; }
    & .button-dropdown::after { transition: transform 200ms ease; }
}
.dropdown-list {
    position: absolute; right: 0; top: 100%;
    /* display: grid; grid-template-rows: 0fr; */
    transition: opacity 100ms ease-out, transform 100ms ease-out; opacity: 0;
    & > div {
        overflow: hidden;
        display: flex; flex-direction: column;
        background-color: var(--color\:background-secondary);
        border: var(--border); box-shadow: var(--shadow);
        border-radius: .5rem;
        padding: .2rem;
        & > div {
            border-radius: .3rem !important;
            justify-content: start !important;
        }
    }
}
/* options */
.dropdown\:up .dropdown-list {
    top: 0; transform: translateY(-100%);
}
.dropdown\:show-backdrop .dropdown-list {
    & > div {
        background-color: rgba(var(--color\:background-secondary-rgb),.85);
        -webkit-backdrop-filter: blur(32px) saturate(172%);
        backdrop-filter: blur(32px) saturate(172%);
    }
}
.dropdown\:full-width .dropdown-list {
    width: 100%;
}
.dropdown\:match-button-width .dropdown-list {
    width: calc(100% + .4rem + 2px); right: calc(-.2rem - 1px);
}
/* open/closed animation */
.dropdown.dropdown-open {
    z-index: 1002;
    & .dropdown-list { opacity: 1; }
    & .button-dropdown::after { transform: rotate(180deg); }
    & > .button { background-color: var(--color\:hover); }
}
.dropdown:not(.dropdown-open) {
    & .dropdown-list { touch-action: none; pointer-events: none; transform: translateY(-.5rem); }
    &.dropdown\:up .dropdown-list { touch-action: none; pointer-events: none; transform: translateY(calc(-100% + .5rem)); }
}

/* #endregion */


/* ===================== */
/* COMPONENTS > IMAGE UPLOADER
/* ===================== */
/* #region */

.imageuploader {
    position: relative; width: 100%; height: 20rem;
}
.imageuploader-cont {
    position: relative; width: 100%; height: 100%;
    --aspect-ratio: 1/1; --zoom: 1; --background-color: transparent;
    & > div {
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%; display: grid;
    }
    &:not(.imageuploader-step-upload) > .imageuploader-upload,
    &:not(.imageuploader-step-edit) > .imageuploader-edit {
        opacity: 0; touch-action: none; pointer-events: none;
    }
}
.imageuploader-upload {
    padding: 1rem;
    & > div {
        border: var(--border); border-radius: .5rem;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        overflow: hidden;
        &.dragover {
            border: 3px solid rgba(var(--color\:accent-rgb),.5) !important;
        }
        & > div {
            display: flex; flex-direction: column; align-items: center;
            & > img { height: 5rem; aspect-ratio: 1/1; object-fit: contain; margin-bottom: 1rem; }
            & > div:nth-of-type(1) { font-size: .95rem; font-weight: 700; }
            & > div:nth-of-type(2) { font-size: small; font-weight: 500; color: var(--color\:secondary); margin-bottom: 1rem; }

        }
    }
}
.imageuploader-edit {
    padding: 1rem;
    & > div {
        border: var(--border); border-radius: .5rem;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        overflow: hidden; position: relative;
        /* background */
        & > div:nth-of-type(1) {
            width: 100%; height: 100%; position: absolute; z-index: -1;
            display: flex;
            & > canvas {
                position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
                min-width: 100%; min-height: 100%; aspect-ratio: 1/1;
                filter: blur(32px) saturate(172%);
                mask-image: radial-gradient(circle at center, black 0%, transparent); opacity: .2;
            }
        }
        /* preview */
        & > div:nth-of-type(2) {
            flex-grow: 1; aspect-ratio: var(--aspect-ratio); margin: 1rem; position: relative;
            border: var(--border); border-radius: 10%; overflow: hidden;
            & > canvas { width: 100%; height: 100%; position: relative; }
            & > div {
                position: absolute; width: 100%; height: 100%; top: 0; left: 0;
                display: grid; grid-template-columns: repeat(3,1fr);
                opacity: 0; transition: opacity 200ms ease;
                & > div { display: flex; cursor: pointer; }
                & > div:hover::after { background-image: radial-gradient(closest-side,rgba(var(--color\:primary-rgb),0.1), transparent); transform: scale(2); color: var(--color\:accent); }
                & > div::after {
                    content: "•";
                    display: flex; width: 50%; height: 50%;
                    justify-content: center; align-items: center;
                    color: var(--color\:background-secondary); transition: transform 200ms ease, color 200ms ease;
                    -webkit-text-stroke: .5pt var(--color\:primary);
                }
                & > div:nth-of-type(1)::after { margin-bottom: auto; margin-right: auto; }
                & > div:nth-of-type(2)::after { margin: auto; margin-top: 0; }
                & > div:nth-of-type(3)::after { margin-left: auto; margin-bottom: auto; }
                & > div:nth-of-type(4)::after { margin: auto; margin-left: 0; }
                & > div:nth-of-type(5)::after { margin: auto; }
                & > div:nth-of-type(6)::after { margin: auto; margin-right: 0; }
                & > div:nth-of-type(7)::after { margin-top: auto; margin-right: auto; }
                & > div:nth-of-type(8)::after { margin: auto; margin-bottom: 0; }
                & > div:nth-of-type(9)::after { margin-top: auto; margin-left: auto; }
                &[data-pos=tl] > div:nth-of-type(1)::after,
                &[data-pos=tc] > div:nth-of-type(2)::after,
                &[data-pos=tr] > div:nth-of-type(3)::after,
                &[data-pos=cl] > div:nth-of-type(4)::after,
                &[data-pos=cc] > div:nth-of-type(5)::after,
                &[data-pos=cr] > div:nth-of-type(6)::after,
                &[data-pos=bl] > div:nth-of-type(7)::after,
                &[data-pos=bc] > div:nth-of-type(8)::after,
                &[data-pos=br] > div:nth-of-type(9)::after { color: var(--color\:accent); }
                &:hover { opacity: 1; }
            }
        }
        /* controls */
        & > div:nth-of-type(3) {
            display: flex; justify-content: space-between;
            font-size: small; font-weight: 500; color: var(--color\:secondary);
            border-top: var(--border); width: 100%; padding: .3rem;
            & > div {
                display: flex; gap: 1.5rem; justify-content: center; align-items: center;
            }
            & > div > div[data-role=background-selector] {
                display: flex; align-items: center; gap: .3rem;
                & > div { height: 1.3rem; aspect-ratio: 1/1; background-color: var(--c); border: var(--border); border-radius: 50%; cursor: pointer; overflow: hidden; }
            }
            & > div > div[data-role=zoom-input] {
                display: flex; align-items: center; gap: .3rem;
                & > div { position: relative; display: flex; align-items: center; }
                & > div > input { --h: 1.3rem; --w: 7rem; --cf:var(--color\:primary); --cb:rgba(var(--color\:primary-rgb),.2); --cba:rgba(var(--color\:primary-rgb),.2); border-radius: .5rem !important; }
                & > div > div { font-weight: bold; font-size: .875rem; pointer-events: none; transform: translateY(-.1em); }
                & > div > div:nth-of-type(1) { position: absolute; left: .3rem; }
                & > div > div:nth-of-type(2) { position: absolute; right: .3rem; }
            }
            & > div {
                flex-shrink: 0;
            }
        }
    }
}
.imageuploader.no-padding-top {
    & .imageuploader-upload, & .imageuploader-edit { padding-top: 0; }
}

/* #endregion */


/* ===================== */
/* COMPONENTS > VIDEO PLAYER
/* ===================== */
/* #region */

.video-player {
    border: var(--border);
    width: 100%; aspect-ratio: 16/9; overflow: hidden;
    position: relative;
    border-radius: .5rem;
    /* Button parameters */
    --hover-background: rgba(255,255,255,.25);
    /* Slider parameters */
    --w: 7rem; --h: .7rem; --cf: white; --cba: rgba(255,255,255,.33); --cb: rgba(255,255,255,.2);
    /* Video */
    & video {
        width: 100%; height: 100%;
        object-fit: cover;
        position: relative; z-index: 0;
    }
    & > div:nth-of-type(1) {
        width: 100%; height: min(12rem,33%); opacity: .5;
        position: absolute; bottom: 0; z-index: 1;
        pointer-events: none;
        background-image: linear-gradient(0deg,
            rgba(0,0,0, 1) 0%,
            rgba(0,0,0, 0.3) 50%,
            rgba(0,0,0, 0.15) 65%,
            rgba(0,0,0, 0.075) 75.5%,
            rgba(0,0,0, 0.037) 82.85%,
            rgba(0,0,0, 0.019) 88%,
            rgba(0,0,0, 0) 100%
        );
    }
    & > div:nth-of-type(2) {
        position: absolute; top: 0; left: 0; z-index: 2;
        width: 100%; height: 100%;
        display: none; flex-direction: column;
        background-color: rgba(0,0,0,0.33);
        pointer-events: none; touch-action: none;
        & .loader-spin {
            width: 3rem; height: 3rem; margin: auto;
            border-color: white; border-top-color: transparent;
        }
    }
    &.loading > div:nth-of-type(2) {
        display: flex;
    }
    & > div:nth-of-type(3) {
        position: absolute; bottom: 0; z-index: 3;
        width: 100%; padding: .5rem;
        display: flex; flex-direction: column;
    }
    /* PROGRESS BAR */
    & div[data-role="progressbar"] {
        width: 100%; height: 1.2rem;
        position: relative;
        display: flex; align-items: center;
        --progress: 0%;
        --buffered: 0%;
        cursor: grab;
        & > div:first-of-type {
            width: 100%; height: .2rem;
            border-radius: 50vh; overflow: hidden;
            position: relative; top: 0; left: 0;
            transition: height 200ms ease;
            background-color: rgba(255,255,255,0.33);
            -webkit-backdrop-filter: blur(32px) saturate(172%);
            backdrop-filter: blur(32px) saturate(172%);
            & > div:nth-of-type(1) {
                width: var(--progress); height: 100%;
                position: absolute; left: 0; top: 0;
                /* transition: height 200ms ease, width 1s linear; */
                background-color: white;
            }
            & > div:nth-of-type(2) {
                width: var(--buffered); height: 100%;
                position: absolute; left: 0; top: 0;
                /* transition: height 200ms ease, width 1s linear; */
                background-color: rgba(255,255,255,0.33);
            }
        }
        &:hover > div, &.hover > div { height: .4rem; }
    }
    /* Buttons */
    & .flex-row > .button {
        position: relative;
        &:hover::after, &.hover\:force::after { opacity: 1; }
        & img { filter: invert(); }  /* TODO: remove and replace by color:white if svg icons used */
    }
    & .flex-row > .button::after {
        content: "";
        position: absolute; z-index: -1;
        width: 100%; height: 100%;
        -webkit-backdrop-filter: blur(32px) saturate(172%);
        backdrop-filter: blur(32px) saturate(172%);
        opacity: 0; transition: opacity 200ms ease;
        border-radius: inherit;
    }
    /* VOLUME CONTROL */
    & div[data-role="volume"] {
        gap: 0;
        & > div:nth-of-type(2) {
            transition: opacity 200ms ease;
            width: 0; gap: 0; overflow: hidden;
            transition: width 200ms ease;
            & > div {
                overflow: hidden; position: relative;
                display: flex; align-items: center;
                padding-inline: calc(.375rem + 0.5*(1.3rem - var(--h)));
                & * { flex-shrink: 0; }
            }
        }
        &:hover > div:nth-of-type(2) { width: calc(var(--w) + 2*(.375rem + 0.5*(1.3rem - var(--h)))); opacity: 1; }
        &.hover\:force {
            background-color: var(--hover-background);
            & > div:nth-of-type(2) { width: calc(var(--w) + 2*(.375rem + 0.5*(1.3rem - var(--h)))); opacity: 1; }
        }
    }
    & div[data-role="time"] {
        font-variant-numeric: tabular-nums;
        font-size: .875rem; font-weight: 500; color: white;
        padding-inline: .5rem;
        & > span:not(:first-of-type) {
            opacity: .66;
        }
    }
}

/* #endregion */


/* ===================== */
/* COMPONENTS > SHEET
/* ===================== */
/* #region */

.sheet {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0; z-index: 3; display: flex;
    transition: opacity 150ms ease, transform 200ms ease-out;
    overflow: hidden;
}
.sheet.hidden {
    opacity: 0;
    height: 0;
    touch-action: none;
    pointer-events: none;
    transform: scale(1.025);
}
.sheet-back {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    background-color: rgba(0,0,0,0.66);
}
.sheet-cont {
    border-radius: 0.7rem;
    border: var(--border);
    background-color: var(--color\:background-secondary);
    margin: auto;
    width: 40rem; max-height: 80%; max-width: 75%;
    overflow-y: scroll; overscroll-behavior: none;
    position: relative;
}
@media (max-width: 768px) {
    .sheet-cont { max-width: calc(100% - 2rem); }
}
.sheet-header {
    position: sticky; top: 0; z-index: 2;
    display: flex; gap: 0.5rem; align-items: center;
    padding: 1rem;
    background-color: rgba(var(--color\:background-secondary-rgb),0.8);
    -webkit-backdrop-filter: blur(32px) saturate(172%);
    backdrop-filter: blur(32px) saturate(172%);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.sheet-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    margin-top: 1px;
}

/* OVERLAY */
.sheet-overlay {
    position: absolute; z-index: 3;
    border-radius: 0.7rem;
    top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: var(--sheet-cont-width); height: var(--sheet-cont-height);
    transition: transform 100ms ease;
    display: flex;
}
.sheet-overlay.hidden {
    opacity: 0;
    touch-action: none;
    pointer-events: none;
}
.sheet-overlay-back {
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,0.33);
    position: absolute; z-index: 1;
    border-radius: inherit;
}
.sheet-confirm {
    display: flex; flex-direction: column;
    border-radius: 0.5rem; border: var(--border);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
    background-color: var(--color\:background-secondary);
    margin: 0.5rem; margin-left: auto;
    font-size: 0.875rem; font-weight: 500;
    overflow-y: scroll; overscroll-behavior: none;
    height: fit-content; max-height: calc(100% - 1rem);
    min-width: 20rem; max-width: calc(100% - 1rem);
    position: relative; z-index: 2;
}
.sheet-confirm > div:nth-of-type(1) {
    position: sticky; top: 0;
    padding: 0.7rem; border-bottom: var(--border);
    color: var(--color\:secondary);
    background-color: rgba(var(--color\:background-secondary-rgb),0.8);
    -webkit-backdrop-filter: blur(32px) saturate(172%);
    backdrop-filter: blur(32px) saturate(172%);
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.sheet-confirm > div:nth-of-type(2) {
    padding: 0.7rem;
}
.sheet-confirm > div:nth-of-type(2) > div:nth-of-type(2) {
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
.sheet-confirm > div:nth-of-type(3) {
    display: flex;
    padding: 0.5rem; gap: 0.5rem; justify-content: space-between; position: sticky; bottom: 0;
    border-top: var(--border);
    background-color: rgba(var(--color\:background-secondary-rgb),0.8);
    -webkit-backdrop-filter: blur(32px) saturate(172%);
    backdrop-filter: blur(32px) saturate(172%);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.sheet-confirm-row {
    position: relative;
    cursor: pointer;
    & > label {
        display: flex; gap: 0.5rem;
        align-items: center;
        cursor: pointer;
        padding-right: 1.9rem;
    }
    & > label > img {
        height: calc(1.3rem + 2*0.375rem); aspect-ratio: 1/1;
        object-fit: cover; border-radius: 20%; overflow: hidden;
        -webkit-user-drag: none; -moz-window-dragging: none;
        user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
    }
    &:hover {
        background-image: linear-gradient(90deg,transparent 0%,var(--color\:hover) 10%,transparent);
    }
    & > input {
        position: absolute;
        top: 50%; right: 0;
        transform: translateY(-50%);
    }
    &:hover > input {
        border: 1px solid rgba(var(--color\:secondary-rgb),1.0);
    }
}

/* EDITING */
.sheet .editing\:show {
    display: none;
}
.sheet .editing\:hide {
    display: block;
}
.sheet.editing .editing\:show {
    display: block;
}
.sheet.editing .editing\:hide {
    display: none;
}
.sheet.editing .sheet-back {
    pointer-events: none;
}
.sheet .editing\:enable {
    pointer-events: none;
    opacity: 0.66;
}
.sheet.editing .editing\:enable {
    pointer-events: unset;
    opacity: 1;
}
.sheet .editing\:show-shadow {
    transition: box-shadow 200ms ease;
}
.sheet.editing .editing\:show-shadow {
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
}
.editing .editing\:show-dropdown {
    padding-right: 2rem !important;
    background-image: url('data:image/svg+xml;utf8,<svg height="48" viewBox="0 0 48 48" width="48" style="color:rgb(8,8,10);" xmlns="http://www.w3.org/2000/svg"><path d="M 0 12 L 24 36 L 48 12 Z" fill="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.7rem top 50%;
    background-size: 0.65rem auto;
}
@media screen and (prefers-color-scheme: dark) {
    .editing .editing\:show-dropdown {
        background-image: url('data:image/svg+xml;utf8,<svg height="48" viewBox="0 0 48 48" width="48" style="color:rgb(245,245,247);" xmlns="http://www.w3.org/2000/svg"><path d="M 0 12 L 24 36 L 48 12 Z" fill="currentColor"/></svg>');
    }
}
.light .editing .editing\:show-dropdown,
.light.editing .editing\:show-dropdown,
.editing .light .editing\:show-dropdown,
.editing .light.editing\:show-dropdown {
    background-image: url('data:image/svg+xml;utf8,<svg height="48" viewBox="0 0 48 48" width="48" style="color:rgb(8,8,10);" xmlns="http://www.w3.org/2000/svg"><path d="M 0 12 L 24 36 L 48 12 Z" fill="currentColor"/></svg>');
}
.dark .editing .editing\:show-dropdown,
.dark.editing .editing\:show-dropdown,
.editing .dark .editing\:show-dropdown,
.editing .dark.editing\:show-dropdown {
    background-image: url('data:image/svg+xml;utf8,<svg height="48" viewBox="0 0 48 48" width="48" style="color:rgb(245,245,247);" xmlns="http://www.w3.org/2000/svg"><path d="M 0 12 L 24 36 L 48 12 Z" fill="currentColor"/></svg>');
}
.editing .editing\:show-checkbox {
    padding-left: calc(0.375rem - 1px) !important;
    position: relative;
    gap: 0.5rem;
}
.editing .editing\:show-checkbox::before {
    content: "";
    margin: 0;
    cursor: pointer;
    accent-color: var(--color\:accent);
    display: flex;
    align-content: center;
    justify-content: center;
    border-radius: 0.3rem;
    height: 1.3rem; aspect-ratio: 1/1;
    flex-shrink: 0;
    border: 1px solid rgba(var(--color\:secondary-rgb),0.4);
    transition: border 200ms ease;
}
.editing .editing\:show-checkbox::after {
    content: "";
    position: absolute; left: calc(0.375rem - 1px);
    height: 1.3rem; width: 1.3rem; flex: 0 0 0;
    background-color: var(--color\:accent-fg);
    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" style="color:black;" xmlns="http://www.w3.org/2000/svg"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" fill="currentColor"/></svg>');
    mask-size: 0.85rem auto;
    mask-repeat: no-repeat;
    mask-position: left 55% top 60%;
    border: 1px solid transparent;
    transform: scale(0);
}
.editing .editing\:show-checkbox[checked]::before {
    background-color: var(--color\:accent);
}
.editing .editing\:show-checkbox[checked]::after {
    transform: scale(1);
}
:not(.editing) .not-editing-not-checked\:hide {
    display: none;
}
.not-editing-not-checked\:hide[checked], .editing .not-editing-not-checked\:hide {
    display: flex;
}

/* #endregion */


/* ===================== */
/* COMPONENTS > CONFIRMBOX
/* ===================== */
/* #region */

.confirmbox {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0; z-index: 4; display: flex;
    transition: opacity 150ms ease, transform 200ms ease-out;
    overflow: hidden;
}
.confirmbox.hidden {
    opacity: 0;
    height: 0;
    touch-action: none;
    pointer-events: none;
    transform: scale(1.025);
}
.confirmbox-back {
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
    background-color: rgba(0,0,0,0.66);
}
.confirmbox-cont {
    border-radius: 0.7rem;
    border: var(--border);
    background-color: var(--color\:background-secondary);
    margin: auto;
    width: 15rem; max-height: 80%;
    overflow-y: scroll; overscroll-behavior: none;
    position: relative;
    display: flex; flex-direction: column;
}
.confirmbox-cont > div:nth-of-type(1) {
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 1.2rem;
    padding-bottom: 0;
}
.confirmbox-cont > div:nth-of-type(2) {
    text-align: center;
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color\:secondary);
    padding: 1.2rem;
    padding-top: 0.2rem;
}
.confirmbox-cont > div:nth-of-type(3) {
    display: flex;
    justify-content: end;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: var(--border);
}
.confirmbox-cont > div:nth-of-type(3) > div {
    width: 50%;
}

/* #endregion */


/* ===================== */
/* COMPONENTS > TOAST
/* ===================== */
/* #region */

.toast {
    position: fixed; z-index: 2000;
    width: 100%; display: flex; justify-content: center;
    transform: translateY(-100%);
    opacity: 0; pointer-events: none;
    transition: transform 300ms 4s ease, opacity 300ms 4s ease;
}
.toast > div {
    height: calc(1.3rem + 2*0.375rem);
    padding-inline: 0.9em;
    font-size: 0.875rem; font-weight: 500;
    word-wrap: none; text-wrap: nowrap;
    background-color: var(--color\:primary);
    color: var(--color\:background-secondary);
    border-radius: calc(0.65rem + 0.375rem);
    display: flex; align-items: center; gap: 0.5rem;
    box-shadow: 3px 3px 10px 1px rgba(255,255,255,0.1), 3px 3px 10px 1px rgba(0,0,0,0.2);
    cursor: default;
    margin-top: 1rem;
    transform: scale(0.8);
    transition: transform 300ms 4s ease;
}
.toast > div > img {
    height: 1.3rem;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
    transition: transform 300ms ease, opacity 300ms ease;
}
.toast.show > div {
    transform: scale(1);
    transition: transform 300ms ease;
}

/* #endregion */


/* ===================== */
/* COMPONENTS > FORM
/* ===================== */
/* #region */

.form {
    display: flex; flex-direction: column;
    gap: 0.5rem;
}
.form .form-input-box {
    border-radius: 0.5rem; border: var(--border);
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
    position: relative;
    margin-top: 2px;
    transition: background-color 200ms ease;
    height: calc(1.7rem + 2*1.2rem);
    &.no-label { height: calc(var(--header-height) - 6px); }
}
.form .form-input-box:not(:has(.button:hover)):hover {
    background-color: var(--color\:hover);
}
.form .form-input-box label,
.form .form-input-box div[data-type="label"] {
    font-weight: 500; font-size: small;
    position: absolute; top: 0.7rem; left: 0.7rem;
}
.form .form-input-box input[type="text"],
.form .form-input-box input[type="password"],
.form .form-input-box input[type="email"],
.form .form-input-box div[data-type="placeholder"],
.form .form-input-box input[type="tel"],
.form .form-input-box select,
.form .form-input-box textarea {
    width: 100%; height: 100%;
    padding: 0.7rem; padding-top: 1.7rem;
    border-radius: 0.5rem; border: none;
    font-weight: 600; font-size: 1.3rem;
    position: relative;
    background-color: transparent;
    appearance: none;
    color: var(--color\:primary);
    resize: none;
    &:is(.no-label > *) { padding-top: 1.2rem; padding-bottom: 1.2rem; }
}
.form .form-input-box input[type="date"],
.form .form-input-box input[type="time"] {
    width: 100%; height: 100%;
    padding: 0.7rem; padding-top: 1.7rem;
    border-radius: 0.5rem; border: none;
    font-weight: 600; font-size: 1.3rem;
    position: relative;
    appearance: none;
    &:focus { outline: none; }
    &:is(.no-label > *) { padding-top: 1.2rem; padding-bottom: 1.2rem; }
}
/* [DARK] */
.form .form-input-box input[type="date"]:is(.dark *, .dark),
.form .form-input-box input[type="time"]:is(.dark *, .dark) {
    background-color: transparent;
}
.form .form-input-box:has(textarea) {
    height: fit-content;
}
.form .form-input-box:has(select),
.form .form-input-box[data-type="select"] {
    &::after {
        content: attr(data-value);
        width: 100%; height: 100%; z-index: 1;
        padding: 0.7rem; padding-top: 1.7rem;
        font-weight: 600; font-size: 1.3rem;
        position: absolute; left: 0; top: 0;
        color: var(--color\:primary);
        box-sizing: border-box;
    }
    &::before {
        content: "";
        width: 100%; height: 100%; z-index: 1;
        position: absolute; top: 0; left: 0;
        background-color: var(--color\:secondary);
        mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 15L12 20L17 15M7 9L12 4L17 9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        mask-repeat: no-repeat;
        mask-position: right .7rem top 50%;
        mask-size: 1.3rem auto;
        
    }
    & select {
        outline: none; opacity: 0; z-index: 2;
        font-weight: normal; font-size: medium;
        &::-ms-expand { display: none; }
    }
}

input[type=checkbox] {
    appearance: none; -webkit-appearance: none;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color\:accent);
    display: flex; align-content: center; justify-content: center; flex-shrink: 0;
    border-radius: 0.5rem;
    width: 1.4rem; height: 1.4rem;
    background-color: rgba(255,255,255,0.12);
    border: 1px solid rgba(var(--color\:secondary-rgb),0.4);
    transition: border 200ms ease;
}
input[type="checkbox"]::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--color\:accent-fg);
    mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" style="color:black;" xmlns="http://www.w3.org/2000/svg"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" fill="currentColor"/></svg>');
    mask-size: 0.85rem auto;
    mask-repeat: no-repeat;
    mask-position: left 55% top 60%;
    transform: scale(0);
}
input[type="checkbox"]:checked {
    background-color: var(--color\:accent);
}
input[type="checkbox"]:checked::before {
    transform: scale(1);
}
.password-visible-icon {
    background-image: url(https://img.icons8.com/?size=100&id=mHBAv5xJ2dcq&format=png&color=000000);
    background-size: contain;
}
.password-visible.password-visible-icon {
    background-image: url(https://img.icons8.com/?size=100&id=BKQegLJw8AVs&format=png&color=000000);
}
/* [DARK] */
.password-visible-icon:is(.dark *, .dark) {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
.range {
    display: inline-block;
    width: var(--w); height: var(--h); position: relative;
    appearance: none; -moz-appearance: none; -webkit-appearance: none;
    background-color: var(--cb);
    border-radius: .3rem;
    overflow: hidden;
    margin: 0; padding: 0;
    cursor: pointer;
    transition: background-color 200ms ease;
    &:focus, &:active {
        background-color: var(--cba);
    }
    &[value="0"] {
        &::-webkit-slider-thumb, &::-moz-range-thumb {
            background-color: transparent !important;
        }
    }
}
.range::-webkit-slider-thumb {
    -webkit-appearance: none; outline: none; border: none;
    width: 0px; height: var(--h);
    background-color: var(--cf);
    box-shadow: -400px 400px 0 400px var(--cf);
}
.range::-moz-range-thumb {
    appearance: none; outline: none; border: none;
    width: 0px; height: var(--h);
    background-color: var(--cf);
    box-shadow: -400px 400px 0 400px var(--cf);
}

.range-double {
    --h: 1.3rem; --w: 100%;
    /* --cf:var(--primary-text-color); */
    --cf:white; --cb:rgba(var(--color\:primary-rgb),.3);
    /* --cba:rgba(var(--primary-text-color-rgb),.2); */
    --min: 0; --max: 100;
    height: var(--h); width: var(--w); position: relative;
    background-color: var(--cb); border-radius: .5rem;
    display: inline-block;
    &::before {
        content: "";
        position: absolute; left: 50%; transform: translateX(-50%);
        width: 3px; height: 100%; background-color: var(--color\:background-secondary);
    }
    & > div:nth-of-type(1) {
        width: calc((var(--max) - var(--min)) * 1% - (1rem * var(--max)/100) + (1rem * var(--min)/100)); height: 100%; position: absolute;
        background-color: var(--cb);
        left: calc(var(--min) * 1% - 1rem * var(--min)/100 + .5rem);
    }
    & > div:not(:nth-of-type(1)) {
        width: 1rem; height: 100%; position: absolute;
        background-color: var(--cf);
        border-radius: .5rem; box-shadow: var(--shadow); border: var(--border);
        cursor: pointer;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(128,128,128)" style="color:rgb(128,128,128);" x="0px" y="0px" width="100" height="100" viewBox="0 0 25 25"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 8C10.3284 8 11 7.32843 11 6.5C11 5.67157 10.3284 5 9.5 5C8.67157 5 8 5.67157 8 6.5C8 7.32843 8.67157 8 9.5 8ZM9.5 14C10.3284 14 11 13.3284 11 12.5C11 11.6716 10.3284 11 9.5 11C8.67157 11 8 11.6716 8 12.5C8 13.3284 8.67157 14 9.5 14ZM11 18.5C11 19.3284 10.3284 20 9.5 20C8.67157 20 8 19.3284 8 18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5ZM15.5 8C16.3284 8 17 7.32843 17 6.5C17 5.67157 16.3284 5 15.5 5C14.6716 5 14 5.67157 14 6.5C14 7.32843 14.6716 8 15.5 8ZM17 12.5C17 13.3284 16.3284 14 15.5 14C14.6716 14 14 13.3284 14 12.5C14 11.6716 14.6716 11 15.5 11C16.3284 11 17 11.6716 17 12.5ZM15.5 20C16.3284 20 17 19.3284 17 18.5C17 17.6716 16.3284 17 15.5 17C14.6716 17 14 17.6716 14 18.5C14 19.3284 14.6716 20 15.5 20Z" fill="currentColor"/></svg>');
        background-size: auto 1rem; background-position: center center; background-repeat: no-repeat;
    }
    & > div:nth-of-type(2) {
        transform: translateX(calc(-100% * var(--min)/100));
        left: calc(var(--min) * 1%);
    }
    & > div:nth-of-type(3) {
        transform: translateX(calc(-100% * var(--max)/100));
        left: calc(var(--max) * 1%);
    }
}

/* #endregion */


/* ===================== */
/* COMPONENTS > PAGER
/* ===================== */
/* #region */

.pager {
    display: flex; flex-direction: column;
    width: 100%;
}
.pager-tabs {
    display: flex; gap: 0.3rem;
    border-bottom: var(--border);
}
.pager-tabs > .pager-tabs-button {
    padding: 0.4rem; margin-bottom: 0.2rem;
    padding-left: 0.5rem; padding-right: 0.5rem;
    cursor: pointer;
    transition: background-color 200ms ease;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    position: relative;
    font-weight: 500;
    opacity: 0.8;
    width: max-content;
    display: flex; justify-content: center;
    & > div {
        display: flex; align-items: center; gap: 0.3rem; justify-content: center;
        & > img {
            height: 1rem;
            -webkit-user-drag: none; -moz-window-dragging: none;
            user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;
        }
    }
    & > div:nth-of-type(1) {
        position: absolute;
        opacity: 1;
    }
    & > div:nth-of-type(2) {
        font-weight: 700;
        opacity: 0;
    }
    &.active {
        opacity: 1.0;
        & > div:nth-of-type(1) { opacity: 0; }
        & > div:nth-of-type(2) { opacity: 1; }
    }
    &::after {
        content: "";
        width: 100%;
        height: 2px;
        background-color: var(--color\:primary);
        position: absolute; bottom: calc(-0.2rem - 1px); left: 0;
        opacity: 0;
    }
    &.active::after {
        opacity: 1;
    }
}
.pager-tabs > .pager-tabs-button:hover {
    background-color: rgba(0,0,0,0.05);
}
/* [DARK] */
.pager-tabs > .pager-tabs-button:is(.dark *, .dark):hover {
    background-color: rgba(255,255,255,0.12);
    opacity: 1;
}

.pager-pages {
    position: relative;
}
.pager-pages > div {
    position: absolute;
    display: none;
    padding-top: 1rem;
    width: 100%;
}
.pager-pages > div.active {
    display: flex;
}

/* #endregion */

/* #endregion */



/* ========================================== */
/* STATES
/* ========================================== */
/* #region */

/* ===================== */
/* STATES > CREATING
/* ===================== */
/* #region */

.creating\:hide { display: block; }
.creating\:hide:is(.creating *, .creating) { display: none; }
.creating\:show { display: none; }
.creating\:show:is(.creating *, .creating) { display: block; }

/* #endregion */


/* ===================== */
/* STATES > EDITING
/* ===================== */
/* #region */

.editing\:hide { display: block; }
.editing\:hide:is(.editing *, .editing) { display: none; }
.editing\:show { display: none; }
.editing\:show:is(.editing *, .editing) { display: block; }

/* #endregion */


/* ===================== */
/* STATES > SELECTED
/* ===================== */
/* #region */

.selected\:select-border:is(.selected *, .selected) {
    border: 3px solid rgba(var(--color\:accent-rgb),.5) !important;
}
.selected\:select-outline:is(.selected *, .selected) {
    outline: 3px solid rgba(var(--color\:accent-rgb),.5) !important;
}
/* [DARK] */
.selected.selected\:select-border:is(.dark *, .dark),
.selected .selected\:select-border:is(.dark *, .dark) {
    border: 3px solid rgba(var(--color\:accent-rgb),.8) !important;
}
.selected.selected\:select-outline:is(.dark *, .dark),
.selected .selected\:select-outline:is(.dark *, .dark) {
    outline: 3px solid rgba(var(--color\:accent-rgb),.8) !important;
}

/* #endregion */


/* ===================== */
/* STATES > ERROR
/* ===================== */
/* #region */

.error\:hide { display: block; }
.error\:hide:is(.error *, .error) { display: none; }
.error\:show { display: none; }
.error\:show:is(.error *, .error) { display: block; }

/* #endregion */


/* ===================== */
/* STATES > LOADING
/* ===================== */
/* #region */

.loading\:hide { display: block; }
.loading\:hide:is(.loading *, .loading) { display: none; }
.loading\:show { display: none; }
.loading\:show:is(.loading *, .loading) { display: block; }

.loading\:spinner {
    height: 100%; aspect-ratio: 1/1;
    border-radius: 50%;
    border: 3px solid var(--color\:secondary);
    border-top-color: transparent;
    animation: spin 500ms linear 0s infinite;
}
.loading\:text {
    height: 1em; position: relative;
    display: inline-block;
    background-color: var(--color\:hover);
    border-radius: .3rem !important; overflow: hidden;
    &::after {
        content: "";
        position: absolute; top: 0; left: 0;
        width: 100%; height: 100%;
        background-image: linear-gradient(100deg,transparent,var(--color\:secondary),transparent);
        transform: translateX(-100%);
        opacity: .2;
        animation: slide 2.5s ease infinite;
    }
}
.loading\:glow {
    position: relative; overflow: hidden;
    &::after {
        content: "";
        position: absolute; top: 0; left: 0; z-index: 10;
        width: 100%; height: 100%;
        background-image: linear-gradient(100deg,transparent,var(--color\:secondary),transparent);
        transform: translateX(-100%);
        opacity: .2;
        animation: slide 2.5s ease infinite;
    }
}
@keyframes slide {
    0%,25% { transform: translateX(-100%); }
    75%,100% { transform: translateX(100%); }
}
.loading\:striped {
    position: relative; overflow: hidden;
    --stripes-color: rgba(var(--color\:secondary-rgb), 0.66);
    &::after {
        content: "";
        position: absolute; top: 0; left: 0; z-index: 10;
        width: 100%; height: 100%;
        background-image: linear-gradient(45deg,var(--stripes-color) 25%,transparent 25%,transparent 50%,var(--stripes-color) 50%,var(--stripes-color) 75%,transparent 75%,transparent);
        background-size: 2rem 2rem;
        animation: slidebg calc(1*4.5s) linear infinite;
    }
    @supports (width: calc(100% - mod(100%,2rem) + 2rem)) {
        &::after { width: calc(100% - mod(100%,2rem) + 2rem); }
    }
}
@keyframes slidebg {
    0% { background-position: 0 0; }
    100% { background-position: 100% 0; }
}

/* #endregion */


/* ===================== */
/* STATES > DISABLED
/* ===================== */
/* #region */

.disabled\:no-interaction:is(.disabled *, .disabled) {
    pointer-events: none !important;
}
.disabled\:hide-shadow:is(.disabled *, .disabled) {
    transition: box-shadow 200ms ease;
    box-shadow: none !important;
}
.disabled\:lower-opacity:is(.disabled *, .disabled) {
    opacity: 0.66 !important;
}

/* #endregion */


/* ===================== */
/* STATES > HOVER
/* ===================== */
/* #region */

.hover\:enlarge {
    transition: transform 500ms ease;
    &:hover { transform: scale(1.02); }
}
.hover\:underline:hover {
    text-decoration: underline;
}
.hover\:show-shadow:hover {
    box-shadow: 1px 1px 5px 0px rgba(0,0,0,0.1);
}
.hover\:background {
    transition: background-color 200ms ease;
    &:hover { background-color: var(--color\:hover); }
}
.hover\:text-accentcolor {
    transition: color 200ms ease;
    &:hover { color: var(--color\:accent); }
}
.hover\:opacity-1 {
    transition: opacity 200ms ease;
    &:hover { opacity: 1 !important; }
}

/* #endregion */

/* #endregion */



/* ===================== */
/* DEBUG
/* ===================== */
/* #region */

.debug-border {
    border: 1px solid red;
}
.debug-border2 {
    border: 1px solid green;
}
.debug-border3 {
    border: 1px solid blue;
}

/* #endregion */