#startStopBtn:hover {
  box-shadow: 0 0 2em rgba(0,0,0,0.1), inset 0 0 1em rgba(0,0,0,0.1);
}

#startStopBtn:before {
  content: "DÉMARRER";
}

#startStopBtn.running:before {
  content: "ARRÊTER";
}

#test {
  margin-top: 2em;
  margin-bottom: 12em;
}

div.testArea {
  display: inline-block;
  width: 16em;
  height: 12.5em;
  position: relative;
  box-sizing: border-box;
}

div.testName {
  position: absolute;
  top: 0.1em;
  left: 0;
  width: 100%;
  font-size: 1.4em;
  z-index: 9;
}

div.meterText {
  position: absolute;
  bottom: 1.55em;
  left: 0;
  width: 100%;
  font-size: 2.5em;
  z-index: 9;
}

div.meterText:empty:before {
  content: "0.00";
}

div.unit {
  position: absolute;
  bottom: 2em;
  left: 0;
  width: 100%;
  z-index: 9;
}

div.testArea canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

div.testGroup {
  display: inline-block;
}

@media all and (max-width:40em) {
  div.testGroup {
    display: block;
    margin: 0 auto;
  }
}

#startStopBtn, #startStopBtn.running, #startStopBtn:hover, #startStopBtn.running:hover {
  color: #df3611;
  background-color: #fff !important;
  padding: 15px 30px !important;
  border-radius: 30px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

#startStopBtn.running, #startStopBtn:hover {
  box-shadow: 0 0 0 .2rem rgba(223,54,17,.5)!important;
  color: #fff;
  background-color: #df3611 !important;
}

#dlMeter {
  border: 0px none !important;
}

#ipArea {
  font-weight: 500;
  letter-spacing: 0.06em;
  font-size: 25px;
}