:root {
    /* FONTS */
    --font-family: "Inter";
    /* Moet nog importeren */

    --font-size-h1: 4rem;
    --font-size-h2: 2.1rem;
    --font-size-h3: 1.9rem;
    --font-size-p: 1.7rem;
    --font-size-p-small: 1.4rem;
    --font-size-h5: 1.2rem;


    /* LAYOUT */
    /* CONTAINERS */
    --sidebar-width-normal: 25rem;
    --container-left-width: 30rem;
    --container-right-width: 100rem;

    --onboarding-left-width: 35rem;
    --onboarding-right-width: 60rem;

    --title-height: 7.6rem;

    --dialog-width-s: 47.5rem;
    --dialog-width-l: 100rem;

    --input-width: 22.5rem;
    --input-width-large: 40rem;

    /* CONTAINER PADDING */
    --container-padding-xs: 1.2rem;
    --container-padding-s: 1.6rem;
    --container-padding-m: 2rem;
    --container-padding-l: 4rem;

    /* CONTAINER SPACING */
    --gap-xs: 0.4rem;
    --gap-s: 0.8rem;
    --gap-m: 1.6rem;
    --gap-l: 2rem;
    --gap-xl: 2.4rem;


    /* COMPONENTS */
    /* BUTTON */
    --button-height: 4.4rem;
    --button-height-small: 3.6rem;
    --button-height-extrasmall: 2.8rem;
    --button-inline-padding: 1.6rem;

    /* FORM */
    --form-height: var(--button-height);

    /* INPUTS */
    /* RADIO & CHECKBOX */
    --checkbox-height-s: 1.6rem;
    --checkbox-height-m: 2.4rem;

    /* ICONS */
    --image-size-s: 1.6rem;
    --image-size-m: 2rem;
    --image-size-l: 2.4rem;

    --stroke-width: 1.2px;


    /* VISUALS */
    /* BRAND COLORS */
    --clr-ld-brand: 230, 84%;
    --clr-ld-light: #ffffff;
    --clr-ld-dark: 237, 10%;
    --clr-ld-dark-rgb: 47, 47, 57;

    /* STOPLIGHT */
    --clr-ld-red: 2, 93%;
    --clr-ld-orange: 37, 93%;
    --clr-ld-green: 144, 84%;

    --clr-ld-red: 6;
    --clr-ld-orange: 37;
    --clr-ld-green: 144;
    --clr-ld-blue: 198;

    /* BORDERS */
    --border-width-s: 0.1rem;
    --border-width-m: 0.2rem;

    /* BORDER RADIUS */
    --roundness-s: 0.4rem;
    --roundness-m: 0.8rem;

    /* SHADOWS */
    --shadow: drop-shadow(0 0.4rem 3.2rem rgba(var(--clr-ld-dark-rgb), 0.1));


    /* VISUALS IN USE */
    --clr-highlight-200: hsl(var(--clr-ld-brand), 96%);
    --clr-highlight-300: hsl(var(--clr-ld-brand), 94%);
    --clr-highlight-400: hsl(var(--clr-ld-brand), 78%);
    --clr-highlight-500: hsl(var(--clr-ld-brand), 57%);
    --clr-highlight-600: hsl(var(--clr-ld-brand), 53%);
    --clr-light-100: var(--clr-ld-light);
    --clr-light-200: hsl(var(--clr-ld-dark), 97%);
    --clr-light-300: hsl(var(--clr-ld-dark), 94%);
    --clr-dark-900: hsl(237, 30%, 20%);
    --clr-dark-800: hsl(237, 30%, 27%);
    --clr-dark-450: hsl(var(--clr-ld-dark), 55%);
    --clr-dark-100: rgba(var(--clr-ld-dark-rgb), 0.1);
    --clr-dark-200: rgba(var(--clr-ld-dark-rgb), 0.2);
    --clr-border: hsl(var(--clr-ld-dark), 90%);

    --clr-scrollbar-light: var(--clr-border);
    --clr-scrollbar-dark: hsl(var(--clr-ld-dark), 80%);

    --clr-traffic-red-200: hsl(var(--clr-ld-red), 90%, 95%);
    --clr-traffic-red-300: hsl(var(--clr-ld-red), 90%, 88%);
    --clr-traffic-red-400: hsl(var(--clr-ld-red), 84%, 57%);
    --clr-traffic-red-500: hsl(var(--clr-ld-red), 84%, 50%);
    --clr-traffic-red-600: hsl(var(--clr-ld-red), 84%, 43%);
    --clr-traffic-red-800: hsl(var(--clr-ld-red), 84%, 22%);

    --clr-traffic-orange-200: hsl(var(--clr-ld-orange), 90%, 95%);
    --clr-traffic-orange-300: hsl(var(--clr-ld-orange), 90%, 88%);
    --clr-traffic-orange-400: hsl(var(--clr-ld-orange), 84%, 57%);
    --clr-traffic-orange-500: hsl(var(--clr-ld-orange), 84%, 50%);
    --clr-traffic-orange-600: hsl(var(--clr-ld-orange), 84%, 43%);
    --clr-traffic-orange-800: hsl(var(--clr-ld-orange), 84%, 22%);

    --clr-traffic-green-200: hsl(var(--clr-ld-green), 90%, 95%);
    --clr-traffic-green-300: hsl(var(--clr-ld-green), 90%, 88%);
    --clr-traffic-green-400: hsl(var(--clr-ld-green), 84%, 57%);
    --clr-traffic-green-500: hsl(var(--clr-ld-green), 84%, 50%);
    --clr-traffic-green-600: hsl(var(--clr-ld-green), 84%, 43%);
    --clr-traffic-green-800: hsl(var(--clr-ld-green), 84%, 22%);

    --clr-traffic-blue-200: hsl(var(--clr-ld-blue), 90%, 95%);
    --clr-traffic-blue-300: hsl(var(--clr-ld-blue), 90%, 88%);
    --clr-traffic-blue-400: hsl(var(--clr-ld-blue), 84%, 57%);
    --clr-traffic-blue-500: hsl(var(--clr-ld-blue), 84%, 50%);
    --clr-traffic-blue-600: hsl(var(--clr-ld-blue), 84%, 43%);
    --clr-traffic-blue-800: hsl(var(--clr-ld-blue), 84%, 22%);

    --clr-icon: var(--clr-dark-450);


    /* CALCULATIONS */
    --scrollbar-width-browser: 8px;
}

