/***
   ������ ���������� ��������� �����������
***/

html {
  font-family: Arial;
  max-width: 960px;
  margin: 10px auto;
  text-align: center;
  background-color: #cac093;
}

body {
    font-size: 100%;
}

.setting {
	position: fixed;
	top: 10px;
	left: 10px;
	z-index: 50;
   display: inline-block;
	cursor: pointer;  
   text-align: center;
	width: 90px;
	height: 20px;
	padding: 0;
	border: 2px solid #ccc;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
	border-radius: 15px;
	background-color: rgba(192, 192, 192, 0.8);
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
	text-align: center;
	text-decoration: none;
	font: 13px/20px 'Tahoma', Arial, sans-serif;
	font-weight: bold;
	-webkit-transition: all ease .8s;
	-moz-transition: all ease .8s;
	-ms-transition: all ease .8s;
	-o-transition: all ease .8s;
	transition: all ease .8s;
}

.hyperspan {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
}

.panel {
	padding: 0px 0px;
	text-decoration: none;
   margin: -10px;
   width: 960px;
   position: relative;   
	text-shadow: -1px -1px 0px #2C7485;
}

.novisible {
	display: none;
}

.spacers{
	width: 50px;
	height: 50px;
   border-radius: 30px;
   text-decoration: none;
   background: url(spacer.gif) repeat center;
}

.spacer{
	width: 63px;
	height: 63px;
   border-radius: 33px;
   text-decoration: none;
   background: url(spacer.gif) repeat center;
}

.column_1 {
  float: left;	
  width: 780px;
}

.column_2 {
  float: left;	
  width: 160px;
  position: absolute;
  left: 815px;
  top: 0px;
}

 .row_1 {
  position: absolute;
  left: 0px;
  top: 0px;
}

.level div{	
  float: left;
}

.level_water {
  display: block;
  border-radius: 5px;
  width: 770px;
  height: 63px;
  background-color: #dcd9d9;
  text-align: center;
  margin-left: 10px;
}

.level_water_title {
  max-width: 770px;
  margin: 7px auto;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 19px;
  clear: left;	
}

.level_water hr {
  display: block;
  margin-top: -5px;
  width: 765px;
  size: 2px;
  clear: left;
  background-color: black;
}

.level_water span {
  margin-top: -17px;
  float: left;
  display: block;
  width: 100px;  
  margin-left: 46px;
  margin-right: 46px;  
}


.indicator_row_1 {
  position: absolute;
  top: 60px;
  left: 0px;
}

.indicator_row_1 div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 48px;	
  margin-right: 47px;	
}

 .row_2 {
  position: absolute;
  left: 0px;
  top: 180px;
}

.title_row_2 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
  margin-left: 15px;
  margin-right: 25px;
}

.title_row_2_title {
  max-width: 160px;
  margin: 7px auto;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 19px;
  clear: left;	
}

.vertical_align p {
  max-width: 160px;
  margin: 20px auto;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 19px;
  clear: left;	
}

.indicator_row_2 {
  position: absolute;
  top: 60px;
  left: 0px;
}

.indicator_row_2 div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 49px;	
  margin-right: 48px;	
}

 .row_3 {
  position: absolute;
  left: 0px;
  top: 360px;
}
.level_high_voltage {
  display: block;
  border-radius: 5px;
  width: 358px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;	
}

.title_row_3_title {
  max-width: 358px;
  margin: 7px auto;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 19px;
  clear: left;	
}

.level_high_voltage hr {
  display: block;
  margin-top: -5px;
  size: 2px;
  width: 340px;
  background-color: black;
}

.gp_1 {
  margin-top: -19px;
  float: left;
  margin-left: 63px;
}

.gp_2 {
  margin-top: -19px;
  float: left;
  margin-left: 163px;
}

.title_row_3 {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
  margin-left: 15px;
  margin-right: 25px;
}

.title_row_3 h3 {
  margin-top: 8px;
}

.indicator_row_3 {
  position: absolute;
  top: 68px;
  left: -10px;
}

.indicator_row_3_div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 49px;
  margin-right: 49px;
}

.row_3_gp_1 {
  margin-top: -19px;
  float: left;
  margin-left: 65px;
}

.row_3_gp_2 {
  margin-top: -19px;
  float: left;
  margin-left: 160px;
}

