body{
	background: #fff;
	text-size-adjust: none;
    -ms-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
}

.flex-container {
	display: -webkit-flex;
	display: inline-flex;
	justify-content: flex-start;
}
.header{
	height: 30px;
	/*width: 100%;
	max-width: 100%;*/
	position: fixed;
	z-index: 1; /*добавлено 22.09.22*/
	background: url(../i/footer.gif) repeat-x;
}
.flex-header {
	display: -webkit-flex;
	display: flex;
}
.footer {
  width: 100%;
  height: 30px;
  background: url(../i/footer.gif) repeat-x;
}
#panel{
	width:100%; 
	padding-left: 323px;
	padding-right: 323px;
}
.left{
	display: flex;
	/*position: sticky;*/
	width: 300px;
	min-height: 100vh; /*0*/
	background-color: #eee; 
	/*box-shadow: 10px 1px 25px #d6d6d6; */
	border-right: 3px solid #ddd;
    padding: 10px; /* поля */
	padding-top: 39px;
	bottom: 0px;
	/*overflow-y: scroll;*/
}

.left_dop{
	display: flex;
	width: 100px;
	min-height: 100vh;
	background-color: #eee; /*#fff*/
	border-right: 3px solid #ddd; /*#004189;*/
    padding: 10px; /* поля */
}

.content{
	width: 100%; 
	margin-top: 15px;
	background-color: #fff; 
	padding: 15px;  
	/*margin: 0 0 1 30px; ?*/
}
.content1{
	width: 100%;
	height: 100%;	
	margin: 11px 0 0 0px;
	background-color: #fff;
}

