:root {
    /* Primary Colors */
    --primary-color: hsl(171, 100%, 22%);
    --accent-color: #38c7b1;
    --secondary-color: #0e3b35;

    /* Background Colors */
    --background-primary: hsl(218, 20%, 95%);
    --background-secondary-color: hsl(217, 35%, 91%);
    --background-subtle-color: #e0e0e0;
    --background-elevated-header: hsl(217, 35%, 91%);
    --background-disabled: hsl(215, 17%, 86%);
    --background-dark-color: #35383b;
    --background-light-color: #FFFFFF;
    --list-check-bg: #FA0078;

    /* Text Colors */
    --text-primary-color: #000000;
    --text-primary-color-opposite: #ffffff;
    --text-secondary-color: #101010;
    --text-subtle-color: rgb(55 65 81);
    --text-light-color: #ECF0F1;
    --text-dark-color: #000000;
    --text-red-color: #c82333;
    --text-orange-color: #FF8C00;
    --text-yellow-color: #DAA520;
    --text-purple-color: #5B5EAE;
    --text-pink-color: #A56A9E;
    --text-blue-color: #0056b3;
    --text-green-color: #218838;
    --text-hero-color: hsl(217, 15%, 19%);

    /* Link Colors */
    --link-color: #3498DB;
    --link-hover-color: #007060;

    /* Border Colors */
    --border-color: #363636;
    --border-soft-color: #cfcfcf;
    --border-very-soft-color: hsl(0, 0%, 85%);
    --border-dark-color: #34495E;

    /* Hover Colors */
    --hover-bg-color: #008571;
    --hover-text-color: #34495E;

    --btn-theme-bg: #000000;
    --btn-theme-bg-active: #1a1a1a;
    --btn-theme-bg-hover: #2a2a2a;
    --btn-theme-bg-focus: #2a2a2a;

    /* Shadow Colors */
    --shadow-soft: rgba(0, 0, 0, 0.03);
    --shadow-hard: rgba(0, 0, 0, 0.2);
    --shadow-very-hard: rgba(0, 0, 0, 0.3);
    --shadow-theme-light: rgba(0, 0, 0, 0.1);
    --shadow-theme-dark: rgba(0, 0, 0, 0.2);
    --shadow-theme-opposite-light: rgba(255, 255, 255, 0.1);
    --shadow-theme-opposite-dark: rgba(255, 255, 255, 0.2);
    --form-control-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);

    /* Color Levels */
    --primary-1: rgba(0, 112, 96, 0.1);
    --primary-3: rgba(0, 112, 96, 0.3);
    --primary-5: rgba(0, 112, 96, 0.5);
    --primary-7: rgba(0, 112, 96, 0.7);
    --primary-9: rgba(0, 112, 96, 0.9);

    /* Text Gradient Overlay */
    --text-gradient-overlay-color: rgba(0, 0, 0, 0.6);
    --text-gradient-overlay-blend-mode: multiply;

    /* Overlay Colors */
    --overlay-background-1: rgba(0, 0, 0, 0.03);
    --overlay-background-2: rgba(0, 0, 0, 0.045);
    --overlay-background-3: rgba(0, 0, 0, 0.06);
    --overlay-background-4: rgba(0, 0, 0, 0.085);

    /* Scrollbar Colors */
    --scrollbar-color: #c9c9c9;
    --scrollbar-hover-color: #b8b8b8;

    /* Selection Color */
    --selection-color: #D2DCFF;

    /* Form Control */
    --form-control-background: transparent;
    --form-check-background: #2b333f;

    /* Range */
    --range-track: #e0e0e0;
    --range-track-filled: #bcbcbc;
    --range-thumb: var(--primary-color);
    --range-thumb-border: var(--range-track-filled);

    /* SVG Icons */
    --arrow-down-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235D5D5D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    --arrow-right-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235D5D5D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 6l4 4-4 4'/%3e%3c/svg%3e");
    --arrow-up-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%235D5D5D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 12l4-4 4 4'/%3e%3c/svg%3e");
    --select-arrow-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");

    --line-rounded-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='24' viewBox='0 0 8 24'><rect x='0' y='0' width='8' height='24' rx='2' ry='2' fill='currentColor'/></svg>");
    --checkbox-check-icon: url("data:image/svg+xml,<svg width='800' height='800' fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4'/></svg>");

    /* FONT */
    --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    --font-display: "GT Walsheim", "SF UI Display", Helvetica, sans-serif;
    --font-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

.color-test-box {
    width: 100px;
    height: 100px;
    background-color: var(--background-primary-overlay-5);
    background-color: #202123;
}

