root{

}
*{
    box-sizing: border-box;
}
html{
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
}
body{
    color: #fff;
    overflow: hidden;
    min-height:100vh;
    max-height: 100vh !important;
    background-image: url("/media/green.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
body,h1,h2,h3,h4,h5,h6 {font-family: Montserrat, sans-serif;}
main{
    min-height:100vh;
}
section{
    min-height:100vh;
    position: relative;
    padding: 8px;
}

h1,h2,h3,h4,h5,h6{
    margin:0;
}


/**
GRID CSS
 */
.grid-container{
    display: grid;
    gap: 8px;
    overflow:hidden;

}
.grid-item{
    position: relative;

}


/**
BOX
 */

.box {
    background-color: rgba(100, 100, 100, 0.25);

    width: 100%;
    text-align: center;
}

.box > span{
    font-weight: bold;
}


/**
FLEX
 */
.flex-container{
    display: flex;
}
.flex-vertical-center{
    align-items: center;
    justify-content: center;
}
.flex-item-right{
    margin-left: auto;
}
.flex-item-auto-width{
    flex: 1;
}


/** TYPO **/
.grid-main h2{
    padding: 16px 0;
}
.grid-item > h3:first-child{
    margin-top: 0;
}
.grid-item > h3 {
    text-align: center;
    padding: 16px 0;
    background-color: rgba(200, 200, 200, 0.25);
    margin: 8px 0;
}
.xs_text{font-size: 1em}
.s_text{font-size: 1.2em}
.m_text{font-size: 1.4em}
.l_text{font-size: 1.6em}
.xl_text{font-size: 1.8em}
.xxl_text{font-size: 2em}
.xxxl_text{font-size: 4em}

/** ICONS IMAGES **/
img.icon{
    width: 48px;

}
img.icon.icon2x  {
    width: 96px;
}

/** WETTER & ZUHAUSE **/
.weather_forecast{
    text-align: center;
}
.w_icon{
    padding-right: 16px;
}

/** LAMPEN **/
.lamps, .areas{
    overflow-y: auto;
    max-height: calc(50vh - 110px);
}
.lamp_name{
    height: 30px;
}
.area, .lamp{
    height: 100%;
    padding: 8px 0;
}
.area[data-state="true"], .lamp[data-state="true"]{
    background-color: orange;
}



/** GAUGE **/
.gauge-container{
    width: 60%;
}
.gauge-container .text-container .value-text{
    fill: #ffffff;
    font-family: Montserrat, sans-serif;
}

/** CHARTS **/
#myChart{
    width: 98%!important;

}

/** CLOCK SECTION **/
section#clock{
    padding: 64px 16px 16px 16px;
}
.clock-container{
    text-align: center;
}
.clock-inner {
    font-size: 14em;
    font-weight: bold;
}
.date-inner{
    font-size: 4em;
    font-weight: bold;
    color: #f1f1f1;
}
#clock-footer{
    font-size: 4em;
    font-weight: bold;
    color: #f1f1f1;
}


.energy-inner{
    margin-left: auto;
}