:root {
    --color-time: #e45647;
    --color-repeat: #4779f4;
    --color-book: #ffa40b;

    --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: #080c14;
    --color-dark-1: #111827;
    --color-dark-2: #1f2937;
    --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-1);
    --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);

    /*
    dark mode ->  
    --color-outer-container: var(--color-dark-0);
    --color-inner-container: var(--color-dark-2);
    --color-middle-container: var(--color-dark-1);
    --color-white: #fff;
    --color-grey-3: #9ca3af; */

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

    --color-yellow-light-1: #fef3c7;
    --color-yellow-light-2: #fcd34d;
    --color-yellow-dark-1: #d97706;
    --color-yellow-dark-2: #92400e;

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

    --color-blue-light-1: #dbeafe;
    --color-blue-light-2: #93c5fd;
    --color-blue-dark-1: #2563eb;
    --color-blue-dark-2: #1e40af;

    --color-purple-light-1: #ede9fe;
    --color-purple-light-2: #c4b5fd;
    --color-purple-dark-1: #7c3aed;
    --color-purple-dark-2: #5b21b6;

    --color-pink-light-1: #fce7f3;
    --color-pink-light-2: #f9a8d4;
    --color-pink-dark-1: #db2777;
    --color-pink-dark-2: #9d174d;

    --font-family: "cairo";

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

    --font-w-normal: 400;
    --font-w-medium: 700;
    --font-w-bold: 900;
}
html.darkmode {
    --color-primary-container: var(--color-dark-0);
    --color-secondary-container: var(--color-dark-2);
    --color-third-container: var(--color-dark-1);
    --color-outer-container: var(--color-dark-0);
    --color-inner-containe: var(--color-dark-2);
    --color-middle-container: var(--color-dark-1);
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-grey-3);
}