#flex-box {
	display: flex; /*отображает контейнер как блочный элемент*/
}
.flex-item {
  display: flex;
  justify-content: center;
  align-items: start; 
}
.flex-item1 {
  display: flex;
  justify-content: center;
  align-items: start;
  /*margin-top: -10px;*/
  /*/background: linear-gradient(to bottom, #cfe8fc 3%, #ffffff 97%);*/
  background: linear-gradient(to bottom, #f4f4f4 5%, #ffffff 95%); /*eeeeee e1faff (45deg, #eee, #fff)*/
}

/****** spoiler *****/
.spoiler input, .spoiler div  { 
    display: none; /* Скрываем содержимое */
}
.spoiler label::before {
    content: '[показать]'; /* Текст перед заголовком */
    margin-right: 5px; /* Расстояние до текста */
	color: #008500; /*009900; 990000 #993300;
	text-decoration: underline;*/
	cursor: pointer;
	/*font-weight: 700;*/
	/*font-size: 20px;*/ 
}	
   /* Открытый спойлер */
.spoiler :checked + label::before 
   { content: '[скрыть]'; 
   color: #999999; /*#009900;*/
}
.spoiler :checked ~ div {
    display: block; /* Показываем спойлер */
    padding: 10px; /* Поля вокруг текста */
}

/***** spoil ****  */
    .spoil .show,.hide {
        display: inline-block;
        /* всё ниже заставляет кнопку выглядеть как обычный текст */
        -webkit-appearance: none;
        border-radius: 0;
        text-align: inherit;
        background: none;
        box-shadow: none;
        padding: 0;
        cursor: pointer;
        border: none;
        color: inherit;
        font: inherit;
		font-weight: 500;
    }
    .spoil .show {
        color: #009900; /*990000 009900красный  синий: 0033cc; 003399 */
    }
    .spoil .hide {
        color: #999999;/*009900;*/
    }

    .spoil .details {
        border-radius: 10px;
        border: 1px solid #DEDEDE;
        box-shadow: 5px 5px 15px 5px #DEDEDE;
        font-size:17px;
        padding:20px;
    }
    /* закрытое состояние */
    .spoil .details {
        display: none;
    }
    .spoil .show {
        display: inline-block;
    }
    .spoil .hide {
        display: none;
    }
    /* открытое состояние */
    .spoil.visible .details {
        display: block;
    }
    .spoil.visible .show {
        display: none;
    }
    .spoil.visible .hide {
        display: inline-block;
    }
/***** end spoil *****/

/***** spoil2 без рамки ****  */
    .spoil2 .show,.hide {
        display: inline-block;
        /* всё ниже заставляет кнопку выглядеть как обычный текст */
        -webkit-appearance: none;
        border-radius: 0;
        text-align: inherit;
        background: none;
        box-shadow: none;
        padding: 0;
        cursor: pointer;
        border: none;
        color: inherit;
        font: inherit;
    }
    .spoil2 .show {
        color: #009900; /*990000 009900 красный 990000 синий: 0033cc; 003399 */
    }
    .spoil2 .hide {
        color: #999999;/*009900;*/
    }

    .spoil2 .details {
        /*border-radius: 10px;
        border: 1px solid #DEDEDE;
        box-shadow: 5px 5px 15px 5px #DEDEDE;*/
        font-size:17px;
        padding:20px;
    }
    /* закрытое состояние */
    .spoil2 .details {
        display: none;
    }
    .spoil2 .show {
        display: inline-block;
    }
    .spoil2 .hide {
        display: none;
    }
    /* открытое состояние */
    .spoil2.visible .details {
        display: block;
    }
    .spoil2.visible .show {
        display: none;
    }
    .spoil2.visible .hide {
        display: inline-block;
    }
/***** end spoil2 *****/


/****** Определение в рамке *****/
.termin{
	/*width: 80%;*/
	border-radius: 10px; 
	border: 1px solid #B2CDEC; 
	color: #003399; 
	text-align: justify; 
	margin:20px 10% 20px 10%;
	background-color: #F2F8FF;/* #ecf7fe; /*#e6f5fe; */
	padding: 18px; 
	box-shadow: 5px 5px 15px 5px #DEDEDE;
}
.plus{
	margin-left:40px; 
	color:#777; 
	font-size: 17px; 
}
/***** Mодальное окно *****/
/*.modal {
    max-width: 900px;
    width: 100%;
    height: 400px;
	font-family: Verdana;
    font-size: 15px;  
}*/

.modal {
    max-width: 900px;
    width: 100%;
	margin: auto;
	overflow-y: auto;
}
h3 {
    text-align: center;
}
.text {
	margin: 5px;
	width: 800px;
	text-align: justify;
	font-family: Verdana;
    font-size: 15px;  
}

/***** Всплывающая подсказка *****/
#hint {
	color:#003399; 
	cursor:help; 
	font-family:Tahoma,Arial,Sans-serif; 
	color:#000; 
	/*font-size:14px;*/ 
	text-align:justify;
}
.tooltip { /* стиль текста, наведя или нажав на который появится пояснение */
  display: inline-block;
  position: relative;
  background: transparent; /* цвет фона */
  text-indent: 0px;
  font-family:Times New Roman; 
  font-size: inherit; /*font-size:18px;*/
  color: #003399; 
  border-bottom:1px dashed;
  cursor: help; 
}
.tooltip > span { /* стиль появляющейся подсказки */
  position: absolute;
  bottom: 100%;
  left: -20em; /* = max-width */
  right: -20em; /* = max-width */
  width: -moz-max-content;
  width: -webkit-max-content;
  width: max-content;  /* ширина подсказки может быть не более содержимого */
  max-width: 20em;  /* ширина подсказки может быть не более 20em */
  max-height: 80vh; /* необязательное ограничение по высоте подсказки, 1vh Ч это 1% от ширины окна */
  overflow: auto;
  visibility: hidden;
  margin: 0 auto .4em; /* поднята на .4em над текстом, наведя или нажав на который появится пояснение */
  padding: .5em;
  border: solid 1px rgb(200,200,200); 
  box-shadow: 10px 8px 15px #D6D6D6;
  font-size: 90%;
  background: #fff;
  line-height: normal;
  cursor: auto;
}
.tooltip.left > span { /* начинается от левого края */
  left: 0;
  right: -20em;
  margin: 0 0 .4em;
}
.tooltip.right > span { /* начинается от правого края */
  left: -20em;
  right: 0;
  margin: 0 0 .4em auto;
}
.tooltip.left:after {
  left: 1em;
}
.tooltip.right:after {
  left: auto;
  right: .6em; 
}
.tooltip:before { /* поле между текстом, наведя или нажав на который появится пояснение, и подсказкой нужно чтобы, если перевести курсор мышки на подсказку, та не исчезла; тут тоже везде .4em */
  content: "";
  position: absolute;
  top: -.4em;
  left: 0;
  right: 0;
  height: .4em;
  visibility: hidden;
}
.tooltip:hover > span,
.tooltip:hover:before,
.tooltip:hover:after,
.tooltip:focus > span,
.tooltip:focus:before,
.tooltip:focus:after {
  visibility: visible;
  transition: 0s .4s;
}
.tooltip:focus { /* убрать рамку в Хроме */
  outline: none;
}
.tooltip.anim > span,
.tooltip.anim:after { /* анимация */
  opacity: 0;
  transform: translateY(1.5em) scale(.3);
  transform-origin: center bottom;
}
.tooltip.anim:after {
  transform: translateY(.7em) scale(.3); /* 1.7 = 1.5 / (1.4*2) */
}
.tooltip.anim:hover > span,
.tooltip.anim:hover:after,
.tooltip.anim:focus > span,
.tooltip.anim:focus:after {
  opacity: 1;
  transition: .6s .4s;
  transform: translateY(0);
}
@media (max-width: 20em) { /* ширина подсказки может быть не более ширины окна браузера */
  .tooltip > span {
    max-width: 100vw; /* в 100vw входит полоса прокрутки, но на мобильных она часто отсутствует */
    box-sizing: border-box;
  }
}

