:root {
    --navbar-height: 5rem;

    --side-navbar-width: 18rem;
    --side-navbar-collapsed-width: 5rem;

    --color-white: #fff;

    --color-grey-1: #f3f4f6;
    --color-grey-2: #d1d5db;
    --color-grey-3: #9ca3af;

    --color-dark-0: #090b10;
    --color-dark-1: #121722;
    --color-dark-2: #18202b;
    --color-dark-3: #374151;
    --color-dark-4: #6b7280;

    --color-primary-container: var(--color-white);
    --color-secondary-container: var(--color-grey-2);
    --color-third-container: var(--color-grey-1);

    --color-outer-container: var(--color-grey-2);
    --color-inner-container: var(--color-white);

    --color-middle-container: var(--color-grey-1);

    --color-text-primary: var(--color-dark-1);
    --color-text-secondary: var(--color-dark-4);

    --main-teal-dark: #0f5897;
    --main-teal-dark-1: #100a6a;
    /* --main-teal-dark-1: #100a6a; */
    --main-teal-dark-2: #100a6a;
    --main-teal-light: #0886b4;
    --main-red: #fedb7c;
    --main-purple: #45336b;
    --main-yellow: #00ffff;
    --main-grey-dark: #5c7985;
    --main-grey-dark-1: #38555e;
    --main-grey-dark-2: #1c2b30;
    /* --main-grey-dark-2: #2d444b; */
    --main-grey-light: #8bafbb;

    /* --main-teal-dark: #0f5897;
    --main-teal-dark-1: #100a6a;
    --main-teal-dark-2: #44336b;
    --main-teal-light: #0886b4;
    --main-red: #fedb7c;
    --main-yellow: #00ffff;
    --main-grey-dark: #5c7985;
    --main-grey-dark-1: #38555e;
    --main-grey-dark-2: #1c2b30;
    --main-grey-light: #8bafbb; */

    --color-footer: var(--main-grey-dark-2);

    --color-red-light-1: #fee2e2;
    --color-red-light-2: #fca5a5;
    --color-red-dark-1: #dc2626;
    --color-red-dark-2: #991b1b;

    --color-yellow-light-1: #fef9c3;
    --color-yellow-light-2: #f5e304;
    --color-yellow-dark-1: #b09104;
    --color-yellow-dark-2: #aa8407;

    --color-lime-light-1: #ecfccb;
    --color-lime-light-2: #bef264;
    --color-lime-dark-1: #65a30d;
    --color-lime-dark-2: #3f6212;

    --color-green-light-1: #d1fae5;
    --color-green-light-2: #6ee7b7;
    --color-green-dark-1: #059669;
    --color-green-dark-2: #065f46;

    --color-teal-light-1: #ccfbf1;
    --color-teal-light-2: #5eead4;
    --color-teal-dark-1: #0d9488;
    --color-teal-dark-2: #115e59;

    --color-blue-light-1: #e0f2fe;
    --color-blue-light-2: #7dd3fc;
    --color-blue-dark-1: #0284c7;
    --color-blue-dark-2: #075985;

    --color-purple-light-1: #f3e8ff;
    --color-purple-light-2: #d8b4fe;
    --color-purple-dark-1: #9333ea;
    --color-purple-dark-2: #6b21a8;

    --color-rose-light-1: #ffe4e6;
    --color-rose-light-2: #fda4af;
    --color-rose-light-3: #fb7185;
    --color-rose-dark-0: #f43f5e;
    --color-rose-dark-1: #e11d48;
    --color-rose-dark-2: #9f1239;

    --font-family: "graph", "Montserrat";

    --font-size-h1: 1.5rem;
    --font-size-h2: 1.25rem;
    --font-size-h3: 1.125rem;
    --font-size-normal: 0.938rem;
    --font-size-small: 0.813rem;
    --font-size-smaller: 0.75rem;
    --font-size-big: 2rem;
    --font-size-bigmax: 3rem;
    --font-size-bigmain: 4rem;

    --font-w-normal: 400;
    --font-w-medium: 600;
    --font-w-bold: 700;

    --transition-smooth: 0.4s;
    --transition-very-smooth: 0.6s;
    --transition-fast: 0.2s;

    --color-shadow-large: #000a;
    --color-shadow-medium: #0004;
    --color-shadow-small: #0002;

    --shadow-large: 20px var(--color-shadow-large);
    --shadow-medium: 10px var(--color-shadow-medium);
    --shadow-small: 5px var(--color-shadow-small);

    --shadow-large-d: 20px 4px var(--color-shadow-large);
    --shadow-medium-d: 10px 4px var(--color-shadow-medium);
    --shadow-small-d: 5px 3px var(--color-shadow-small);

    --border-radius-large: 1.3rem;
    --border-radius-medium: 1rem;
    --border-radius-small: 0.4rem;
}

html {
    scroll-behavior: smooth;
}

body {
    /* scroll-behavior: smooth; */
    font-family: var(--font-family);
    font-weight: var(--font-w-normal);
    font-size: var(--font-size-normal);
    background-color: var(--color-primary-container);
    color: var(--color-text-primary);
    overflow-x: hidden;
    text-align: right;
    direction: rtl;
    margin-top: var(--navbar-height);
    padding-right: 0px !important;
}

body.collapsed-side-nav {
    --side-navbar-width: var(--side-navbar-collapsed-width);
}

body.modal-open {
    overflow-y: auto !important;
}

@media screen and (min-width: 768px) {
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --font-size-normal: 1rem;
        --font-size-small: 0.875rem;
        --font-size-smaller: 0.813rem;
        --font-size-big: 3rem;
        --font-size-bigmax: 4rem;
        --font-size-bigmain: 6rem;
    }
}

.min-height {
    min-height: calc(100vh - var(--navbar-height));
}