@font-face {
    font-family: "Test";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter/Inter-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Test";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter/Inter-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Test";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter/Inter-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Test";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter/Inter-Bold.woff2") format("woff2");
}

/* TEST SCROLLBAR WIDTH OP BROWSERS */
/* @media (browser firefox?) {
    --scrollbar-width-browser: 8px;
} */


@media only screen and (max-width: 650px) {}

@media only screen and (max-width: 768px) {}

@media only screen and (max-width: 992px) {}

@media only screen and (max-width: 1280px) {
    :root {
        /* --sidebar-width-normal: 25rem; */
        /* --container-left-width: 30rem; */
        /* --container-right-width: 100rem; */

        /* --onboarding-left-width: 25rem; */
        /* --onboarding-right-width: 50rem; */
    }
}


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

* {
    margin: 0;
    scrollbar-width: thin;
}

html {
    --sidebar-width: var(--sidebar-width-normal);
    font-size: 62.5%;
    font-family: var(--font-family), sans-serif;
    display: flex;
    height: 100%;
    background-color: var(--clr-light-300);
    scrollbar-color: var(--clr-scrollbar-dark) var(--clr-scrollbar-light);
    accent-color: var(--clr-highlight-500);
    scrollbar-width: thin;
}

body {
    font-size: var(--font-size-p);
    -webkit-font-smoothing: antialiased;
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100%;
    position: relative;
}

img,
picture,
video,
canvas,
svg {
    display: block;
}

.img-s {
    width: var(--image-size-s);
    min-width: var(--image-size-s);
}

.img-m {
    width: var(--image-size-m);
    min-width: var(--image-size-m);
}

.img-l {
    width: var(--image-size-l);
    min-width: var(--image-size-l);
}

