:root {
  --width-container-sh: 1155px;
  
  /* цвета базовые */
  --color-white: white;
  
  --color-transparent: rgba(0, 0, 0, 0);
    
  --color-black-200: #646464;
  --color-black-250: #595959;
  --color-black-300: #545454;
  --color-black-350: #494949;
  --color-black-400: #444444;
  --color-black-450: #393939;
  --color-black-500: #343434;
  --color-black-550: #292929;
  --color-black-600: #242424;
  --color-black-650: #191919;
  --color-black-700: #141414;
  --color-black-750: #040404;
  --color-black-800: black;
   
  --color-gray-100: #fafafa;
  --color-gray-200: #f5f5f5;
  --color-gray-300: #f0f0f0;
  --color-gray-400: #e5e5e5;
  --color-gray-500: #ddd;
  --color-gray-600: #cccccc;
  --color-gray-700: #afafaf;
  --color-gray-750: #999999;
  --color-gray-800: #828282;
  
  --color-blue-200: #d9edf7;
  --color-blue-300: #bce0f2;
  --color-blue-350: #a3cee7;
  --color-blue-400: #1aa0ed; /* #2fa4e7 */
  --color-blue-500: #178acc; /* #178acc */
  --color-blue-550: #12689a; /* #12689a */
  --color-blue-600: #013c5f; 
  
  --color-lilac-100: #ffebfc;
  --color-lilac-200: #ffe2fb;
  --color-lilac-300: #e781da;
  --color-lilac-400: #d149bf;
  --color-lilac-500: #b432a3;
  
  --color-gray-blue-300: #879ba5;
  --color-gray-blue-400: #7998a7;
  --color-gray-blue-500: #55798b;
  --color-gray-blue-600: #304e61;
  --color-gray-blue-700: #213645;

  --color-green-200: #bfe5b1;
  --color-green-300: #6acf6a;
  --color-green-350: #80db80;
  --color-green-400: #5cb85c;
  --color-green-500: #47a047;
  
  --color-orange-100: #fff6da;
  --color-orange-200: #feefc3;
  --color-orange-300: #fadb92;
  --color-orange-400: #f2bc39;
  --color-orange-500: #efac10;
  
  --color-yellow-100: #fff8d5; 
  --color-yellow-200: #fff3b0; 
  --color-yellow-300: #ffe780;
  --color-yellow-350: #ffdf56;
  --color-yellow-400: #ffd73c;
  --color-yellow-500: #ffc90a;
  --color-yellow-600: #f3be00;
  
  --color-red-300: #ff7171;
  --color-red-400: #d9534f;
  --color-red-600: #6d0e0b;
  
  /* элементы*/
  --body-image: url(/templates/softhvac/images/background_light.svg);
  
  --text-color: var(--color-black-400);
  --body-color: var(--color-gray-300);
  --content-bg-color: var(--color-white);
  --scrollbar-bg-color: var(--color-gray-600);
  
  --service-text-color: var(--color-gray-700);
  --bold-text-color: var(--text-color);
  
  --icon-hov-color: var(--color-blue-400);
  
  --btn-text-white-color: var(--color-white);
  --btn-text-black-color: var(--color-black-400);
  
  --btn-default-text-color: var(--color-black-400);
  --btn-default-bg-color: var(--color-gray-300);
  --btn-default-hov-bg-color: var(--color-gray-400);
  
  --btn-success-text-color: var(--color-white);
  --btn-success-bg-color: var(--color-black-400);
  --btn-success-hov-bg-color: var(--color-black-700);
  
  --btn-primary-text-color: var(--color-white);
  --btn-primary-bg-color: var(--color-blue-400);
  --btn-primary-hov-bg-color: var(--color-blue-500);

  --btn-warning-text-color: var(--color-white);
  
  --btn-reset-palette-text-color: var(--service-text-color);
  --btn-reset-palette-bg-color: var(--btn-default-bg-color);
  
  --btn-input-td-bg-color: var(--color-white);
  --btn-input-td-hov-bg-color: var(--color-gray-300);
  
  --btn-chat-default-color: var(--text-color);
  
  --icon-close-window-modal: var(--text-color);
  --icon-close-window-modal-img: var(--text-color);
  --icon-close-alert-hov-color: var(--icon-hov-color); /*--color-gray-800*/
  
  --input-border-color: var(--color-gray-600);
  --input-border-foc-color: var(--color-blue-400);
  --input-disabled-bg-color: var(--color-gray-300);
  
  --input-td-grey-bg-color: var(--color-gray-100);
  
  --hr-color: var(--color-gray-400);  /* разделитель в заголовке страницы */
  --h-color: var(--color-blue-600); /* текст заголовков h1... */
  --h6-color: var(--text-color);
  
  --hr-modal-color: var(--hr-color);  /* разделитель в модальных оконах */
  --bg-modal-color: black; /* подложка модальных окон */
  --modal-opacity: 0.2; /* подложка модальных окон */
  --modal-shadow-color: rgba(90, 90, 90, 0.55); /* тень модальных окон */
  --modal-bg-color: var(--color-white);
  
  --menu-datalist-shadow-color: rgba(140, 140, 140, 0.55); /* тень меню */
  --menu-datalist-hov-color: var(--color-gray-300);
  --menu-datalist-bg-color: var(--content-bg-color); 
  --menu-datalist-sel-bg-color: var(--color-blue-200); 
  --menu-datalist-sel-text-color: var(---text-color); 

  --option-size-sel-bg-color: var(--menu-datalist-sel-bg-color); 
  --option-size-text-color: var(--text-color); 
  
  --table-border-color: var(--color-gray-500);
  --table-header-border-color: var(--color-gray-600);
  --table-header-bg-color: var(--color-gray-400);
  --table-bg-color: var(--color-gray-100); 
  --table-str-dark-color: var(--color-gray-200);
  /* --table-str-dark-modal-color: var(--color-gray-200); */
  --table-str-hov-color: var(--color-blue-200);
  --table-str-sel-bg-color: var(--menu-datalist-sel-bg-color);
  
  --frame-result-border-color: var(--color-gray-500);

  --checkbox-table-border-color: var(--color-gray-500);
  --checkbox-table-sel-bg-color: var(--color-black-400);
  --checkbox-table-sel-color: var(--color-white);
  --checkbox-oval-bg-color: var(--color-gray-400);
  --checkbox-oval-sel-bg-color: var(--color-black-400);
  --checkbox-oval-round-color: var(--color-white); 
  
  --message-user-bg-color: var(--color-blue-200);
  --message-user-edit-bg-color: var(--color-blue-300);
  --message-user-text-color: var(--color-black-400);
  --message-assistant-bg-color: var(--color-gray-200);
  --message-mark-strict-color: var(--color-gray-600);
  --message-mark-flexible-color: var(--color-gray-700);
  --message-process-indic-bg: linear-gradient(-60deg,
    var(--color-blue-200) 0%, var(--color-blue-200) calc(50% - 70px),
    var(--color-blue-300) 50%,
    var(--color-blue-200) calc(50% + 70px), var(--color-blue-200) 100%);
      
  --menu-table-bg-color: var(--color-black-400);
  --menu-table-color: var(--color-white);
  --menu-table-hov-color: var(--icon-hov-color);
  
  --radio-line-color: var(--color-gray-400);
  --radio-line-sel-color: var(--color-black-400);
  --radio-tile-bg-color: var(--color-gray-300);
  --radio-tile-hov-bg-color: var(--color-gray-400);
  --radio-tile-sel-border-color: var(--color-black-400);
  
  --btn-radio-line-color: var(--color-gray-700);
  --btn-radio-line-sel-color: var(--btn-radio-line-sel-color);
  
  --block-radio-table-bg-color: var(--color-gray-300);
  --radio-table-color: var(--color-black-400);
  --radio-table-hov-bg-color: var(--table-str-hov-color);
  --radio-table-sel-bg-color: var(--color-blue-400);
  --radio-table-sel-color: var(--color-white);
  
  --voice-bar-color: var(--color-black-300);
  
  --btn-note-color: var(--service-text-color); /* var(--color-blue-400) */
  --btn-note-hov-color: var(--icon-hov-color); 
  
  --btn-back-header-color: var(--text-color);
  
  --menu-orientation-sel-text-color: var(--btn-primary-text-color);
  --menu-orientation-sel-bg-color: var(--btn-primary-bg-color);
  
  --bar-menu-app-bg-color: var(--color-black-600);
  --btn-radio-menu-app-icon-color: var(--color-gray-500);
  --btn-radio-menu-app-text-color: var(--service-text-color);
  --btn-radio-menu-app-sel-bg-color: var(--color-black-400);
  
  --a-color: var(--color-blue-400); 
  --a-hov-color: var(--color-blue-550);
  
  --a-advanced-color: var(--color-blue-400);
  --a-advanced-hov-color: var(--color-blue-550);
  
  --axis-light-color: var(--color-gray-300);
  --axis-rel-humidity: var(--color-blue-350);
  
  --svg-btn-menu-color: var(--color-black-500);
  --svg-drawing-bg-color: var(--color-gray-200);
  --svg-note-bg-color: rgba(245, 245, 245, 0.75);
  --svg-cursor-drawing: url(cursor_drawing_black.svg) 25 25, crosshair;
  --svg-cursor-select: url(cursor_select_black.svg) 6 6, crosshair;
  --svg-leader-color: var(--color-black-400);
  --svg-menu-btn-hov-color: var(--color-blue-400);

}
