#container {
  display:block;
}

@media only screen and (orientation:portrait){
  #container {
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
}

@media only screen and (orientation:landscape){
  #container {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}



body {
  margin: 0;
  padding: 0;
  font-family: Arial;
  /*background-color: #EFF4C6;*/
  background-color:rgba(239,244,198,1);
  font-size: 0.8em;
}

/* ################ div um Tableiste und Logos im Kopf der Seite ################### */

.topDiv {
  background-color: rgba(239,244,198,1);
  z-index: 1;
  height: 12vh;
  max-height: 12vh;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  border: none;
}

/* ################ div der Logos im Kopf der Seite ############################# */

.logoDIV {
  margin: 0;
  padding: 0;
  width:100%;
  height:5vh;
  vertical-align: middle;
}

/* die beiden Images rechts und Links */
.imgLogo {
  width: auto;
  height: 100%;
  margin: 0 1vw 0 1vw;
  padding: 0;
  vertical-align: middle;
}

.topH2 {
  margin: 0;
  padding: 0.5vh 0 0 0;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

/* ################ Style der TAB-Leiste ############################### */

/* TAB-Style */
.divTabLeiste {
  clear: both;
  display: block;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  word-wrap:break-word;
  /*max-height: 12vh;*/
}

/* Buttons auf den Tabs */
.divTabLeiste button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 6px 7px;
  transition: 0.3s;
  font-size: 1.2em;
  height: 100%;
}

/* Hintergrundfarbe TAB-Button bei hover */
.divTabLeiste button:hover {
  background-color: #ddd;
}

/* Hintergrundfarbe TAB-Button bei aktiv */
.divTabLeiste button.active {
  background-color: #ccc;
}

/* TAB Inhalt style */
.tabcontent {
  clear: both;
  display: none;
  padding:3px;
  margin: 3px;
  -webkit-animation: fadeEffect 2s;
  animation: fadeEffect 2s;
  font-size: 1em;
}

/* images auf den Tab-Buttons */
.imgTabStyle {
  height: 1em;
  margin-right: 0.2em;
  vertical-align: text-bottom;
}

.tablinks{
  /* muss bleiben, auch wenn leer */
}



/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ####################### Tabellen in Live Data Tab #################### */

.liveCenterDiv {
  text-align: center;
  margin: 0 auto;
}

/* hidden Tabelle im Tab Live Daten */
.hiddenLiveTable {
  border: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 99vw;
}

.hiddenLiveTable tr {
  /*border: 1px solid red;*/
  border: none;
  vertical-align: top;
}

/* sichtbare Tabelle im Tab Live Daten */
.visibleLiveTable {
  width: 100%;
  margin-top:1em;
  margin-bottom: 1em;
  border: 2px solid black;
  font-size: 0.8em;
  vertical-align: top;
}

/* Spalte Überschrift th */
.visibleLiveTable th {
  border: 1px solid black;
  text-align: center;
}

/* linke Spalte im Tabelle im Live Daten Tab mit Textausrichtung links */
.visibleLiveTable td:nth-child(1) {
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
  border: 1px solid black;
  vertical-align: middle;
}

/* rechte Spalte im Tabelle im Live Daten Tab mit Textausrichtung rechts */
.visibleLiveTable td:nth-child(2) {
  text-align: right;
  border: 1px solid black;
  vertical-align: middle;
}

/* ############################## Tab Geräteinfo ####################### */

.infoTable {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  font-size: 0.8em;
  vertical-align: middle;
  border: 2px solid black;
  max-width: 99vw;
}

/* Die Überschriftenspalten th */
.infoTable th {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

/* erste Spalte MB-Variable, rechtsbündig */
.infoTable td:nth-child(1) {
  text-align: right;
  border: 1px solid black;
  word-break: break-word;
}

/* zweite Spalte MB-Adresse, zentriert */
.infoTable td:nth-child(2),td:nth-child(3),td:nth-child(4),td:nth-child(5) {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

/* sechste Spalte Werte, rechtsbündig */
.infoTable td:nth-child(6) {
  border: 1px solid black;
  max-width: 20em;
  text-align: right;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* siebte Spalte Einheit, linksbündig */
.infoTable td:nth-child(7),td:nth-child(8) {
  border: 1px solid black;
  max-width: 20em;
  text-align: left;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ############################## Tab SHM Statusvariablen ####################### */

.statusVarsTable {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  font-size: 0.8em;
  border: 2px solid black;
  max-width: 99vw;
}

.statusVarsTable th {
  text-align: center;
  word-break: break-word;
  overflow-wrap: break-word;
  border: 2px solid black;
  font-size: medium;

}

/* Linke Spalte mit rechtsbündigem Text */
.statusVarsTable td:nth-child(1) {
  text-align: right;
  border: 1px solid black;
}

/* Rechte Spalte mit linksbündigem Text */
.statusVarsTable td:nth-child(2) {
  text-align: left;
  border: 1px solid black;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* #################### CHART Tab ############################# */

/* div, in dem das Diagramm liegt */
.chartDiv {
  text-align: center;
  margin: 0 auto;
  border: 2px solid red;
  height: 80vh;
  min-width: 95vw;
}

/* #################### Setup Tab ############################# */

.setupTable {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  border: 2px solid black;
}

/* Beschreibung z.B. Ausgang 1 */
.setupTable td:nth-child(1){
  border: 1px solid black;
  text-align: left;
  border-right: 0;
  margin: 0;
  position: relative;
  right: -1px;
}

/* erste Funktionsbeschreibung z.B. Netzteil einschalten */
.setupTable td:nth-child(2){
  border: 1px solid black;
  text-align: right;
  border-left: 0;
  margin: 0;
  position: relative;
  left: -1px;
}

/* erstes input */
.setupTable td:nth-child(3){
  border: 1px solid black;
  text-align: right;
  border-right: 0;
  margin: 0;
  position: relative;
  right: -1px;
}

/* Einheit nach erstem input */
.setupTable td:nth-child(4){
  border: 1px solid black;
  text-align: left;
  border-left: 0;
  margin: 0;
  position: relative;
  left: -1px;
}

/* zweite Funktionsbeschreibung z.B. Netzteil ausschalten */
.setupTable td:nth-child(5){
  border: 1px solid black;
  text-align: right;
  margin: 0;
}

/* zweites input */
.setupTable td:nth-child(6){
  border: 1px solid black;
  text-align: right;
  border-right: 0;
  margin: 0;
  position: relative;
  right: -1px;
}

/* einheit nach zweitem input*/
.setupTable td:nth-child(7){
  border: 1px solid black;
  text-align: left;
  border-left: 0;
  margin: 0;
  position: relative;
  left: -1px;
}

/* status links */
.setupTable td:nth-child(8){
  border: 1px solid black;
  text-align: left;
  border-right: 0;
  margin: 0;
  position: relative;
  left: 1px;
}

/* status rechts */
.setupTable td:nth-child(9){
  border: 1px solid black;
  text-align: left;
  border-left: 0;
  margin: 0;
  position: relative;
  left: -1px;
}

.setupInput{
  width: 3em;
  max-width: 3em;
  text-align: right;
}

/* #################### Verbrauch Strom/Gas Tab ############################# */

.statistikTable {
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  border: 2px solid black;
  padding: 1px 2px 1px 2px;
  font-size: 0.8em;
  font-weight: bolder;
}

.statistikTable td {
  border: 1px solid black;
  text-align: right;
}

.statistikTable th {
  border: 1px solid black;
  text-align: center;
}

.statistikCenterDiv {
  text-align: center;
  margin: 0 auto;
}

/* ########################### Vorschau TAB ################################ */

/* sichtbare Tabelle im Vorschau Tab */
.forecastTable {
  width: 100%;
  margin-top:1em;
  margin-bottom: 1em;
  border: 2px solid black;
  font-size: 1em;
  vertical-align: top;
}

.forecastTable th {
  border: none;
  text-align: center;
}

.forecastTable td {
  white-space: nowrap;
  text-align: center;
  border: 1px solid black;
  vertical-align: middle;
}

.forecastTdBold {
  font-weight: bold;
}

/*.forecastNoBorder {
  border: none;
}*/

/*.forecastLeftText {
  text-align: left;
}*/

.forecastRightText {
  text-align: right;
}

.forecastTxtBiggerSize {
  font-size: 1.5em;
}