[data-theme="dark"] {
    /* Primary Colors */
    --primary-color: #5fe5d1;
    --accent-color: #E55F73;
    --secondary-color: #56a5d9;

    /* Background Colors */
    --background-primary: hsl(0, 0%, 13%);
    --background-secondary-color: hsl(0, 0%, 9%);
    --background-subtle-color: #2c2c2c;
    --background-elevated-header: hsl(0, 0%, 15%);
    --background-disabled: hsl(0, 0%, 30%);
    --background-dark-color: #35383b;
    --background-light-color: #FFFFFF;

    /* Text Colors */
    --text-primary-color: #ffffff;
    --text-primary-color-opposite: #000000;
    --text-secondary-color: #eeeeee;
    --text-subtle-color: #cccccc;
    --text-light-color: #ECF0F1;
    --text-dark-color: #000000;
    --text-red-color: #ff6f7a;
    --text-orange-color: #FFA500;
    --text-yellow-color: #FFD700;
    --text-purple-color: #9B9ED7;
    --text-pink-color: #EAB8E3;
    --text-blue-color: #5BC0EB;
    --text-green-color: #4CAF50;
    --text-hero-color: hsl(219, 62%, 94%);


    /* Link Colors */
    --link-color: #88bde1;
    --link-hover-color: #5fe5d1;

    /* Border Colors */
    --border-color: #BDC3C7;
    --border-soft-color: #424242;
    --border-very-soft-color: #313131;
    --border-dark-color: #34495E;

    /* Hover Colors */
    --hover-bg-color: #00826e;
    --hover-text-color: #34495E;

    --btn-theme-bg: #FFFFFF;
    --btn-theme-bg-active: #F2F2F3;
    --btn-theme-bg-hover: #dbdbdb;
    --btn-theme-bg-focus: #E6E6E7;

    /* Shadow Colors */
    --shadow-soft: rgba(0, 0, 0, 0.3);
    --shadow-hard: rgba(0, 0, 0, 0.5);
    --shadow-very-hard: rgba(0, 0, 0, 0.7);
    --shadow-theme-light: rgba(255, 255, 255, 0.3);
    --shadow-theme-dark: rgba(255, 255, 255, 0.5);
    --shadow-theme-opposite-light: rgba(99, 99, 99, 0.3);
    --shadow-theme-opposite-dark: rgba(99, 99, 99, 0.5);
    --form-control-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4);

    /* Color Levels */
    --primary-1: rgba(95, 229, 209, 0.1);
    --primary-3: rgba(95, 229, 209, 0.3);
    --primary-5: rgba(95, 229, 209, 0.5);
    --primary-7: rgba(95, 229, 209, 0.7);
    --primary-9: rgba(95, 229, 209, 0.9);

    /* Text Gradient Overlay */
    --text-gradient-overlay-color: rgba(255, 255, 255, 0.8);
    --text-gradient-overlay-blend-mode: lighten;

    /* Overlay Colors */
    --overlay-background-1: rgba(255, 255, 255, 0.03);
    --overlay-background-2: rgba(255, 255, 255, 0.05);
    --overlay-background-3: rgba(255, 255, 255, 0.08);
    --overlay-background-4: rgba(255, 255, 255, 0.1);

    /* Scrollbar Colors */
    --scrollbar-color: #424242;
    --scrollbar-hover-color: #676767;

    /* Selection Color */
    --selection-color: #2c4a90;

    /* Form Control */
    --form-control-background: rgba(0, 0, 0, 0.1);
    --form-check-background: #697b98;

    /* Range */
    --range-track: #424242;
    --range-track-filled: #777777;
    --range-thumb: var(var(--primary-color));
    --range-thumb-border: var(--range-track-filled);

    /* SVG Icons */
    --arrow-down-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    --arrow-right-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 6l4 4-4 4'/%3e%3c/svg%3e");
    --arrow-up-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 12l4-4 4 4'/%3e%3c/svg%3e");
    --select-arrow-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cccccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --check-icon: url("data:image/svg+xml,<svg width='800' height='800' fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4'/></svg>");
    --checkbox-check-icon: url("data:image/svg+xml,<svg width='800' height='800' fill='%23fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M18.7 7.2c-.4-.4-1-.4-1.4 0l-7.5 7.5-3.1-3.1c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l3.8 3.8c.2.2.4.3.7.3s.5-.1.7-.3l8.2-8.2c.4-.4.4-1 0-1.4'/></svg>");
}

/* -------------------------------------
    BODY/MAIN
----------------------------------------*/
body {
    background-color: var(--background-primary);
    color: var(--text-primary-color);
    font-family: 'Arial', sans-serif;
    letter-spacing: 0.3px;
    overflow-x: hidden;
}

p {
    color: var(--text-primary-color);
}

/* -------------------------------------
    VISIBILITY
----------------------------------------*/
.hidden {
    display: none;
}

/* -------------------------------------
    ::SELECTION
----------------------------------------*/
/* *::selection {
    background-color: var(--selection-color) !important;
    color: inherit;
} */

/* -------------------------------------
    SCROLLBAR
----------------------------------------*/
* {
    scrollbar-color: var(--scrollbar-color) transparent;
}

.dropdown-menu {
    scrollbar-color: var(--scrollbar-color) var(--background-elevated);
}

.background-primary {
    scrollbar-color: var(--scrollbar-color) var(--background-primary);
}

.background-secondary {
    scrollbar-color: var(--scrollbar-color) var(--background-secondary-color);
}

.background-subtle {
    scrollbar-color: var(--scrollbar-color) var(--background-subtle-color);
}

.background-elevated {
    scrollbar-color: var(--scrollbar-color) var(--background-elevated);
}

/* -------------------------------------
    FORM CONTROL
----------------------------------------*/
.form-control {
    color: var(--text-primary-color);
    box-shadow: var(--form-control-shadow);
    border: 1px solid var(--border-9);
    height: 2.6rem;
    border-radius: 0.375rem;
    background-color: var(--form-control-background);
}

/* Webkit Autofill */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    transition: background-color 9999s ease-in-out 0s;
    -webkit-text-fill-color: var(--text-primary-color);
}

.form-control:focus {
    background-color: var(--form-control-background);
    box-shadow: var(--form-control-shadow);
    border: 1px solid var(--primary-color);
    outline: none;
    color: var(--text-primary-color);
}