.row_3_gp_3 {
  margin-top: -19px;
  float: left;
  margin-left: 53px;
}

.row_3_gp_4 {
  margin-top: -19px;
  float: left;
  margin-left: 145px;
}

.display {
  display: block;
  width: 560px;
  height: 150px;
  float: left;
  position: absolute;
  top: 0px;
  left: 215px;
  /*box-shadow: 0 0 3px 1px rgba(0, 0, 0,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.displaycolumn_1 {
  background-color: #22cd6d;
  color: #22cd6d;
 width: 277px;
 height: 150px;  
  border-radius: 5px;
 float: left;
 box-shadow: 0 0 3px 1px rgba(0, 0, 0,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.displaycolumn_2 {
  background-color: #22cd6d;
 width: 277px;
  color: #22cd6d;
 height: 150px;  
  border-radius: 5px;
 float: right;
 box-shadow: 0 0 3px 1px rgba(0, 0, 0,1);
}


.display p {
  color: black;
  text-align: left;
  padding-left: 10px;
}

 .row_4 {
  position: absolute;
  left: 0px;
  top: 540px;
}

.title_row_4 div {
  display: block;
  border-radius: 5px;
  width: 358px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
  margin-left: 20px;
  margin-right: 20px;
}

.title_row_4 div hr {
  display: block;
  margin-top: -5px;
  size: 2px;
  width: 340px;
  background-color: black;
}

.indicator_row_4 {
  position: absolute;
  top: 60px;
  left: 0px;
}

.indicator_row_4_div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 50px;
  margin-right: 49px;
}

 .row_5 {
  position: absolute;
  left: 0px;
  top: 720px;
}

.title_row_5 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
  margin-left: 15px;
  margin-right: 25px;
}

.title_row_5_title {
  max-width: 160px;
  margin: 7px auto;
  text-align: center;
  display: block;
  font-weight: bold;
  font-size: 19px;
  clear: left;	
}

.indicator_row_5 {
  position: absolute;
  top: 60px;
  left: -93px;
}

.indicator_row_5 div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  margin-left: 49px;	
  margin-right: 49px;	
}

 .column_2_row_1 { 
}

.column_2_title_row_1 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
}

.column_2_indicator_row_1 {
}

.column_2_indicator_row_1 {
  position: absolute;
  top: 60px;
  left: 30px;
}

.column_2_indicator_row_1_div {
  display: block;
  width: 100px;
  height: 100px;
}

 .column_2_row_2 {
  position: absolute;
  left: 0px;
  top: 180px;
}

.column_2_title_row_2 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
}

.column_2_indicator_row_2 {
  position: absolute;
  top: 60px;
  left: 30px;
}

.column_2_indicator_row_2_div {
  display: block;
  width: 100px;
  height: 100px;
}

 .column_2_row_3 {
  position: absolute;
  left: 0px;
  top: 360px;
}

.column_2_title_row_3 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
}

.column_2_indicator_row_3 {
}

.column_2_indicator_row_3_div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  position: absolute;
  top: 60px;
  left: 30px;
}

 .column_2_row_4 {
  position: absolute;
  left: 0px;
  top: 540px;
}

.column_2_title_row_4 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
}

.column_2_indicator_row_4 {
}

.column_2_indicator_row_4_div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  position: absolute;
  top: 60px;
  left: 30px;
}

 .column_2_row_5 {
  position: absolute;
  left: 0px;
  top: 720px;
}

.column_2_title_row_5 div {
  display: block;
  border-radius: 5px;
  width: 160px;
  height: 63px;
  background-color: #dcd9d9;
  float: left;
  text-align: center;
}

.column_2_indicator_row_5 {
}

.column_2_indicator_row_5_div {
  display: block;
  width: 100px;
  height: 100px;
  float: left;
  position: absolute;
  top: 60px;
  left: 30px;
}
 
.green {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; 		
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px; 
  margin-left: 11px;  
  box-shadow: 0 0 3px rgba(0,0,0,0.5); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.green:before{
  position: absolute; content: "";
  -webkit-transition: .4s; transition: .4s;
  display: block;
  width: 65px;
  height: 65px;
  background:transparent;
  border-radius: 50px;
  margin-top: 8px; 
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(20, 71, 47,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(100, 165, 133, 1) 20%, rgba(72, 90, 57, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(100, 165, 133, 1) 20%, rgba(72, 90, 57, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(100, 165, 133, 1) 20%, rgba(72, 90, 57, 1) 50%);
    }
	
	input:checked+.green {
  box-shadow: 0 0 40px 10px rgba(64, 255, 122,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

input:checked+.green:before{
	-webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);
  box-shadow: 0 0 5px rgba(64, 255, 122,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(164, 250, 203, 1) 20%, rgba(64, 255, 122, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(164, 250, 203, 1) 20%, rgba(64, 255, 122, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(164, 250, 203, 1) 20%, rgba(64, 255, 122, 1) 50%);
    }

.bloks div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
}

.bloks div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
    }

.green_on div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 40px 10px rgba(64, 255, 122,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.green_on div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(64, 255, 122,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(164, 250, 203, 1) 20%, rgba(64, 255, 122, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(164, 250, 203, 1) 20%, rgba(64, 255, 122, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(164, 250, 203, 1) 20%, rgba(64, 255, 122, 1) 50%);
    }

    .green_off div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 3px rgba(0,0,0,0.5); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.green_off div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(20, 71, 47,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(100, 165, 133, 1) 20%, rgba(72, 90, 57, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(100, 165, 133, 1) 20%, rgba(72, 90, 57, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(100, 165, 133, 1) 20%, rgba(72, 90, 57, 1) 50%);
    }
    
.red_off div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 3px rgba(0,0,0,0.5); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.red_off div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(175,9,4,0.5);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(248, 150, 150, 1) 20%, rgba(208, 49, 44, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(248, 150, 150, 1) 20%, rgba(208, 49, 44, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(248, 150, 150, 1) 20%, rgba(208, 49, 44, 1) 50%);
    }

.red_on div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 60px 30px rgba(250,165,90,50); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.red_on div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(175,9,4,0.5);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(248, 181, 173, 1) 20%, rgba(254, 68, 45, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(248, 181, 173, 1) 20%, rgba(254, 68, 45, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(248, 181, 173, 1) 20%, rgba(254, 68, 45, 1) 50%);
    }
    
.yellow_on div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 60px 20px rgba(250,250,0,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.yellow_on div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(255, 255, 59,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(255, 255, 120, 1) 20%, rgba(255, 255, 59, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(255, 255, 120, 1) 20%, rgba(255, 255, 59, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(255, 255, 120, 1) 20%, rgba(255, 255, 59, 1) 50%);
    }

    .yellow_off div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 3px rgba(0,0,0,0.5); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.yellow_off div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(253,207,69,0.5);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(250, 240, 130, 1) 10%, rgba(235, 219, 75, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(250, 240, 130, 1) 10%, rgba(235, 219, 75, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(250, 240, 130, 1) 10%, rgba(235, 219, 75, 1) 50%);
    }

.black_off div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 3px rgba(0,0,0,0.5); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.black_off div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    }

.black_on div {
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px;	
  margin-left: 11px;	
  box-shadow: 0 0 20px 5px rgba(107, 102, 84,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.black_on div div{
  display: block;
  width: 65px;
  height: 65px;
    background:transparent;
  border-radius: 50px;
   margin-top: 8px;	
  margin-left: 8px;
  float: left;
  box-shadow: 0 0 5px rgba(85, 83, 77,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(187, 182, 164, 1) 20%, rgba(107, 102, 84, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(187, 182, 164, 1) 20%, rgba(107, 102, 84, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(187, 182, 164, 1) 20%, rgba(107, 102, 84, 1) 50%);
    }

.black {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; 		
  display: block;
  width: 80px;
  height: 80px;
  float: left;
  border: white;
  color: white;
  background-color: white;
  border-radius: 50px;
  margin-top: 11px; 
  margin-left: 11px;  
  box-shadow: 0 0 3px rgba(0,0,0,0.5); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

.black:before{
  position: absolute; content: "";
  -webkit-transition: .4s; transition: .4s;
  display: block;
  width: 65px;
  height: 65px;
  background:transparent;
  border-radius: 50px;
  margin-top: 8px; 
  margin-left: 8px;
  float: left;  
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    }

input:checked+.black {
  box-shadow: 0 0 20px 5px rgba(107, 102, 84,1); /* box-shadow: 0 0 10px rgba(255,0,0,5); ��������� ���� */
}