/***** Всплывающая картинка *****/ 
/* Увеличитель (left)+(right): http://orgchem.ru/css/thumb.css */
.ienlarger {
	float: none;
	clear: none;
	padding-bottom: 0px;
	padding-right: 0px;
}
.ienlarger a { 
	display: inline;
	text-decoration: none;
	color: #003399; /*004189;*/
	cursor:help;
	border-bottom:1px dashed;
}
.ienlarger a:hover{
 	position: relative; 
}
.ienlarger span img {
	border: 1px solid #d6d6d6;
	box-shadow: 10px 8px 15px #D6D6D6;
}
.ienlarger a span {
	position: absolute;
	display:none;
}
.ienlarger img { 
border-width: 0;
}
.ienlarger a:hover span { 
	display:block;
	top: -150px;
	right: 30%;
	z-index: 2;
}
.resize_thumb {
	width: 18px;
	height : auto;
}
/***** END left *****/
/* Увеличитель (right) */
.ienlarger1 {
	float: none; /right;/
	clear: none;
	padding-bottom: 0px;
	padding-right: 0px;
}
.ienlarger1 a { 
	display:block;
	text-decoration: none;
	cursor:default;
}
.ienlarger1 a:hover{
 	position:relative;
}
.ienlarger1 span img {
	border: 1px solid #FFFFFF;
}
.ienlarger1 a span {
	position: absolute;
	display:none;/*block;*/
	background-color: #000000;
}
.ienlarger1 img { 
border-width: 0;
}
.ienlarger1 a:hover span { 
	display:block;
	top: -175px;
	z-index: 100;
}
/* Код увеличителя (right) закончен */
/***** END Всплывающая картинка *****/ 

/***** Всплывающая картинка (прозрачный фон) *****/ 
/* (left)+(right): http://orgchem.ru/css/thumb.css */
.glass {
	float: none;
	clear: none;
	padding-bottom: 0px;
	padding-right: 0px; 
}
.glass a { 
	display: inline;/*block; inline-block; /*inline;*/
	border-bottom:1px dashed; /*dotted;*/
	text-decoration:none;
	color: #0033cc; /* 003399 004189;*/
	cursor: help;
}
.glass a:hover{
 	position: relative; 
	color: #b60000; /*#003399;*/
}
.glass span img {
	border-bottom: 0px solid #d6d6d6; 
	/*box-shadow: 10px 8px 15px #D6D6D6;*/
}
.glass a span {
	position: absolute;
	display:none;
}
.glass img { 
border-width: 0;
}
.glass a:hover span { 
	display:block;
	top: -100px;
	right: -15px; /*-60px; */
	z-index: 100;
}
.resize_thumb {
	width: auto; /*240px;*/
	height : auto;
}
/***** END glass *****/


/***** Фиксированный фрагмент *****/
.sidebar {
LEFT: 0px; position: fixed; BOTTOM: 0px;
 }
.sidebar1 {
RIGHT: 0px; position: fixed; BOTTOM: 0px;
 }
.sidebar2 {
BOTTOM: 0px; position: fixed; WIDTH: 100%;
 }
 /***** END Фиксированный фрагмент *****/
 
/***** Кнопка ВВЕРХ *****/
/*.totop {
RIGHT: 5px; position: fixed; BOTTOM: 0px;
 } */

 /***** Кнопка ВВЕРХ *****/ 
 a.goTop {
 position: fixed; /*позиционирование кнопки фиксированное*/
 z-index: 9999; /*отображаем поверх всех элементов*/
 bottom: 2px; /*0%;/*-15px; /*положение снизу*/
 right: 2px; /*положение справа*/
 background: url(../i/totop.png); /*фон, можно указать любую картинку*/
 opacity: .5; /*прозрачность*/
 color: #000; /*цвет текста*/
 width: 30px; /*30px;*/
 height: 30px; /*30px;*/
 padding: 0px; /*внутренние отступы*/
 margin: 5px 1px 1px 5px; /*внешние отступы*/
}
a.goTop:hover {
 opacity: 1;
}
 a.idTop {
 position: fixed; /*позиционирование кнопки фиксированное*/
 z-index: 9999; /*отображаем поверх всех элементов*/
 bottom: 5px; /*0%;/*-15px; /*положение снизу*/
 right: 5px; /*положение справа*/
 background: url(../i/totop.png); /*фон, можно указать любую картинку*/
 opacity: .5; /*прозрачность*/
 color: #000; /*цвет текста*/
 width: 30px; /*30px;*/
 height: 24px; /*30px;*/
 padding: 0px; /*внутренние отступы*/
 margin: 5px 1px 1px 5px; /*внешние отступы*/
}
a.idTop:hover {
 opacity: 1;
}
/***** END Кнопка ВВЕРХ *****/

