: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;
    --ADD-COLOR-6: #FFFFFF;
    --ADD-COLOR-7: #FFFFFF;
    --ADD-COLOR-8: #FFFFFF;
    --ADD-COLOR-9: #FFFFFF;
    --ADD-COLOR-10: #FFFFFF;

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

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

    // theme
    --color-scheme: light;

    // модальные окна
    --MODAL-RADIUS: 14px;
    --MODAL-PADDING: 20px;
    --MODAL-BORDER: 1px solid var(--LIGHT-GRAY);
    --MODAL-SHADOW: 0 8px 24px rgba(0, 0, 0, 0.12);
    --MODAL-FOOTER-GAP: 10px;

    // кнопки
    --BTN-RADIUS: 10px;
    --BTN-LIGHT-BORDER-WIDTH: 2px;
    --BTN-LIGHT-HOVER-BG: var(--LIGHT-GRAY);
    --BTN-FULL-HEIGHT: 45px;
    --BTN-FULL-MIN-WIDTH: 45px;
    --BTN-FULL-FONT-SIZE: 11px;
    --BTN-FULL-PADDING-X: 15px;
    --BTN-FULL-FONT-XS: 9px;
    --BTN-FULL-FONT-S: 10px;
    --BTN-FULL-FONT-L: 16px;
    --BTN-FULL-FONT-XL: 22px;

    // поля ввода
    --INPUT-RADIUS: 10px;
    --INPUT-RADIUS-S: 8px;
    --INPUT-BORDER: var(--GRAY);
    --INPUT-BORDER-HOVER: var(--INFO);
    --INPUT-PLACEHOLDER: var(--MIDLE-GRAY);
    --INPUT-VALUE-FILLED: var(--DARK-GREY);
    --INPUT-HEIGHT: 45px;
    --INPUT-HEIGHT-XS: 22px;
    --INPUT-HEIGHT-S: 30px;
    --INPUT-HEIGHT-L: 60px;
    --INPUT-HEIGHT-XL: 90px;
    --INPUT-FONT-XS: 12px;
    --INPUT-FONT-S: 13px;
    --INPUT-FONT-L: 16px;
    --INPUT-FONT-XL: 18px;
    --INPUT-LABEL-XS: 11px;
    --INPUT-LABEL-S: 12px;
    --INPUT-LABEL-L: 13px;
    --INPUT-LABEL-XL: 14px;
    --INPUT-INFIX-PAD-XS: 14px;
    --INPUT-INFIX-PAD-S: 16px;
    --INPUT-INFIX-PAD-L: 20px;
    --INPUT-INFIX-PAD-XL: 22px;
    --INPUT-PADDING-X: 14px;
    --INPUT-LABEL-TOP: 0;
    --INPUT-LABEL-TOP-FOCUSED: 0;
    --INPUT-LABEL-TRANSFORM: none;
    --INPUT-PADDING-R-ICON: 50px;

    // иконки внутри поля (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: 0px;
    --FIELD-COLOR-BTN-MARGIN-LEFT: 10px;

    // checkbox / slide-toggle
    --CHECKBOX-SIZE: 16px;
    --CHECKBOX-RADIUS: 4px;
    --CHECKBOX-DISABLED-LABEL-COLOR: var(--DEFAULT);
    --CONTROL-BORDER: var(--GRAY);
    --CONTROL-BORDER-HOVER: var(--PRIMARY);
    --SLIDE-TRACK-OFF: var(--LIGHT-GRAY);
    --SLIDE-TRACK-ON: var(--PRIMARY);
    --SLIDE-HANDLE: var(--WHITE);

    // 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;

    // кнопка +/- в фильтре колонки грида
    --FILTER-BTN-HEIGHT: 44px;
    --FILTER-BTN-MIN-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-BG: transparent;
    --GRID-BTN-BORDER-WIDTH: 2px;
    --GRID-BTN-BORDER-COLOR: var(--GRAY);
    --GRID-BTN-ICON-BORDER-WIDTH: 2px;
    --GRID-BTN-ICON-BORDER-COLOR: var(--GRAY);
    --GRID-BTN-ADD-BORDER-COLOR: var(--PRIMARY);
    --GRID-BTN-ADD-MARGIN-TOP: 15px;
    --GRID-BTN-ICON-GAP: 0;

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

    // grid
    --GRID-SURFACE-BG: var(--WHITE);
    --GRID-RADIUS: 5px;
    --GRID-BORDER-RADIUS: 5px;
    --GRID-BORDER-WIDTH: 0;
    --GRID-BORDER-COLOR: transparent;
    --GRID-TOOLBAR-PADDING-TOP: 10px;
    --GRID-TOOLBAR-PADDING-BOTTOM: 0px;
    --GRID-TOOLBAR-LABEL-TOP: 8px;
    --GRID-TOOLBAR-LABEL-TOP-FOCUSED: -6px;
    --GRID-TABLE-WIDTH: 95%;
    --GRID-CELL-GAP: 10px;
    --GRID-TH-FONT-SIZE: 12px;
    --GRID-TH-FONT-FAMILY: var(--font-medium);
    --GRID-TH-TEXT-ALIGN: start;
    --GRID-TH-JUSTIFY-CONTENT: flex-start;
    --GRID-TH-PADDING-LEFT: 0;
    --GRID-TH-PADDING-RIGHT: 0;
    --GRID-TD-FONT-SIZE: 13px;
    --GRID-TD-FONT-FAMILY: var(--font);
    --GRID-TEXT-COLOR: var(--DARK-GREY);
    --GRID-ROW-HIGHLIGHT: #f0f0f0;
    --GRID-MENU-HOVER-BG: var(--LIGHT-GRAY);
    --GRID-HEADER-ROW-HEIGHT: 30px;
    --GRID-HEADER-CELL-PADDING-TOP: 10px;
    --GRID-HEADER-CELL-PADDING-BOTTOM: 10px;
    --GRID-IN-CARD-PANEL-PADDING: 0;
    // 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-MIN-HEIGHT: 30px;
    --GRID-MULTI-CMD-PADDING-Y: 8px;
    --GRID-MULTI-CMD-PADDING-X: 14px;
    --GRID-MULTI-CMD-ICON-PADDING: 5px;
    --GRID-MULTI-CMD-GAP: 8px;
    --GRID-MULTI-CMD-FONT-SIZE: 14px;
    --GRID-MULTI-CMD-ICON-SIZE: 16px;
    --GRID-VARIATIVE-BTN-SIZE: 32px;
    --GRID-VARIATIVE-BTN-PADDING-X: 6px;
    --GRID-VARIATIVE-BTN-BORDER-WIDTH: 2px;
    --GRID-VARIATIVE-BTN-BORDER-COLOR: var(--GRAY);
    --GRID-VARIATIVE-BTN-BG: var(--WHITE);
    --GRID-VARIATIVE-BTN-RADIUS: 5px;
    --GRID-VARIATIVE-BTN-ICON-SIZE: 16px;
    --GRID-TOOLBAR-ACTIONS-GAP: 6px;
    --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-BORDER-COLOR: var(--LIGHT-GRAY);
    --PANEL-SHADOW: 0 3px 10px rgba(0, 0, 0, 0.08);
    --PANEL-INNER-SHADOW: 0 1px 2px rgba(0, 0, 0, 0.12);
    --PANEL-MARGIN-BOTTOM: 10px;
    --PANEL-SURFACE-BG: var(--WHITE);
    --PANEL-HEADER-MIN-HEIGHT: 40px;
    --PANEL-HEADER-MAX-HEIGHT: 65px;
    --PANEL-HEADER-PADDING-X: 15px;
    --PANEL-HEADER-FONT-SIZE: 12px;
    --PANEL-HEADER-TEXT-TRANSFORM: uppercase;
    --PANEL-HEADER-LETTER-SPACING: 0;
    --PANEL-HEADER-HOVER-BG: var(--WHITE);
    --PANEL-HEADER-EXPANDED-HOVER-BG: var(--WHITE);
    --PANEL-INDICATOR-COLOR: var(--MIDLE-GRAY);
    --PANEL-BODY-PADDING-X: 10px;
    --PANEL-BODY-PADDING-Y: 10px;
    --PANEL-BODY-BORDER-TOP: 1px solid var(--LIGHT-GRAY);
    --PANEL-BODY-FONT-SIZE: 14px;
    --PANEL-BODY-COLOR: var(--DARK-GREY);
    --PANEL-DEFAULT-BORDER-COLOR: var(--LIGHT-GRAY);
    --PANEL-DEFAULT-HEADER-BG: var(--WHITE);
    --PANEL-DEFAULT-HEADER-COLOR: var(--DARK-GREY);
    --PANEL-DEFAULT-HEADER-HOVER-BG: var(--WHITE);
    --PANEL-PRIMARY-BORDER-COLOR: var(--PRIMARY);
    --PANEL-PRIMARY-HEADER-BG: var(--PRIMARY);
    --PANEL-PRIMARY-HEADER-COLOR: var(--WHITE);
    --PANEL-PRIMARY-HEADER-HOVER-BG: var(--PRIMARY);
    --PANEL-SUCCESS-BORDER-COLOR: var(--SUCCESS);
    --PANEL-SUCCESS-HEADER-BG: var(--SUCCESS);
    --PANEL-SUCCESS-HEADER-COLOR: var(--WHITE);
    --PANEL-SUCCESS-HEADER-HOVER-BG: var(--SUCCESS);
    --PANEL-WARNING-BORDER-COLOR: var(--WARNING);
    --PANEL-WARNING-HEADER-BG: var(--WARNING);
    --PANEL-WARNING-HEADER-COLOR: var(--WHITE);
    --PANEL-WARNING-HEADER-HOVER-BG: var(--WARNING);
    --PANEL-DANGER-BORDER-COLOR: var(--DANGER);
    --PANEL-DANGER-HEADER-BG: var(--DANGER);
    --PANEL-DANGER-HEADER-COLOR: var(--WHITE);
    --PANEL-DANGER-HEADER-HOVER-BG: var(--DANGER);
    --PANEL-INFO-BORDER-COLOR: var(--INFO);
    --PANEL-INFO-HEADER-BG: var(--INFO);
    --PANEL-INFO-HEADER-COLOR: var(--WHITE);
    --PANEL-INFO-HEADER-HOVER-BG: var(--INFO);

    // complex fields / uploader
    --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-FONT-SIZE: 16px;
    --COMPLEX-FIELD-TITLE-MARGIN-BOTTOM: 4px;
    --COMPLEX-FIELD-TITLE-LETTER-SPACING: normal;
    --COMPLEX-FIELD-TITLE-TRANSFORM: none;
    --COMPLEX-FIELD-TITLE-COLOR: var(--DARK-GREY);
    --COMPLEX-FIELD-VALUE-FONT-SIZE: 16px;
    --COMPLEX-FIELD-VALUE-FONT-WEIGHT: 400;
    --COMPLEX-FIELD-VALUE-COLOR: var(--DARK-GREY);
    --COMPLEX-FIELD-VALUE-WIDTH: 100%;
    --COMPLEX-FIELD-INFO-PADDING-Y: 10px;
    --COMPLEX-FIELD-INFO-PADDING-X: 30px;
    --COMPLEX-FIELD-INFO-WIDTH: 100%;
    --COMPLEX-FIELD-ACTION-WIDTH: 70px;
    --COMPLEX-FIELD-ACTION-HEIGHT: auto;
    --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;
    --COMPLEX-FIELD-DIVIDER-COLOR: var(--LIGHT-GRAY);

    --UPLOADER-RADIUS: 0;
    --UPLOADER-BG: transparent;
    --UPLOADER-BORDER-WIDTH: 0;
    --UPLOADER-BORDER-COLOR: transparent;
    --UPLOADER-HEADER-HEIGHT: 44px;
    --UPLOADER-HEADER-PADDING-X: 0;
    --UPLOADER-HEADER-GAP: 12px;
    --UPLOADER-TITLE-FONT-SIZE: 16px;
    --UPLOADER-TITLE-FONT-WEIGHT: 400;
    --UPLOADER-TITLE-TRANSFORM: none;
    --UPLOADER-TITLE-COLOR: var(--DARK-GREY);
    --UPLOADER-ACTIONS-GAP: 8px;
    --UPLOADER-HEADER-ACTION-SIZE: 29px;
    --UPLOADER-HEADER-ACTION-RADIUS: 6px;
    --UPLOADER-HEADER-ACTION-BG: rgba(0, 108, 210, 0.08);
    --UPLOADER-CHOOSE-BTN-MIN-WIDTH: auto;
    --UPLOADER-CHOOSE-BTN-HEIGHT: 28px;
    --UPLOADER-CHOOSE-BTN-PADDING: 5px 12px;
    --UPLOADER-CHOOSE-BTN-RADIUS: 5px;
    --UPLOADER-CHOOSE-BTN-BORDER: none;
    --UPLOADER-CHOOSE-BTN-BG: var(--PRIMARY);
    --UPLOADER-CHOOSE-BTN-COLOR: var(--WHITE);
    --UPLOADER-CHOOSE-BTN-DISPLAY: flex;
    --UPLOADER-CHOOSE-BTN-FONT-SIZE: 13px;
    --UPLOADER-CHOOSE-BTN-TEXT-TRANSFORM: none;
    --UPLOADER-LIST-MARGIN-TOP: 10px;
    --UPLOADER-LIST-GAP: 8px;
    --UPLOADER-LIST-BORDER-TOP: 1px solid var(--GRAY);
    --UPLOADER-LIST-PADDING: 3px 0;
    --UPLOADER-ITEM-BORDER: 1px solid #DADDE3;
    --UPLOADER-ITEM-RADIUS: 10px;
    --UPLOADER-ITEM-BG: var(--WHITE);
    --UPLOADER-ITEM-ACTIONS-GAP: 8px;
    --UPLOADER-FILE-GAP: 12px;
    --UPLOADER-FILE-NAME-FONT: var(--font-bold);
    --UPLOADER-FILE-NAME-TRANSFORM: none;
    --UPLOADER-FILE-NAME-COLOR: var(--DARK-GREY);
    --UPLOADER-FILE-NAME-FONT-SIZE: 13px;
    --UPLOADER-FILE-NAME-FONT-WEIGHT: 400;
    --UPLOADER-ACTION-BTN-SIZE: 34px;
    --UPLOADER-ACTION-BTN-RADIUS: 10px;
    --UPLOADER-ACTION-BTN-BG: #eef3f8;
    --UPLOADER-ACTION-DOWNLOAD-BG: #e5f0fa;
    --UPLOADER-ACTION-REMOVE-BG: #feeee6;
    --UPLOADER-DROPZONE-HEIGHT: 20vh;
    --UPLOADER-DROPZONE-BORDER: dashed 1px var(--GRAY-SOFT);
    --UPLOADER-DROPZONE-PADDING: 10px;
    --UPLOADER-DROPZONE-RADIUS: 10px;
    --UPLOADER-DROPZONE-BG: var(--WHITE);
    --UPLOADER-ICON-SIZE: 16px;

    // chat
    --CHAT-SURFACE-BG: var(--LIGHT-GRAY);
    --CHAT-FOOT-SENT-BG: var(--LIGHT-GRAY);
    --CHAT-MENU-HOVER-BG: var(--LIGHT-GRAY);

    // identification-doc card
    --ID-DOC-BORDER-WIDTH: 1px;
    --ID-DOC-BORDER-COLOR: var(--GRAY);
    --ID-DOC-RADIUS: 10px;
    --ID-DOC-PADDING: 10px;
    --ID-DOC-BG: var(--WHITE);
    --ID-DOC-MARGIN-TOP: 7px;
    --ID-DOC-MARGIN-BOTTOM: 15px;
    --ID-DOC-LABEL-TOP: -24px;
    --ID-DOC-LABEL-FONT-SIZE: 13px;

    // 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;
}
