/*======= ROOT VARAIBLES =======*/
:root {
    --color-primary: #7380ec;
    --color-danger: #d5312c;
    --color-success: #66bb6a;
    --color-warning: #ffbb55;
    --color-white: #ffffff;
    --color-info-dark: #212529;
    --color-info-light: #dce1eb;
    --color-dark: #212529;
    --color-light: rgba(132, 139, 200, 0.18);
    --color-primary-variant: #111e88;
    --color-dark-variant: #677483;

    --color-theme-red: #ca2a2a; 
    --color-theme-red-1: #ca2a2a; 
    --color-theme-blue: #212836;
    
    --background-white-1: #ffffff;
    --background-white-2: #f5f5f5;
    --background-white-3: #f1f2f4;
    --background-black-1: #000000;
    --background-red-1: #ca2a2a;
    --background-gray-1: #ca2a2a;

    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;

    --padding-1: 0.8rem;
    --padding-2: 1rem;
    --padding-3: 1.8rem;

    --box-shadow: 3px 3px 1rem var(--color-light);

    --box-shadow-header: 0px 5px 10px 0px rgba(255, 0, 0, 0.2);
    --box-shadow-black-1: 0 5px 10px 0 rgba(34, 34, 34, 0.1);
    --box-shadow-black-2: 0 2px 10px 0 rgba(34, 34, 34, 0.2);
    --box-shadow-black-3: 0 10px 30px 0 rgba(34, 34, 34, 0.3);
    --box-shadow-black-4: 0 10px 26px 0 rgba(34, 34, 34, 0.4);

    --color-hr: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

/*======= Dark Theme =======*/
.dark-theme-variables {
    --color-white: #202528;
    --color-dark: #edeffd;
    --color-dark-variant: #a3bdcc;
    --color-light: rgba(0, 0, 0, 0.4);
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: content-box;
    background-color: rgba(145, 145, 145, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    border: 4px solid transparent;
    background-clip: content-box;
    background-color: rgba(145, 145, 145, 0.6);
}