* {
	outline: none;
}

/*@font-face {font-family: 'lcd_rounded';src: url('fonts/lcdrounded.ttf')  format('truetype')}
@font-face {font-family: 'raleway';src: url('fonts/Raleway.ttf')  format('truetype')}*/

body{ width: 1200px; height: 800px; background-color: black; margin: 0; font-family: "Calibri", "Verdana", "Helvetica", "Arial"; padding: 6px; border: 2px solid; }

div{ position: absolute; }

.datepicker div{ position: relative; }

#back {
	width: 52px; height: 52px;
	left: 20px; top: 20px;
	background-image: url("../img/back.png"); background-size: 52px 52px; background-repeat: no-repeat;
	cursor: Pointer;
	z-index: 1000;
}

#chart {
	width: 52px; height: 52px;
	left: 20px; top: 82px;
	background-image: url("../img/chart.png"); background-size: 52px 52px; background-repeat: no-repeat;
	cursor: Pointer;
	z-index: 1000;
}

#analisys {
	width: 52px; height: 52px;
	left: 20px; top: 144px;
	background-image: url("../img/memo.png"); background-size: 52px 52px; background-repeat: no-repeat;
	cursor: Pointer;
	z-index: 1000;
}

#telepass_conv { 
	width: 52px; height: 52px; 
	left: 20px; top: 206px; 
	background-image: url("../img/telep.png"); background-size: 52px 52px; background-repeat: no-repeat; 
	cursor: Pointer;
	z-index: 1000;
}

#info { 
	width: 52px; height: 52px; 
	left: 20px; top: 268px; 
	background-image: url("../img/info.png"); background-size: 52px 52px; background-repeat: no-repeat; 
	cursor: Pointer;
	z-index: 1000;
}

#webcam { 
	width: 52px; height: 52px; 
	left: 650px; top: 234px; 
	background-image: url("../img/ipcam.png"); background-size: 52px 52px; background-repeat: no-repeat;
	cursor: Pointer;
	z-index: 1000;
	opacity: 0.7;
}

#webcam:hover {
        opacity: 1;
}

#light1, #light2 { width: 74px; height: 145px; background-image: url("../img/light_0.png");}

.close { 
	width: 36px; height: 36px; 
	background-image: url("../img/close.png"); background-size: 36px 36px; background-repeat: no-repeat; 
	cursor: Pointer;
	display: visible;
}


.header, .footer, .section_header{
	background: #4c4c4c;
	background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 52%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(52%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
	background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 52%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
	background: -o-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 52%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
	background: -ms-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 52%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
	background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 52%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 );
}

.header { width: 1186px; height: 60px; }
.footer { width: 1181px; height: 20px; left: 7px;top: 776px;}

#popupAnalisys { 
	width: 350px; height: 230px; 
	left: 70px; top: 84px; 
	background-color: rgba(0,0,0,.85);; 
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    z-index: 30;
    display: none;
    padding: 30px;
}

#popupAnalisys div{
	position: static; 
}

#popupAnalisys .close{
	position: absolute; 
}

#popupChart {
        width: 950px; height: 530px;
        left: 70px; top: 54px;
        background-color: rgba(0,0,0,.85);;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    z-index: 30;
    display: none;
    padding: 30px;
}

#popupChart div{
        position: static;
}

#popupChart .close{
        position: absolute;
}

#popupLegenda { 
	width: 350px; height: 230px; 
	left: 70px; top: 145px; 
	background-color: rgba(0,0,0,.85);; 
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    z-index: 30;
    display: none;
    padding: 30px;
}

#webcamView { 
    width: 320px; height: 240px; 
    left: 70px; top: 70px; 
    background-color: rgba(0,0,0,.85);; 
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.7);
    box-shadow: 10px 10px 10px rgba(0,0,0,.5);
    display: none;
    z-index: 40;
}


.bubbleleft 
{
width: 185px;
height: 125px;
position: absolute;
color: #fff;
background: #FFBF00;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 4px;
border: #000 solid 2px;
}

