:root {
    --size-sm: 8px;
    --size-md: 12px;
    --size-lg: 16px;
    --size-xl: 20px;
    --size-xxl: 24px;

    /*60*/
    /*44*/
    /*32*/

    /*UI HEIGHTS*/
    --height-sm: 32px;
    --height-md: 44px;
    --height-lg: 60px;

    /*SPACINGS*/
    --spacing-container-sm: 20px;
    --spacing-container-md: 40px;
    --spacing-container-lg: 60px;
    --spacing-sm: var(--size-sm);
    --spacing-md: var(--size-md);
    --spacing-lg: var(--size-lg);
    --spacing-xl: var(--size-xl);
    --spacing-xxl: var(--size-xxl);
    --spacing-section-mob: 20px;
    --spacing-section-desk: 80px;

    /*COLORS*/

    --primary-color: #2066E6;
    --primary-contrast-color: #FFFFFF;
    --secondary-color: #3361FF1A;
    --border-color: #E6EAF2;
    --background-color: #FAFBFC;
    --color-border-secondary: #F0F2F7;
    --text-main-color: #405580; /*--color-text-main*/
    --text-secondary-color: #7D8FB2; /*--color-text-secondary: #7D8FB2;*/
    --input-background-color: #FFFFFF;

    --success-color: #29CC39;
    --warning-color: #F2BE24;
    --danger-color: #E64545;

    --color-white: #FFFFFF;

    --color-bg-tooltip: #5C7099;

    /*FONTS*/
    --font-size-input-sm: 12px;
    --font-size-input-md: 14px;
    --font-size-input: var(--font-size-input-md);
    --font-weight-input: 700;

    /*SHADOWS*/
    --shadow-input-text: 0 2px 5px rgba(38, 51, 77, 0.07); /* original opacity: 0.03 */

    /*BORDERS*/
    --border-sm: var(--size-sm);

    /*OTHERS*/
    --opacity-hover: 0.9;
    --opacity-active: 0.7;
    --transition-hover: 0.15s;
    --nav-bar-width: 298px;
}