.form-control::placeholder {
    color: var(--text-subtle-color);
}

.input-container {
    position: relative;
    display: flex;
    box-shadow: var(--form-control-shadow);
    border: 1px solid var(--border-9);
    border-radius: 0.375rem;
    transition: border-color 0.3s ease;
}

.input-container:focus-within {
    border: 1px solid var(--primary-color);
    background-color: var(--form-control-background);
}

.input-container input,
.input-container textarea {
    color: var(--text-primary-color);
    border: none;
    outline: none;
    background-color: var(--form-control-background);
    box-shadow: none;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.input-container input:focus,
.input-container textarea:focus {
    border: none;
    box-shadow: none;
    background-color: var(--form-control-background);
}

.input-container input::placeholder,
.input-container textarea::placeholder {
    color: var(--text-subtle-color);
}

/* Input Item */
.input-container .input-item-top {
    position: absolute;
    margin-top: 0.5rem;
    padding: 1rem;
}

.input-container .input-item-bottom {
    position: absolute;
    bottom: 0;
    margin-top: 0.5rem;
}

.input-container .input-item-left {
    position: absolute;
    left: 0;
    margin-left: 0.5rem;
}

.input-container .input-item-right {
    right: 0;
    padding: 0.5rem;
    margin-right: 1rem;
}

.input-container.thin {
    align-content: center;
    height: 2.1rem;
}

/* Input Bottom */
.input-bottom-container {
    padding-bottom: 2rem;
    transition: transform 0.3s ease;
    top: 0;
}

.overlay-input-container:focus-within {
    z-index: 1000;
}

.input-focus-show {
    opacity: 0;
    pointer-events: none;
}

.input-focus-show:focus {
    opacity: 1;
    pointer-events: auto;
}

.input-container-focus-show {
    opacity: 0;
    pointer-events: none;
}

.input-container-focus-show:focus-within {
    opacity: 1;
    pointer-events: auto;
}

.input-sm {
    height: 2rem;
}

/* Textarea */
.textarea-btn {
    cursor: pointer;
    font-size: 2.2rem;
    margin: 0px 5px;
    background: transparent;
    border: none;
    color: var(--text-primary-color);
}

.textarea-btn.bottom {
    align-self: flex-end;
}

.textarea-btn.top {
    align-self: flex-start;
}

.textarea-btn:hover {
    color: gray;
}

/* Textarea */
.textarea-auto-expand {
    height: 2.5rem;
    resize: none;
    padding-top: 0.5rem;
    /* Add padding to the top for the text */
}

/* -------------------------------------
    FORM SELECT
----------------------------------------*/
.form-select {
    color: var(--text-primary-color);
    background-color: transparent;
    border: none;
    box-shadow: 0 0 0 1px var(--border-8);
    border-radius: 0.25rem;
    background-image: var(--select-arrow-icon);
}

.form-select:focus {
    background-color: transparent;
    box-shadow: 0 0 0 2px var(--primary-color);
    outline: none;
    color: var(--text-primary-color);
}

.form-select option {
    color: initial;
    background-color: initial;
}

/* -------------------------------------
    FORM RANGE
----------------------------------------*/
.form-range {
    height: 2.5rem;

    /* The  --range-percent will be changed in js when the range is interacted with*/
    --range-percent: 0%;

    &::-webkit-slider-runnable-track {
        background: linear-gradient(to right,
                var(--range-track-filled) 0%,
                var(--range-track-filled) var(--range-percent),
                var(--range-track) var(--range-percent),
                var(--range-track) 100%);
    }

    /* Thumb */
    &::-webkit-slider-thumb {
        background: var(--range-thumb);
        box-shadow: 0 0 0 2px var(--range-thumb-border);
    }
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--primary-3);
    background: var(--range-thumb);

}

.form-range-value {
    border-radius: 0.375rem;
    padding: 0 0.5rem;
}

.form-range-value:hover {
    box-shadow: 0 0 0 1px var(--border-8);
}

.form-range-value:focus {
    box-shadow: 0 0 0 1px var(--border-4);
    color: var(--text-primary-2);
}

/* -------------------------------------
    FORM FLOATING
----------------------------------------*/
.form-floating label {
    color: var(--text-subtle-color);
}

.form-floating .form-control:focus+label {
    background-color: inherit;
    color: var(--text-secondary-color) !important;
    opacity: 1;
    height: auto;
    padding: 0;
    margin-top: 0.9rem;
    margin-left: 0.5rem;
}

.form-floating .form-control:not(:placeholder-shown)+label {
    opacity: 1;
    height: auto;
    padding: 0;
    margin-top: 0.9rem;
    margin-left: 0.5rem;
}

/*--------------------------------------
    FORM CHECKBOX
----------------------------------------*/
/* --------------------------------------
    CHECKBOX
 ----------------------------------------*/
.form-check-label:hover {
    color: var(--text-primary-2);
    cursor: pointer;
}

