:root {
    --back-grey: #4D4D4D;
    --back-darkgrey: #313131;
    --white: #dfdfdf;
    --transwhite: #dfdfdf77;
    --green-charge: #4d9852;
    --green-light-charge: #63C46A;
    --yellow-charge: #FFFF19;
    --dev-icon: #ff6702;
}

html,
body {
    overflow-y: hidden;
}

body {
    background-color: #000000;
    color: var(--white);
}

.solar-flex-container {
    margin: auto;
    position: relative;
    text-align: center;
    margin-top: 0px;
    width: 100%;
    display: flex;
}

.solar-item {
    width: 112px;
    height: 112px;
    display: block;
    padding: 5px;
    text-align: center;
    background-color: var(--back-grey);
    border: 2px solid black;
    border-radius: 4px;
}

.date-item {
    width: 226px;
    height: 112px;
    display: block;
    padding: 5px;
    text-align: center;
    background-color: var(--back-grey);
    border: 2px solid black;
    border-radius: 4px;
}

.time-text{
    font-size: 2em;
    font-weight: bolder;
}

.solar-header {
    font-weight: bold;
    font-size: 12pt;
    padding-bottom: 3px;
    position: relative;
}

#devicon {
    position: absolute;
    top: 75px;
    left: 85px;
    color: var(--dev-icon);
    font-size: 18pt;
    display: none;
}

#battcharge {
    position: absolute;
    left: 42px;
    top: 0px;
    color: var(--yellow-charge);
}

#carcharge {
    position: absolute;
    left: 362px;
    top: 76px;
    color: var(--yellow-charge);
    display: none;
}

.data-item {
    font-weight: 400;
    font-size: 14pt;
    padding: 0px;
    text-align: center;
}

.data-unit {
    font-size: 12pt;
    padding-left: 2px;
}

.subbox-item {
    background-color: var(--back-darkgrey);
    border-radius: 6px;
    font-size: 12pt;
    font-variant: small-caps;
    min-height: 28px;
    padding: 4px 0;
}


#loader {
    position: absolute;
    top: 70px;
    left: 10px;
    color: var(--transwhite);
}

.spinner-border {
    animation-duration: 10s;
    /*border-color: red;*/
    /*border-color: var(--transwhite);*/
}

#errorStatus {
    position: absolute;
    top: 60%;
    left: 10px;
    width: 400px;
    background-color: darkred;
    border: 1px solid red;
    border-radius: 6px;
    font-size: small;
    display: none;
}

#gatewayErrorStatus {
    position: absolute;
    top: 40px;
    left: 7px;
    width: 320px;
    height: 30px;
    line-height: 30px;
    background-color: rgb(54, 54, 54);
    border: 1px solid rgb(31, 31, 31);
    border-radius: 6px;
    font-size: small;
    display: none;
}

#infoStatus {
    position: absolute;
    top: 90%;
    left: 10px;
    width: 480px;
    background-color: rgb(12, 24, 102);
    border: 1px solid blue;
    border-radius: 6px;
    font-size: small;
    display: none;
}

#testMode {
    position: absolute;
    top: 30px;
    left: 10px;
    width: 480px;
    background-color: rgba(245, 255, 139, 0.3);
    border: 1px solid rgb(184, 182, 32, 0.3);
    border-radius: 6px;
    font-size: small;
    display: none;
}



#house-tick {
    display: none;
}

#house-info {
    display: none;
}

.vol-low {
    display: none;
}

.vol-high {
    display: none;
}

.panel-title {
    display: none;
}