:root{
    --direction: rtl;
    --line-height: 1rem;

    /* colors */

    /* palet */
    --priymary-color: #1F78FF;
    --secondary-color: #FFA61F;
    --tertiary-color: #e0edff;
    --gray-dark-color: #333333;
    --body-back: #eff4fb;
    
    --priymary-color-dark: #223A79;
    --priymary-color-light: #60A7FF;
    --secondary-color-dark: #e48800;
    --secondary-color-light: #ffba52;
    --tertiary-color-light: #fafcff;

    --white: #ffffff;
    --gray: #DDDDDD;
    --gray-bright: #fafafa;
    --gray-light: #EEEEEE;
    --gray-middle: #b6b6b6;
    --gray-dark: #595959;

    --red: #E50000;  /* error and warning */
    --green: #0CB103;  /* success and confirm and discount */
    --light-green: #dffede;  /* success and confirm and discount */
    --yellow: #FFCC00;  /* message and allert and stars */

    --text-white: #fff;
    --text-light-gray: #D8D8D8;
    --text-middle-gray: #908F8F;
    --text-gray: #595959;
    --text-dark: #333333;
    --text-blue: #1F78FF;
    --text-green: #0CB103;

    /* font sizes and styles */
    --title-big: 1.5rem;
    --title-mediom: 1.2rem;
    --title-small: 1rem;

    --text-larg: 1rem;
    --text-big: 0.9rem;
    --text-mediom: 0.8rem;
    --text-small: 0.7rem;
    
    --font-weight-big: bold;
    --font-weight-mediom: 500;
    --font-weight-small: 100;
        
    /* space & radios */
    --padding-large: 30px;
    --padding-big: 20px;
    --padding-mediom: 10px;
    --padding-small: 5px;
    
    --margin-large: 30px;
    --margin-big: 20px;
    --margin-mediom: 10px;
    --margin-small: 5px;

    --gap-large: 30px;
    --gap-big: 20px;
    --gap-mediom: 10px;
    --gap-small: 5px;
    
    --radius-large: 10px;
    --radius-big: 5px;
    --radius-mediom: 2px;
    --radius-small: 0px;

    /* transitions */    
    --time-low: 0.8s;
    --time-easy: 0.5s;
    --time-fast: 0.3s;

    /* icon size */
    --icon-large: 30px;
    --icon-big: 25px;
    --icon-mediom: 20px;
    --icon-small: 15px;

    /* icon filter */
    --filter-priymary-color: contrast(0) brightness(0) invert(39%) sepia(140%) saturate(680%) hue-rotate(146deg) brightness(78%) contrast(900%);
    --filter-secondary-color: contrast(0) brightness(0) invert(75.3%) sepia(100%) saturate(680%) hue-rotate(312deg) brightness(78%) contrast(900%);

    --filter-gray-dark: contrast(0) brightness(0.9);
    --filter-gray-mediom: contrast(0) brightness(1.2);
    --filter-gray-light: contrast(0) brightness(1.5);

    --filter-white: contrast(0) brightness(2);

    --filter-red: contrast(0) brightness(0) invert(200%) sepia(90%) saturate(1000%) hue-rotate(316deg) brightness(52%) contrast(2000%);
}

/* Chrome, Safari, Edge */
html::-webkit-scrollbar {
    width: 5px;
    background: var(--gray-light);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(to top, var(--priymary-color), transparent);
    border-radius: 10px;
}

.firefox , .firefox *{
	scrollbar-width: thin;
	scrollbar-color: #1F78FF #e0e0e0;
}