* {box-sizing:border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
#mycontainer {width:90%;}
#header {margin-left:3em;}
#header_sum {margin-left:4em;margin-top:1em;}

#clear {clear:both;}
#footer {height:3em;width:100%;padding:16px;padding-left:3em;}
/********** Sidenav **********/
#mySidenav a {z-index: 77;}
#mySidenav a {position: absolute; left: -140px; transition: 0.3s; padding: 15px; width: 160px; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0;}
#mySidenav a:hover {left: 0;}

#home {top: 40px; background-color: #4CAF50;}
#services {top: 100px; background-color: #2196F3;}
#log_in {top: 160px; background-color: #f44336;}
#contact {top: 220px; background-color: #555;}

.column {float:left; padding:0.1em;}
.left  {width:78%;}
.right {width:22%;}
/* Clear floats after the columns */
.row:after {content:"";display:table;clear:both;}
#power {width: 100%; margin: 0 auto 0 0;}
#pv {width: 100%; margin: 0 auto 0 0;}
#num_items {margin-top:2.5em; font-size: 0.85em;}
#content {height:auto;width:100%;margin-left: 3em;}


/****** Form CSS ******/
form {width:50%;}
input[type=text], input[type=password] {width:50%; padding:12px 20px; margin:8px 0;
    display:block; border:1px solid #ccc; box-sizing:border-box;}
input[type=datetext] {width:35%; padding:4px;margin: 8px;}
button {background-color:#143d1f; color: white; padding:14px 20px; margin:8px 0;
    border:none; border-radius: 10px; cursor:pointer; width:50%;}
button:hover {opacity:0.8;}
.imgcontainer {text-align:center; margin: 24px 0 12px 0;}
img.avatar {width:40%; border-radius:50%;}
.container {padding:16px;}
span.psw {float:right; padding-top:16px;}

/****** Table CSS ******/
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: center;
  padding: 0.5em;
}


/****** Tabs CSS ******/
.tabs {width: 100%; height: 100%;}
.tabs > section {display: none; padding: 15px; background: #fff; border: 1px solid #aaa;}
.tabs input {display: none;}

.tabs label {display: inline-block; margin: 0 0 -1px; padding: 0.5em 1em;
    font-weight: 600; text-align: center; color: #777777; background: #f1f1f1;
    border: 1px solid #ddd; border-radius: 3px 3px 0 0;}
.tabs label:before {font-family: fontawesome; font-weight: normal; margin-right: 1em;}

.tabs label[for*="1"]:before {content: "\f201";}
.tabs label[for*="2"]:before {content: "\f1fe";}
.tabs label[for*="3"]:before {content: "\f080";}
.tabs label[for*="4"]:before {content: "\f13c";}
#day_view, #month_view, #columnchart_plain {padding:0; margin:0; height:27em; border: none;}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 1000px) {
/****** Form CSS ******/
    form {width:80%;}
    input[type=text], input[type=password] {width:100%;}
    button {width:100%;}
    span.psw {display:block; float:none;}
    .left  {width:80%;}
    .right {width:20%;}
#num_items {margin-top:2.5em; font-size: 0.75em;}
}
@media screen and (max-width: 450px) {
    .tabs {width:22em;padding-bottom:0px;margin-left:-1em;}
    .tabs>label {font-size:0;}
    .tabs>label:before {margin:0;font-size:18px;}
    .left  {width:70%;}
    .right {width:30%;}

#num_items {margin-top:2.5em; font-size: 0.65em;}
}