.bubbleleft:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 10px 21px 10px 0;
border-color: transparent #FFBF00;
display: block;
width: 0;
z-index: 1;
left: -20px;
bottom: 10px;
}

.bubbleleft:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 11px 24px 11px 0;
border-color: transparent #000;
display: block;
width: 0;
z-index: 0;
left: -24px;
bottom: 9px;
}


.bubbledown 
{
content: '';
position: absolute;
color: #fff;
width: 126px;
height: 36px;
background: #000000;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 6px;
border: #FFBF00 solid 2px;
}

.bubbledown:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 20px 8px 0;
border-color: #000000 transparent;
display: block;
width: 0;
z-index: 20;
bottom: -19px;
left: 80px;
}

.bubbledown:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 21px 9px 0;
border-color: #FFBF00 transparent;
display: block;
width: 0;
z-index: 19;
bottom: -23px;
left: 79px;
}



.indicator {
	width: 20px; height: 20px; border-radius: 50%; border: 2px solid #eee; margin-top: -12px;
}

.grey { background-color: grey; }
.yellow { background-color: #ba0; }
.red { background-color: #b00; }
.blue { background-color: #00b; }
.green { background-color: #0b0; }

.field_descr{ width: 50px; }
.fieldval, .targa { 
	height: 30px;
	left: 2px;
	line-height: 30px; 
	position: absolute; 	
	text-align: center; 
	/*font-size: 44px; 
	font-family: "lcd_rounded";*/
	font-size: 22px;
	font-family: "Calibri","Arial","Verdana";
	font-weight: bold;
	font-weight: bold;
	border: 1px solid #777
	background: #4c4c4c; /* Old browsers */
	background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
} 

.fieldval { width: 45px; font-size: 16px; }

.fieldval.f { top: 1px; color: #e0e0e0; font-weight: normal;}
.fieldval.f.r { left: 1px; }
.fieldval.f.s { left: 47px; }
.fieldval.f.t { left: 93px; }
.fieldval.f.u { left: 139px;}

.fieldval.watt { top: 32px; color: #f8c855;}
.fieldval.watt.r { left: 1px; }
.fieldval.watt.s { left: 47px; }
.fieldval.watt.t { left: 93px; }
.fieldval.watt.u { left: 139px; color: #e0e0e0; font-weight: normal;}

.fieldval.volt { top: 63px; color: #a8f000;}
.fieldval.volt.r { left: 1px; }
.fieldval.volt.s { left: 47px; }
.fieldval.volt.t { left: 93px; }
.fieldval.volt.u { left: 139px; color: #e0e0e0; font-weight: normal;}
                 
.fieldval.ampere { top: 94px; color: #77d8f0;}
.fieldval.ampere.r { left: 1px; }
.fieldval.ampere.s { left: 47px; }
.fieldval.ampere.t { left: 93px; }                       
.fieldval.ampere.u { left: 139px; color: #e0e0e0; font-weight: normal;}


.targa { width: 121px; top: 2px; color: #FFCF00;}


@-webkit-keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.rotating {
  -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;
}


.button_bar {
	background-color: rgba( 50, 50, 50, 0.5 );
	padding: 4px;
	text-align: center;
	border: 1px solid #fff;
	border-radius: 6px;
	z-index: 10000;
	display: block;
}

.stateLabel {
  width: 140px;
  color: #fff;
  padding: 5px 10px;
  font-size: 14px;
        line-height: 20px;
        text-align: center;
        border: 1px solid #777
        background: #4c4c4c; /* Old browsers */
        background: -moz-linear-gradient(top,  #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

border: 1px solid #FFBF00;
border-radius: 4px;
}

/* Plant select */
.plant-select a {
  text-decoration: none;
  opacity: .9;
}
.plant-select a:hover {
  opacity: 1;
}

input[type="button"] {
  background: #455cde;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 16px;
  margin-bottom: 10px;
}