.form-check[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: top;
    min-height: unset;
    padding: 0;
    margin: 0;
    height: 1.5em;
    width: 1.5em;
    border-radius: 0.25em;
    border: 1px solid var(--border-8);
    background-color: white;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.form-check[type="checkbox"]:checked {
    background-color: var(--form-check-background);
    color: var(--text-light);
    background-image: var(--checkbox-check-icon);
    background-size: 1.25rem;
    background-repeat: no-repeat;
    background-position: center;
    border-color: var(--text-primary-2);
}

.check-circle {
    border-radius: 50% !important;
    margin-top: 0 !important;
}

/*--------------------------------------
    INPUT LIST
----------------------------------------*/

.input-list {
    margin-left: calc(3ch);
    white-space: nowrap;
    overflow-x: auto;
    max-width: 100%;
    padding-left: 0 !important;
}

.input-list:placeholder-shown {
    margin-left: 3%;
    padding-left: 0;
}

.input-list:placeholder-shown+.input-list-indicator {
    display: none;
}

.input-list-indicator {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1.5rem;
    border-right: 1px solid var(--border-8);
    height: 100%;
    padding: 0.4em 0;
    align-self: center;
    overflow: auto;
    text-align: center;
    font-family: monospace;
    white-space: nowrap;
}

.input-list-indicator::-webkit-scrollbar {
    display: none;
}

/* Firefox */
.input-list-indicator {
    scrollbar-width: none;
    /* Hide scrollbar in Firefox */
}

/* Internet Explorer and older Edge */
.input-list-indicator {
    -ms-overflow-style: none;
    /* Hide scrollbar in older IE and Edge */
}

.input-list-line-number {
    color: var(--text-primary-3);
}

/*--------------------------------------
    CONTENT EDITABLE CONTAINER
----------------------------------------*/
.content-editable-container {
    color: var(--text-primary-color);
    box-shadow: var(--form-control-shadow);
    border: 1px solid var(--border-9);
    min-height: 2.5rem;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    background-color: transparent;
    max-height: 15rem;
    overflow-y: auto;
}

/* Ensure the content-editable-container element does not have any space between the opening and closing tag or else the :empty selector will not work since it detects a space */
.content-editable-container:empty::before,
.content-editable-container-unstyled:empty::before {
    content: attr(placeholder);
    color: var(--text-subtle-color);
    pointer-events: none;
}

.content-editable-container.is-empty::before,
.content-editable-container-unstyled.is-empty::before {
    content: attr(placeholder);
    color: var(--text-subtle-color);
    pointer-events: none;
}

.content-editable-container:focus {
    border: 1px solid var(--primary-color);
    outline: none;
}

/*--------------------------------------
    INPUTS DISABLED
----------------------------------------*/
.form-control:disabled,
input:disabled,
input[readonly],
textarea:disabled,
textarea[readonly],
select:disabled,
select[readonly],
[contenteditable="true"][data-disabled="true"],
.dropdown .dropdown-toggle:disabled {
    background-color: var(--background-disabled);
    color: var(--text-primary-3);
    cursor: default;
}

[contenteditable="true"][data-disabled="true"]:focus {
    border: 1px solid var(--border-9);
    outline: none;
    caret-color: transparent;
}

.form-range-value[data-disabled="true"]:focus {
    border: none;
}

.form-range:disabled {
    background-color: transparent;
}

/* -------------------------------------
    BACKGROUND
----------------------------------------*/
.background-primary {
    background-color: var(--background-primary);
}

.background-secondary {
    background-color: var(--background-secondary-color);
}

.background-subtle {
    background-color: var(--background-subtle-color);
}

.background-elevated {
    background-color: var(--background-elevated);
}

.background-transparent {
    background-color: transparent;
}

/* -------------------------------------
    TEXT
----------------------------------------*/
/* Text Colors */
.text-primary-color {
    color: var(--primary-color);
}

.text-primary {
    color: var(--text-primary) !important;
}

.text-secondary {
    color: var(--secondary-color);
}

.text-accent {
    color: var(--accent-color);
}

.text-light {
    color: var(--text-light-color);
}

.text-error {
    color: var(--text-red-color);
}

.text-subtle {
    color: var(--text-subtle-color) !important;
}

.text-default {
    color: var(--text-primary-color);
}

.text-primary-opposite {
    color: var(--text-primary-color-opposite);
}

.text-orange {
    color: var(--text-orange-color);
}

.text-yellow {
    color: var(--text-yellow-color);
}

.text-purple {
    color: var(--text-purple-color);
}

.text-pink {
    color: var(--text-pink-color);
}

.text-blue {
    color: var(--text-blue-color);
}

.text-green {
    color: var(--text-green-color);
}

.text-hover-primary:hover {
    color: var(--primary-color);
}

.text-hover-secondary:hover {
    color: var(--secondary-color);
}

.text-hover-accent:hover {
    color: var(--accent-color);
}

.text-hover-light:hover {
    color: var(--text-light-color);
}

.text-hover-dark:hover {
    color: var(--text-dark-color);
}

.text-hover-error:hover {
    color: var(--text-red-color);
}

.text-hover-subtle:hover {
    color: var(--text-subtle-color);
}

.text-hover-default:hover {
    color: var(--text-primary-color) !important;
}

.text-hero {
    color: var(--text-hero-color);
    font-size: 3.75rem;
    line-height: 1.375;
    font-weight: 700;
}

.text-subhero {
    color: var(--text-subtle-color);
    font-size: 1.25rem;
    line-height: 1.625;
    font-weight: 300;
}

.text-subtitle {
    color: var(--text-subtle-color);
    font-size: 1.175rem;
    line-height: 1.5;
    font-weight: 400;
    font-family: var(--font-sans);
}

.text-xl {
    font-size: 1.25rem;
}

.text-lg {
    font-size: 1.1rem;
}

.text-sm {
    font-size: 0.875rem;
}

.text-xs {
    font-size: 0.75rem;
}

.text-bold {
    font-weight: bold;
}

.text-fade {
    position: relative;
}

.text-fade::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 80%;
    background: linear-gradient(to right, transparent, var(--background-subtle-color));
}

