/* 
//
// Copyright (C) 2019 André Rijkeboer
//
// This file is part of zonnepanelen, which shows telemetry data from
// the TCP traffic of SolarEdge PV inverters.
//
// zonnepanelen is free software: you can redistribute it and/or modify it
// under the terms of the GNU General Public License as published by the
// Free Software Foundation, either version 3 of the License, or (at
// your option) any later version.
//
// zonnepanelen is distributed in the hope that it will be useful, but
// WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
// General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with zonnepanelen.  If not, see <http://www.gnu.org/licenses/>.
//
versie: 1.40
auteur: André Rijkeboer
datum: 25-02-2019
omschrijving: basisgegevens voor de zonnepanelen
*/
a{
	font-family: verdana, sans-serif;
	padding:0px;
	text-decoration:none;
	color:#000000;
	font-weight: normal;
}
a:hover {
	color:#ff0000;
}

p {
	padding:0px;
	margin:0px;
}

hr {
	height: 1px;
	border: none 0px; /* Firefox and Opera */
	border-bottom: solid 1px #0099ff;
	border-top: none 1px #ffffff;
}
img
{
  border: none 0px;
}

html, body {
	margin:0px;
	left:0%;
	padding:0;
	background-color: #ccd7dd;
	z-index:0;
	position:relative;
	font-family: verdana, sans-serif;
	font-size: 10px;
}

div.mainpage {
	position: relative;
	left:0%;
	width:100%;
	height: 100%;
	text-align: center;
}

div.container {
	width:100%;
    height: 100%;
	left:0%;
	position:relative;
	margin:0 auto;
	text-align: left;
}

div.text_div {
	float: left;
	width: 100%;
	text-align: center;
}



.imageOver {
	width: 100%;
	height: 100%;
	left:0px;
	position:absolute;
	text-align: center;
}


div.box_Zonnepanelen {
	
/*    left: 4.67%; 
    top: 6.83%; 
    width: 15.67%;
    height: 32%; */
    left: 1%;
    top: 6%;
    width: 20%;
    height: 40%;
    position: absolute;
	-webkit-transform:rotate(0deg); 
	transform:rotate(0deg);
}



div.text_Zonnepaneel_n {
	top: 82%;
	left: 10%;
	font-size: 11px;
	font-weight: bold;
	position: absolute;
}

div.box_Zonnepaneel_1 {
    left: 3%;
    top: 0%;
    width: 30%;
    height: 19%;
    position: absolute;
    z-index: -90;	
}

div.box_Zonnepaneel_2 {
    left: 35.00%;
    top: 0%;
    width: 30%;
    height: 19%;
    position: absolute;
	z-index: -90;
}

div.box_Zonnepaneel_3 {
    left: 66.66%;
    top: 0%;
    width: 30%;
    height: 19%;
    position: absolute;
	z-index: -90;
}

