/*  Заголовок в поле собственый коммерческий СМЕНА */
.h1 {
	color:rgb(0, 43, 128);	
	
}



.container {	
display: flex;
flex-direction: column;
margin: 0;
}

.container2 {
	display: flex;
	flex-direction: column-count;	
	
	}

/* Контейнер верхний Главная стр... и тд  */
.item {	
	width: 100%;
	padding: 1px;	
	background-color:  rgb(232, 168, 64); 	/* фон контейнера верхнего */	
	border: 1px solid #ccc;
	margin-bottom: 0px; /* Зазоры между контейнерами */	
	font-size: 20px;  /* Размер текста верхнего меню */	
	font-weight: bold;
	
	
	
}
/* Контейнер слева */	
.item1 {
	width: 10%;
	padding: 1px;	
	background-color:  rgb(64, 204, 232); 	/* фон контейнера слева */	
	border: 1px solid #ccc;	
	margin-bottom: 0px; /* Зазоры между контейнерами */	
	
}
/* Контейнер справа */
.item2 {
	width: 90%;
	padding: 1px;	
	border: 1px solid #ccc;
	margin-bottom: 5px;
	
}

/* Забивалка собственный фон */
.item3 {
	width: 25%;
	padding: 1px;
	background-color:  rgb(209, 232, 64);	
	border: 1px solid #ccc;	
	margin-bottom: 5px;

}

/* Таблица собственный фон */
.item4 {
	width: 80%;
	padding: 1px;	
	background-color:  rgb(209, 232, 64);	
	border: 1px solid rgb(204, 204, 204);
	margin-bottom: 5px;
	
}

/* Забивалка коммеческая фон */
.item5 {
	width: 25%;
	padding: 1px;
	background-color:  rgb(69, 196, 69);	
	border: 1px solid #ccc;	
	margin-bottom: 5px;
	
}
/* Таблица коммеческая фон */
.item6 {
	width: 80%;
	padding: 1px;	
	background-color:  rgb(69, 196, 69);	
	border: 1px solid rgb(204, 204, 204);
	margin-bottom: 5px;
	
}