/* TEXT DECORATION */

.text-decoration-none {
    text-decoration: none;
    color: var(--text-primary-color);
}

.text-antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.text-underline {
    text-decoration: underline;
}

.text-gradient-overlay {
    color: var(--text-gradient-overlay-color);
    mix-blend-mode: var(--text-gradient-overlay-blend-mode);
}

/* -------------------------------------
    FONT
----------------------------------------*/
.font-serif {
    font-family: 'Times New Roman', Times, serif;
}

.font-sans {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji"
}

/* -------------------------------------
    BTN
----------------------------------------*/
.btn-close {
    color: var(--text-primary-color);
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    padding: 0.5rem;
}

.btn-close:hover,
.btn-close:focus {
    color: var(--text-subtle-color);
    box-shadow: none;
}

.btn-close:active {
    color: var(--text-primary-color);
    box-shadow: none;
}

.btn-thin {
    padding: 0.3rem 1rem !important;
}

.btn-focus-none:focus {
    outline: none;
    background-color: initial;
}

/*-------------------------------------
    CARD
----------------------------------------*/
.card {
    background-color: var(--background-elevated);
    color: var(--text-primary-1);
    border-radius: 0.5rem;
    border: none;
    overflow: visible;
    box-shadow: 0 0.5rem 0.75rem var(--shadow-opacity-3);
}

.card-body {
    overflow: visible;
    /* padding-bottom: 0; */
}

/* -------------------------------------
    LIST
----------------------------------------*/
.list-item {
    background-color: var(--background-primary-overlay-1);
    color: var(--text-primary-color);
    border: 1px solid var(--border-10);
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    min-height: 3.5rem;
    align-items: center;

    &:hover {
        background-color: var(--background-primary-overlay-2);
        color: var(--text-primary-color);
    }
}

.list-item-sm {
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.list-item.active {
    background-color: var(--background-primary-overlay-3);
}

.list-item-loader {
    display: block;
    background: none !important;
    height: 3.5rem;
    width: 100%;
    padding: 0;
}

/* LIST BORDERED */
.list-bordered .list-item {
    border-color: transparent;
    background-color: transparent;
    border-radius: 0;
}

.list-bordered .list-item+.list-item {
    border-top: 1px solid var(--border-10);
}

.list-bordered:not(.list-bordered-hover) .list-item:hover {
    background-color: transparent;
}

.list-bordered-hover .list-item:hover+.list-item,
.list-bordered-hover .list-item.active+.list-item {
    border-color: transparent;
}

.list-bordered-hover .list-item:hover,
.list-bordered-hover .list-item.active {
    background-color: var(--background-primary-overlay-3);
    border-radius: 0.5rem;
    border-color: transparent;
}

/* -------------------------------------
    MODAL
----------------------------------------*/
.modal-backdrop {
    display: none;
    position: fixed;
    backdrop-filter: blur(1px);
    background-color: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.modal-backdrop.show {
    display: block;
    opacity: 1;
}

.modal-content {
    background-color: var(--background-primary);
}

.modal-header {
    border-bottom: 1px solid var(--border-10);
}

.modal-header .btn-close {
    background-image: var(--close-icon);
}

.modal-footer {
    border-top: 1px solid var(--border-10);
}

/*-------------------------------------
    FOOTER
 -------------------------------------*/
.footer {
    background-color: var(--background-subtle-color);
    color: var(--text-light-color);
    padding: 30px 0;
    text-align: center;
}

/* -------------------------------------
    LINK
----------------------------------------*/
a {
    color: var(--text-primary-color);
    cursor: pointer;
}

a:hover {
    color: var(--text-subtle-color);
}

/* -------------------------------------
    LIST
----------------------------------------*/
.list-group-item {
    background-color: var(--background-secondary-color);
    color: var(--text-primary-color);
    border: 1px solid var(--border-color);
}

/* LIST CHECK */
.list-check {
    list-style: none;
    padding-left: 0;
}

.list-check li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.5em;
}

.list-check li::before {
    content: '';
    position: absolute;
    left: -0.1rem;
    top: 0.1rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--primary-color);
    border-radius: 50%;
}

.list-check li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 1em;
    height: 1em;
    color: var(--text-primary-color-opposite);
    background-color: currentColor;
    mask-image: var(--check-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

/* -------------------------------------
    TABLE
----------------------------------------*/
.table {
    color: var(--text-primary-2);
    border-color: var(--border-7);
}

.table th {
    color: var(--text-primary-1);
}

/* -------------------------------------
    HR
----------------------------------------*/
hr {
    background-color: var(--border-color);
}

/* -------------------------------------
    PAGE TITLE
 --------------------------------------*/
.page-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-secondary-color);
    box-shadow: 0px 2px 10px var(--shadow-soft);
}

.page-title {
    color: var(--primary-color);
    font-family: 'Arial Black', Gadget, sans-serif;
    padding-left: 3rem;
    margin: 0.5rem 0;
}

/* ---------------------------------------------------
    SIDEBAR
----------------------------------------------------- */
.sidebar-left:not(.active) {
    min-width: 0;
    width: 0 !important;
    overflow: hidden;
}

.sidebar-lg {
    width: 550px;
}

