#aktuelledaten {
    width: 99%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 2px;
}

#lamacam01 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}
#lamacam02 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}
#lamacam03 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}
#lamacam04 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}
#lamacam05, #lamacam06, #lamacam07 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}

#wettertabelle {
    width: 19%;
    float: right;
    padding: 5px;
    /*margin-top: -4480px;*/
    margin-top: -7030px;
}

#profiwetter01 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}

#profiwetter02, #radar01 {
    width: 32.5%;
    float: left;
    padding: 2px;
    height: calc((32.5vw * 0.75) + 30px);
}

#wettergrafik, #energiemonitoringgrafik {
    width: 80%;
    float: left;
    padding: 5px;
}

#wettergrafikframe, #energiemonitoringgrafikframe, #energiemonitoringdaygrafikframe, #energiemonitoringmonthgrafikframe,
#vkwzaehlerdaygrafikframe, #vkwzaehlermonthgrafikframe, #batteriedaygrafikframe, #batteriemonthgrafikframe, #powermeterframe, #powermeterdaysframe, #gesamtverbrauchdaygrafikframe, #boilertemperaturframe, #speissklimaframe, #oelheizungsmonitoringgrafikframe {
    width: 99%;
    height: 800px;
}

#energiemonitoringdaygrafik, #energiemonitoringmonthgrafik, #vkwzaehlerdaygrafik, #vkwzaehlermonthgrafik, #batteriedaygrafik, #batteriemonthgrafik, #powermeter, #powermeterdays, #boilertemperatur, #speissklima {
    width: 49%;
    height:550px;
    float: left;
    padding: 5px;
}

#tabletdashboardframe {
    width: 99%;
    height: 800px;
}

#tabletdashboard {
    width: 99%;
    height:800px;
    float: left;
    padding: 5px;
}

#vkwzaehlergrafik, #gesamtverbrauchdaygrafik, #batteriegrafik, #oelheizungsmonitoringgrafik {
    width: 99%;
    height:916px;
    float: left;
    padding: 5px;
}

#vkwzaehlerframe, #gesamtverbrauchdaygrafikframe, #batteriegrafikframe, #oelheizungsmonitoringgrafikframe {
    width: 99%;
    height: 1170px;
}

#statistikmonate {
    width: 99%;
    float: left;
    padding: 5px;
}

#statistikjahre {
    width: 99%;
    float: left;
    padding: 5px;
}

body, table, tr, td {
    font-family: Helvetica, sans-serif;
    font-size: 18px;
}

iframe {
    border: none;
}

.statistikdiv {
    width: 16%;
    float: left;
    padding-top: 20px;
    padding-bottom: 20px;
}

.infodiv {
    clear: both;
}

.newline {
    clear: both;
}

#profiwetter01 img, #profiwetter02 img {
    height: calc(32.5vw * 0.75)
}

#radar01_iframe {
    height: 100%;
    width: 100%;
}

#messages {
    background-color: green;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 10px;
    padding-right: 10px;

}

/*.continuebutton {
    font: bold 25px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: red;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 5px;
    z-index: 99;
    position: relative;
    top: -150px;
    left: calc(50% - 156px);*/
/*left: calc((33% * 0.5) - 68px);*/
/*top: calc((33% * 0.75) / 2)*/
/*}*/

.continuebutton {
    font: bold 16px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: red;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 0px;
    z-index: 1;
    position: relative;
    top: -90px;
}

.hqbutton {
    font: bold 16px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: black;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 5px;
    z-index: 1;
    position: relative;
    top: -5px;
    left: -5px;
}

.fullscreenbutton {
    font: bold 16px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: black;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 5px;
    z-index: 1;
    position: relative;
    top: -5px;
}

.timelapsebutton {
    font: bold 16px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: black;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 5px;
    z-index: 1;
    position: relative;
    top: -5px;
}

.archivebutton {
    font: bold 16px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: black;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 5px;
    z-index: 1;
    position: relative;
    top: -5px;
}

.savedbutton {
    font: bold 16px Helvetica;
    text-decoration: none;
    background-color: #EEEEEE;
    color: black;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin: 10px 5px 10px 5px;
    z-index: 1;
    position: relative;
    top: -5px;
}

