body{
  text-align: center;
}

div.ip{
  color: #000000 !important;
}

div.meterText:empty:before{
  color: #070707 !important;
  content: "0.00";
}

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

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

div.progressText{
  margin-bottom: 2px;
  font-weight: bold;
}

div.testGroup{
  display: inline-block;
}

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

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

html,body{
  border: none;
  padding: 0;
}

#dlText{
  color: #2c199c;
}

#pingText,#jitText{
  color: #2c199c;
}

#progress{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  transition: width 2s;
  background-color: #2c199c;
}

#progressBar{
  width: 60%;
  height: 0.3em;
  background-color: #f0f0f0;
  position: relative;
  display: block;
  margin: 0 auto;
  border: 2px solid #000000;
}

#startStopBtn{
  display: inline-block;
  margin: 0 auto;
  color: #2c199c;
  background-color: #f0f0f0;
  border: 2px solid #2c199c;
  /* border-radius: 0.3em; */
  transition: all 0.3s;
  box-sizing: border-box;
  width: 8em;
  height: 3em;
  margin-bottom: 2em;
  line-height: 2.7em;
  cursor: pointer;
  /* box-shadow: 0 0 0 rgba(0,0,0,0.1), inset 0 0 0 rgba(0,0,0,0.1); */
}

#startStopBtn:before{
  content: "Start";
}

#startStopBtn.running{
  background-color:#2c199c;
  border-color:#000000;
  color:#ffffff;
}

#startStopBtn.running:before{
  content: "Abort";
}

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