:root {
  --width-main-container: 117rem;
  --width-block-chat: 80rem;
  --pad-lr-window: 1.5rem;
  --padding-input-chat: 2.5rem;
  --font-size-def: 1.5rem;
  --font-size-small: 1.25rem;
  --font-size-btn-language: 1.5rem;
  --height-input-chat: 8.7rem;
  --height-input: 3.2rem;
  --height-btn-pagination: 3.4rem;
  --height-btn: 3.4rem;
  --height-btn-round: 3.6rem;
  --height-header-bar: 7rem;
  --height-nav-bar: 5.2rem;
  --additive-btn-message: 0.5rem;
  --border-radius-xs: 0.2rem;
  --border-radius-s: 0.4rem;
  --border-radius-m: 1rem;
  --border-radius-l: 1.4rem;
  --border-radius-xl: 2.8rem;
  --progress-bar-time: 2.2s;
  --placeholder-text: "Ask something...";
  --menu-datalist-li: 3.3rem;
  
  /* цвета базовые */
  --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-725: #090909;
  --color-black-750: #040404;
  --color-black-800: black;
  
  --color-gray-100: #fafafa;
  --color-gray-200: #f5f5f5;
  --color-gray-250: #F3F3F3;
  --color-gray-300: #f0f0f0;
  --color-gray-350: #EBEBEB;
  --color-gray-400: #e5e5e5;
  --color-gray-500: #ddd;
  --color-gray-600: #cccccc;
  --color-gray-700: #afafaf;
  --color-gray-800: #828282;
  
  --color-blue-200: #e5f3ff;
  --color-blue-300: #cee7ff;
  --color-blue-350: #a7cff6;
  --color-blue-400: #4285F4;
  --color-blue-500: #3174e3;
  
  --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-lilac-100: #ffebfc;
  --color-lilac-200: #ffe2fb;
  --color-lilac-300: #e781da;
  --color-lilac-400: #d149bf;
  --color-lilac-500: #b432a3;
  
  --color-green-200: #e8f6e7;
  --color-green-300: #d4f4d2;
  --color-green-350: #80db80;
  --color-green-400: #5cb85c;
  --color-green-500: #47a047;
  
  --color-orange-100: #fef0ce;
  --color-orange-200: #ffeab6;
  --color-orange-300: #ffd674;
  --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-brown-300: #e2dedb;
    
  --color-red-50: #f2eaea;
  --color-red-100: #f5e1e1;
  --color-red-300: #ff6f6f;
  --color-red-350: #ee4f3c;
  --color-red-400: #E84430;
  --color-red-500: #e10600; 
  --color-red-600: #cc0000;

  --color-slate-200: #ebeef6; 
  --color-slate-300: #a4b5d1; 
  --color-slate-400: #a4b5d1; 
  
  /* элементы*/
  --text-color: var(--color-black-400);

  --abstract-mini-shape-1-color: linear-gradient(to right, var(--color-blue-350), var(--color-blue-400), var(--color-blue-400));
  --abstract-mini-shape-2-color: linear-gradient(to bottom, var(--color-black-400), var(--color-gray-600));
  
  --body-image: url(/images/background_app_light.svg);
  --body-color: var(--color-gray-200);
  --body-gradient-color:
    radial-gradient(circle at 20% 23%, rgba(210,255,220,.45) 0 8vw, transparent 20vw),
    radial-gradient(circle at 12% 86%, rgba(255,248,210,.6) 0 9vw,  transparent 19vw),
    radial-gradient(circle at 90% 15%, rgba(255,210,210,.37) 0 10vw, transparent 20vw),
    radial-gradient(circle at 78% 78%, rgba(210,232,255,.40) 0 12vw, transparent 22vw),
    radial-gradient(circle at 50% 50%, rgba(235,220,255,.32) 0 13vw, transparent 24vw);

  --content-bg-color: var(--color-white);
  --scrollbar-bg-color: var(--color-gray-600);
    
  --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-gray-100);
  --btn-success-bg-color: var(--color-black-500);
  --btn-success-hov-bg-color: var(--color-black-800);
  --btn-success-hov-text-color: var(--color-gray-500);
  --btn-success-act-bg-color: var(--color-black-300);
  
  --btn-warning-text-color: var(--color-white);
  --btn-warning-bg-color: var(--color-blue-400); 
  --btn-warning-hov-bg-color: var(--color-blue-500);
  --btn-warning-act-bg-color: var(--color-blue-500);
  
  --btn-primary-text-color: var(--color-white);
  --btn-primary-bg-color: var(--color-yellow-500); 
  --btn-primary-hov-bg-color: var(--color-yellow-600);
  
  --btn-chat-default-color: var(--text-color);
  
  --btn-hov-bg-color: var(--color-gray-300);
  --btn-input-hov-bg-color: var(--color-gray-400);
  
  --btn-scroll-bg-color: var(--content-bg-color);
  --btn-scroll-color: var(--btn-default-text-color);
  
  --btn-scroll-bg-color: var(--content-bg-color);
  --btn-scroll-hov-color: var(--btn-hov-bg-color);
  --btn-scroll-color: var(--btn-default-text-color);
  
  --btn-note-color: var(--color-gray-600);
  --btn-note-hov-color: var(--color-blue-400);
  
  --input-bg-color: var(--color-gray-200);
  --input-bg-foc-color: var(--color-gray-300);
  --input-border-color: var(--color-gray-600);
  --input-disabled-bg-color: var(--color-gray-300);
  
  --radio-line-color: var(--color-gray-400);
  --radio-line-sel-color: var(--color-blue-400);
  
  --hr-color: var(--color-gray-400);  /* разделитель в заголовке страницы */
  --h-color: var(--text-color); /* текст заголовков h1... */
  
  --modal-bg-color: var(--content-bg-color);
  --bg-modal-color: black; /* подложка модальных окон */
  --modal-opacity: 0.2; /* подложка модальных окон */
  --modal-shadow-color: rgba(120, 120, 120, 0.3); /* тень модальных окон */
  
  --mini-alert-bg-color: var(--color-blue-400);
  --mini-alert-text-color: white;
  --mini-alert-icon-color: white;
  
  --menu-datalist-shadow-color: rgba(167, 207, 246, 0.48); /* rgba(140, 140, 140, 0.3) */
  --menu-datalist-hov-bg-color: var(--color-gray-200); 
  --menu-datalist-bg-color: var(--content-bg-color);
  --menu-datalist-sel-bg-color: var(--color-black-500); 
  --menu-datalist-sel-text-color: var(--color-gray-100); 
  --menu-datalist-sel-light-bg-color: var(--color-blue-200);
  --menu-datalist-sel-light-text-color: var(--color-black-400);
  --menu-datalist-icon-color: var(--color-blue-400);
  
  --table-border-color: var(--color-gray-400);
  --table-header-bg-color: var(--color-gray-200);
  --table-tr-dark-bg-color: var(--color-gray-100);
  --table-tr-hov-bg-color: var(--color-blue-200);
  
  --checkbox-table-border-color: var(--color-gray-400);
  --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-500);
  --checkbox-oval-round-color: var(--color-white); 
  
  --message-user-bg-color: var(--color-blue-300);
  --message-user-text-color: var(--text-color); 
  --message-user-edit-bg-color: var(--color-blue-350); 
  --message-user-edit-text-color: var(--text-color);
  --message-mark-strict-color: var(--color-yellow-350);
  --message-mark-flexible-color: var(--color-yellow-350);   
   
  --voice-bar-color: var(--color-black-300);
  
  --service-text-color: var(--color-gray-700);
  
  --img-infographic-bg-color: transparent;
  --img-border-color: var(--content-bg-color);
  
  --icon-header-color: var(--text-color);

  --ball-bg-color: var(--color-yellow-350); /* --color-black-400 */

  --header-input-chat-color: var(--text-color);
}