input,
button,
textarea,
select {
    font: inherit;
    caret-color: var(--clr-dark-450);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

.lighter {
    color: var(--clr-dark-450);
}

.darker {
    color: var(--clr-dark-900);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: 400;
    line-height: 130%;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: 400;
    line-height: 140%;
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 400;
    line-height: 140%;
}

p {
    line-height: 130%;
}

p.medium {
    font-weight: 500;
}

p.small {
    font-size: var(--font-size-p-small);
}

p.small.medium {
    font-size: var(--font-size-p-small);
    font-weight: 500;
}

p.paragraph {
    line-height: 165%;
}

h5 {
    font-size: var(--font-size-h5);
    font-weight: 400;
    line-height: 135%;
}

h5.caps {
    text-transform: uppercase;
    color: var(--clr-dark-450);
}


ul {
    list-style-type: none;
    padding-left: 0;
}

a {
    color: var(--clr-dark-900);
    text-decoration: none;
    width: fit-content;
}

a.highlight,
a.highlight>* {
    color: var(--clr-highlight-500);
}

a:not(.button):empty:hover,
a:not(.button):hover>* {
    text-decoration: underline;
    color: var(--clr-dark-900);
}

a.highlight:hover,
a.highlight:hover>* {
    color: var(--clr-highlight-600);
}

button {
    border: none;
    cursor: pointer;
}

select {
    width: 100%;
    height: var(--form-height);

    margin: 0;
    padding-inline: var(--button-inline-padding);
    font-family: inherit;

    border: none;

    appearance: none;
    background-color: transparent;
    font-size: inherit;
    cursor: pointer;
    line-height: inherit;
    outline: none;
    border-radius: var(--roundness-s);
}

select>option {
    width: 100px;
    text-overflow: ellipsis;
    overflow: hidden;
}

select:focus {
    outline: var(--border-width-s) solid var(--clr-highlight-500);
}

select:hover {
    background-color: var(--clr-light-200);
}

.select {
    width: 100%;
    min-width: 15ch;
    max-width: 30ch;

    border: none;
    border-radius: var(--roundness-s);
    position: relative;
}

.select select {
    border: var(--border-width-s) solid var(--clr-border) !important;
    padding-right: calc(var(--button-inline-padding) + 2rem);
    text-overflow: ellipsis;
}

.select-arrow {
    position: absolute;
    right: var(--button-inline-padding);
    top: 50%;
    transform: translateY(-50%);
    width: var(--image-size-m);
    height: var(--image-size-m);
    background-image: url("../images/chevron-down.svg");
    background-size: 100%;
    pointer-events: none;
}

select:focus+.select-arrow {
    background-image: url("../images/chevron-up.svg");
}

select>* {
    background-color: var(--clr-light-100);
    color: var(--clr-dark-900);
    border-radius: 15px;
}

select::-ms-expand {
    display: none;
}


input[type=radio] {
    width: var(--checkbox-height-s);
    height: var(--checkbox-height-s);
    cursor: pointer;
}

.radio {
    position: relative;
    width: var(--checkbox-height-s);
    height: var(--checkbox-height-s);
    cursor: pointer;
}

.radio input[type=radio] {
    opacity: 0;
    width: var(--checkbox-height-s);
    height: var(--checkbox-height-s);
    display: block;
}

.fake-radio {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--clr-light-100);
    pointer-events: none;
    border: var(--border-width-s) solid var(--clr-border);
}

input[type=radio]:checked+.fake-radio {
    background-color: var(--clr-highlight-500);
    border-color: var(--clr-highlight-600);
    background-image: url("../images/checkmark-white.svg");
    background-size: 1.6rem;
    background-position: center;
}

.checkbox {
    position: relative;
    width: var(--checkbox-height-s);
    height: var(--checkbox-height-s);
    cursor: pointer;
}

.checkbox input[type=checkbox] {
    width: var(--checkbox-height-s);
    height: var(--checkbox-height-s);
    opacity: 0;
    display: block;
    cursor: pointer;
}

.fake-checkbox {
    position: absolute;
    inset: 0;
    background-color: var(--clr-light-100);
    pointer-events: none;
    border: var(--border-width-s) solid var(--clr-border);
    border-radius: var(--roundness-s);
}

input[type=checkbox]:checked+.fake-checkbox {
    background-color: var(--clr-highlight-500);
    border-color: var(--clr-highlight-600);
    background-image: url("../images/checkmark-white.svg");
    background-size: 1.6rem;
    background-position: center;
}



