:root {
    // primary colors    
    --DARK-GREY: #505151;
    --MIDLE-GRAY: #777979;
    --GRAY: #C6C9C9;
    --GRAY-SOFT: #d1d1d1;
    --LIGHT-GRAY: #eff3f2;

    --WHITE: #FFFFFF;
    --BLACK: #272828;

    --DEFAULT: #49A7FF;
    --PRIMARY: #006CD2;
    --SUCCESS: #CEDC28;
    --INFO: #9EA1A0;
    --WARNING: #FF7737;
    --DANGER: #FC5101;

    --ADD-COLOR-1: #E2EE4D;
    --ADD-COLOR-2: #F5F9CC;
    --ADD-COLOR-3: #B0CDD3; 
    --ADD-COLOR-4: #8FB3BB;
    --ADD-COLOR-5: #ABB1C2; // default цвет у докплат
    --ADD-COLOR-6: #FFFFFF;
    --ADD-COLOR-7: #FFFFFF;
    --ADD-COLOR-8: #FFFFFF;
    --ADD-COLOR-9: #FFFFFF;
    --ADD-COLOR-10: #FFFFFF;    

    // font
    --font: 'RobotoRegular';
    --font-medium: 'RobotoMedium';
    --font-bold: 'RobotoBold';

    // sizes
    --index: calc(1vw + 1vh);

    // theme
    --color-scheme: light;

    // иконки внутри поля (informer, suffix)
    --FIELD-INFO-RIGHT: 7px;
    --FIELD-INFO-TOP: 19px;
    --FIELD-INFO-TOP-DATETIME: 18px;
    --FIELD-INFO-TOP-TEXTAREA: 19px;
    --FIELD-SUFFIX-TOP: 28px;
    --FIELD-SUFFIX-TOP-TEXTAREA: 14px;
    --FIELD-SUFFIX-TOP-XS: 22px;
    --FIELD-SUFFIX-TOP-S: 24px;
    --FIELD-SUFFIX-TOP-L: 34px;
    --FIELD-SUFFIX-TOP-XL: 48px;
    --FIELD-COLOR-BTN-MARGIN-TOP: 15px;
    --FIELD-COLOR-BTN-MARGIN-LEFT: 10px;

    --CHECKBOX-DISABLED-LABEL-COLOR: var(--DEFAULT);

    // readonly / disabled-вид полей
    --INPUT-DISABLED-BG: var(--WHITE);
    --INPUT-DISABLED-BORDER: var(--SUCCESS);
    --INPUT-DISABLED-BORDER-WIDTH: 1.4px;
    --INPUT-DISABLED-COLOR: var(--MIDLE-GRAY);
    --INPUT-DISABLED-RADIUS: 10px;
    --INPUT-DISABLED-OPACITY: 0.55;

    // кнопка +/- в фильтре колонки грида (sellan)
    --FILTER-BTN-HEIGHT: 44px;
    --FILTER-BTN-MIN-WIDTH: 45px;
    --FILTER-BTN-TOP: 6px;
    --FILTER-BTN-BORDER-WIDTH: 1.4px;
    --FILTER-BTN-BORDER-COLOR: var(--GRAY);
    --FILTER-BTN-RADIUS: 0 4px 4px 0;
    --FILTER-BTN-HOVER-BG: #e2e8ea75;
    --FILTER-BTN-HEIGHT-S: 28px;
    --FILTER-BTN-MIN-WIDTH-S: 30px;
    --FILTER-BTN-TOP-S: 6px;
    --FILTER-BTN-ICON-SIZE-S: 10px;
    --FILTER-COMBO-CLEAR-RIGHT: 52px;
    --FILTER-COMBO-CLEAR-TOP: 20px;

    // кнопки тулбара грида
    --GRID-BTN-SIZE: 45px;
    --GRID-BTN-SIZE-S: 30px;
    --GRID-BTN-SIZE-XS: 22px;
    --GRID-BTN-SIZE-L: 60px;
    --GRID-BTN-SIZE-XL: 90px;
    --GRID-BTN-PADDING: 8px;
    --GRID-BTN-PADDING-S: 5px;
    --GRID-BTN-PADDING-XS: 4px;
    --GRID-BTN-PADDING-L: 13px;
    --GRID-BTN-PADDING-XL: 16px;
    --GRID-BTN-RADIUS: 4px;
    --GRID-BTN-ICON-BORDER-WIDTH: 2px;
    --GRID-BTN-ADD-MARGIN-TOP: 15px;

    // widgets
    --WIDGET-RADIUS: 5px;
    --WIDGET-FONT-SIZE: 14px;
    --WIDGET-TEXT-TRANSFORM: uppercase;

    // grid
    --GRID-SURFACE-BG: var(--WHITE);
    --GRID-RADIUS: 5px;
    --GRID-TOOLBAR-PADDING-TOP: 10px;
    --GRID-TABLE-WIDTH: 95%;
    --GRID-TOOLBAR-PADDING-BOTTOM: 0px;
    --GRID-CELL-GAP: 10px;
    --GRID-TH-FONT-SIZE: 12px;
    --GRID-TH-FONT-FAMILY: var(--font-medium);
    --GRID-TD-FONT-SIZE: 13px;
    --GRID-TEXT-COLOR: var(--DARK-GREY);
    --GRID-ROW-HIGHLIGHT: #f0f0f0;
    --GRID-MENU-HOVER-BG: var(--LIGHT-GRAY);
    // multi commands
    --GRID-MULTI-CMD-BG: #e8effe;
    --GRID-MULTI-CMD-BG-HOVER: #dce8fd;
    --GRID-MULTI-CMD-COLOR: var(--PRIMARY);
    --GRID-MULTI-CMD-RADIUS: 8px;
    --GRID-MULTI-CMD-PADDING-Y: 8px;
    --GRID-MULTI-CMD-PADDING-X: 14px;
    --GRID-MULTI-CMD-GAP: 8px;
    --GRID-MULTI-CMD-FONT-SIZE: 14px;
    --GRID-CELL-BORDER-BOTTOM-COLOR: #e8effe;
    --GRID-SORT-ARROW-SIZE: 16px;
    --GRID-SORT-ARROW-UP: url("../../../assets/themes/sellan/images/grid/grid-arrow-up.svg");
    --GRID-SORT-ARROW-DOWN: url("../../../assets/themes/sellan/images/grid/grid-arrow-down.svg");

    // panels 
    --PANEL-RADIUS: 4px;
    --PANEL-BORDER-WIDTH: 1px;
    --PANEL-HEADER-TEXT-TRANSFORM: uppercase;
    --PANEL-HEADER-FONT-SIZE: 12px;
    --PANEL-HEADER-MIN-HEIGHT: 40px;

    // complex fields / uploader (sellan)
    --COMPLEX-FIELD-RADIUS: 10px;
    --COMPLEX-FIELD-MIN-HEIGHT: 45px;
    --COMPLEX-FIELD-BORDER-WIDTH: 1px;
    --COMPLEX-FIELD-BORDER-COLOR: var(--INFO);
    --COMPLEX-FIELD-BG: var(--WHITE);
    --COMPLEX-FIELD-TITLE-TRANSFORM: none;
    --COMPLEX-FIELD-INFO-PADDING-Y: 10px;
    --COMPLEX-FIELD-INFO-WIDTH: 100%;
    --COMPLEX-FIELD-ACTION-WIDTH: 70px;
    --COMPLEX-FIELD-ACTION-BORDER-LEFT: none;
    --COMPLEX-FIELD-DIVIDER-WIDTH: 2px;
    --COMPLEX-FIELD-DIVIDER-HEIGHT: 70%;
    --COMPLEX-FIELD-DIVIDER-RIGHT: 9px;
    --COMPLEX-FIELD-DIVIDER-RIGHT-READONLY: 76px;

    // calendar month view
    --CALENDAR-GRID-BORDER: #e1e1e1;
    --CALENDAR-WEEKEND-COLOR: var(--DANGER);
    --CALENDAR-DAY-WEEKDAY: var(--DARK-GREY);
    --CALENDAR-DAY-OUT: #C6C9C9;
    --CALENDAR-EVENT-DOT: var(--DANGER);
    --CALENDAR-TODAY-BG: #F5F9CC;
    --CALENDAR-TODAY-BORDER: #CEDC28;
    --CALENDAR-TODAY-COLOR: #5a6800;
    --CALENDAR-TODAY-DOT: #849B00;
    --CALENDAR-HEADER-MARGIN-BOTTOM: 0px;
}