* {
    box-sizing: border-box;
}

html {
    background-color: black;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans";
    color: white;
}

body {
    display: block;
    margin: 0px;
}

header {
}

nav {
    z-index:10;
    position: fixed;
    top: 0px;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    vertical-align: middle;
    justify-content: space-between;
    background-color: black;
    border-bottom: 1px solid rgb(75,75,75);
}

    nav a {
        text-decoration: none;
        font-size: 2em;
        vertical-align: middle;
    }

    nav ul {
        display: flex;
        z-index: 10;
        flex-direction: row;
        float: left;
        list-style: none;
        vertical-align: middle;
        margin-block-start: 0em;
        margin-block-end: 0em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        padding-inline-start: 0px;
    }

    nav li {
        padding: 10px;
    }

        nav li a {
            font-size: 1em;
            color: gray;
        }

    nav button {
        display: none;
        float: right;
        height: 3em;
        width: 3em;
        border: 1px solid grey;
        border-radius: 5px;
        vertical-align: middle;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
        background-color: black;
    }

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: rgb(80, 80, 80);
    text-align: center;
}

main {
    margin-top: 50px;
}

h1, h2, h3, h4, h5 {
    color: white;
    width: 100%;
    text-align: center;
}

h1 {
    font-size: 4vmin;
    line-height: 1.5;
    font-family: system-ui;
    background: linear-gradient( to left,darkgreen, midnightblue );
    color: white;
    margin: 10px 0px 10px 0px;
    padding: 20px 20px 20px 20px;
}

h2 {
    color: dodgerblue;
    font-size: xx-large;
    font-weight: 500;
    margin: 70px auto 20px auto;
}

h3 {
    color: whitesmoke;
    font-size: x-large;
    font-weight: 500;
    margin: 50px auto 20px auto;
}

h4 {
    color: darkmagenta;
    font-size: large;
    font-weight: 500;
    margin: 40px auto 20px auto;
}

p {
    font-size: large;
    color: darkgrey;
    line-height: 1.4;
}

p2 {
    font-size: small;
    color: whitesmoke;
    line-height: 1;
}

form {
    width: 100%;
}

label {
    color: whitesmoke;
    font-size: medium;
    /*font-weight: 500;*/
    margin: 0 0 30px 0;
}

input {
    background-color: rgb(20,20,20);
    border-radius: 8px;
    color: white;
    padding: 6px;
}

    input[type="email"] {
        background-color: rgb(20,20,20);
    }

        input[type="email"]:-webkit-autofill {
            -webkit-box-shadow: none;
        }

    input[type="password"] {
        background-color: rgb(20,20,20);
    }

        input[type="password"]:-webkit-autofill {
            -webkit-box-shadow: none;
        }


svg {
    /*padding: 20px;*/
}

img, svg {
    /*display: block;*/
    margin-left: auto;
    margin-right: auto;
}

text {
    fill:black;
}

button {
    font-size: 0.8em;
    float: right;
    color: white;
    background-color: darkslategray;
    border-radius: 5px;
    padding: 4px;
    margin-top: 10px;
    cursor: pointer;
}

    button:hover {
        transform: scale(1.1);
    }

table {
    border-collapse: collapse;
}

article {
    /* float: left;
    padding-top: 10%;*/
    text-align: center;
}


/* ### Light Dark Classes*/
.bodyLight {
    background-color: white;
    color: black;
    fill:black;
}

    .bodyLight nav {
        background-color: white;
        color: black;
    }

    .bodyLight input, .bodyLight select {
        background-color: rgb(200,200,200);
        color: black;
    }

    .bodyLight h1 {
        color: white;
    }

    .bodyLight h2, .bodyLight h3, .bodyLight h4, .bodyLight label {
        color: black;
    }

    .bodyLight p {
        /*color: black;*/
        font-weight: 100;
        font-size: 2vmin;
    }

    .bodyLight text {
        fill: black;
    }

    .bodyLight .modal{
        background-color: rgb(255,255,255,0.95);
    }

    .bodyLight .range12 {
        fill: transparent;
    }