.sidebar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 100vh;
    width: 16.25rem;
    max-width: 22.5rem;
    background-color: var(--background-secondary-color);
    transition: width 0.5s;
    flex-shrink: 0;
}

.sidebar.active {
    margin-left: 0;
}

.sidebar-header-btn-container {
    padding-top: 0.5rem;
}

.sidebar-header-btn {
    color: var(--text-subtle-color);
    left: 0;
    border: none;
    z-index: 1000;
    text-overflow: clip;

}

.sidebar-collapsed-container:not(.active) {
    display: none;
    width: 0;
}

.sidebar-collapsed-container {
    height: 0;
    width: 0;
    z-index: 1000;
    background: var(--background-primary);
    box-shadow: 20px 0px 0px var(--background-primary),
        0px 2px 10px var(--shadow-soft);
    /* Use the box shadow to blend in with the navbar */
}

.sidebar-collapsed-container.active {
    width: 0;
}

.sidebar-collapsed-item-d-none:not(.active) {
    display: none;
}

.sidebar-collapsed-item-d-none.active {
    display: block;
}

.sidebar-header {
    display: flex;
    padding: 1rem 1.5rem;
    background-color: var(--background-secondary-overlay-1);
    align-items: center;
}

.sidebar-header-icon {
    outline: none;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--background-secondary-overlay-2);
    padding: 0.5rem;
    box-shadow: 0 0 0.5rem var(--shadow-opacity-7);
    transition: transform 0.3s;
    transition: box-shadow 0.1s;
}

.sidebar-header-icon:hover {
    box-shadow: 0 0 0.7rem var(--shadow-opacity-8);
    transform: scale(1.03);
}

.sidebar-header-title {
    margin: 0 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    color: var(--text-primary-2);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Sidebar List */
.sidebar-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow-y: auto;
    overflow-x: hidden;
    height: 90vh;
}

.sidebar-list-lg {
    padding: 1rem 0;
    margin: 0;
    list-style-type: none;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100vh - 8.5rem);
}

.sidebar-list-container {
    white-space: nowrap;
    position: relative;
    overflow: visible;
}

.sidebar-list-date-item {
    margin: 0 0.5rem;
    margin-top: 1.3rem;
    height: 2.5rem;
    padding-left: 0.7rem;
    display: flex;
    justify-content: space-between;
    color: var(--text-subtle-color);
    text-decoration: none;
}

.sidebar-list-item {
    align-items: center;
    cursor: pointer;
    height: 2.5rem;
    padding-left: 0.7rem;
    margin: 0 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    color: var(--text-primary-color);
    text-decoration: none;
}

.sidebar-list-item.item-lg {
    height: 3.5rem;
    padding-left: 0.7rem;
}

.sidebar-list-item .text-fade::after,
.sidebar-list-date-item .text-fade::after {
    background: linear-gradient(to right, transparent, var(--background-secondary-color));
}

.sidebar-list-item:hover,
.sidebar-list-item:focus-within {
    background-color: var(--background-secondary-overlay-2);
}

.sidebar-list-item:hover .text-fade::after,
.sidebar-list-item:focus-within .text-fade::after {
    background: linear-gradient(to right, transparent, var(--background-secondary-overlay-2));
}

.sidebar-list-item.active {
    background-color: var(--background-secondary-overlay-3);
}

.sidebar-list-item.active .text-fade::after {
    background: linear-gradient(to right, transparent, var(--background-secondary-overlay-3));
}

.sidebar-list-item-title,
.sidebar-list-item-title:hover {
    width: calc(95% - 1.5rem);
    text-overflow: clip;
    overflow-x: hidden;
    text-decoration: none;
    color: var(--text-overlay-8);
    font-family: var(--font-sans);
    line-height: 1.4;
    font-weight: 500;
}

.sidebar-list-item.item-lg .sidebar-list-item-title {
    width: 90%;
    text-overflow: clip;
    overflow-x: hidden;
    font-size: 1rem;
}

.sidebar-list-item-icon {
    padding: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    background-color: var(--background-secondary-overlay-3);
}

.sidebar-list-item.item-lg .sidebar-list-item-icon {
    padding: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    font-size: 1.5rem;
}

.sidebar-list-item-loader {
    pointer-events: none;
    height: 2.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    display: block;
}

.sidebar-list-item-loader.item-lg {
    height: 3.5rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 0.5rem;
    display: block;
}

/* Sidebar List Collapse */
.sidebar-list-collapse-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 1rem;
    margin-top: 0.25rem;
    transition: margin 0s;
    transition: margin 0.1s ease-in-out 0.2s;
}

.sidebar-list-collapse-toggle:hover::after,
.sidebar-list-collapse-toggle.active::after {
    display: block;
}