input[type=text],
input[type=email],
input[type=password],
input[type=search],
input[type=number] {
    border: var(--border-width-s) solid var(--clr-border);
    font-size: var(--font-size-p);
    height: var(--form-height);
    background-color: var(--clr-light-100);
    padding-inline: var(--container-padding-s);
    /* TOOD: Change color */
    color: var(--clr-dark-900);
    border-radius: var(--roundness-s);
    max-width: var(--input-width);
    width: 100%;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}


:is(input[type=text], input[type=email], input[type=password], input[type=search]).no-max {
    max-width: none;
}

:is(input[type=text], input[type=email], input[type=password], input[type=search]).large {
    max-width: var(--input-width-large);
}

:where(input[type=text], input[type=email], input[type=password], input[type=search]):focus {
    /* outline: var(--border-width-s) solid var(--clr-highlight-500); */
    border-color: var(--clr-highlight-500) !important;
    border-width: var(--border-width-m);
    outline: none !important;
}

.fake-password {
    position: relative;
    --width: var(--button-height) - 2 * var(--border-width-s);
}

.fake-password input {
    padding-right: calc(var(--width));
}

.fake-password input+.fake-password-icon {
    all: unset;
    cursor: pointer;
    width: calc(var(--width));
    height: calc(var(--width));
    display: grid;
    place-items: center;
    position: absolute;
    right: var(--border-width-s);
    bottom: var(--border-width-s);
    border-radius: 0 calc(var(--roundness-s) - 1px) calc(var(--roundness-s) - 1px) 0;
}

.fake-password input+.fake-password-icon:hover {
    background-color: var(--clr-light-200);
}

.fake-password input[type=text]+.fake-password-icon #hide-password {
    display: none;
}

.fake-password input[type=password]+.fake-password-icon #show-password {
    display: none;
}


.fake-search {
    position: relative;
    /* overflow: hidden; */
    --width: var(--button-height) - 2 * var(--border-width-s);
    max-width: var(--input-width);
}

.fake-search input[type=search] {
    /* Change paddings */
    padding-right: calc(var(--width));
}

.fake-search input[type=search][disabled] {
    background-color: var(--clr-light-300) !important;
}

/* clears the ‘X’ from Internet Explorer */
input[type=search]::-ms-clear {
    display: none;
    width: 0;
    height: 0;
}

input[type=search]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* clears the ‘X’ from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input[type=search]+.fake-search-icon {
    all: unset;
    cursor: pointer;
    width: calc(var(--width));
    height: calc(var(--width));
    display: grid;
    place-items: center;
    position: absolute;
    right: var(--border-width-s);
    top: var(--border-width-s);
    border-radius: 0 calc(var(--roundness-s) - 1px) calc(var(--roundness-s) - 1px) 0;
}

input[type=search]+.fake-search-icon:hover {
    background-color: var(--clr-light-200);
}




.fake-number {
    border: var(--border-width-s) solid var(--clr-border);
    border-radius: var(--roundness-s);
    display: flex;
    gap: var(--gap-s);
    width: fit-content;
    position: relative;
}

.fake-number input {
    border: none;
    padding-inline: calc(var(--button-height) + var(--gap-xs));
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    width: 13rem;
    text-align: center;
}



.fake-number button {
    position: absolute !important;
}

.fake-number button:hover {
    background-color: var(--clr-light-200) !important;
}

.fake-number button.increase {
    right: 0;
}

.fake-number button.decrease {
    left: 0;
}


.text-container {
    position: relative;
}

.form-error-container {
    display: flex;
    --clr-icon: var(--clr-traffic-red-500);
    color: var(--clr-traffic-red-500);
    z-index: 1;
    align-items: center;
    margin-top: var(--gap-xs);
    gap: 0.2rem;
}

:where(input[type=text], input[type=email], input[type=password], input[type=search]).form-error {
    outline: var(--border-width-s) solid var(--clr-traffic-red-500);
    color: var(--clr-traffic-red-500);
}



input:is(:-webkit-autofill, :autofill) {
    box-shadow: inset 0 0 100vmax var(--clr-highlight-200);
}




:is(a, button, input[type=submit], div).button {
    display: flex;
    align-items: center;
    gap: var(--gap-s);

    width: fit-content;
    height: var(--button-height);
    min-width: var(--button-height);
    min-height: var(--button-height);
    /* TOOD: Fix */
    padding-inline: var(--button-inline-padding);

    color: var(--clr-dark-900);
    background-color: transparent;
    text-align: start;
    border-radius: var(--roundness-s);
    min-width: fit-content;
    text-transform: capitalize;
    cursor: pointer;
    position: relative;
}