/* ### Classes*/
.navbar-controls {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.container {
    display: flex;
    flex-direction: row;
    width: 100%;
    vertical-align: middle;
    justify-content: space-between;
}

.centreblock {
    display: block;
    width: 100%;
    padding: 5% 5% 5% 5%;
    text-align: center;
    align-items: center;
}

.energymapper {
    font-weight: 700;
    background: linear-gradient( to left, hsl(98 100% 62%), hsl(204 100% 59%) );
    color: lawngreen;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.energyMapperTitle {
    display: block;
    font-size: 64pt;
    font-weight: 700;
    text-align: center;
    background: linear-gradient( to left, hsl(98 100% 62%), hsl(204 100% 59%) );
    color: lawngreen;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 230px;
    margin: 20px auto 20px auto;
}

.loginblock {
    display: flex;
    font-size: x-large;
    align-items: center;
    height: 100vh;
}

.inputDiv {
    width: 400px;
    display: block;
    margin:  10px auto 30px auto;
}

    .inputDiv label, input {
        width:100%;
        font-size: 0.8em;
    }

    .inputDiv input {
        padding: 20px;
        margin-bottom: 30px;
        font-size: 1.25em;
    }

.squareMap {
    width:33%; 
    aspect-ratio:16/9;
    margin: 5px;
    padding: 5px;
}

.row, .flex-row {
    display: flex;
    flex-direction: row;
}

.column {
    display: block;
    align-items: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 20px;
    float: left;
}

.column-10 {
    width: 10%;
}

.column-25 {
    width: 25%;
}

.column-30 {
    width: 30%;
}

.column-33 {
    width: 33.33%;
}

.column-50 {
    width: 50%;
}

.column-66 {
    width: 66%;
}

.commentaryContainer {
    padding: 30px 60px 20px 60px;
}

    .commentaryContainer p {
        font-size: 2.5vmin;
        font-weight: 100;
        text-align: justify;
    }

    .commentaryContainer ol {
        font-size: 2.5vmin;
        font-weight: 100;
    }

.svgContainer {
    padding: 40px 40px 20px 40px;
    width: 100%;
}



/* The Close Button */
.close {
    color: lightgray;
    float: right;
    font-size: 28px;
    font-weight: bold;
    float:right;
    margin: 0px;
    /*position: absolute;
    right: 20px;*/
}

    .close:hover,
    .close:focus {
        color: dimgrey;
        text-decoration: none;
        cursor: pointer;
    }

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: rgb(80,80,80);/**/
    text-align: center;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.bulletbutton {
    border: 2px outset darkgrey;
    border-radius: 24px;
    /* background-image: radial-gradient(ellipse, darkslategrey, rgb(50,50,50)); */
    color: silver;
    min-width: 200px;
    padding: 10px;
    margin: 0 10px 30px 10px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}

    .bulletbutton :hover {
        border: 1px inset white;
        color: white;
        transform: scale(1.05);
    }

.hidden {
    display:none !important;
}

.hiddenparameters {
    display: none
}

/* Colour Codes */
.gray, .grey {
color: gray;
}

.dimgray {
    color: dimgray;
}

.lightgrey {
    color: lightgrey;
}

.lightgreen {color:lightgreen;}
.black      {color:black;}

.locationname {
    color: white;
    font-size: 1.5em;
}

.hlabel {
    /*display: inline-block;
    color: dimgray;*/
}

.back {
    z-index:-10;
}

.whatsappfastlink {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 50px;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

    .whatsappfastlink:hover {
        transform: scale(2) translate(10px,-10px);
        /* box-shadow: rgba(100,100,100,0.5) 10px 10px; */
        transition: 0.3s;
    }

.inputoutput {
    border: none;
    font-weight: normal;
    display: inline-block;
    text-align: left
}

.inputoutput-charges {
    color: dimgray;
    background-color: black;
}

.billingratessummary {
    background-color: rgb(25,25,25);
    border-radius: 10px;
    margin-top: 10px;
    padding: 5px;
    float: left;
}

.inputrecessive {
    color: dimgray;
    border: none;
}

.systemoutput {
    color:dimgray;
    font-size: 0.75em;
    min-width: 160px;
    /*display:inline-flex;*/
}

.tablerow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    align-content: stretch;
    width:100%;
    padding-top: 1px;
    padding-bottom: 1px;
    position: relative;
}

.tablelabel {
    width: 8em;
    display: inline-block;
}

.tablecol25 {
    width: 25%;
    display: inline-block;
    min-width: 50px;
    padding: 4px 5px 4px 5px;
    text-align: center;
}

.tablecol1 {
    text-align: left;
    width: 18%;
    min-width: 70px;
    flex-grow: 5;
    flex-shrink: 5;
    display: inline-block;
    min-width: 50px;
    padding: 4px 5px 4px 5px;
    text-align: center;
}

.tablecol2 {
    width: 20%;
    min-width: 73px;
    flex-grow: 5;
    flex-shrink: 5;
    display: inline-block;
    min-width: 50px;
    padding: 4px 5px 4px 5px;
    text-align: center;
}

.tablecol3 {
    display: inline-block;
    width: 19%;
    flex-grow: 5;
    flex-shrink: 5;
    min-width: 50px;
    padding: 4px 5px 4px 5px;
    text-align: center;
}

.tablecol4 {
    display: inline-block;
    width: 19%;
    flex-grow: 5;
    flex-shrink: 5;
    min-width: 50px;
    padding: 4px 5px 4px 5px;
    text-align: center;
}

.tablecol5, .tablecol6, .tablecol7, .tablecol8, .tablecol9, .tablecol10, .tablecol11, .tablecol12 {
   /* width: 15%;
    display: inline-block;
    flex-grow: 5;
    flex-shrink: 5;*/
    min-width: 50px;
    padding: 4px 5px 4px 5px;
    text-align: center;
}

.billestimate {color:lightgrey;}

.billtabletitle {
    padding: 0 0 0 0;
    width: 100%;
    hyphens: auto;
    font-weight: bold;
    border-bottom: 1px solid dimgrey;
    color: darkgrey;
}

.billtablerow {
    padding: 0 0 0 0;
    width: 100%;
}

.billtablerow:hover {
    background-color: dimgray;
    font-weight:300;
    opacity: 0.5;
}

    .billtablerow:hover label {
        color: white;
    }

.shade-div {
    display: inline-flex;
    margin: 2px;
    width: 15%;
}

.units {
    font-size:small;
    font-weight: 300;
}

.actual {
    background-color: darkgreen;
    margin: 0 auto 0 auto;
    padding: 2px 3px 2px 3px;
    border: 1px solid grey;
    border-radius: 4px;
    color: white;
    font-size: 0.75em;
}

.estimate {
    background-color: orangered;
    margin: 0 auto 0 auto;
    padding: 2px 3px 2px 3px;
    border: 1px solid grey;
    border-radius: 4px;
    color: white;
    font-size: 0.75em;
    padding: 2px;
}

.flexbox-container {
    display: inline-flex;
    position: relative;
}

.flex-tainer {
    display: inline-flex;
    /*justify-content:space-between;*/
    position: relative;
    width: 100%;
}

.flexrow {
    display: flex;
    flex-wrap:wrap;
}

.flexcol {
    
    padding: 10px;
    /*max-width: 380px;
        width:50%;*/
}

.sankeyflextainer {
    display: flex;
    position: relative;
    width: 100%;
}

.tariffOptions {
    height: 30px; 
    margin: 1px 0 1px 0;
}

.tariffOptions .linked {
    color: darkolivegreen;
    font-weight:bold;
    cursor:pointer;
}

.installpct {
    text-align: right;
    width: 65px;
    font-size: 12pt;
    vertical-align: middle;
}

#InvertersInstallationCost {
    text-align: right;
    width: 120px;
    font-size: 12pt;
    vertical-align: middle;
}

.perUnit {
    position: absolute;
    right: 0px;
    bottom: 0px;
    font-size:small ;
    text-align: right;
}

.ratesdiv {
    height: 70px;
    width: 150px;
    display: inline-flex;
    position: relative;
}

    .ratesdiv label {
    }

    .ratesdiv span {
        position: absolute;
        top: 12px;
        left: 0;
    }

    .ratesdiv .currency {
        vertical-align: middle;
        text-align: right;
        font-size: 0.6em;
        font-weight: bold;
        width: 2.5em;
        /*color: rgb(80, 80, 80);*/
        position: absolute;
        left: 3px;
        top: 26px;
        z-index: 1;
    }

    .ratesdiv input {
        width: 140px;
        font-size:x-large;
        text-align: right;
        padding: 5px 5px 12px 5px ;
        position: absolute;
        top: 10px;
        z-index: 0;
    }

    .ratesdiv .perUnit {
        position: absolute;
        right: 15px;
        bottom: 2px;
        font-size: x-small;
        text-align: right;
    }

.currency {
    vertical-align: middle;
    text-align: right;
    font-size: 0.6em;
    font-weight: bold;
    width: 2.5em;
    /*color: rgb(80, 80, 80);*/
    position: absolute;
    left: 3px;
    top: 11px;
    z-index: 1;
}   

.chargediv {
    height: 70px;
    width:150px;
    display:inline-flex;
    position:relative;
}
    .chargediv label {
    }

    .chargediv span {
        position:absolute;
        top:22px;
        left:0;
    }  

    .chargediv .currency {
        vertical-align: middle;
        text-align: right;
        font-size: 0.6em;
        font-weight:bold;
        width: 2.5em;
        color: rgb(80, 80, 80);
        position:absolute; 
        left:3px; 
        top:15px;
        z-index: 1;    
    }   

    .chargediv input {
        width: 130px;
        text-align: right;
        padding-right:5px;
        vertical-align: middle;
        position: absolute;
        top:0;
        z-index: 0;
    }

    .chargediv .perUnit {
        position: absolute;
        right: 10px;
        bottom: -10px;
        font-size: x-small;
        text-align:right;
    }

.datediv {}
    .datediv label { margin-left: 20px;}
    .datediv input { text-align: right;}

.dateinput {
    text-align: right;
    font-size: 15pt;
    width: 179px;
    padding-left:0;
    padding-right:0;
}

.datestepper {
    width: 220px;
}

.meterserialdiv { 
    display:block;
    width:180px;
}

    .meterserialdiv label { 
        margin-left: 20px;
    }

    .meterserialdiv input {
        color:dimgray;
        font-size:0.95em;
        width: 140px;
        height:37px;
        margin-left: 16px;
        margin-right: 24px;
        text-align: right;
        vertical-align:baseline;
    }

.meterdiv {}
    .meterdiv label { margin-left: 20px;     }
    .meterdiv input { text-align: right; 
                      width: 138px;   }

.meterstepper {
    width: 185px;
}
    .meterstepper input {
        padding-right:20px
    }
    .meterstepper .energy-units {
        font-size: x-small;
        font-weight:bold;
        position: absolute;
        content: 'kWh';
        right: 12px;
        bottom: 0;
    }

.meteractualcheckbox {
    padding-top:5px;
}

.meterdeltalabel {
    display:none;
    padding: 2px 3px 2px 3px;
    border: 0 solid grey;
    border-radius: 4px;
    font-size: 0.75em;
    position: relative;
    left: 62px;
}

.siteconfigdiv {     
    width: 33%;
    min-width: 100px;
    margin-bottom: 5px;
}

    .siteconfigdiv input {
        color: lightgray;
        font-size: 1em;
        border:none;
        width: 60%;
        min-width: 75px;
        margin-left: 0px;
        margin-right: 0px;
        padding:3px;
        text-align: right;

    }

    .siteconfigdiv .svgIconHolder {
        height: 24px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0px;
    }

    .siteconfigdiv .siteconfiglabel {
        margin-left: 0px;
        display: block;
    }

    .siteconfigdiv .perUnit {
        position: absolute;
        right:20px;
        bottom:-5px;
    }


.cell {
    width: 100%;
    float: left;
    /*max-width: 200px;
    min-height: 30px;*/
    border: 1px solid black;
    background-color: rgba(25,25,25,0.2);
    padding: 2px;
}

.roitablerow {
    float: left;
    width: 100%;
}

    .roitablerow h4 {
        margin-top: 10px;
    }

    .roitablerow h5 {
        margin-top:0;
    }

.roitablecol-2 {
    width: 50%;
    float: left;
}

.roitablecol-3 {
    width: 33.333333%;
    float: left;
}

.roitablecol-23rds {
    width: 66.666666%;
    float: left;
}

.roiStepperIcon {
    height: 32px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
}

.roisteppertainer {  
    display:inline-block;  
    position: relative;
    float: left;
    width: 180px;
    height: 80px;
}

.roiconfigdiv { 
   
    float:left;
    width: 180px;
    /*width:70%;
    min-width: 200px;
    margin-bottom: 5px;
        display: inline-block;*/
}

    .roiconfigdiv .roisteppertainer .inputoutput {
        background-color: rgba(25,25,25,0.8);
        color: lightgray;
        font-size: 1em;
        width: 140px;
        border-radius: 5px;
        margin: 3px;
        padding: 4px;
        text-align: right;
        font-weight: bold;
    }

    .roiconfigdiv input {
        color: lightgray;
        font-size: 1em;
        width:104px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 3px;
        text-align: right;
    }

    .roiconfigdiv .svgIconHolder {
        height: 22px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0px;
    }

    .roiconfigdiv .roiconfiglabel {
        margin-left: 0px;
        display: block;
    }

    .roiconfigdiv .configunits {
        position: absolute;
        right: 61px;
        bottom: 6px;
        font-size: 0.7em;
        text-anchor: end;
        display: inline-block;
        /* color: rgb(75,75,75); */
    }

.roioutputdiv {
    width: 40%;
    display: inline-block;
    float: left;
    min-height: 40px;
}

    .roioutputdiv .perUnit {
        width: 100%;
        float: right;
        text-align: right;
        /*position: absolute;
        top: 50px;
        bottom: 0;*/
        font-size: small;
    }

.roioutputlabelsdiv { 
    color:rgb(75,75,75);
    font-size:.75em;
    display: inline-block;
    width: 60%;
    float:left;
}

.roioutput {
    text-align: right;
    float: right;
    font-weight: 700;
    font-size: 36pt;
    color: lawngreen;
    height: 68px;
    /*width: 140px;
    position: absolute;
    right: 0;
    top: 0;*/
}

.roimrecalc {
    position: absolute;
    left: 0;
    top: 0;
    font-size: large;
    font-weight: bold;
    color: black;
    background-color: dimgrey;
    opacity: 0.6;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 160px 40px 40px 40px
}

.siteconfigstepper {
    position:relative;
    width: 105px;
    height: 40px;
}

.checkbox {margin:0}

.checkbox input {
    display: none;
}

.checkbox span {
    display: inline-block;    
    border: 1px solid dimgrey;
    border-radius: 4px;
    padding: 3px 4px 3px 4px;
    color: lightgray;
    position:absolute;
}

.unchecked {
    background-color: orangered;
    z-index:1;
}

.checked {
    background-color: darkgreen;
    z-index:0;
}

.checkbox input:checked + span {
    opacity:0;
}

.switchlabelleft {
    display: inline-block;
    width: 130px;
    text-align: right;
    vertical-align: middle;
    font-size: 14px;
    /*color: dimgray;*/
}

.switchlabelright {
    vertical-align: middle;
    font-size: 14px;
}

.switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 24px;
    margin: 2px 10px 2px 10px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #808080;
}

