.number-pb {
  position: relative;
  height: .08rem;
  background-color: #ddd;
  margin: .45rem 0;
}

.number-pb .number-pb-shown {
  position: absolute;
  background-color: #ff5452;
  background-image: linear-gradient(to right, #ff5452, #ff5452);
  top: -1px;
  left: 0;
  height: 5px;
  -moz-box-shadow:    0 0 3px 0 #ff5452;
  -webkit-box-shadow: 0 0 3px 0 #ff5452;
  box-shadow:         0 0 3px 0 #ff5452;
}

.number-pb .number-pb-num {
  position: absolute;
  background-color: #ff5452;
  left: 0;
  top: -0.6em;
  padding: 0 5px; 
  min-width: .4rem;
  color: #fff;
  border: 1px solid #ff5452;
  border-radius: .2rem;
}

.number-pb-shown.dream {
  background-image: linear-gradient(to right, #0e153a, #1d2b64, #f8cdda);
  -moz-box-shadow:    0 0 3px 0 #f8cdda;
  -webkit-box-shadow: 0 0 3px 0 #f8cdda;
  box-shadow:         0 0 3px 0 #f8cdda;
}

.number-pb-shown.sun {
  background-image: linear-gradient(to right, #0f1b58, #e0a681, #e5e9bf);
  -moz-box-shadow:    0 0 3px 0 #e5e9bf;
  -webkit-box-shadow: 0 0 3px 0 #e5e9bf;
  box-shadow:         0 0 3px 0 #e5e9bf;
}