@import url(//fonts.googleapis.com/css?family=Montserrat:400,700);

body {
  padding: 0;
  margin: 0;
  color: #2C3E50;
}

html, body {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
}

.row { width: 100%; display: table; table-layout: fixed; height: 33.3%; }
.last-row {
  height: calc(33.3% + 1px);
}

.cell {
  display: table-cell;
  text-align: center;
  position: relative;
  vertical-align: middle;
  height: 100%;
}

.cell:after, .timestamp, .onlineIndicator {
  position: absolute;
  color: #687581;
  font-size: 4vw;
}

.cell:after {
  top: 0px;
  left: 0px;
  content: attr(title);
}

#sensebox {
  background-color: #66BB6A;
}

#tmps_out {
  background-color: #29B6F6;
}

#tmps_in1 {
  background-color: #F5B629;
}

#tmps_in2 {
  background-color: #F1C40F;
}

#tmps_in0 {
  background-color: #FFB74D;
}

#tmps_in3 {
  background-color: #FFA74D;
}

#currConsumption {
  background-color: #39CCCC;
}

.temp {
  font-size: 18vw;
  margin: 0px
}

.timestamp {
  bottom: 0px;
  right: 0px;
}

.loading {
 	animation-name: pulse;
 	animation-duration: 1s;
 	animation-iteration-count: infinite;
 	animation-timing-function: ease-out;
 	animation-fill-mode: forwards;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(.9); }
    100% { transform: scale(1); }
}

.onlineIndicator {
  height: 3vw;
  width: 3vw;
  margin: 0.5vw;
  background-color: #EF6961 ;
  border-radius: 50%;
  bottom: 0px;
  right: 0px;
}

.onlineIndicator.online {
  background-color: #2ECC40;
}