input:focus + .slider {
    box-shadow: 0 0 1px #808080;
}

input:checked + .slider:before {
    -webkit-transform: translateX(16px);
    -ms-transform: translateX(16px);
    transform: translateX(16px);
}

.slider.round {
    border-radius: 14px;
}

    .slider.round:before {
        border-radius: 50%;
    }


.pillBox {
    position: relative;
    text-align: center;
    /*margin-bottom: 15px;*/
}

    .pillBox label {
        float: left;
        width: 150px;
        padding: 5px;
        margin: 10px;
        transition: 0.5s ease-out;
        border-radius: 10px;
        cursor: pointer;
    }

    .pillBox input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 40px;
        cursor: pointer;
        z-index: 1;
    }

    .pillBox label:hover {
        color: yellow;      
    }

    .pillBox input:checked + label {
        background-color: darkblue;
        color: lightgray;
    }

#OffGridButtonBar {
    position: absolute;
    right: -9px;
    top: 75px;
}

    #OffGridButtonBar .pillBox input {
        position: absolute;
        /*top:0;
        left:0;*/
        width: 120px;
    }

    #OffGridButtonBar .pillBox label {
        color: lightgrey;
        width: 100px;
        font-size: 12pt;
        border: 1px solid black;
    }

    #OffGridButtonBar .pillBox input:checked + label {
        border: 1px solid yellow;
        background-color: rgba(255, 255, 0, 0.2);
    }

