/*body{background-color:#3f2766}*/
body{background-image:url('/images/chern/4.jpg');
    /*background-position: center;*/
	background-size: cover;
}  
/*header{background-color:#fff000}*/


body.ch1{background-image:url('/images/chern/12.jpg');/*background-position: center*/;background-size: cover} 
/*body.ch1 {height:100px}*/
body.ch2{background-image:url('/images/chern/19.jpg');/*background-position: center*/;background-size: cover} 
body.ch3{background-image:url('/images/chern/20.png');/*background-position: center*/;background-size: cover}
body.ch4{background-image:url('/images/chern/21.png');/*background-position: center*/;background-size: cover}
body.ch5{background-image:url('/images/chern/4.jpg');/*background-position: center*/;background-size: cover}
/*.btn-toolbar{margin-top: 0 !important; margin-bottom: 0 !important; float: none !important;}*/
.btn{background: #4d317a !important; color: white !important;}
h3, .uk-h3{font-size: 14px !important; color: black !important; font-style: normal !important;}

#verh{
    height: 45px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    background: rgba(0,0,0, 0.5);
}


.logo {
    width: 58%;
    height: 100%;
    margin-left: 1.5%;
}
.text:hover{
      text-decoration: none; 
}
.text {
    color: white;
    text-decoration: none; 
    font-family: Calibri, sans-serif;
    font-size: 16pt;
    font-weight: 600;
    letter-spacing: 3px;
   margin-top: 20%;
}

.eye {
    height: 100%;
    padding-right: 5px;   
}

#content-tab2{
    background: none;
    font-size: 8pt;  
/*    display: block;*/
    text-shadow: 1px 1px 2px black, 0 0 1em grey;
}
#table_track {
    background-color: rgba(59, 59, 59, 0.47);
    margin-top: 3%;
    margin-bottom: 3%;
    display: block;
    max-height: 80vh;
    overflow: auto;
    text-align: center;
    
/*    text-shadow:  0px 0px 10px black, 0px 0px 12px black, 0px 0px 14px black, 0px 0px 16px black,0px 0px 18px black,0px 0px 20px black,0px 0px 22px black,0px 0px 24px black,0px 0px 26px black,0px 0px 28px black ;*/
 text-shadow:  0px 0px 12px black,0px 0px 12px black,0px 0px 12px black,0px 0px 12px black;
}
#table_track td{
 border: 1px solid white;   
}



#table_track tr:hover {
    background-color: rgba(59, 59, 59, 0.98) !important;
    text-shadow: 0 0 0;
    border: 3px solid #39ffff;
}
/* красное мерцание при отсутствии питания на трекере*/
#ahtung {
/*background-color:#9d0505;*/
    text-shadow: 0 0 0;
}
#ahtung {
  animation-name: blinker;
    animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
}

@keyframes blinker {
  from { background-color: rgba(59, 59, 59, 0.47); }
  to { background-color:  #9d0505; }
}
 
@-webkit-keyframes blinker {
  from { background-color: rgba(59, 59, 59, 0.47); }
  to { background-color:  #9d0505; }
}
/* красное мерцание при отсутствии питания на трекере     КОНЕЦ*/

#content-tab3{
    background: none;
    font-size: 9pt;  
/*    display: block;*/
    text-shadow: 1px 1px 2px black, 0 0 1em grey;

}

#table1{
    display: block;
    max-height: 30vh;
    overflow: auto;
    text-align: center;
     

}
#table1 tr:hover,#table2 tr:hover {
    background-color: rgba(59, 59, 59, 0.98) !important;
    text-shadow: 0 0 0;
    border: 3px solid #39ffff;
}




#table1 tbody,#table1 caption, #table2 tbody,#table2 caption{
       background-color: rgba(59, 59, 59, 0.47); 
     border: 1px solid #ffffff;
}
#table1 td,#table2 td{
   border: 1px solid #ffffff; 
}
#table2{
    margin-top: 3%;
    margin-bottom: 3%;
    display: block;
    max-height: 50vh;
    overflow: auto;
    text-align: center;
 
}
#infobox{
    display: none;
        font-size: 9pt;  
 max-height: 85vh;
    text-shadow: 1px 1px 2px black, 0 0 1em grey;
    background-color: rgba(59, 59, 59, 0.47);
     
}


#menu{
  margin-top: 7px;
}
#menu img {
    width: 20px;
    height: 20px;
    margin-right: 20px;
}

#divmap {
border: 2px;
  width: 60%;
    margin: 2px;
      float: left;   
    position:relative;
}



.stdiv{
  float:right;   
    width: 100% ;
}
.staticdiv {
  width: 47% ;
   margin-right: 3%;
      float:right;
    margin-top: 10px;

}
.video-js{
 width: 100% ;
/*    position: relative !important;*/
/*    display: block !important;*/
/*     float: left !important; */
    height: 100%;
    
}