header {
background: linear-gradient(#FFFAFA, #FAEBD7);

}

ul {
list-style: none;
margin: 0;
padding: 20px;
}

/* цвет текста верхнего меню */
a {
fond-size: 40px;
padding: 20px;
color: hwb(219 18% 43% / 0.985);
text-decoration: none;
}

a:hover{
color: #FFCF48;
text-decoration: none;
}

li{
display: inline;
}


.table {
	width: 100%;
	box-shadow: 0 5px rgba(152, 47, 17, 0.2);
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse;
	
	
}
.table th {
	font-weight: bold;
	padding: 5px;
	background-color: #1e88e5;
	color: #fff;
	border: 1px solid #dddddd;
}
.table td {
	border: 1px solid #dddddd;
	padding: 5px;	
        vertical-align: center;
        text-align: center;
}
.table tr:nth-child(even) {
	background: #f5f5f5 ;
}

.input {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse;
}


.table_report {
	width: 100%;
	box-shadow: 0 5px rgba(164, 32, 32, 0.2);
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse;
	
}
.table_report th {
	font-weight: bold;
	padding: 5px;
	background-color: #1e88e5;
	color: #fff;
	border: 1px solid #dddddd;
}
.table_report td {
	border: 1px solid #dddddd;
	padding: 5px;	
        vertical-align: center;
        text-align: center;
}
.table tr:nth-child(even) {
	background: #f5f5f5 ;
}

.input {
	width: 100%;
	margin-bottom: 20px;
	border: 1px solid #dddddd;
	border-collapse: collapse;
}






/* Кнопка выпадающего списка */
.dropbtn {
	background-color: #4CAF50;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
  }
  
  /* Контейнер <div> - необходим для размещения выпадающего содержимого */
  .dropdown {
	position: relative;
	display: inline-block;
  }
  
  /* Выпадающее содержимое (скрыто по умолчанию) */
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	
  }


  .dropdown-content2 {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
	right: 0;
	
  }

  
  /* Ссылки внутри выпадающего списка */
  .dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	
  }
  
  /* Изменение цвета выпадающих ссылок при наведении курсора */
  .dropdown-content a:hover {background-color: #ddd;}
  
  /* Показать выпадающее меню при наведении курсора */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
  .dropdown:hover .dropbtn {background-color: #3e8e41;} 










  .parent {
	display: grid;
	grid-template: auto 1fr auto / auto 1fr auto;
	
  }
  
  header {
	padding: 0rem;  /* отступ по краям базовый шаблон */
	grid-column: 1 / 4;

  }
  
  .left-side {
	grid-column: 1 / 2;
  }
  
  main {
	grid-column: 2 / 3;
  }
  
  .right-side {
	grid-column: 3 / 4;
  }
  
  footer {
	grid-column: 1 / 4;
  }
  
  
  :root {
	--coral: hsl(300, 100%, 93%);
	--coral--b: hsl(280, 100%, 70%);
	--blue: hsl(200, 100%, 90%);
	--blue--b: hsl(200, 100%, 80%);
	--green: hsl(113, 85%, 95%);
	--green--b: hsl(84, 71%, 53%);
	--yellow: hsl(30, 100%, 93%);
	--yellow--b: hsl(40, 100%, 80%);
  }
  
  html, body {
	height: 100%;
	margin: 0;
  }
  
  body {
	font-family: system-ui, serif;
	display: grid;
	align-items: center;
  }
  .coral {
	background-color: var(--coral);
	border: 1px solid var(--coral--b);
  }
  
  .yellow {
	background-color: var(--yellow);
	border: 1px solid var(--yellow--b);
  }
  
  .blue {
	background-color: var(--blue);
	border: 1px solid var(--blue--b);
  }
  
  .green {
	background-color: var(--green);
	border: 1px solid var(--green--b);
  }
  
  .section {
	font-size: 1.5rem;
	padding: 1rem;
	border-style: dashed;
  }
  .parent {
	height: 100%;
  }


/* .shapters {
	margin: 0;
	background: #eee;
	color: #999;
	font-size: 20px;

} */




/* Круговая диаграмма на главной */
/* :root {
	--color-1: #C7B2FF;
	--color-2: #A1EEFF;
	--color-3: #EED677;
	--color-4: #F66C41;
	--color-5: #4EF483;
	--color-6: #7C4EFF;
  }
  
  .chart {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	background: conic-gradient(
	  var(--color-2) 15%,
	  var(--color-2) 15% 15%,
	  var(--color-3) 0 10%,
	  var(--color-4) 0 25%,
	  var(--color-6) 0		
		 */
		
	  /* var(--color-1) 4%,
	  var(--color-2) 0 8%,
	  var(--color-3) 0 17%,
	  var(--color-4) 0 48%,
	  var(--color-5) 0 54%, 
	  var(--color-6) 0 */
	/* );
  }
   */
  /* .chart--donut {
	padding: 60px;
	background: conic-gradient(
	  var(--color-1) 4%,
	  var(--color-2) 0 8%,
	  var(--color-3) 0 17%,
	  var(--color-4) 0 48%,
	  var(--color-5) 0 54%, 
	  var(--color-6) 0
	);
	mask:
	  linear-gradient(#ffffff 0 0) content-box,
	  linear-gradient(#ffffff 0 0);
	mask-composite: exclude;
  }
  
  .color-1 {
	background: var(--color-1);
  }
  
  .color-2 {
	background: var(--color-2);
  }
  
  .color-3 {
	background: var(--color-3);
  }
  
  .color-4 {
	background: var(--color-4);
  }
  
  .color-5 {
	background: var(--color-5);
  }
  
  .color-6 {
	background: var(--color-6);
  } */








  /* Свистоперделки с диаграммами */

.item10 {
	width: 16%;
	padding: 1px;
	background-color:  rgb(69, 196, 69);	
	border: 1px solid #ccc;	
	margin-bottom: 5px;
	
}	

.item11 {
	width: 42%;
	padding: 1px;
	background-color:  rgb(69, 196, 69);	
	border: 1px solid #ccc;	
	margin-bottom: 5px;
	
}
.item12 {
	width: 42%;
	padding: 1px;
	background-color:  rgb(69, 196, 69);	
	border: 1px solid #ccc;	
	margin-bottom: 5px;
	
}