#BackupButtonBar .pillBox input:checked + label {
    background-color: purple;
}

#SolarButtonBar .pillBox input:checked + label {
    background-color: darkgreen;
}

#SaveButtonBar .pillBox input:checked + label {
    background-color: darkgoldenrod;
}

.tickicon {
    cursor: pointer;
    font-size: 22pt;
    display: inline-block;
    float: right;
    padding: 20px;
    cursor: pointer;
}

.page-shell {
    padding: 5px;
}

.page-block {
    position: relative;
    width: 100%;
    height: auto;
    max-width: 1800px;
    margin: 0 0 5px 0;
    padding: 5px;
    background-color: black;
    opacity: 0.95;
}

.row {
    position: relative;
}

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    .rowBlock {display:inline-block;}

.column, .sub-column {
    width: 100%;
    float: left;
}

.column-2, .sub-column-2 {
    width: 50%;
    float: left;
}

.column-3, .sub-column-3 
{   width: 33.3333%;
    float: left;
    /*min-width: 300px;*/
}

.column-3 {
    min-width: 300px;
}

.column-23rds {
    width: 66.66666%;
    float: left;
    /*min-width: 300px;*/
}

.column-4, .sub-column-4 {
    width: 25%;
    float: left;
}

.col-left  {
    padding-right:10px;
}