input:checked+.black:before{
	-webkit-transform: translateX(0px); -ms-transform: translateX(0px); transform: translateX(0px);
  box-shadow: 0 0 5px rgba(85, 83, 77,1);
    background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(187, 182, 164, 1) 20%, rgba(107, 102, 84, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(187, 182, 164, 1) 20%, rgba(107, 102, 84, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(187, 182, 164, 1) 20%, rgba(107, 102, 84, 1) 50%);
    }
	

 .switch {
 position: relative;
 display: inline-block;
 width: 80px;
 height: 80px;
 cursor: pointer;
  border: transparen;
  color: transparen;
  background-color: transparen;
  border-radius: 50px;
  margin-top: -8px;
  margin-left: -8px;
} 

 .switch input {display: none}
 
  .switch input a:active {  
 display: inline-block;
 width: 80px;
 height: 80px;
  border: transparen;
  color: transparen;
  background-color: transparen;
  border-radius: 50px;
  margin-top: -8px;
  margin-left: -8px;
} 
  
  .switch a:active {  
 display: inline-block;
 width: 80px;
 height: 80px;
  border: transparen;
  color: transparen;
  background-color: transparen;
  border-radius: 50px;
  margin-top: -8px;
  margin-left: -8px;
}  

 #loginv {
	display: none;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 500;
}

