body {
  background-color: #0a0a0a;
}

a {
  color: white;
}
div {
  display: flex;
  align-items: center;
}
canvas {
  float: right;
}

#sfcolab-sensors {
  flex-flow: wrap;
}

#bluelab-devices {
  flex-flow: wrap;
}

.indicator {
  border-radius: 8px;
  background-color: #0095ff;
  color: #fff;
  padding: 10px;
  margin: 10px;
  width: 200px;
  text-align: left;
  display: inline-block;
  font-family: 'Calibri Light';
}

.thingspeak {
  background-color: cornflowerblue;
}

.metric {
  font-size: 1em; 
  font-weight: normal;
  width: 100%;
}
.value {
  font-size: 3em;
  font-weight: bold;
  width: 100%;
}
.unities {
  font-size: 1em; 
  font-weight: normal;
  text-align: left;
}
.div-right {
  float: right;
  text-align: center;
  color: darkgray;
}

.modal-dialog {
  max-width: 600px; 
}
.modal-content-del {
  height: 430px; 
}
.modal-header {
  display: flex;
  align-items: left;
  width: 100%;
}
.modal-body {
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  vertical-align: top;
  width: 100%;
  border-radius: 5px;
}
.modal-value {
  font-size: 3.5em;
  font-weight: bold;
}
.modal-stats {
  font-size: 0.8em;
  font-weight: normal;
  color: darkgrey;
  align-items: start;
  padding-left: 10px;
}

.modal-graph-del {
  width: 100%;
  height: 280px;
}

.modal-content {
  height: auto !important; 
}

.modal-graph {
  width: 100% !important;
  height: auto !important; 
}