.col-right {
    padding-left: 10px;
}

.sankeyscrollbutton {
    width: 36px;
    height: 600px;
    padding: 5px;
    color: rgba(125, 125, 125, 0.90);
    background-color: rgba(25, 25, 25, 0.90);
    border-color: rgba(25, 25, 25, 0.90);
    border-radius: 10px;
    border-style: outset;
    text-align: center;
}

    .sankeyscrollbutton :hover {
        cursor:pointer;
    }
    .sankeyscrollbuttonlabelholder {
    transform: rotate(-90deg) translate(-650px, 00px);
    transform-origin: 0% 0%;
    width: 600px;
}

.icon {
    height: 16px;
    margin: 5px;
    color: white; 
    cursor: pointer;
}

.top-left {
    position: absolute;
    left: 0;
    top: 0;
}

.bott-right {    
    position: absolute;
    right: 0;
    bottom: 0; }

.stepper-icon {
    height: 32px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
}

.svgIconHolder {
    height: 32px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
}

.billstepper-icon {
    height: 56px;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 3px;
    margin-top: 15px
}

.menuButton {
    height: 40px;
    bottom: 6px;
    right: 6px;
}

.starRating {
    height: 25px;
    width: auto;
    padding: 4px;
}


.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.8);
}

.modal-content {
    width: 80%;
    max-width: 1200px;   
    height: auto;
    min-height: 75%;
    padding: 50px;
    margin: 50px auto 50px auto;
    background-color: black;
    border: 2px solid rgb(50,50,50);
    border-radius: 12px;
    box-shadow: 0 4px 8px 0 rgba(50, 50, 50, 0.2);
}


