/* Глобальные переменые CSS  */
 :root {

   /* HSL Цвета */
   --color-white:        hsl(  0,   0%, 100%); /* Белый */
   --color-white-h: 0;
   --color-white-s: 0%;
   --color-white-l: 100%;

   --color-black:        hsl(  0,   0%,  0%); /* Черный */
   --color-black-h: 0;
   --color-black-s: 0%;
   --color-black-l: 0%; 

   --color-blue:         hsl(240, 100%, 50%); /* Синий */
   --color-blue-h: 240;
   --color-blue-s: 100%;
   --color-blue-l: 50%; 


   --color-gray:         hsl(  0,   0%, 50%); /* Серый */
   --color-dark-gray:    hsl(  0,   0%, 38%); /* Темно-Серый */
   --color-red:          hsl(  0, 100%, 50%); /* Красный */
   --color-orange:       hsl( 30, 100%, 50%); /* Оранжевый */
   --color-yellow:       hsl( 60, 100%, 50%); /* Желтый */
   --color-yellow-green: hsl( 90, 100%, 50%); /* Желто-зеленый */
   --color-green:        hsl(120, 100%, 38%); /* Зеленый */
   --color-green-blue:   hsl(150, 100%, 38%); /* Зелено-голубой */
   --color-bluesky:      hsl(180, 100%, 38%); /* Голубой */
   --color-blue-bluesky: hsl(180, 100%, 50%); /* Сине-голубой */
      --color-purpure-blue: hsl(270, 100%, 50%); /* Пурпурно Синий */
   --color-purpure:      hsl(300, 100%, 38%); /* Пурпурный */
   --color-purpure-red:  hsl(330, 100%, 50%); /* Пурпурно-красный */


 	--main-margin: 10px;
 	--main-padding: 10px;
 	--main-duble-margin: 20px;
 	--main-duble-padding: 20px;

 	 

        /* Дефлт  */
    --main-bg-ui-border: #e0e0e0;
    --main-bg-ui-item:  #777777;
   --main-ui-color:  #ffffff;
    /* Дефолт-ховер  */
    --main-bg-ui-border-hover: #c0c0c0;
    --main-bg-ui-item-hover:  #676767;
    
    /* Внимание  */
    --main-bg-ui-border-warrning: #FF0000;
    --main-bg-ui-item-warrning:  #ff2400;
    --main-ui-color-warrning:  #ffffff;
    /* Внимание-ховер  */
    --main-bg-ui-border-warrning-hover: #DF0000;
    --main-bg-ui-item-warrning-hover:  #df0400;

    /* Информационная  */
    --main-bg-ui-border-info: #00008b;
    --main-bg-ui-item-info:  #0000ff;
    --main-ui-color-info:  #ffffff;
    /* Информационная-ховер  */
    --main-bg-ui-border-info-hover: #00006b;
    --main-bg-ui-item-info-hover:  #0000df;

    /* Светлая  */
    --main-bg-ui-border-light: #999999;
    --main-bg-ui-border-light-hover: #797979;
    --main-bg-ui-item-light:  #ffffff;
    --main-bg-ui-menu-light:  #ffffff;
    --main-bg-ui-menu-light-sub:  #ffffff;
    --main-bg-ui-menu-hover-light:  #000;
    --main-bg-ui-menu-hover-light-sub:  #000;
    --main-ui-color-light:  #000;
    --main-ui-color-light-sub:  #000000;
    --main-ui-color-hover-light-sub:  #fff;
    --main-ui-menu-color-hover-light: #fff;


    /* Темный */
    --main-bg-ui-border-dark: #000000;
    --main-bg-ui-item-dark:  #000000;
    --main-bg-ui-menu-dark:  #000000;
    --main-bg-ui-menu-dark-sub:  hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 10%));
    --main-bg-ui-menu-hover-dark:  #676767;
    --main-bg-ui-menu-hover-dark-sub:  #000;
    --main-ui-color-dark:  #ffffff;
    --main-ui-color-dark-sub:  #000000;
    --main-ui-color-hover-dark-sub:  #fff;
    --main-ui-menu-color-hover-dark: #fff;

    --main-bg-ui-border-primary: #00538a;
    --main-bg-ui-item-primary:  #1164b4;
    --main-ui-color-primary:  #ffffff;
    

   --main-bg: var(--color-white);
   --main-bg-ui: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 15%));
   --main-bg-ui-border: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 25%));
   --main-ui-color: hsl(var(--color-white-h), var(--color-white-s), calc(var(--color-white-l) - 100%));

   --dm-main-bg: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 10%));
   --dm-main-bg-ui: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 15%));
   --dm-main-bg-ui-border: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 25%));
   --dm-main-ui-color: hsl(var(--color-black-h), var(--color-black-s), calc(var(--color-black-l) + 100%));

 	--main-font: "Open Sans Light", Roboto, system-ui, -apple-system, Segoe UI Light,  Arial, sans-serif;
 	--main-font-size: 14px;
 	--main-font-color: #000000;
    --dm-main-font-color: #ffffff;
    --main-font-line: 1.3;
    --main-font-bold: 400;

    --main-max-width: 1340px;

    --theme-main-bg-light: #ffffff;
    --theme-main-bg-dark:  #292929;

 }

 html {
    font-size: var(--main-font-size);
}
 
 /* Общие настройки  */
 * {
 	padding: 0px; 
 	margin: 0px; 
 	border: none; 
 	text-decoration: none;
 	/*background-color: var(--main-bg);*/
    font-family: var(--main-font);
    font-size: 1rem;
    /*color: var(--main-font-color);*/
    line-height: var(--main-font-line);
    font-weight: var(--main-font-bold);

    box-sizing: border-box;
 }