@font-face {font-family: "Calibri";
            src: url("../Font/Calibri.eot"); /* IE9*/
            src: url("../Font/Calibri.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
                url("../Font/Calibri.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url("../Font/Calibri.svg#Calibri") format("svg"); /* iOS 4.1- */
}
/* Clear floats after the columns */

* {
    margin: 0;
    padding: 0;
}

body {
	font-family:Calibri;
	background-color:black;
	color:white;
	font-size:24px;
}

div.headline {
	font-size:40px;
	padding:0px 10px;
	line-height:60px;
	color:white;
	font-weight:bold;
}

.row {
    padding: 5px;
	background-color:#222222;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* two column layout */
.side {
  line-height:40px;
  text-align:right;
  float: left;
  width: 50%;
}

.middle {
  line-height:40px;
  float: left;
  width: 50%;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'left1 middle right1'
    'left2 middle right2'
    'left3 middle right3'
    'left4 middle right4'
    'left5 middle right5'
    'footer footer footer';
  gap: 5px;
  padding: 0px;
  margin: 5px;
  grid-auto-columns: 35% 30% 35%;
}

.grid-containerToday {
  display: grid;
  grid-template-areas:
    'header'
    'left1'
    'left2 '
    'left3'
    'left4'
    'left5'
    'left6'
    'left7'
    'left8'
    'left9';
  gap: 5px;
  padding: 0px;
  margin: 5px;
  grid-auto-columns: 100%;
}

.grid-containerHeating {
  display: grid;
  grid-template-areas:
    'header header'
    'left1 right1'
    'left2 right2'
    'left3 right3'
    'left4 right4'
    'left5 right5'
    'left6 right6'
    'left7 right7';
  gap: 5px;
  padding: 0px;
  margin: 5px;
  grid-auto-columns: 50% 50%;
}

.grid-containerOControl {
  display: grid;
  grid-template-areas:
    'header header'
    'left1 right1'
    'left2 right2'
    'left3 right3'
    'left4 right4'
    'left5 right5'
    'left6 right6';
  gap: 5px;
  padding: 0px;
  margin: 5px;
  grid-auto-columns: 50% 50%;
}


.grid-containerWb {
  display: grid;
  grid-template-areas:
    'header header header'
    'left1 middle right1'
    'left2 middle right2'
    'left3 middle right3'
    'left4 middle right4'
    'left5 middle right5'
    'footer footer footer';
  gap: 5px;
  padding: 0px;
  margin: 5px;
  grid-auto-columns: 35% 30% 35%;
}

/* The bar container */
.bar-container {
  width: 100%;
  background-color: #555555;
  }

/* Individual bars */
.bar {text-align: right;
  }


.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin:8px;
}

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

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

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

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

input:focus + .slider {
  /*box-shadow: 0 0 1px lime;*/
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 20px;
}

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

/* Style the tab */
.tab {
  margin: 0;
  padding: 0;
  width: 100px;
  background-color: #037048;
  position: fixed;
  height: 100%;
  overflow: auto;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 22px 16px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  font-size: 36px;
  text-align:center;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #04AA6D;
}

/* Style the tab content */
.tabcontent {
  margin-left:100px;
  height: 100%;
}

/* Style the tab */
.tab2 {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab2 button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab2 button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab2 button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tab2content {
  padding: 6px 12px;
}

.btn {
  margin:2px;
  border: none;
  border-radius:5px;
  color: white;
  padding: 3px 10px;
  cursor: pointer;
  font-family:Calibri;
  font-size:24px;
}

.selected {background-color: #037048;} /* Green */
.selected:hover {background-color: #04AA6D;}
.default {background-color: #444444; color: white;} /* Gray */ 
.default:hover {background: #ddd;color:black;}

.btn2 {
  border: none;
  border-radius:5px;
  color: white;
  padding: 10px;
  cursor: pointer;
  font-family:Calibri;
  font-size:17px;
}

.selected2 {background-color: #037048;text-decoration: none} /* Green */
.selected2:hover {background-color: #04AA6D;text-decoration: underline}
.default2 {color: white;background-color:black;text-decoration: none;} 
.default2:hover {text-decoration: underline;}

@keyframes animate {
    0% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        opacity: 1.0;
    }
}

.rangeSlidercontainer {
  width: 100%;
}

.rangeSlider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 2px;
  background: #555555;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin-top:16px;
}

.rangeSlider:hover {
  opacity: 1;
}

.rangeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  border-color: #04AA6D;
  cursor: pointer;
}

.rangeSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04AA6D;
  border-color: #04AA6D;
  cursor: pointer;
}

@media (max-width: 991px) {


  .grid-container {
    display: grid;
    grid-template-areas:
      'header'
      'left1'
      'left2'
      'left3'
      'left4'       
      'left5'
      'right1'
      'right2'
      'right3'
      'right4'
      'right5'
      'middle'
      'footer';
    gap: 5px;
    padding: 0px;
    margin: 5px;
    grid-auto-columns: 100%;
  }
  
  .grid-containerWb {
    display: grid;
    grid-template-areas:
    'header'
    'left1'
    'left2'
    'left3'
    'left4'       
    'left5'
    'right1'
    'right2'
    'right3'
    'right4'
    'right5'
    'middle'
    'footer';
    gap: 5px;
    padding: 0px;
    margin: 5px;
    grid-auto-columns: 100%;
  }  

  .grid-containerHeating {
    display: grid;
    grid-template-areas:
      'header'
      'left1'
      'left2'
      'left3'
      'left4'
      'left5'
      'left6'
      'left7'
      'right1'
      'right2'
      'right3'
      'right4'
      'right5'
      'right6'
      'right7';
    gap: 5px;
    padding: 0px;
    margin: 5px;
    grid-auto-columns: 100%;
  }  
  
    .grid-containerOControl {
    display: grid;
    grid-template-areas:
      'header'
      'left1'
      'left2'
      'left3'
      'left4'
      'left5'
      'left6'
      'right1'
      'right2'
      'right3'
      'right4'
      'right5'
      'right6';
    gap: 5px;
    padding: 0px;
    margin: 5px;
    grid-auto-columns: 100%;
  }  

}