/*Repsonsive ElementsChnages*/
@media screen and (max-width: 1000px) {
    .row {
        display: block;
    }

    .column-10, .column-25, .column-30, .column-33, .column-50, .column-66 {
        width: 100%;
    }

    main {
        padding: 0px;
    }

    nav {
        display: block;
    }

        nav ul {
            width: 100%;
            flex-direction: column;
        }

        nav button {
            display: inline-block;
        }

    .navbar-controls {
        width: 100%;
    }

    #navbar-list {
        display: none;
    }

    html {
    }

    .page-block {
        margin: 0 0 5px 0;
        width: 100%;
    }

    .column-2, .column-3, .column-4, .column-23rds {
        width: 100%;
    }

    .col-left, .col-right {
        padding-right: 0px;
        padding-left: 0px;
    }

    .sankeyflextainer {
        display: inline-grid;
    }

    .sankeyscrollbutton {
        width: 100%;
        height: 36px;
    }

    .sankeyscrollbuttonlabelholder {
        transform: rotate(0deg) translate(0px, 0px);
        transform-origin: 0% 0%;
        width: 100%;
    }

    .flex-row
    {
        width:100%;
        display:inline-block;
    }

    .squareMap{
        width:unset;
    }
}





@media screen and (max-width: 600px) {
    .page-shell {
        padding-left:0;
        padding-right:0;
    }

        .tablecol3 {
            width: 15%;
        }

        .col-left, .col-right {
            padding-right: 0px;
            padding-left: 0px;
        }

    .flexrow {
        display: block;
    }

    .flexcol {
        width: 100%;
        /*max-width: unset;*/
    }

        .meterserialdiv,
        .stepper-icon,
        .svgIconHolder {
            display: none;
        }

        .datestepper {
            width: 182px;
        }

        .datediv label,
        #Meter1SerialNumber,
        .meterserialdiv label,
        .meterdiv label {
            margin-left: 0px;
        }

        .meterstepper {
            width: 142px;
        }

            .meterstepper input {
                padding-right: 36px
            }

        .siteconfigdiv {
            width: 121px;
        }

            .siteconfigdiv .perUnit {
                right: 0px;
            }

            .siteconfigdiv input {
                width: 115px;
            }

        .siteconfigstepper {
            width: 110px;
        }

        .sub-column-2 {
            /*width: 100%;*/
        }

        #LocationName {
            width: 10em;
        }

        .roioutputdiv {width: 100%;}
        .roioutputlabelsdiv {width:100%}
        .roiStepperIcon { /*display: none;*/}
        .roiconfigdiv .roisteppertainer .inputoutput {
            width: 100%
        }

    .commentaryContainer {
        padding: 30px 20px 20px 20px;
    }
}