/*---login---*/

.loginbox .loginbtn, .loginbox a.logbtn {
    position: relative;
    margin: 0px 0px 0 0;   
    float: left; 
 	 font: 21px black;
}

a{
	text-decoration:none;
	color: black;
}

a:hover{
	text-decoration:underline;	
}

.spacer{
  display: block;
 position: relative;
	width: 50px;
	height: 50px;
   border-radius: 50px;
   text-decoration: none;
   background-color: black;
  margin-top: 0px;
  margin-left: 0px;
  color: transparen;
  box-shadow: 0 0 3px 1px rgba(225, 227, 226,1);
  background-image:-moz-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    background-image:-webkit-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    background-image:-o-radial-gradient(0% 0%, circle cover, rgba(96, 96, 96, 1) 10%, rgba(30, 31, 31, 1) 50%);
    
}

.spacer_span{
 position: relative;
   text-decoration: none;
   background-color: transparen;
	position: absolute;
	top: 15px;
	left: 17px;
  color: white;
}

 .switch_keys {
 position: relative;
 display: inline-block;
 width: 50px;
 height: 50px;
 cursor: pointer;
  color: transparen;
  border: transparen;
  background-color: transparen;
  border-radius: 50px;
  margin-top: 0px;
  margin-left: 0px;
} 
 .switch_keys input {display: none}
 
 
.keys {
  position: absolute;
  top: 100px;
  left: 80px;
}

#key_up {
  background-color: transparen;
  border: transparent;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 0px;
  margin-left: 0px;
  width: 50px;
  height: 50px;
  color: transparen;
}

#key_left {
  background-color: transparen;
  border: transparent;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 15px;
  margin-left: -64px;
  width: 50px;
  height: 50px;
  float: left;
  color: transparen;
}

#key_enter {
  background-color: transparen;
  border: transparent;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 15px;
  margin-left: 0px;
  width: 50px;
  height: 50px;
  float: left;
  color: transparen;
}

#key_right {
  background-color: transparen;
  border: transparent;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 15px;
  margin-left: 15px;
  width: 50px;
  height: 50px;
  float: left;
  color: transparen;
}

#key_down {
  background-color: transparen;
  border: transparent;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 80px;
  margin-left: -114px;
  width: 50px;
  height: 50px;
  float: left;
  color: transparen;
}

.on {
	position: absolute;
	top: 2px;
	left: 5px;
}

.slash{
	position: absolute;
	top: 2px;
	left: 30px;
}

.off {
	position: absolute;
	top: 2px;
	right: 5px;
}

.box6 input, .box6 input span input, .box9 input, .box9 input span input, .box12 input, .box12 input span input, .box15 input, .box15 input span input, .box18 input, .box18 input span input, .box21 input, .box21 input span input, .box24 input, .box24 input span input, .box27 input, .box27 input span input, .box30 input, .box30 input span input, .box33 input, .box33 input span input, .box37 input, .box37 input span input, .box40 input, .box40 input span input, .box43 input, .box43 input span input, .box46 input, .box46 input span input, .box49 input, .box49 input span input, .box53 input, .box53 input span input, .box56 input, .box56 input span input, .box59 input, .box59 input span input .box62 input, .box62 input span input .box65 input, .box65 input span input, {
	width:15px;
}