.sidebar-list-collapse-toggle::after {
    display: none;
    content: '';
    width: 1.5rem;
    height: 1.5rem;
    background-image: var(--arrow-down-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    /* Prevents shrinking */
}

.sidebar-list-collapse-toggle[aria-expanded="true"]::after {
    display: block;
    background-image: var(--arrow-up-icon);
}

.sidebar-list-collapse-toggle[aria-expanded="true"] {
    background-color: var(--background-secondary-overlay-2);
    margin-bottom: 0.25rem;
    transition: margin 0s;
}

.sidebar-list-collapse-toggle[aria-expanded="true"] .text-fade::after {
    background: linear-gradient(to right, transparent, var(--background-secondary-overlay-2));
}


.sidebar-list-collapse-toggle[aria-expanded="true"].active {
    background-color: var(--background-secondary-overlay-3);
}

.sidebar-list-collapse-toggle[aria-expanded="true"].active .text-fade::after {
    background: linear-gradient(to right, transparent, var(--background-secondary-overlay-3));
}

.sidebar-list-collapse {
    font-size: 0.875rem;
    margin-left: 1.5rem;
}

.sidebar-list-collapse .sidebar-list-item-icon {
    font-size: 0.875rem;
}

/* Sidebar Icon Only */
.sidebar-icon-only-collapsed {
    width: 5rem !important;
}

.sidebar-icon-only-collapsed .sidebar-resizer {
    pointer-events: none;
}

.sidebar-icon-only-collapsed .sidebar-list-item-title,
.sidebar-icon-only-collapsed .sidebar-header-title,
.sidebar-icon-only-collapsed .sidebar-list-collapse-toggle::after {
    display: none;
}

.sidebar-icon-only-collapsed .sidebar-list-collapse {
    margin-left: 0.375rem;
}

/* Sidebar Resizer */
.sidebar-resizer {
    cursor: ew-resize;
    position: absolute;
    user-select: none;
    top: 0;
    right: 0;
    height: 100%;
    width: 0.125rem;
    background-color: var(--border-soft-color);
}

.sidebar-resizer:hover {
    background-color: var(--border-10);
    width: 0.25rem;
}

.sidebar-resizer:active {
    width: 0.125rem;
    background-color: var(--primary-color);
}

.sidebar-item-loader {
    display: none;
    pointer-events: none;
}

/* NEAR SIDEBAR TOP */
.near-sidebar-top-card {
    display: flex;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: var(--shadow-hard-3);
    /* Hide the card when not active */
    padding: 0 1rem;
    height: 0;
    overflow: hidden;
}

.near-sidebar-top-card.active {
    padding: 1rem;
    height: auto;
}

.near-sidebar-top-icon {
    outline: none;
    font-size: 1.5rem;
    border-radius: 0.5rem;
    background-color: var(--text-primary-1);
    color: var(--text-primary-10);
    padding: 0.5rem;
    box-shadow: 0 0 0.5rem 0 var(--shadow-opacity-2);
    transition: transform 0.3s;
    transition: box-shadow 0.1s;
}

.near-sidebar-top-icon:hover {
    box-shadow: 0 0 0.7rem 0 var(--shadow-opacity-3);
    transform: scale(1.03);
}

.near-sidebar-top-icon:active,
.near-sidebar-top-icon:focus {
    background-color: var(--text-primary-2);
}

.near-sidebar-top-toggle {
    background-image: var(--arrow-down-icon);
    background-size: 1rem;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    padding: 0.75rem;
    width: 1rem;
    right: -0.45rem;
    top: 0;
    background-color: var(--background-elevated);
    border-radius: 50%;
    border: none;
    box-shadow: 0 0.15rem 0.5rem 0 var(--shadow-opacity-4);
    z-index: 100;
}

.near-sidebar-top-toggle.active {
    /* The Shadow should make it seem as if this is an extention of the near-sidebar-top-container*/
    box-shadow: 0.5rem 0 0.5rem -0.5rem var(--shadow-opacity-4);
    background-image: var(--arrow-up-icon);
}

.near-sidebar-top-toggle:hover {
    filter: brightness(var(--btn-secondary-brightness-hover));
}

/*-------------------------------------
    BORDER/OUTLINE/SHADOW
 -------------------------------------*/

.border-thin {
    border-width: 1px;
    border-style: solid;
}

.border-soft {
    border-color: var(--border-soft-color);
}

.border-none {
    border: none;
}

.border-hover-none:hover {
    border: none;
}

.border-active-none:active {
    border: none;
}

.border-focus-none:focus {
    border: none;
}

.border-all-state-none:hover,
.border-all-state-none:active,
.border-all-state-none:focus {
    border: none !important;
}

.outline-all-state-none,
.outline-all-state-none:hover,
.outline-all-state-none:active {
    outline: none !important;
}

.shadow-all-state-none,
.shadow-all-state-none:hover,
.shadow-all-state-none:active {
    box-shadow: none !important;
}

.shadow-soft {
    box-shadow: 0 0 1rem var(--shadow-soft);
}

.shadow-hard {
    box-shadow: 0 0 1rem var(--shadow-hard);
}

/*-------------------------------------
    LABEL
 -------------------------------------*/
label {
    color: var(--text-primary-4);
    font-family: var(--font-sans);
    font-weight: 400;
    margin-bottom: 0.1rem;
}

/*-------------------------------------
    HEADERS
 -------------------------------------*/
h1 {
    font-size: 2.175rem;
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 2.25rem;
}

h2 {
    font-size: 1.5rem;
    font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    line-height: 1.75rem;
}

h3 {
    font-size: 1.25rem;
    font-family: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: 600;
    line-height: 1.5rem;
    margin-bottom: 0;
}

h5 {
    margin: 0;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.subtitle {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.1rem;
    color: var(--text-primary-4);
}

/*-------------------------------------
    ACTIVE CLASSES
 -------------------------------------*/
.opacity-active-100.active {
    opacity: 1 !important;
}

.opacity-active-0.active {
    opacity: 0 !important;
}

.cursor-default {
    cursor: default !important;
}

.cursor-active-pointer.active {
    cursor: pointer !important;
}

.pointer-events-none {
    pointer-events: none !important;
}

.pointer-events-active-auto.active {
    pointer-events: auto !important;
}

.width-0 {
    width: 0 !important;
}

.width-active-auto.active {
    width: auto !important;
}

.height-0 {
    height: 0 !important;
}

.height-active-auto.active {
    height: auto !important;
}

/*-------------------------------------
    CURSOR
 -------------------------------------*/
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/*-------------------------------------
    :ACTIVE/:FOCUS/:HOVER CLASSES
 -------------------------------------*/

.background-hover-none:hover {
    background-color: transparent !important;
}

/*--------------------------------------
    SWEET ALERT
 -------------------------------------*/
div:where(.swal2-container) div:where(.swal2-popup) {
    background-color: var(--background-elevated);
    color: var(--text-primary-color);
    border-radius: 0.5rem;
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-confirm) {
    background-color: var(--btn-primary-background);
    color: var(--text-primary-10);
    border: 1px solid var(--btn-primary-border);
}

div:where(.swal2-container) h2:where(.swal2-title) {
    color: var(--text-primary-3);
}

div:where(.swal2-container) button:where(.swal2-styled):where(.swal2-cancel) {
    border: 1px solid;
}

/* -------------------------------------
    MISCELLANEOUS
 ---------------------------------------*/
[contenteditable="true"]:focus {
    outline: none;
}

.z-index-1 {
    z-index: 1;
}

.img-sm {
    height: 1.5rem;
}

.bottom-fixed {
    position: fixed;
    bottom: 0;
    z-index: 0;
    width: 100%;
}

.bottom-sticky {
    position: sticky;
    bottom: 0;
    z-index: 0;
}

.top-fixed {
    position: fixed;
    top: 0;
    z-index: 0;
    width: 100%;
}

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

.top-nav {
    top: var(--navbar-height);
}

.border-thin,
.border-thin:active,
.border-thin:focus,
.border-thin:hover,
.border-thin:focus-within {
    border-width: 1px !important;
}

.z-index-1000 {
    z-index: 1000;
}

/* Search List */
.search-list-container {
    position: fixed;
    top: 7vh;
    z-index: 1;
}

.search-list {
    display: none;
    background-color: var(--background-secondary-color);
    color: var(--text-primary-color);
    border: 1px solid var(--border-color);
    overflow-y: auto;
}

.search-list li a {
    color: var(--text-primary-color);
    text-decoration: none;
}

.search-list li a:hover {
    color: var(--link-hover-color);
}

/* ---------------------------------------------------
    LOADERS
----------------------------------------------------- */
/* Loader Spinner */
.loader-spinner {
    display: none;
    width: 2rem;
    padding: 0.4rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--text-primary-color);
    --_m:
        conic-gradient(#0000 10%, #000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
    mask: var(--_m);
    -webkit-mask-composite: source-out;
    mask-composite: subtract;
    animation: loader-spinner-animation 1s infinite linear;
}

.loader-spinner.loader-sm {
    width: 1rem;
    padding: 0.3rem;
}

.loader-spinner.loader-lg {
    width: 3rem;
    padding: 0.5rem;
}

@keyframes loader-spinner-animation {
    to {
        transform: rotate(1turn)
    }
}

/* Loader Progress */
.loader-progress {
    display: none;
    height: 0.3rem;
    width: auto;
    --c: no-repeat linear-gradient(var(--background-secondary-overlay-5) 0 0);
    background: var(--c), var(--c), var(--overlay-background-1);
    background-size: 60% 100%;
    animation: loader-progress-animation 3s infinite;
}

@keyframes loader-progress-animation {
    0% {
        background-position: -150% 0, -150% 0
    }

    66% {
        background-position: 250% 0, -150% 0
    }

    100% {
        background-position: 250% 0, 250% 0
    }
}

/* Loader List Item */
.loader-list-item {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg,
            var(--background-primary-overlay-1) 0%,
            var(--background-primary-overlay-1) 44%,
            /* Start Stripe Width */
            var(--shadow-theme-opposite-light) 44%,
            var(--background-primary-overlay-5) 50%,
            /* End Strip Width */
            var(--background-primary-overlay-1) 50%,
            var(--background-primary-overlay-1) 100%);
    background-size: 300% 300%;
    /* Large enough to allow smooth movement */
    animation: loader-list-item-animation 1.5s linear infinite;
}

@keyframes loader-list-item-animation {
    from {
        background-position: 80% 80%;
    }

    to {
        background-position: 20% 20%;
    }
}

.loader-dot-blink {
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border-radius: 50%;
    background-color: var(--text-primary-color);
    animation: blink-animation 0.9s infinite;
}

@keyframes blink-animation {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.loader-dots {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    clip-path: inset(0 3ch 0 0);
    animation: loading-dots-animation 1s steps(4) infinite;
}

.loader-dots:before {
    content: "..."
}

@keyframes loading-dots-animation {
    to {
        clip-path: inset(0 -1ch 0 0)
    }
}

/*--------------------------------------
    LOADER CONTAINER
-------------------------------------*/
.input-loader-container {
    height: 2.6rem;
    border-radius: 0.375rem;
}

/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 1500px) {
    .card-list-item {
        width: 90%;
    }

    .card-list-item:hover {
        width: 92%;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        width: 16.25rem;
        z-index: 200;
        margin-top: var(--navbar-height);
    }

    /* Sidebar Icon Only */
    .sidebar-icon-only-collapsed {
        margin-top: 0;
        position: relative;
    }
}