.meter-title { 
  text-align: center;
  font-family: 'Roboto';
  font-weight: 600;
  margin: 0 0 0.5em 0;
}

.meter {
  height: 20px;
  position: relative;
  background: #cccccc;
  border-radius: 10px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background-color: rgb(43,194,83);
  box-shadow:
    inset 0 2px 9px rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

.orange > span {
  background-color: #f1a165;
  background-image: linear-gradient(top, #f1a165, #f36d0a);
}

.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(top, #f0a3a3, #f42323);
}

.nostripes > span > span, .nostripes > span:after {
  background-image: none;
}