:is(a, button, input[type=submit], div).button.small {
    height: var(--button-height-small);
    min-width: var(--button-height-small);
    min-height: var(--button-height-small);
}

:is(a, button, input[type=submit], div).button.extrasmall {
    height: var(--button-height-extrasmall);
    min-width: var(--button-height-extrasmall);
    min-height: var(--button-height-extrasmall);
    padding-inline: 0.8rem;
    gap: var(--gap-xs);
}

:is(a, button, input[type=submit], div).button p {
    text-wrap: nowrap;
    font-size: var(--font-size-p);
}

nav.sidebar :is(a, button, input[type=submit], div).button p {
    font-size: var(--font-size-p-small);
}

:is(a, button, input[type=submit], div).button.small-width {
    width: var(--button-height);
    justify-content: center;
    padding-inline: 0;
    min-width: none;
}

:is(a, button, input[type=submit], div).button.center {
    justify-content: center;
}

.full-width {
    width: 100% !important;
    justify-content: center;
}

:is(a, button, input[type=submit], div).button:hover {
    background-color: var(--clr-light-200);
}


body.spectating .sidebar-container :is(a, button, input[type="submit"], div).button:hover {
    background-color: var(--clr-dark-800);
}

:is(a, button, input[type=submit], div).button.left-icon {
    padding-left: 0;
    gap: 0;
}

:is(a, button, input[type=submit], div).button.right-icon {
    padding-right: 0;
    gap: 0;
}

:is(a, button, input[type=submit]):disabled {
    cursor: not-allowed;
}

:is(a, button, input[type=submit]):disabled>* {
    opacity: 0.4;
}

:is(a, button, input[type=submit]):disabled [data-tooltip]::before,
:is(a, button, input[type=submit]):disabled [data-tooltip]::after {
    opacity: 0 !important;
}

:is(a, button, input[type=submit]).primary:disabled {
    background-color: var(--clr-dark-450) !important;
}

:is(a, button, input[type=submit]).secondary:disabled {
    background-color: var(--clr-light-300);
}

input:disabled {
    cursor: not-allowed;
}

input:disabled>* {
    opacity: 0.4;
}

:is(a, button, input[type=submit], div).button.primary {
    color: var(--clr-light-100);
    background-color: var(--clr-highlight-500);
    --clr-icon: var(--clr-light-100);
}

:is(a, button, input[type=submit], div).button.light {
    color: var(--clr-dark-900);
    background-color: var(--clr-light-100);
    --clr-icon: var(--clr-dark-900);
}

:is(a, button, input[type=submit], div).button.primary .lighter,
:is(a, button).button.primary.lighter {
    color: var(--clr-highlight-400);
}

:is(a, button, input[type=submit], div).button.primary.dark {
    background-color: var(--clr-dark-900);
}

:is(a, button, input[type=submit], div).button.primary:hover {
    background-color: var(--clr-highlight-600);
}

:is(a, button, input[type=submit], div).button.primary.dark:hover {
    background-color: var(--clr-dark-900);
}

:is(a, button, input[type=submit], div).button.primary.dark:hover p {
    color: var(--clr-light-300);
    --clr-icon: red !important;
}

:is(a, button, input[type=submit], div).button.primary.dark:hover svg {
    --clr-icon: var(--clr-light-300);
}

:is(a, button, input[type=submit], div).button.primary-dash {
    border: var(--border-width-s) solid var(--clr-highlight-500);
    border-style: dashed;
    background-color: var(--clr-highlight-200);
    color: var(--clr-highlight-500);
    --clr-icon: var(--clr-highlight-500);
}

body.spectating .sidebar-container :is(a, button, input[type=submit], div).button.primary-dash {
    background-color: var(--clr-dark-800);
}

:is(a, button, input[type=submit], div).button.primary-dash .lighter,
:is(a, button).button.primary-dash.lighter {
    color: var(--clr-highlight-400);
}

:is(a, button, input[type=submit], div).button.primary-dash:hover {
    background-color: var(--clr-highlight-300);
}

:is(a, button, input[type=submit], div).button.primary-dash .lighter,
:is(a, button).button.primary-dash[disabled] {
    background-color: var(--clr-light-300);
    color: var(--clr-dark-450);
    --clr-icon: var(--clr-dark-450);
    border-color: var(--clr-dark-450);
}

