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

    --color-default: #ca2a2a;

    --color-background: #f5f7fb;
    --color-background-white: #ffffff;
    --color-background-red: #ca2a2a;

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

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

    --card-padding: 1.8rem;

    --padding-1: 0.8rem;

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

    --qls-shadow-red: 0px 5px 10px 0px rgba(255, 0, 0, 0.2);
    --qls-shadow-red-1: 0px 10px 20px 0px rgba(220, 0, 0, 0.3);
    --qls-shadow-red-2: 0 10px 30px 0 rgba(255, 0, 0, 0.25);
}

/*======= Dark Theme =======*/
.dark-theme-variables {
    --color-primary: #7380ec;
    --color-danger: #d5312c;
    --color-success: #66bb6a;
    --color-warning: #ffbb55;
    --color-white: #ffffff;
    --color-info-dark: #363949;
    --color-info-light: #dce1eb;
    --color-dark: #363949;
    --color-light: rgba(132, 139, 200, 0.18);
    --color-primary-variant: #111e88;
    --color-dark-variant: #677483;
}

/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}