div.box_Zonnepaneel_4 {
    left: 0%;
    top: 20%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_5 {
    left: 20%;
    top: 20%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_6 {
    left: 40%;
    top: 20%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_7 {
    left:60%;
    top: 20%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_8 {
    left: 80%;
    top: 20%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_9 {
    left: 0%;
    top: 51%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_10 {
    left:20%;
    top: 51%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_11 {
    left:40%;
    top: 51%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_12 {
    left: 60%;
    top: 51%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_13 {
    left: 80%;
    top: 51%;
    width: 19%;
    height: 30%;
    position: absolute;
	
}

div.box_Zonnepaneel_14 {
    left: 16.67%;
    top: 58.4%;
    width: 15.8%;
    height: 28.05%;
    position: absolute;
	
}

div.box_Zonnepaneel_15 {
    left: 33.33%;
    top: 58.4%;
    width: 15.8%;
    height: 28.05%;
    position: absolute;
	
}

div.box_Zonnepaneel_16 {
    left: 50%;
    top: 58.4%;
    width: 15.8%;
    height: 28.05%;
    position: absolute;
	
}

div.box_Zonnepaneel_17 {
    left:66.67%;
    top: 58.4%;
    width: 15.8%;
    height: 28.05%;
    position: absolute;
	
}

div.box_Zonnepaneel_18 {
    left: 83.33%;
    top: 58.4%;
    width: 15.8%;
    height: 28.05%;
    position: absolute;
	
}

div.box_Zonnepaneel_19 {
    left: 87.54%;
    top: 87.6%;
    width: 27.65%;
    height: 16.03%;
    position: absolute;
	
}

div.box_Zonnepaneel_20 {
    left:58.36%;
    top: 87.6%;
    width: 27.65%;
    height: 16.03%;
    position: absolute;
	
}

div.box_Zonnepaneel_21 {
    left:29.18%;
    top: 87.6%;
    width: 27.65%;
    height: 16.03%;
    position: absolute;
	
}

div.box_Zonnepaneel_22 {
    left: 0%;
    top: 87.6%;
    width: 27.65%;
    height: 16.03%;
    position: absolute;
	
}

div.box_Zonnepaneel_23 {
    left: 0%;
    top: 0%;
    width: 0%;
    height: 0%;
    position: absolute;
	
}

div.box_Zonnepaneel_24 {
    left:0%;
    top: 0%;
    width: 0%;
    height: 0%;
    position: absolute;
	
}

div.box_Zonnepaneel_25 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_26 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_27 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_28 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_29 {
    left:0%;
    top: 87.6%;
     width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_30 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}
div.box_Zonnepaneel_31 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_32 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.box_Zonnepaneel_33 {
    left:0%;
    top: 87.6%;
    width: 0%;
    height: 0%;
    position: absolute;
 	
}

div.ZonnepaneelColor_1 {
	top: 0%;
	left: 0px;
	background-color: black;
	z-index: -10;
	width: 100%;
	height: 100%;
	position: absolute;
}

div.ZonnepaneelColor_2 {
	top: 0%;
	left: 0px;
	background-color: #3399FF;
	z-index: -10;
	width: 100%;
	height: 100%;
	position: absolute;
}

div.ZonnepaneelColor_3 {
	top: 0%;
	left: 0px;
	background-color: #4FD5D6;
	z-index: -10;
	width: 100%;
	height: 100%;
	position: absolute;
}

.arrow_right_red {
	position: relative;
	background: #d50000;
}
.arrow_right_red:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_right_red:after {
	border-color: rgba(213, 0, 0, 0);
	border-left-color: #d50000;
	border-width: 10px;
	margin-top: -10px;
}



.arrow_right_green {
	position: relative;
	background: #15d515;
}
.arrow_right_green:after, .arrow_box:before {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_right_green:after {
	border-color: rgba(213, 0, 0, 0);
	border-left-color: #15d515;
	border-width: 8px;
	margin-top: -10px;
}






.arrow_left_red {
	position: relative;
	background: #d50000;
}
.arrow_left_red:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_left_red:after {
	border-color: rgba(213, 0, 0, 0);
	border-right-color: #d50000;
	border-width: 10px;
	margin-top: -10px;
}


.arrow_left_green {
	position: relative;
	background: #15d515;
}
.arrow_left_green:after, .arrow_box:before {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_left_green:after {
	border-color: rgba(213, 0, 0, 0);
	border-right-color: #15d515;
	border-width: 10px;
	margin-top: -10px;
}



.arrow_up_green {
	position: relative;
	background: #15d515;
}
.arrow_up_green:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_up_green:after {
	border-color: rgba(21, 213, 21, 0);
	border-bottom-color: #15d515;
	border-width: 10px;
	margin-left: -10px;
}

.arrow_up_red {
	position: relative;
	background: #d50000;
}
.arrow_up_red:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_up_red:after {
	border-color: rgba(21, 213, 21, 0);
	border-bottom-color: #d50000;
	border-width: 10px;
	margin-left: -10px;
}




.arrow_down_green {
	position: relative;
	background: #15d515;
}
.arrow_down_green:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_down_green:after {
	border-color: rgba(21, 213, 21, 0);
	border-top-color: #15d515;
	border-width: 10px;
	margin-left: -10px;
}


.arrow_down_red {
	position: relative;
	background: #d50000;
}
.arrow_down_red:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_down_red:after {
	border-color: rgba(21, 213, 21, 0);
	border-top-color: #d50000;
	border-width: 10px;
	margin-left: -10px;
}

.CSSTableGenerator {
	float: left;
	margin:0px;padding:0px;
	width:221px;
	border:1px solid #000000;
	
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
	
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
	
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
	
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px;
}.CSSTableGenerator table{
    border-collapse: collapse;
        border-spacing: 0;
	width:100%;
	margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-bottom-right-radius:5px;
}
.CSSTableGenerator table tr:first-child td:first-child {
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	border-top-left-radius:5px;
}
.CSSTableGenerator table tr:first-child td:last-child {
	-moz-border-radius-topright:5px;
	-webkit-border-top-right-radius:5px;
	border-top-right-radius:5px;
}.CSSTableGenerator tr:last-child td:first-child{
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-left-radius:5px;
}.CSSTableGenerator tr:hover td{
	background-color:#ffaaaa;
		

}
.CSSTableGenerator td{
	vertical-align:middle;
	
	background-color:#ffffff;

	border:1px solid #000000;
	border-width:0px 1px 1px 0px;
	text-align:left;
	padding:1px;
	font-size:9px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
}.CSSTableGenerator tr:last-child td{
	border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
	border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
	border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
		background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) );
	background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000");	background: -o-linear-gradient(top,#ff5656,7f0000);

	background-color:#ff5656;
	border:0px solid #000000;
	text-align:center;
	border-width:0px 0px 1px 1px;
	font-size:9px;
	font-family:Arial;
	font-weight:bold;
	color:#ffffff;
}
.CSSTableGenerator tr:first-child:hover td{
	background:-o-linear-gradient(bottom, #ff5656 5%, #7f0000 100%);	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5656), color-stop(1, #7f0000) );
	background:-moz-linear-gradient( center top, #ff5656 5%, #7f0000 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5656", endColorstr="#7f0000");	background: -o-linear-gradient(top,#ff5656,7f0000);

	background-color:#ff5656;
}
.CSSTableGenerator tr:first-child td:first-child{
	border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
	border-width:0px 0px 1px 1px;
}

.chart {
    min-width: 320px;
    max-width: 750px;
    height: 150px;
    margin: 0px;
}