.wrapper {
	position: relative;
    display: grid;
    grid-template-columns: 1.0fr 0.1fr 0.3fr;
    /*grid-template-rows: 100px 100px 100px;*/
    grid-gap: 5px;
	border: 4px double black;
	padding: 5px 5px 5px 5px;
}

.box1 {
    grid-column: 1;
    grid-row: 1;
	/*border: 4px double black;
    background: #fc3;*/
	padding-top: 20px;
}

.box2 {
    grid-column: 2;
    grid-row: 1;
	/*border: 4px double black;
    background: #fc3;*/
	padding-top: 20px;
}

.box3 {
    grid-column: 3;
    grid-row: 1;
	/*border: 4px double black;
    background: #fc3;*/
	padding-top: 20px;
	padding-left: 30px;
	text-align: left;
}

.box4 {
    grid-column: 1 / 4;
    grid-row: 2;
	border: 4px double black;
    background: #fc3;
}

.box5 {
    grid-column: 1;
    grid-row: 3;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box6 {
	position: relative;
    grid-column: 2;
    grid-row: 3;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
	position: relative;
	display: inline-block;
}

.box7 {
    grid-column: 3;
    grid-row: 3;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box7 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box8 {
    grid-column: 1;
    grid-row: 4;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box9 {
	position: relative;
    grid-column: 2;
    grid-row: 4;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box10 {
    grid-column: 3;
    grid-row: 4;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box10 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box11 {
    grid-column: 1;
    grid-row: 5;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box12 {
	position: relative;
    grid-column: 2;
    grid-row: 5;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box13 {
    grid-column: 3;
    grid-row: 5;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box13 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box14 {
    grid-column: 1;
    grid-row: 6;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box15 {
	position: relative;
    grid-column: 2;
    grid-row: 6;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box16 {
    grid-column: 3;
    grid-row: 6;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box16 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box17 {
    grid-column: 1;
    grid-row: 7;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box18 {
	position: relative;
    grid-column: 2;
    grid-row: 7;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box19 {
    grid-column: 3;
    grid-row: 7;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box20 {
    grid-column: 1;
    grid-row: 8;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box21 {
	position: relative;
    grid-column: 2;
    grid-row: 8;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box22 {
    grid-column: 3;
    grid-row: 8;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box22 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box23 {
    grid-column: 1;
    grid-row: 9;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box24 {
	position: relative;
    grid-column: 2;
    grid-row: 9;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box25 {
    grid-column: 3;
    grid-row: 9;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box25 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box26 {
    grid-column: 1;
    grid-row: 10;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box27 {
	position: relative;
    grid-column: 2;
    grid-row: 10;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 35px;
	line-height: 20px;
}

.box28 {
    grid-column: 3;
    grid-row: 10;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box28 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box29 {
    grid-column: 1;
    grid-row: 11;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box30 {
	position: relative;
    grid-column: 2;
    grid-row: 11;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 35px;
	line-height: 20px;
}

.box31 {
    grid-column: 3;
    grid-row: 11;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box31 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box32 {
    grid-column: 1;
    grid-row: 12;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box33 {
	position: relative;
    grid-column: 2;
    grid-row: 12;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box34 {
    grid-column: 3;
    grid-row: 12;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box34 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box35 {
    grid-column: 1 / 4;
    grid-row: 13;
	border: 4px double black;
    background: #fc3;
}

.box36 {
    grid-column: 1;
    grid-row: 14;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box37 {
	position: relative;
    grid-column: 2;
    grid-row: 14;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box38 {
    grid-column: 3;
    grid-row: 14;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box38 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box39 {
    grid-column: 1;
    grid-row: 15;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box40 {
	position: relative;
    grid-column: 2;
    grid-row: 15;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box41 {
    grid-column: 3;
    grid-row: 15;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box41 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box42 {
    grid-column: 1;
    grid-row: 16;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box43 {
	position: relative;
    grid-column: 2;
    grid-row: 16;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box44 {
    grid-column: 3;
    grid-row: 16;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box44 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box45 {
    grid-column: 1;
    grid-row: 17;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box46 {
	position: relative;
    grid-column: 2;
    grid-row: 17;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box47 {
    grid-column: 3;
    grid-row: 17;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box47 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box48 {
    grid-column: 1;
    grid-row: 18;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box49 {
	position: relative;
    grid-column: 2;
    grid-row: 18;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box50 {
    grid-column: 3;
    grid-row: 18;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box50 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box51 {
    grid-column: 1 / 4;
    grid-row: 19;
	border: 4px double black;
    background: #fc3;
}

.box52 {
    grid-column: 1;
    grid-row: 20;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box53 {
	position: relative;
    grid-column: 2;
    grid-row: 20;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box54 {
    grid-column: 3;
    grid-row: 20;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box54 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box55{
    grid-column: 1;
    grid-row: 21;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box56 {
	position: relative;
    grid-column: 2;
    grid-row: 21;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box57 {
    grid-column: 3;
    grid-row: 21;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box57 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box58 {
    grid-column: 1;
    grid-row: 22;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box59 {
	position: relative;
    grid-column: 2;
    grid-row: 22;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box60 {
    grid-column: 3;
    grid-row: 22;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box60 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box61 {
    grid-column: 1;
    grid-row: 23;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box62 {
	position: relative;
    grid-column: 2;
    grid-row: 23;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box63 {
    grid-column: 3;
    grid-row: 23;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box63 span {
	position: relative;
	top: -5px;
	left: 5px;
}

.box64 {
    grid-column: 1;
    grid-row: 24;
	/*border: 4px double black;
    background: #fc3;*/
	vertical-align: middle;
	text-align: left;
	padding-left: 5px;
}

.box65 {
	position: relative;
    grid-column: 2;
    grid-row: 24;
	/*border: 4px double black;
    background: #fc3;*/
	line-height: 20px;
}

.box66 {
    grid-column: 3;
    grid-row: 24;
	/*border: 4px double black;
    background: #fc3;*/
	text-align: left;
	padding-left: 10px;
	display: inline-block;
	position: relative;
	top: 0px;
	left: 0px;
}

.box66 span {
	position: relative;
	top: -5px;
	left: 5px;
}
.box67 {
    grid-column: 2 / 4;
    grid-row: 25;
}

input {
	width: 90px;
}

.submit {
	width: 170px;
}

/* ������� ����� ����, ���������� � ���������� ���� */
.overlay {
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
/* ��� ���������� */
background-color: rgba(0, 0, 0, 0.65);
position: fixed; /* ������������� ���������������� */
cursor: default; /* ��� ������� */
}

/* ���������� ���� ���������� */
.overlay:target {
display: block;
}

/* ����� ���������� ���� */
.popup {
top: -100%;
right: 0;
left: 50%;
font-size: 14px;
z-index: 20;
margin: 0;
width: 85%;
min-width: 320px;
max-width: 950px;
/* ������������� ����������������, ���� ��������� ��� ��������� */
position: fixed;
padding: 5px;
border: 1px solid #383838;
background: #fefefe;
/* ���������� ����� */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
font: 14px/18px 'Tahoma', Arial, sans-serif;
/* ������� ���� */
-webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
-webkit-transform: translate(-50%, -500%);
-ms-transform: translate(-50%, -500%);
-o-transform: translate(-50%, -500%);
transform: translate(-50%, -500%);
-webkit-transition: -webkit-transform 0.6s ease-out;
-moz-transition: -moz-transform 0.6s ease-out;
-o-transition: -o-transform 0.6s ease-out;
transition: transform 0.6s ease-out;
}

/* ���������� ��������� ���� */
.overlay:target+.popup {
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
top: 3%;
}

/* ��������� ������ �������� */
.close {
top: -10px;
right: -10px;
width: 20px;
height: 20px;
position: absolute;
padding: 0;
border: 2px solid #ccc;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
background-color: rgba(61, 61, 61, 0.8);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
text-align: center;
text-decoration: none;
font: 13px/20px 'Tahoma', Arial, sans-serif;
font-weight: bold;
-webkit-transition: all ease .8s;
-moz-transition: all ease .8s;
-ms-transition: all ease .8s;
-o-transition: all ease .8s;
transition: all ease .8s;
}

.close:before {
color: rgba(255, 255, 255, 0.9);
content: "X";
text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
font-size: 12px;
}

.close:hover {
background-color: rgba(252, 20, 0, 0.8);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}