/*
.testdiv10 {
 border: 2px;
    height: : 9%;
    width: 16%;
    margin: 5px;
    float: right;  
    position: relative;
 
}
*/
/* высота карты*/
.uk-alert{
    display: none;
}
.zhgm-map-default{
    height: 85vh !important;
}

/*Описываем Плеер + кнопки + инфотекст + div самого googlemap*/
.gm-style-iw.gm-style-iw-c{
background-color: rgba(75, 75, 75, 0.80); 
    padding: 12px !important;
} 
.gm-style .gm-style-iw-t::after{
background: none;  
}
.placemarkHead{
    color: #00ffff !important;
}
.gm-style-iw-d{
    overflow: hidden !important;
    
}

.zhgm-placemark-action-toolbar{
width: 99%;
    display: inline-block;
      float: left;    
}
#player {
border: 1px;
/*  width: 480px;*/
/*    height: :320px;*/
    margin: 1px;
      float: left; 
    margin-right: 10px;
   
}



.staticdiv > div[class*='divid'] > input  {
    color: white;
/*        background-color: rgba(59, 59, 59, 0.98) !important;*/
    text-shadow: 0 0 0;
    border: 3px solid #39ffff;
     background-color: rgba(59, 59, 59, 0.47);
  position: absolute;
    z-index: 2;
    margin-top: 1%;
/*    margin-left: 10%;*/
}

#info_refresh {
border: 1px;
/*  width: 480px;*/
/*    height: :320px;*/
    margin: 1px;
      float: left; 
    margin-right: 10px;
}
#inputimage {
border: 1px;
/*  width: 35px;*/
    margin: 1px;
      float: none;   
}
.info {
border: 5px;
/* display: inline-block;*/
    width: 60%;
    margin: 5px;
      float: left;  
    color: #00ffff;
    
}
/*Описываем Плеер + кнопки + инфотекст + div самого googlemap*/


#sub_menu{
    display: block;

/*width: 100px !important;*/
/*    height: 100px;*/
     position: relative;
    float: right; 
    color: #00ffff;
    margin-left: 10px;
    margin-top: 10px;
}








/* Базовый контейнер табов */
.tabs {
/*	min-width: 320px;*/
	width: 39%;
     float:right;
	padding: 0px;
	margin: 0 auto;
/*    margin-bottom: 10px;*/
}
/* Стили секций с содержанием */
.tabs>section {
	display: none;
/*	padding: 15px;*/
	background: #fff;
/*	border: 1px solid #ddd;*/
}
.tabs>section>p {
	margin: 0 0 5px;
	line-height: 1.5;
	color: black;
	/* прикрутим анимацию */
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
/* Описываем анимацию свойства opacity */
 
@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/* Прячем чекбоксы */
.tabs>input {
	display: none;
	position: absolute;
   
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
	display: inline-block;
	margin: 0 0 -1px;
	padding: 8px 15px;

	font-weight: 600;
	text-align: center;
/*	color: #aaa;*/
	border: 0px solid #ddd;
	border-width: 1px 1px 1px 1px;
/*	background: #f1f1f1;*/
	border-radius: 3px 3px 0 0;
}
/* Шрифт-иконки от Font Awesome в формате Unicode */
.tabs>label:before {
	font-family: fontawesome;
	font-weight: normal;
	margin-right: 10px;
}
.tabs>label[for*="1"]:before {
	content: "\f17a";
}
.tabs>label[for*="2"]:before {
	content: "\f17a";
}
.tabs>label[for*="3"]:before {
	content: "\f17a";
}

/* Изменения стиля переключателей вкладок при наведении */
 
.tabs>label:hover {
	color: black;
	cursor: pointer;
}
/* Стили для активной вкладки */
.tabs>input:checked+label {
	color: #555;
	border-top: 1px solid #009933;
	border-bottom: 1px solid #fff;
	background: #fff;
    
}
/*
#tab2:checked{
    color: #39ffff;
    background-color: #39ffff;
}
*/
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab3:checked~#content-tab3 {
	display: block;
    
}
/* Убираем текст с переключателей 
* и оставляем иконки на малых экранах
*/
.label_for_graph{
    color: #00ffff;
    font-size: 15px;
    font-weight: 600;
    
} 


@media screen and (max-width: 680px) {
	.tabs>label {
		font-size: 0;
	}
	.tabs>label:before {
		margin: 0;
		font-size: 18px;
	}
}
/* Изменяем внутренние отступы 
*  переключателей для малых экранов
*/
@media screen and (max-width: 400px) {
	.tabs>label {
		padding: 15px;
	}
}