body.collapsed-side-nav {
    --side-navbar-width: var(--side-navbar-collapsed-width);
}
@media screen and (min-width: 968px) {
    :root {
        --font-size-h1: 2rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.25rem;
        --font-size-big: 3rem;
        --font-size-normal: 1rem;
        --font-size-small: 0.875rem;
        --font-size-smaller: 0.813rem;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    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.modal-open {
    overflow-y: auto !important;
}

ul,
li {
    list-style: none;
}
a {
    text-decoration: none;
    color: var(--color-text-primary);
}
a:hover {
    text-decoration: none;
    color: var(--color-text-primary);
}

ul,
label {
    margin: 0px;
}
ul {
    padding: 0;
}

/* Reusable classes */

.pointer {
    cursor: pointer;
}
.smooth {
    transition: all 0.4s ease;
}
.smooth-sm {
    transition: all 0.2s ease;
}

.flex-item {
    flex: 1;
}

.flex-center-x {
    display: flex;
    justify-content: center;
}

.flex-center-y {
    display: flex;
    align-items: center;
}
.flex-center-both {
    display: flex;
    align-items: center;
    justify-content: center;
}

.justify-betwen {
    justify-content: space-between;
}
.justify-evenly {
    justify-content: space-evenly;
}

@keyframes toSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes shake {
    from {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(10deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    to {
        transform: rotate(0deg);
    }
}
.tospin {
    animation-name: toSpin;
    animation-duration: 5000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ar {
    direction: rtl;
    text-align: right;
}
.en {
    direction: ltr;
    text-align: left;
}

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

.font-w-normal {
    font-weight: var(--font-w-normal);
}
.font-w-medium {
    font-weight: var(--font-w-medium);
}
.font-w-bold {
    font-weight: var(--font-w-bold);
}

/* COLORS */
.clr-dark-0 {
    color: var(--color-dark-0);
}
.bg-color-outer-container {
    background-color: var(--color-outer-container);
}
.clr-color-outer-container {
    color: var(--color-outer-container);
}
.bg-color-inner-container {
    background-color: var(--color-inner-container);
}
.clr-color-inner-container {
    color: var(--color-inner-container);
}
.bg-color-text-primary {
    background-color: var(--color-text-primary);
}
.clr-color-text-primary {
    color: var(--color-text-primary);
}
.bg-color-text-secondary {
    background-color: var(--color-text-secondary);
}
.clr-color-text-secondary {
    color: var(--color-text-secondary);
}
.bg-color-text-third {
    background-color: var(--color-text-third);
}
.clr-color-text-third {
    color: var(--color-text-third);
}

.bg-red-light-1 {
    background-color: var(--color-red-light-1);
}
.clr-red-light-1 {
    color: var(--color-red-light-1);
}
.bg-red-light-2 {
    background-color: var(--color-red-light-2);
}
.clr-red-light-2 {
    color: var(--color-red-light-2);
}
.bg-red-dark-1 {
    background-color: var(--color-red-dark-1);
}
.clr-red-dark-1 {
    color: var(--color-red-dark-1);
}
.bg-red-dark-2 {
    background-color: var(--color-red-dark-2);
}
.clr-red-dark-2 {
    color: var(--color-red-dark-2);
}

.bg-yellow-light-1 {
    background-color: var(--color-yellow-light-1);
}
.clr-yellow-light-1 {
    color: var(--color-yellow-light-1);
}
.bg-yellow-light-2 {
    background-color: var(--color-yellow-light-2);
}
.clr-yellow-light-2 {
    color: var(--color-yellow-light-2);
}
.bg-yellow-dark-1 {
    background-color: var(--color-yellow-dark-1);
}
.clr-yellow-dark-1 {
    color: var(--color-yellow-dark-1);
}
.bg-yellow-dark-2 {
    background-color: var(--color-yellow-dark-2);
}
.clr-yellow-dark-2 {
    color: var(--color-yellow-dark-2);
}

.bg-green-light-1 {
    background-color: var(--color-green-light-1);
}
.clr-green-light-1 {
    color: var(--color-green-light-1);
}
.bg-green-light-2 {
    background-color: var(--color-green-light-2);
}
.clr-green-light-2 {
    color: var(--color-green-light-2);
}
.bg-green-dark-1 {
    background-color: var(--color-green-dark-1);
}
.clr-green-dark-1 {
    color: var(--color-green-dark-1);
}
.bg-green-dark-2 {
    background-color: var(--color-green-dark-2);
}
.clr-green-dark-2 {
    color: var(--color-green-dark-2);
}

.bg-blue-light-1 {
    background-color: var(--color-blue-light-1);
}
.clr-blue-light-1 {
    color: var(--color-blue-light-1);
}
.bg-blue-light-2 {
    background-color: var(--color-blue-light-2);
}
.clr-blue-light-2 {
    color: var(--color-blue-light-2);
}
.bg-blue-dark-1 {
    background-color: var(--color-blue-dark-1);
}
.clr-blue-dark-1 {
    color: var(--color-blue-dark-1);
}
.bg-blue-dark-2 {
    background-color: var(--color-blue-dark-2);
}
.clr-blue-dark-2 {
    color: var(--color-blue-dark-2);
}

.bg-purple-light-1 {
    background-color: var(--color-purple-light-1);
}
.clr-purple-light-1 {
    color: var(--color-purple-light-1);
}
.bg-purple-light-2 {
    background-color: var(--color-purple-light-2);
}
.clr-purple-light-2 {
    color: var(--color-purple-light-2);
}
.bg-purple-dark-1 {
    background-color: var(--color-purple-dark-1);
}
.clr-purple-dark-1 {
    color: var(--color-purple-dark-1);
}
.bg-purple-dark-2 {
    background-color: var(--color-purple-dark-2);
}
.clr-purple-dark-2 {
    color: var(--color-purple-dark-2);
}

.bg-pink-light-1 {
    background-color: var(--color-pink-light-1);
}
.clr-pink-light-1 {
    color: var(--color-pink-light-1);
}
.bg-pink-light-2 {
    background-color: var(--color-pink-light-2);
}
.clr-pink-light-2 {
    color: var(--color-pink-light-2);
}
.bg-pink-dark-1 {
    background-color: var(--color-pink-dark-1);
}
.clr-pink-dark-1 {
    color: var(--color-pink-dark-1);
}
.bg-pink-dark-2 {
    background-color: var(--color-pink-dark-2);
}
.clr-pink-dark-2 {
    color: var(--color-pink-dark-2);
}

.nice_scroll::-webkit-scrollbar {
    width: var(--scroll-width);
    transition: all 1s ease;
}

.nice_scroll::-webkit-scrollbar-track {
    background: var(--color-primary-container);
}

.nice_scroll::-webkit-scrollbar-thumb {
    background: var(--color-blue-light-2);
}