/***** Кнопка ИГРЫ и т.п. *****/
.button {
  width: 300px;
  /*border: 2px solid #004189;*/
  border-radius: 20px;
  border: 1px solid #d6d6d6;
	box-shadow: 10px 8px 15px #D6D6D6;
	background: linear-gradient(to bottom, #4A90DD, #004189);/*4BAFE8 357CC9*/
    font-family: Tahoma; 
	font-size:15px;
	font-weight:bold;
	text-align: center;	
	padding: 7px;
	color: #fff;
	text-decoration: none;
}

/***** Кнопка Комментарии *****/
.button_com{
  height: 30px;
  width: 170px;
  border-radius: 20px;
  border-width: 1px;
  font-family: Tahoma;
  font-size: 15px;
  font-weight: bold;/*300;*/
  /*background-color: #004d50;*/
  text-align: center;
  background: linear-gradient(to bottom, #4A90DD, #004189);
  border-color: #004189;/*#d6d6d6; /*#004d50;*/
  color: #F5F5F5;
  /*margin-left: 10px;*/
  cursor: pointer;
}

.btn {
    background: #5d8f76; /* Цвет фона */
    font-family: Tahoma;
	font-size: 18px;
	color: #fff; /* Цвет текста */
    padding: 7px 12px; /* Поля */
    margin-bottom: 1em; /* Отступ снизу */
   }
   .btn:hover {
    background: #1e6550; /* Цвет фона при наведении курсора */
   }
   .btn-flat {
    border: 1px transparent; /* Прозрачная рамка */
   }
   .btn-round {
    border-radius: 20px; /* Радиус скругления */
   }   

/***** Шрифты *****/
.txt17 {
	font-family: Tahoma; /*Raleway;*/
	margin: 15px 0px 15px 0px; 
	font-weight:bold; 
	font-size:20px; 
	color: #003399; /*#004189;*/
} 
.txt16 {
	font-family: Times New Roman, Trebuchet MS, Segoe UI, MS Sans Serif, Arial; 
	color: #000; 
	font-size:18px; 
	text-align: justify;
	line-height: 1.5em;
	margin: 5px;
}

.txt14 {
	margin:20 20 0 30; 
	font-family:Tahoma,Sans-serif,Verdana,Times New Roman,Arial; 
	color:black; 
	font-weight:300; 
	font-size:14px; 
	line-height:22px; 
	text-align:justify;
}

.txt12{
	font-family: Tahoma, Trebuchet MS, Segoe UI, MS Sans Serif, Arial; 
	color: #666; 
	font-size:13px;
	text-align: center;
	line-height:16px; /*-0.9em;*/
}
	a:hover {color: #990000; text-decoration: none}
:visited {color: #3366CC; text-decoration: none}
/*:link {text-decoration: none}*/
/*A { font-size: 14px; color: red; }*/

.link1 {
	a:hover {color: red; text-decoration: none} /* #ff0000 */
/*:visited {color: #3366CC; text-decoration: none}*/	
}
/*   A.link1 {color: red;}
   { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }

A { font-size: 14px; color: red; }
   A.link1 { font-size: 12px; color: green; }
   A.link2 { font-size: 14px; color: blue; }*/

.txt10 {
	font-family: Tahoma; 
	font-size:30px;
	font-weight:bold; 
	color: lightblue; 
	line-height: 32px;} /*color: #777;*/
	
.space {
	letter-spacing: 2px;
}	

/*.txt0 {margin: 10 0 0 6px; font-size:14px; font-weight:bold} 
 .txt17 {font-family: Tahoma; margin: 0px; font-weight:bold; font-size:18px; color: #004189; line-height: 32px;} 
 .txt16 {margin: 10 10 0 10px; color: #000; font-size:18px; text-align: justify;}

 .txt14 {margin: 10 10 0 10px; font-size:14px; text-align: justify;}
 .txt1 {margin: 10 0 0 6px; font-size:18px;} 
 
 #txt2 {margin-left: 12px}
 #txt3 {margin-left: 23px}
 #txt4 {margin-left: 34px}
 */