:is(a, button, input[type=submit], div).button.primary-dash .lighter,
:is(a, button).button.primary-dash[disabled]:hover {
    background-color: var(--clr-light-300);
    color: var(--clr-dark-450);
    --clr-icon: var(--clr-dark-450);
    border-color: var(--clr-dark-450);
}


:is(a, button, input[type=submit], div).button.error {
    background-color: var(--clr-traffic-red-500);
    --clr-icon: var(--clr-light-100);
    color: var(--clr-light-100);
}

:is(a, button, input[type=submit], div).button.error:hover {
    background-color: var(--clr-traffic-red-600);
}

:is(a, button, input[type=submit], div).button.secondary.error {
    background-color: var(--clr-traffic-red-200);
    --clr-icon: var(--clr-traffic-red-500);
    color: var(--clr-traffic-red-500);
    border-color: var(--clr-traffic-red-300);
}

:is(a, button, input[type=submit], div).button.secondary.error:hover {
    background-color: var(--clr-traffic-red-300);
    --clr-icon: var(--clr-traffic-red-600);
    color: var(--clr-traffic-red-400);
    border-color: transparent;
}

:is(a, button, input[type=submit], div).button.secondary {
    color: var(--clr-dark-900);
    background-color: var(--clr-light-300);
    border: var(--border-width-s) solid var(--clr-border);
}

:is(a, button, input[type=submit], div).button.secondary:hover {
    background-color: var(--clr-border);
}

input.input-nostyling {
    padding: 0;
    border: none;
    outline: none;
    width: fit-content;

    font-size: var(--font-size-p);
    height: fit-content;
    background-color: transparent;
    padding-inline: 0;
    color: var(--clr-dark-900);
    border-radius: 0;
    max-width: none;
}

button p {
    text-align: start;
    width: fit-content;
}

.tag {
    --height: 2.8rem;
    padding-inline: 0.8rem;
    height: var(--height);

    display: grid;
    place-items: center;
    font-size: var(--font-size-h5);

    background-color: var(--clr-light-300);
    border-radius: calc(var(--height) / 2);
    line-height: 110%;
}

body.spectating .sidebar-container .tag {
    background-color: var(--clr-dark-800);
}

.tag.small {
    --height: 1.8rem;
    padding-inline: 0.4rem;
}

.tag.highlight {
    background-color: var(--clr-highlight-300);
    color: var(--clr-highlight-500);
}

.tag.error {
    background-color: var(--clr-traffic-red-200) !important;
    color: var(--clr-traffic-red-600) !important;
}

.tag.success {
    background-color: var(--clr-traffic-green-200) !important;
    color: var(--clr-traffic-green-800) !important;
}

body.sidebar-collapsed aside.sidebar-container .collapse-hidden {
    visibility: hidden;
}

body.sidebar-collapsed aside.sidebar-container .collapse-removed {
    display: none;
}

body:not(.sidebar-collapsed) aside.sidebar-container .collapse-hidden-reverse {
    visibility: hidden;
}

body:not(.sidebar-collapsed) aside.sidebar-container .collapse-removed-reverse {
    display: none;
}

body.left-sidebar-collapsed .left-side-container .collapse-hidden {
    visibility: hidden;
}

body.left-sidebar-collapsed .left-side-container .collapse-removed {
    display: none;
}

body:not(.left-sidebar-collapsed) .left-side-containr .collapse-hidden-reverse {
    visibility: hidden;
}

body:not(.left-sidebar-collapsed) .left-side-container .collapse-removed-reverse {
    display: none;
}

.thin-scrollbar {
    scrollbar-width: thin;
    overflow-y: auto;
    overflow-x: hidden;
    --padding-right: 0;
    padding-right: var(--padding-right) !important;
}

.thin-scrollbar-s {
    scrollbar-gutter: stable;
    --padding-right: calc(var(--container-padding-s) - 0.8rem);
}

.thin-scrollbar-m {
    scrollbar-gutter: stable;
    --padding-right: calc(var(--container-padding-m) - 0.8rem);
}

