:root {
     // primary colors    
    --DARK-GREY: #3C4970;
    --GRAY-SOFT: #ABB1C2;
    --MIDLE-GRAY: #77809B;
    --GRAY: #B2C7CF;
    --LIGHT-GRAY: #E2E8EA;

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

    --DEFAULT: #ABB1C2; //--DEFAULT
    --PRIMARY: #3469F4; //--BLUE
    --SUCCESS: #77C29E; //--GREEN-OK
    --INFO: #92D8FF;    //--INFO:
    --WARNING: #F8AC59; //--WARNING
    --DANGER: #FF2480;  // --DANGER
    
    --ADD-COLOR-1: #8EAAFA; //--LAZURE
    --ADD-COLOR-2: #F8F9FB; //Background
    --ADD-COLOR-3: #FFFFFF;
    --ADD-COLOR-4: #FFFFFF;
    --ADD-COLOR-5: #FFFFFF;
    --ADD-COLOR-6: #FFFFFF;
    --ADD-COLOR-7: #FFFFFF;
    --ADD-COLOR-8: #FFFFFF;
    --ADD-COLOR-9: #FFFFFF;
    --ADD-COLOR-10: #FFFFFF;    

    // font
    --font: 'DinPro';
    --font-medium: 'DinProMedium';
    --font-bold: 'DinProBold';

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

    // иконки внутри поля (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;

    // кнопка +/- в фильтре колонки грида (docplat)
    --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;

    // widgets
    --WIDGET-RADIUS: 5px;

    // grid
    --GRID-SURFACE-BG: var(--WHITE);
    --GRID-RADIUS: 5px;
    --GRID-TOOLBAR-PADDING-TOP: 10px;
    --GRID-TABLE-WIDTH: 95%;
    --GRID-CELL-GAP: 10px;
    --GRID-TH-FONT-SIZE: 12px;
    --GRID-TD-FONT-SIZE: 13px;
    --GRID-TEXT-COLOR: var(--DARK-GREY);
    --GRID-ROW-HIGHLIGHT: #f0f0f0;
    --GRID-MENU-HOVER-BG: var(--LIGHT-GRAY);

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

    // complex fields / uploader
    --COMPLEX-FIELD-DIVIDER-WIDTH: 0;
    --COMPLEX-FIELD-DIVIDER-HEIGHT: 0;
    --UPLOADER-BG: var(--ADD-COLOR-2);
    --UPLOADER-CHOOSE-BTN-BORDER: 2px solid var(--PRIMARY);
    --UPLOADER-CHOOSE-BTN-BG: var(--WHITE);
    --UPLOADER-CHOOSE-BTN-COLOR: var(--PRIMARY);
    --UPLOADER-CHOOSE-BTN-HEIGHT: 30px;
    --UPLOADER-CHOOSE-BTN-RADIUS: 5px;
}
