@font-face { font-family: 'Calibri'; src: url('/fonts/calibri.ttf'); }
@font-face { font-family: 'consolas'; src: url('/fonts/consola.ttf'); }

html, body {margin:0;border:0;overflow: hidden;caret-color: transparent;}

body * {font-size:9pt;font-family: Calibri; color:navy;box-sizing: border-box;}
select, button {font-size: 8pt;width: 95%;background-color: gold;margin-left: 0px;margin-right: 0px;cursor: pointer;}
option {cursor: pointer;}
sup {font-size: 8pt; color:inherit}

div {-webkit-overflow-scrolling: touch;}

.main {
    padding-top:15px;
    display: grid;
    grid-template-columns: repeat(4, 205px) 396px 150px;
    grid-template-rows: repeat(4, 175px) 180px 40px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width:1376px;
    height: 920px;
    margin-left: auto;
    margin-right: auto;
    font-family: verdana
}

.div1 { grid-area: 1 / 1 / 5 / 5; background-color: inherit; border:0px solid navy; display:block;height: 100%; overflow-y: auto;overflow-x: hidden;}
.div2 { grid-area: 1 / 5 / 5 / 6; background-color: inherit; border:1px solid #E0E0E0;; display:none}
.div3 { grid-area: 5 / 1 / 6 / 6; background-color: inherit; border:0px solid navy;; display:none}
.div4 { grid-area: 1 / 6 / 6 / 7; background-color: inherit; border:0px solid navy; height:920px;margin-left: auto;margin-right: auto;width: 80%;}
.div5 { grid-area: 1 / 1 / 6 / 6; background-color: inherit; display:none }
.div6 { grid-area: 1 / 1 / 5 / 5; background-color: inherit; border:0px solid navy; display:none}
.div7 { grid-area: 6 / 1 / 6 / 6; background-color: inherit; border:0px solid navy; color:silver}
.div8 { grid-area: 1 / 1 / 7 / 5; background-color: inherit; border:0px solid navy; color:silver}

.div1 table {width:100%}
.div1 table td {width:25%;text-align: center; vertical-align: top;}
.div1 table td {height:calc((100% / 4 ) - 0px);}
.div1 table td span {font-size:12pt;font-weight: bold;}
.div1 table td div {width: 175px;height: 175px;margin-left: auto;margin-right: auto; border:0px solid black; font-size:6pt !important}
.div1 g text {font-size: 9pt;}
.div1 g g text {font-weight: normal; font-size: 11pt;font-family:'Calibri';color:red}

.div2 table {width:100%;border: 0px silver solid; background-color: inherit;}

.div3 table {width: 100%; font-size: 10pt; margin-left: auto; margin-right: auto; background-color: #CCFFFF; color: navy;}
.div3 table tr:first-child td {background-color: #ccffff;}
.div3 table td {vertical-align: top;font-size:11pt;}
.div3 table td:first-child {font-weight: bold;}
.div3 table td:nth-child(n+2) {width:calc((100% - 200px)/9)}
.div3 table tr:nth-last-child(5) td:nth-child(n+2) {text-align: center; font-weight: bold;}

.div3 table tr:nth-last-child(4) td:nth-child(n+2) {color: navy;background-color: #CCFFFF;border: 1px silver solid;padding-right: 25px;font-family: consolas;font-size: 11pt;text-align: right;vertical-align: middle;}
.div3 table tr:nth-last-child(3) td:nth-child(n+2) {color: navy;background-color: #CCFFFF;border: 1px silver solid;padding-right: 25px;font-family: consolas;font-size: 11pt;text-align: right;vertical-align: middle;}
.div3 table tr:nth-last-child(2) td:nth-child(n+2) {color: navy;background-color: #CCFFFF;border: 1px silver solid;padding-right: 25px;font-family: consolas;font-size: 11pt;text-align: right;vertical-align: middle;}


.div4 table {width: 100%;}
.div4 table td {height: 55px;width: 100%;vertical-align: middle;border-radius: 10px;border: 1px silver solid;text-align: center;background-color: inherit;cursor: pointer;font-size: 9pt;}
.div4 table td img {width:32px;height:32px}
.div4 table td select {width:65%}
.div4 table td button {width:65%}
.div4 table td input[type=date] {width:65%}

.div7 span {color:#666;display: block;font-size:11pt}

.graphchart {width: 100%;height: 820px;margin-left: auto;margin-right: auto;border-spacing: 0px 0px;}
.graphchart td {padding: 0px;margin: 0px;}
.divgraphchart {background-color: white;overflow: hidden;width: 100%;height: 100%;}
.divgraphchart g text {font-size: 11pt;}
.divgraphchart g g text {font-size: 9pt;}

.fasenchart {width: 100%;height: 700px;margin-left: auto;margin-right: auto;border-spacing: 0px 0px;}
.fasenchart td {padding: 0px;margin: 0px;}
.divfasenchart {background-color: white;overflow: hidden;width: 100%;height: 100%;}
.divfasenchart g text {font-size: 11pt;}
.divfasenchart g g text {font-size: 9pt;}

.minichart {width: 100%;height: 100%;border-spacing: 0px 0px;}
.minichart td {padding: 0px;margin: 0px; vertical-align: top;}
.divminichart {background-color: white;overflow: hidden;width: 820px !important;height: 600px !important; margin:0 !important}
.divminichart g text {font-size: 11pt;}
.divminichart g g text {font-size: 9pt;}

.s {background-color: transparent;padding: 0px 2px 0px 0px;font-size: 11pt !important;text-align: center;}
.s span {font-size: 11pt}
.p {background-color: transparent;padding: 0px 2px 0px 2px;font-size: 11pt !important;text-align: left;white-space: nowrap;}
.p span {font-size: 11pt !important;}
.r {text-align: right;}

.g {background-color: blue !important;color: aqua;border: 1px silver solid;font-weight: lighter;padding: 0px 2px 0px 0px;font-family: consolas;font-size: 11pt;text-align: right;}
.w {background-color: aqua !important;color: blue;border: 1px silver solid;font-weight: lighter;padding: 0px 2px 0px 0px;font-family: consolas;font-size: 11pt;text-align: right;}
.z {background-color: #FFFFCC;color: red;border: 1px silver solid;font-weight: bold;padding: 0px 2px 0px 0px;font-family: consolas;font-size: 11pt;text-align: right;}
.zw {color: red;background-color: #FFFFCC;border: 1px silver solid;font-weight: bold;padding: 0px 2px 0px 0px;font-family: consolas;font-size: 11pt;text-align: right;}
.lime {color: green;background-color: #FFFFCC;border: 1px silver solid;font-weight: bold;padding: 0px 2px 0px 0px;font-family: consolas;font-size: 11pt;text-align: right;width: 70px;}
.xlime {color: black;background-color: lime;border: 1px silver solid;font-weight: bold;padding: 0px 2px 0px 0px;font-family: consolas;font-size: 11pt;text-align: right;width: 70px;}

.power {text-align: center; font-size: 11pt; font-weight: bold; color: navy; text-decoration: underline; cursor: pointer}
.pon {background-color:orangered;color:yellow;width:100% !important;display:block;text-align:center}
.poff {background-color:lime;color:darkgreen;width:100% !important;display:block;text-align:center}

.report {width: 100%;max-height:100%;overflow-x:hidden;overflow-y: auto;padding: 0;position: relative;}
.report table {min-width:100%;border-collapse: collapse;}
.report table caption { font-weight: bold; font-size: 11pt;background-color: navy;color:gold; position: sticky;top:0;height: 20px;}
.report table thead th { font-weight: bold; font-size: 11pt;background-color: gold;color:navy; position: sticky;top:20px;}
.report table thead th[data-align='right'] { text-align:right; padding-right:3px}
.report table thead th[data-align='left'] { text-align:left; padding-left:3px}

.report table tbody td { font-size: 9pt;}
.report table tbody td[data-align='right'] { text-align:right; padding-right:3px}
.report table tbody td[data-align='left'] { text-align:left; padding-left:3px}

.gasmatrix {width:99%;margin-left: auto;margin-right: auto;min-width: 99%;max-width: 99%;border-collapse: collapse;}
.gasmatirx caption {position: sticky;top:0; background-color: navy;color:gold;font-size: 10pt; font-weight: bold;height: 23px;line-height: 16px;}
.gasmatrix tr:first-child td {background-color:gold;color:navy;text-align:right;padding-right:3px;border:1px solid silver;font-weight:bold}
.gasmatrix tr:nth-child(n+2) td {text-align:right;padding-right:3px;border:1px solid silver}
.gasmatrix tr:last-child td {font-size:8pt;color:navy;text-align: center;border:0px solid silver;font-weight:bold}

.gm {margin-left: auto;margin-right: auto;min-width: 99%;max-width: 99%;border-collapse: collapse;margin-bottom: 5px;}
.gm caption {position: sticky;top:0; background-color: navy;color:gold;font-size: 10pt; font-weight: bold;height: 23px;line-height: 16px;}
.gm tr:first-child th {position: sticky;top: 20px; background-color: gold;color:navy;font-size: 10pt !important; font-weight: bold; text-align: right;border:1px solid silver;padding-right:3px;}
.gm tr td {text-align: right; font-size: 9pt;width:calc(100% /7);border:1px solid silver;padding-right:3px;}
.gm tr td {text-align: right !important;}
.gm tr th {text-align: right !important;}

.meterdata {width:100%;overflow-x: hidden;overflow-y:auto;height:100%;}
.meterdata table:first-child {width: 100%; height: 100%; border-collapse: collapse;}
.meterdata table:first-child tr:first-child td {font-size: 13pt;height: 30px;cursor: pointer; text-align: center;padding: 0;background-color: navy;color:gold;}

.lijst {overflow-x:hidden; overflow-y:scroll; height: 100%;margin-top: 0px;position: relative;}
.lijst table {width:100% !important;height: inherit; border-collapse: collapse;}
.lijst table tr td {width:calc(100% / 10);text-align: center; font-size: 10pt; height: 20px;border:1px solid silver;}
.lijst table tr:first-child td {font-size: 11pt; position: sticky;top:0;background-color:navy;color: gold }
.lijst table tr:nth-child(n+2) td:nth-child(n+2) {cursor: pointer;}
.lijst table tr:nth-child(n+2) td:nth-child(n+2):hover {text-decoration: underline gold;background-color: navy;color:gold}

.solarmonthly {margin-left: auto;margin-right: auto;min-width: 99% !important;max-width: 99%;border-collapse: collapse;}
.solarmonthly tr:first-child td {position: sticky;top:0; background-color: navy;color:gold;font-size: 10pt;}
.solarmonthly tr:nth-child(1) td {position: sticky;top: 20px; background-color: gold;color:navy;font-size: 10pt !important; font-weight: bold;}
.solarmonthly tr:nth-child(n+1) td {text-align: right; font-size: 9pt;padding-right: 3px;}
.solarmonthly tr:last-child td {background-color: gold;color:navy; font-weight: bold;font-size: 10pt;}
.solarmonthly tr td {border-bottom: 1px solid silver;border-right:1px solid silver;}
.solarmonthly tr td:first-child {font-weight: bold;color:navy;}
.solarmonthly tr td[data-day='1'] {color:red;font-weight: bold;background-color: rgba(255,0,0,0.1);}

.solarmonthlyavg tr td {border-bottom: 1px solid silver;border-right:1px solid silver; width:calc(100% / 14)}
.solarmonthlyavg tr:nth-last-child(2) td {background-color: gold;color:navy;}
.solarmonthlyavg tr:last-child td {background-color: navy;color:gold !important;}

.tarieven {width:100%;border-collapse: collapse;}
.tarieven caption {background-color: navy;color:gold;;font-size: 12pt;font-weight: bold;}
.tarieven td {border:1px solid silver;width:calc(100% / 14) !important}
.tarieven tr:first-child td{background-color: gold;color:navy;font-size: 11pt;font-weight: bold;}
.tarieven tr td:nth-child(1):nth-child(2){text-align:left !important}
.tarieven tr td:nth-child(n+3) {text-align:right;padding-right:5px;cursor: pointer;}
.tarieven tr[data-year='1'] td { background-color: gold; border:0}
.tarieven tr[data-year='1'] td:nth-child(1):nth-child(2){text-align:left !important}
.tarieven tr[data-year='1'] td input { background-color: gold;width:100%;text-align: right; border:0}
.tarieven tr[data-year='0'] td {background-color: null;border:0}
.tarieven tr[data-year='2'] td { background-color: gray;color:white; border:0}
.tarieven tr[data-year='2'] td:nth-child(1):nth-child(2){text-align:left !important}
.tarieven tr[data-year='2'] td input { background-color: gray;color:white;width:100%;text-align: right; border:0}

.tarieven tr[data-year='1']:nth-child(n+2) td:nth-child(n+3) input:hover {background-color: navy;color:gold;text-decoration: underline cyan;}
.tarieven tr[data-year='2']:nth-child(n+2) td:nth-child(n+3) input:hover {background-color: navy;color:gold;text-decoration: underline cyan;}

.tarievensave {width:100%;margin-top: 20px;border-spacing: 10px 3px;}
.tarievensave caption {background-color: navy;color:gold;;font-size: 12pt;font-weight: bold;}
.tarievensave tr:first-child td {font-weight: bold; text-align: center;}
.tarievensave td {min-width:60px;font-size: 11pt;}
.tarievensave td:last-child {width:100%;font-size: 11pt;}
.tarievensave td input {width:90px !important;font-size: 11pt; background-color: gold;color:navy; text-align: center; height: 30px;}
.tarievensave tr:last-child td {height:30px}
.tarievensave tr:last-child td:nth-child(1) {background-color: gold;color:navy;text-align: center;}
.tarievensave tr:last-child td:nth-child(2) {background-color: gold;color:navy;text-align: center;}
.tarievensave tr:last-child td:nth-child(3) {background-color: gold;color:navy;text-align: center;}
.tarievensave td button {width:90px !important;font-size: 11pt; height: 30px;}

.energietarieven {width:100%;border-collapse: collapse;}
.energietarieven caption {background-color: navy;color:gold;;font-size: 12pt;font-weight: bold;}
.energietarieven tr:first-child td {border:1px solid silver;width:auto;text-align: right;padding-right: 25px;background-color: gold;color:navy;font-size: 11pt;font-weight: bold;}

.energietarieven tr:nth-child(n+2) td {border:0px solid silver;width:auto;text-align: right;padding-right: 5px;}
.energietarieven td:first-child input {width:100px;font-size:10pt;text-align: right;}
.energietarieven td:nth-child(n+2) input {width:80px;border:0;font-size:10pt;text-align: right;}

.energietarieven tr[data-year='1'] td {background-color: gold;}
.energietarieven tr[data-year='1'] td input:hover {background-color: blue;color:white}
/*
.tarieven tr[data-year='1']:nth-child(n+2) td:nth-child(n+3) input:hover {background-color: navy;color:gold;text-decoration: underline cyan;}
.tarieven tr[data-year='2']:nth-child(n+2) td:nth-child(n+3) input:hover {background-color: navy;color:gold;text-decoration: underline cyan;}

.tarieven tr[data-year='1'] td { background-color: gold; border:0}
.tarieven tr[data-year='1'] td:nth-child(1):nth-child(2){text-align:left !important}
.tarieven tr[data-year='1'] td input { background-color: gold;width:100%;text-align: right; border:0}
.tarieven tr[data-year='0'] td {background-color: null;border:0}
.tarieven tr[data-year='2'] td { background-color: gray;color:white; border:0}
.tarieven tr[data-year='2'] td:nth-child(1):nth-child(2){text-align:left !important}
.tarieven tr[data-year='2'] td input { background-color: gray;color:white;width:100%;text-align: right; border:0}

.tarieven tr[data-year='1']:nth-child(n+2) td:nth-child(n+3) input:hover {background-color: navy;color:gold;text-decoration: underline cyan;}
.tarieven tr[data-year='2']:nth-child(n+2) td:nth-child(n+3) input:hover {background-color: navy;color:gold;text-decoration: underline cyan;}

*/

.radarbuttons {margin-left: auto; margin-right: auto; border-spacing: 0px 0px; text-align: center; min-width: 90%}
.radarbuttons img {cursor: pointer;}

.radarbuttons td:nth-last-child(2) {text-align: center; font-size: 20pt; font-weight: bold; cursor: pointer}
.radarbuttons td:nth-last-child(3) {text-align: center; font-size: 20pt; font-weight: bold; cursor: pointer}
.radarbuttons td:nth-last-child(1) {text-align: center; font-size: 20pt; font-weight: bold; color: gray}

.wolkenradar {margin-left: auto; margin-right: auto; border-spacing: 0px 0px; text-align: center; min-width: 90%; max-width: 99%}
.wolkenradar table {margin-left: auto; margin-right: auto; border-spacing: 0px 0px; text-align: center; width: 100%}

.smartgauges {width:100%}
.smartgauges tr:first-child th { width:33%;text-align: center; vertical-align: top; font-size: 12pt;}
.smartgauges td { width:33%;text-align: center; vertical-align: top;height:175px}
.smartgauges td span {font-size:12pt;font-weight: bold;}
.smartgauges td div {width: 175px;height: 175px;margin-left: auto;margin-right: auto; border:0px solid black; font-size:6pt !important}
.smartgauges g text {font-size: 8pt;}
.smartgauges g g text {font-weight: normal; font-size: 12pt;font-family:'Arial';color:red}

.smartgraphs {width: 100%;height: 600px;margin-left: auto;margin-right: auto;border-spacing: 0px 0px;}
.smartgraphs td { width:100%;text-align: center; vertical-align: top;height:525px}
.smartgraphs td div {width:90%;height:400px}
.smartgraphs g text {font-size: 8pt;}
.smartgraphs g g text {font-weight: normal; font-size: 12pt;font-family:'Arial';color:red}

.vpvgauges {width:100%}
.vpvgauges td { width:33%;text-align: center; vertical-align: top;height:calc((600px / 2 ) - 5px);}
.vpvgauges td span {font-size:12pt;font-weight: bold;}
.vpvgauges td div {width: 195px;height: 195px;margin-left: auto;margin-right: auto; border:0px solid black; font-size:6pt !important}

.watergauges {width:100%}
.watergauges td { width:25%;text-align: center; vertical-align: top;height:250px}
.watergauges td span {font-size:12pt;font-weight: bold;}
.watergauges td div {width: 195px;height: 195px;margin-left: auto;margin-right: auto; border:0px solid black; font-size:6pt !important}
.watergauges td select {width:120px;margin-left: auto;margin-right: auto; font-size: 11pt; background-color: aqua;color:navy;}

.watergauges svg g text {font-size: 10pt; font-weight: bold;}
.watergauges svg g g text {font-weight: normal; font-size: 14pt;font-family:Calibri;color:red}

.waterchart {width: 100%; height:600px;}
.waterchart td div {height:600px;margin-left: auto;margin-right: auto; border:0px solid black; font-size:6pt !important}

.sat24 {width:20%;text-align:center;display: inline-block;text-decoration: underline black;cursor: pointer;}
.sat24:hover {background-color: black;color:white}

.dsmrpvdata {width: 100%;border-collapse: collapse;}
.dsmrpvdata caption {position: sticky;top:0; background-color: navy;color:gold;font-size: 10pt; font-weight: bold;height: 23px;line-height: 16px;}
.dsmrpvdata td:first-child {vertical-align: top;font-size: 9pt;width:60%}
.dsmrpvdata td:last-child {vertical-align: top;font-size: 9pt;width:40%}
.dsmrpvdata table td:first-child {width:calc(20%);font-size:9pt !important}
.dsmrpvdata table td:last-child {width:calc(80%);font-size:9pt !important;text-align:right;word-break: break-all;}

.dcac {width: 100%; height: 100%;margin-top: 10px;}
.dcac caption {font-size: 12pt;font-weight: bold;background-color: #E0E0E0;cursor: pointer;text-decoration: underline;}
.dcac caption:hover {background-color: navy;color:#E0E0E0}
.dcac td {align-self: center; text-align: center; width:calc(100% / 4);font-size: 10pt !important; vertical-align: middle;}
.dcac tr:nth-child(n+1) td:nth-child(1) { text-align: left;padding-left: 10px;}
.dcac tr:nth-child(n+1) td:nth-child(3) { text-align: left;padding-left: 10px;}
.dcac tr:nth-child(n+1) td:nth-child(2) { text-align: right;padding-right: 10px;}
.dcac tr:nth-child(n+1) td:nth-child(4) { text-align: right;padding-right: 10px;}

.e35p {width: 100%; height: 100%;margin-top: 10px;}
.e35p caption {font-size: 12pt;font-weight: bold;background-color: #E0E0E0;cursor: pointer;text-decoration: underline;}
.e35p caption:hover {background-color: navy;color:#E0E0E0}
.e35p td {align-self: center; text-align: center; width:calc(100% / 4);font-size: 10pt !important; vertical-align: middle;}
.e35p tr:nth-child(n+1) td:nth-child(1) { text-align: left;padding-left: 10px;}
.e35p tr:nth-child(n+1) td:nth-child(3) { text-align: left;padding-left: 10px;}
.e35p tr:nth-child(n+1) td:nth-child(2) { text-align: right;padding-right: 10px;}
.e35p tr:nth-child(n+1) td:nth-child(4) { text-align: right;padding-right: 10px;}
.e35p td span {white-space: nowrap;}

.vvw {width: 100%; height: 100%;margin-top: 10px;}
.vvw caption {font-size: 12pt;font-weight: bold;background-color: #E0E0E0;cursor: pointer;text-decoration: underline;}
.vvw caption:hover {background-color: navy;color:#E0E0E0}
.vvw td {align-self: center; text-align: center; width:calc(100% / 4);font-size: 11pt; vertical-align: middle;}
.vvw tr:nth-child(n+1) td:nth-child(1) { text-align: left;padding-left: 10px;}
.vvw tr:nth-child(n+1) td:nth-child(3) { text-align: left;padding-left: 10px;}
.vvw tr:nth-child(n+1) td:nth-child(2) { text-align: right;padding-right: 10px;}
.vvw tr:nth-child(n+1) td:nth-child(4) { text-align: right;padding-right: 10px;}

.weer {width: 100%; height: 100%;margin-top: 10px;}
.weer td {align-self: center; text-align: center; width:calc(100% / 3);font-size: 11pt; vertical-align: middle;white-space: nowrap;}
.weer td img {cursor: pointer;width:32px !important;height:32px !important}
.weer a {text-align: center; font-size: 11pt; font-weight: bold; color: navy; text-decoration: underline; cursor: pointer}

.weerplaza {width:100%;overflow-x: hidden;overflow-y: auto; height: 100%;}
.weerplaza table {width:100%}
.weerplaza table td {width:50%;vertical-align: top;text-align: center;}
.weerplaza table td img {width:95%}

.enphaselog td {vertical-align: top; border-bottom: 1px solid silver;}
.enphaselog td:nth-child(2) {white-space: nowrap;}

.meterkast {overflow-x:hidden;overflow-y:auto;height:100%;width:100%;}
.meterkast table {width:100%;border-collapse: collapse;}
.meterkast table caption {font-size:18pt;text-align: center;height:30px;font-weight: normal;}
.meterkast table tr:first-child td {font-size: 16pt;text-align: center; font-weight: bold;}
.meterkast table tr:first-child td:nth-child(n+3) {font-size: 16pt;text-align: left;padding-left: 5px;}
.meterkast table td {height:30px; border:1px solid silver}
.meterkast table tr:nth-child(n+2) td:first-child {font-size: 16pt;text-align: center; font-weight: bold;}
.meterkast table tr:nth-child(n+2) td:nth-child(2) {font-size: 16pt;text-align: center;font-weight: bold;}
.meterkast table tr:nth-child(n+2) td:nth-child(n+3) {font-size: 14pt;text-align: left;padding-left: 5px;}
.meterkast table tr:last-child td {border:0;font-size:12pt !important;cursor:pointer;color:blue;text-decoration: underline blue;}

.dsmrlogfile td:first-child {text-align:right;white-space: nowrap;vertical-align: top;}

.lifetime { border-collapse: collapse; margin-bottom: 5px;}
.lifetime caption {position: sticky !important;top:0 !important; line-height: 25px !important;height: 25px !important;}
.lifetime tr th { position:sticky !important;; top:25px !important}
.lifetime th { width:calc(100% / 7);text-align:right;padding-right: 5px; border:1px solid silver}
.lifetime td { width:calc(100% / 7);text-align:right;padding-right: 5px; border:1px solid silver}

.sessions { border-collapse: collapse; margin-bottom: 5px;}
.sessions caption {position: sticky !important;top:0 !important; line-height: 25px !important;height: 25px !important;}
.sessions tr th { position:sticky !important;; top:25px !important}
.sessions th { width:calc(100% / 10);text-align:right;padding-right: 5px; border:1px solid silver; font-size:11pt !important}
.sessions td { width:calc(100% / 10);text-align:right;padding-right: 5px; border:1px solid silver; }

.pincode {font-size: 20pt;margin-left: auto;margin-right: auto;position: absolute;top: 100px;left: 0;right: 0;width: max-content;text-align: center;}

.usaget td {vertical-align: top;margin-left: auto;margin-right: auto;}
.usaget td div  {overflow-x: hidden;overflow-y: auto; height: 90vh;}

.usage { border-collapse: collapse; margin-bottom: 5px;width: 98%; background-color: white;}
.usage caption {position: sticky !important;top:0 !important; line-height: 25px !important;height: 25px !important;font-size:14pt;background-color: white;}
.usage tr th { position:sticky !important; top:25px !important;vertical-align: top; background-color: white;}
.usage th { width:calc(100% / 15);text-align:right;padding-right: 5px; border:1px solid silver;vertical-align: top;}
.usage td { width:calc(100% / 15);text-align:right;padding-right: 5px; border:1px solid silver;vertical-align: top;}

.verbruikdag {width:100%;border-collapse: collapse;}
.verbruikdag th {text-align: left;padding-left:5px;}
.verbruikdag td {text-align: left;padding-left:5px;}
.verbruikdag th:nth-child(n+3) {text-align: right;padding-right:5px;}
.verbruikdag td:nth-child(n+3) {text-align: right;padding-right:5px;}

.verbruikmaand {width:100%;border-collapse: collapse;}
.verbruikmaand th {text-align: left;padding-left:5px;}
.verbruikmaand td {text-align: left;padding-left:5px;}
.verbruikmaand th:nth-child(n+3) {text-align: right;padding-right:5px;}
.verbruikmaand td:nth-child(n+3) {text-align: right;padding-right:5px;}

.verbruikjm {width:100%}
.verbruikjm caption {position: sticky !important;top:0 !important; line-height: 25px !important;height: 25px !important;font-size:14pt;background-color: white;}
.verbruikjm th {text-align: right;padding-right: 5px;}
.verbruikjm td {text-align: right;padding-right: 5px;}

.eflux1 { border-collapse: collapse; margin-bottom: 5px;}
.eflux1 caption {position: sticky !important;top:0 !important; line-height: 25px !important;height: 25px !important;}
.eflux1 tr th { position:sticky !important;; top:25px !important;vertical-align: top;}
.eflux1 th:nth-child(n+2) {text-align: right;padding-right: 5px;}
.eflux1 td:nth-child(n+2) {text-align: right;padding-right: 5px;}
.eflux1 th { width:auto;border:1px solid silver;white-space: nowrap;padding-left: 5px;text-align: left;}
.eflux1 td { width:auto;border:1px solid silver;white-space: nowrap;padding-left: 5px;}

.eflux2 { border-collapse: collapse; margin-bottom: 5px;}
.eflux2 caption {position: sticky !important;top:0 !important; line-height: 25px !important;height: 25px !important;}
.eflux2 tr th { position:sticky !important;; top:25px !important;vertical-align: top;}
.eflux2 th:nth-child(n+4) {text-align: right;padding-right: 5px;}
.eflux2 td:nth-child(n+4) {text-align: right;padding-right: 5px;}
.eflux2 th { width:auto;border:1px solid silver;white-space: nowrap;padding-left: 5px;text-align: left;}
.eflux2 td { width:auto;border:1px solid silver;white-space: nowrap;padding-left: 5px;}

.taporequestlog {min-width:90% !important;margin-left: auto;margin-right: auto;}
.taporequestlog tr:first-child th {text-align: left;}
.taporequestlog tr td {text-align: left;}

.kelder {min-width:50% !important;margin-left: auto;margin-right: auto;}
.kelder tr:first-child th {text-align: left;}
.kelder tr th:nth-child(n+2) {text-align: right;}
.kelder tr td:first {text-align: left;}
.kelder tr td:nth-child(n+2) {text-align: right;}

.html2table {min-width:90% !important;margin-left: auto;margin-right: auto;}
.html2table tr:first-child th {text-align: left;}
.html2table tr td {text-align: left;}

.meterdelta {min-width:90% !important;margin-left: auto;margin-right: auto;border-collapse: collapse;}
.meterdelta td {border:1px solid silver;padding-right: 3px;}
.meterdelta th {border:1px solid silver;padding-right: 3px;}
.meterdelta tr:first-child th:first-child {text-align: left;}
.meterdelta tr:first-child th {text-align: right;}
.meterdelta tr:nth-child(n+1) td:first-child {text-align: left;}
.meterdelta tr:nth-child(n+1) td {text-align: right;}

.livestatus {width:99% !important;margin-left: auto;margin-right: auto;border-collapse: collapse;min-width: 0% !important;}
.livestatus td {border:1px solid silver;padding-right: 3px; width:calc(100% / 8)}
.livestatus th {border:1px solid silver;padding-right: 3px;}
.livestatus tr:first-child th:first-child {text-align: left;}
.livestatus tr:first-child th {text-align: right;}
.livestatus tr:nth-child(n+1) td:first-child {text-align: left;}
.livestatus tr:nth-child(n+1) td {text-align: right;}
/*
.selectbattery {font-size: 8pt;width: 95%;background-color: darkgreen;margin-left: 0px;margin-right: 0px;cursor: pointer;color:gold}
.selectbattery option {cursor: pointer; color:gold}
.selectbattery option:hover {background-color: gold; color: darkgreen;}
*/


.elp {width:98%;margin-left: auto;margin-right: auto;}
.elp caption {font-size: 13pt;font-weight: bold;}
.elp td {text-align: right;}
.elp td:first-child {text-align: left;}

.goodwe {width:95% !important;margin-left: auto;margin-right: auto;border-collapse: collapse;}
.goodwe td {width:20% !important;font-size: 11pt !important;text-align: center;border:1px solid silver}
.goodwe tr:first-child td {font-weight: bold;font-size: 12pt;text-align: center;}
.goodwe tr:last-child td {background-color: aqua;color:blue;}



span[data-ta='0'] {color:navy;background:lime}
span[data-ta='1'] {color:navy;background:yellow}
span[data-ta='2'] {color:white;background:orange}
span[data-ta='3'] {color:white;background:red}

span[data-ha='0'] {color:navy;background:lime}
span[data-ha='1'] {color:navy;background:yellow}
span[data-ha='2'] {color:white;background:orange}
span[data-ha='3'] {color:white;background:red}

.sunrts {font-size: 11pt;height: 18px;display: inline-flex;top: 0px;position: relative;color:blue;background-color: gold;padding-left: 3px;padding-right: 3px;}

.containers {width:50%;margin-left: auto;margin-right: auto; height: 500px;}
.containers td {width: 33%; vertical-align:bottom}
.containers tr:last-child td {text-align: center;font-size: 13pt;font-weight: bold; height: 30px; vertical-align: middle;}
.container {
  width: 230px !important; box-sizing: border-box;background-image: url("images/IQ_5P.png");
  height: 428px !important;
  position: relative; display: inline-block;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  font-size: 12pt;
  align-content: center !important;
  overflow:hidden !important;
  padding:0  !important;
}

.container div {
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  bottom:0px !important;
  position:absolute;
  align-content:end;
  color: white;
  height: 60%;
  background-color: silver;
}