: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-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-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.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);
}
.fake-search input[type=search] {
    /* Change paddings */
    padding-right: calc(var(--width));
}

/* 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 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);
}


: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);
}
: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.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-500);
    --clr-icon: var(--clr-light-100);
    color: var(--clr-light-100);
    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%;
}
.tag.small {
    --height: 1.8rem;
    padding-inline: 0.4rem;
}
.tag.highlight {
    background-color: var(--clr-highlight-300);
    color: var(--clr-highlight-500);
}

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;
}