html, body {
/*background-image: url("../images/Green-Nature.jpg");*/
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-color: #ffffff;
background-attachment: fixed;
letter-spacing: 2px;
padding: 0px;
margin: 0 auto;
text-decoration: none;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size:14px;
letter-spacing:0px;
}

.green{color:green }
.amber{color:#ffbf00 }
.red{ color:red}


.outer { display: table; position: absolute; height: 100%; width: 100%; }
.middle { display: table-cell; vertical-align: middle; }
.inner { margin-left: auto; margin-right: auto; width:100%; }

.header{
position:absolute;
position: fixed;
left:0; right:0;
height:76px;
background-color:#fff;
box-shadow: 0 0 13px rgba(0, 0, 0, .4);
z-index: 99;
}

.header H1{
font-style: normal;
font-size: 26px;
padding 0 0 0 0;
color: #fff;
min-height: 0;
}

.main{
position: absolute;
right:0; bottom:0;
left:0px; top:76px;
min-height: 0;
}

.text-box{
        text-align:center;
        background-color:#3078cd;
        padding:10px;
	margin:0% 5% 10% 5%;
 	color:#fff;
        font-size:15px;
        box-shadow: 0 0 13px rgba(0, 0, 0, .2);
        }

.text-module{
        text-align:center;
        background-color:#3078cd;
        padding:10px;
        color:#ffffff;
        font-size:15px;
        box-shadow: 0 0 13px rgba(0, 0, 0, .2);
        }

.text-module table{
        margin: 0 auto;
        text-align:center;
        background-color:#3078cd;
        padding:10px;
        color:#ffffff;
        font-size:15px;
        }

.pie-container{  }
.chart-container1{ background-color:#ffffff; }
.chart-container{ background-color:#ffffff; }


.graph-module {
float:left;
background-color:#ffffff;
box-shadow: 0 0 13px rgba(0, 0, 0, .2);
}
.graph-header{
height:26px;
background-color:#ffffff;
padding:5px;
}
.graph-footer{
height:40px;
padding:5px;
background-color:#ffffff;
}


.form-module {
margin: 0% 0 0 0;
padding: 50px;
}


.sidenav {
height: 91%;
width: 0;
position: fixed;
z-index: 1;
top: 86px;
left: 0;
background: #f3f2f1;
overflow: scroll;
padding-top: 25px;
color: #717171;
  transition: 0.5s;
}

.sidenav a {
    padding: 0px;
    text-decoration: none;
    font-size: 12px;
    color: #818181;
  transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
color: #3078cd;
}


.sidenav .closebtn {
position: absolute;
top: 0;
right: 0px;
font-size: 36px;
margin-left: 1px;
}

#content {
transition: margin-left .5s;
padding: 20px;
}

@media screen and (max-height: 450px) {
.sidenav {padding-top: 5px;}
.sidenav a {font-size: 18px;}
}

iframe{
        min-width:98%;
        min-height:100%;
 	height:100% !important;
	margin: 0 auto;
	display: block;
	background-color:#fff;
}

#element_to_pop_up {
background-color:#fff;
border-style:solid ;
border-color:silver;
border-radius:15px;
color:#000;
display:none;
padding:20px;
height:100%;
min-width:89%;
min-height:85%;
 height:85% !important;
/*box-shadow:0 0 25px 5px #000;*/
}
.b-close {
background-color:#fff;
border-radius:10px;
color:#000;
cursor:pointer;
display:inline-block;
text-align:center;
text-decoration:none
border-radius:7px 7px 7px 7px;
box-shadow:none;
font:bold 133% sans-serif;
padding:0px 5px 3px 6px;
position:absolute;right:-7px;top:-7px;
}

span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container {display:inline !important;} 
span.skype_pnh_container {display:none !important;}
span.skype_pnh_print_container, span[class^="skype_pnh_print_container"] {display:inline !important;} 


a:link{
	text-decoration:none;
	}
a:visited{
	text-decoration:none;
	}
a:active{
	text-decoration:none;
	}
a:hover{
	text-decoration:none;
	}

* {
	margin: 0;
	}


.meter_reading_d{
	font-style:normal;	
	font-size:14px;
	color:#000;
	padding:0px 0px 0px 1px;
}
.meter_reading{
	font-style:normal;	
	font-size:50px;
	line-height:75%;
	padding:0px 0px 0px 15px;
}
.data_reading{
	font-style:normal;	
	font-size:27px;
	line-height:75%;
	padding:0px 0px 0px 15px;
}
.meter_heading{
	font-style:normal;	
	font-size:14px;
	color:#000000;
	padding:12px 10px 0px 20px;
}
.meter_text{
	font-style:normal;	
	font-size:12px;
	color:#000;
	padding:0px 0px 0px 20px;
}
.meter_mid{
	font-style:normal;	
	font-size:18px;
	color:#5f7b00;
	padding:0px 0px 0px 20px;
}

table.button {
	cursor:pointer;
	border-width: 0px;
	border-spacing: 0px;
	border-collapse: separate;
}
table.button th {
	border-width: 0px;
	padding: 0px;
	-moz-border-radius: ;
}
table.button td {
	border-width: 0px;
	padding: 0px;
	-moz-border-radius: ;
}
table.buttonin {
	cursor:pointer;
        border-width: 0px;
        border-spacing: 0px;
        border-collapse: separate;
}
table.buttonin th {
	cursor:pointer;
        border-width: 0px;
        padding: 0px;
        -moz-border-radius: ;
}
table.buttonin td {
	cursor:pointer;
	border-width: 0px;
	padding: 0px;
	-moz-border-radius: ;
}
table.input {
        border-spacing: 0px;
        border-collapse: collapse;
	padding:0px 0px 0px 15px;
}
table.input th {
        border-width: 0px;
        padding: 0px;
}
table.input td {
        border-width: 0px;
	padding:0px 0px 0px 15px;
	text-align:right;
	vertical-align:bottom;	
}

button a{
        color:#000;
        text-decoration:none;
        }
button a:hover {
        color:#000;
        text-decoration: underline;
        }


.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -22px; /* the bottom margin is the negative value of the footer's height */
	}
.footer {
	color:#000;
	height: 22px; /* .push must be the same height as .footer */
	text-align: center;
	}
.footer a {
	color:#000;
	text-decoration:none;
	}
.footer a:hover {
	color:red;
	text-decoration: underline;
	}