/* --- Begin moved from InverterSite.css --- */
.StatsPanel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction:row;
}

.column-3 {
    width: 50%;
    padding: 20px;
    text-align:center;
}

.row-100pct {
    width:100%;
}

.BillForm {
    width:fit-content;
    margin: 5px auto 5px auto;
}

.BillRow {
    display: flex;
    align-items: flex-end;
    width: fit-content;
    margin: 5px auto 5px auto;
}

.BillRowDCell {
    display: flex;
    align-items: flex-end;
    margin: 5px auto 5px auto;
}

.BillLabel {
    font-size: 0.7em;
    width: 165px;
    text-align: left;
}

.BillDateCol {
    max-width: 220px;
    padding: 5px;
}

.BillDate {
    padding: 0;
    margin: 0;
    font-size: 1em;
    max-width: 130px;
    text-align: right;
}

.BillDays {
    padding: 0;
    margin: 0;
    font-size: 1em;
    max-width: 80px;
    text-align: right;
}

.BillkWh {
    padding: 0;
    margin: 0;
    font-size: 1em;
    max-width: 105px;
    text-align: right;
}

.BillCharge {
    padding: 0;
    margin: 0;
    font-size: 1em;
    max-width: 100px;
    text-align: right;
    margin-right: 25px;
}

.BillCurrency {
    font-size: 0.7em;
    width: 35px;
    text-align: left;
}

.BillUnits {
    font-size: 0.7em;
    width: 25px;
}

.explText {
    width: 150px;
    height: 20px;
    text-align: right;
}

/*Element ID Classes*/
#LocationName {
    max-width: 100%;
    width: fit-content;
    text-align: left;
    background-color: transparent;
    font-size: 28pt;
    color: white;
}

#WaitingSVG {
    animation: 2s linear infinite svg-animation;
    max-width: 100px;
}

@keyframes svg-animation {
    0%    {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg)
    }
}

circle {
    animation: 1.4s ease-in-out infinite both circle-animation;
    display: block;
    fill: transparent;
    stroke: #2f3d4c;
    stroke-linecap: round;
    stroke-dasharray: 283;
    stroke-dashoffset: 280;
    stroke-width: 10px;
    transform-origin: 50% 50%;
}

@keyframes circle-animation {
    0%, 25% {
        stroke-dashoffset: 280;
        transform: rotate(0);
    }
    50%, 75% {
        stroke-dashoffset: 75;
        transform: rotate(45deg);
    }
    100% {
        stroke-dashoffset: 280;
        transform: rotate(360deg);
    }
}

.dataInputDIV {
    width: 250px;
    padding-top: 30px;
    margin-left:auto;
    margin-right:auto;
}

.dataInputDIV label {
    text-align: center;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: black;
    color: rgb(80,80,80);
    text-align: center;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.hidden {
    display:none
}

.gray, .grey {
    color: gray;
}

.dimgray {
    color: dimgray;
}

.lightgrey {
    color: lightgrey;
}

.lightgreen {color:lightgreen;}
.black      {color:black;}