.thin-scrollbar-none {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.thin-scrollbar-s.thin-scrollbar-none {
    padding-right: var(--container-padding-s) !important;
}

.thin-scrollbar-m.thin-scrollbar-none {
    padding-right: var(--container-padding-m) !important;
}

.thin-scrollbar-none:hover {
    scrollbar-width: thin !important;
    padding-right: var(--padding-right) !important;
}

.thin-scrollbar-none::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}


.shadow {
    filter: var(--shadow);
}

.border-top {
    border-top: var(--border-width-s) solid var(--clr-border);
}

.border-right {
    border-right: var(--border-width-s) solid var(--clr-border);
}

.border-bottom {
    border-bottom: var(--border-width-s) solid var(--clr-border);
}

.border-left {
    border-left: var(--border-width-s) solid var(--clr-border);
}

.required-missing {
    background-color: var(--clr-traffic-red-200) !important;
    border-color: var(--clr-traffic-red-500) !important;
}

.required-missing[type=file]+div {
    background-color: var(--clr-traffic-red-200) !important;
    border-color: var(--clr-traffic-red-500) !important;
}

.underline {
    text-decoration: underline;
}

.disabled {
    text-decoration: line-through;
    cursor: not-allowed;
}

.button-container form {
    display: none;
}

.form-inputs label {
    min-height: 2rem;
}

.form-inputs label p {
    min-height: 2rem;
}




/* TABLE */
table {
    border-spacing: 0;
    border: var(--border-width-s) solid var(--clr-border);
    border-radius: var(--roundness-s);
}

tr.table-header th {
    border-bottom: var(--border-width-s) solid var(--clr-border);
    justify-content: start;
    width: 15%;
}

tr.table-header th:first-of-type {
    width: 35%;
}

tr:not(.table-header):nth-of-type(2n)>* {
    background-color: var(--clr-light-200);
}

tr:not(.table-header):hover>* {
    background-color: var(--clr-light-300);
}

th {
    text-align: left;
    font-weight: unset;
}

th,
td {
    padding-inline: var(--container-padding-s);
    height: 5rem;
}

td.status>div {
    display: flex;
    justify-content: space-between;
    gap: var(--gap-s);
    align-items: center;
}

td.status .tag.pending {
    background-color: var(--clr-light-300);
}

td.status .tag.paid {
    background-color: var(--clr-highlight-300);
}

.status-options {
    --height: 3.6rem;
    height: var(--height) !important;
    width: var(--height) !important;
    min-height: var(--height) !important;
    min-width: var(--height) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
}

.table-flex-row {
    display: flex;
    gap: var(--gap-s);
    align-items: center;
}

.table-container {
    overflow: hidden;
}

.table-overflow-container {
    overflow: auto;
}



/* TOGGLE */
.fake-toggle {
    /* background-color: red; */
}
.fake-toggle input {
    position: absolute;
    left: -100vmax;
}
.fake-toggle-container {
    --height: 2.4rem;
    --padding: 0.2rem;
    --toggle-height: calc(var(--height) - 2 * var(--border-width-s) - 2 * var(--padding));
    height: var(--height);
    border-radius: 100vmax;
    background-color: var(--clr-dark-450);
    position: relative;
    border: var(--border-width-s) solid var(--clr-dark-450);
    padding: var(--padding);
    width: calc((var(--height) - var(--border-width-s) - var(--padding)) * 2);
}
.fake-toggle input:checked + .fake-toggle-container {
    background-color: var(--clr-highlight-500);
    border: var(--border-width-s) solid var(--clr-highlight-500);
}
.fake-toggle-container label {
    font-size: 0px !important;
    color: transparent;
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    visibility: visible !important;
}
.fake-toggle-container .toggle {
    height: var(--toggle-height);
    aspect-ratio: 1 / 1;
    border-radius: 100vmax;
    background-color: var(--clr-light-100);
    transition: margin-left 0.1s cubic-bezier(.17,.67,.83,.67);
    margin-left: 0;
}
.fake-toggle input:checked + .fake-toggle-container .toggle {
    margin-left: var(--toggle-height);
}

.spectating-toggle {
    display: flex;
    gap: var(--gap-s);
    align-items: center;
    height: var(--button-height);
    border-radius: var(--roundness-s);
    padding-inline: 1rem;
}
.spectating-toggle:hover {
    background-color: var(--clr-light-200);
}
body.spectating .spectating-toggle:hover {
    background-color: var(--clr-dark-800);
}