@media screen and (max-width: 992px) {
    #aktuelledaten {
        width: 99%;
        font-size: 13px !important;
    }

    #lamacam01 {
        width: 49%;
        height: calc((49vw * 0.75) + 25px);
    }
    #lamacam02 {
        width: 49%;
        height: calc((49vw * 0.75) + 25px);
    }
    #lamacam03 {
        width: 49%;
        padding: 2px !important;
        height: calc((49vw * 0.75) + 25px);
    }
    #lamacam04 {
        width: 49%;
        padding: 2px !important;
        height: calc((49vw * 0.75) + 25px);
    }

    #lamacam05, #lamacam06, #lamacam07 {
        width: 49%;
        padding: 2px !important;
        height: calc((49vw * 0.75) + 25px);
    }

    #profiwetter01 img, #profiwetter02 img {
        /*height: calc(49vw * 0.75)*/
        height: 100%;
        width: 100%;
    }

    #wettertabelle {
        width: 100%;
        font-size: 20px !important;
        margin-top: 0px !important;

    }

    #profiwetter01 {
        width: 49%;
        float: left;
        padding: 2px;
        height: calc((49vw * 0.75) + 25px);
    }

    #profiwetter02 {
        width: 49%;
        float: left;
        padding: 2px;
        height: calc((49vw * 0.75) + 25px);
    }

    #radar01 {
        /*width: 49%;*/
        width: 98%;
        float: left;
        padding: 2px;
        /*height: calc((49vw * 0.75) + 25px);*/
        height: calc((98vw * 0.75) + 25px);
    }

    #wettergrafik, #energiemonitoringgrafik, #energiemonitoringdaygrafik, #energiemonitoringmonthgrafik, #vkwzaehlergrafik, #vkwzaehlerdaygrafik,
    #vkwzaehlermonthgrafik, #batteriegrafik, #batteriedaygrafik, #batteriemonthgrafik, #powermeter, #powermeterdays, #gesamtverbrauchdaygrafik, #boilertemperatur, #speissklima, #oelheizungsmonitoringgrafik {
        width: 100%;
        float: left;
        height: 600px;
    }

    #wettergrafikframe, #energiemonitoringgrafikframe, #energiemonitoringdaygrafikframe, #energiemonitoringmonthgrafikframe, #vkwzaehlerframe,
    #vkwzaehlerdaygrafikframe, #vkwzaehlermonthgrafikframe, #batteriegrafikframe, #batteriedaygrafikframe, #batteriemonthgrafikframe, #powermeterframe, #powermeterdaysframe, #gesamtverbrauchdaygrafikframe, #boilertemperaturframe, #speissklimaframe, #oelheizungsmonitoringgrafikframe{
        width: 99%;
        height: 600px;
    }

    #tabletdashboardframe, #tabletdashboard {
        width: 99%;
        height: 800px;
    }

    #statistikmonate {
        width: 99%;
    }

    #statistikjahre {
        width: 99%;
    }

    body, div, table, tr, td {
        font-family: Helvetica, sans-serif;
        font-size: 26px !important;
    }

    .statistikdiv {
        width: 50%;
    }

    .continuebutton {
        top: -380px;
    }

}

.fontwhite{
    color: white;
}

#tabletmonitoringbody{
    background-image: url(../img/anti-solarzellen-nachts-strom-produzieren-269464.webp);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-size:32pt;
    overflow: hidden;
    margin: 0px;
}

#tabletshowdiv{
    height: 100%;
    width: 100%;
    /*height: calc(100% - 75px);*/
    background: rgba(0,0,0,0.5);
    margin: 0px;
    padding: 10px 10px 0px 10px;
}

#tabletvisualdiv{
    position: absolute;
    top: 75px;
    left: 0px;
    padding-left: 10px;
    width: 825px;
    height: calc(100% - 75px);
}

#tabletaktuelledatendiv{
    position: absolute;
    margin: 0px;
    top: 75px;
    left: 825px;
    width: calc(100% - 825px);
    height: calc(100% - 75px);
}

#tabletheadlinediv {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 50px;
    padding: 10px 10px 0px 10px;
    vertical-align: top !important;
}