.number-pbg {
  position: relative;
  height: 3px;
  background-color: #ddd;
  margin: 5px 0;
}

.number-pbg .number-pb-shown {
position: absolute;
background-color: #556fff;
background-image: linear-gradient(to right, #6dadff, #3279ff);
top: -1px;
left: 0px;
height: 5px;
}

.number-pbg .number-pb-num {
 position: absolute;
background-color: #5e8eff;
left: 0;
top: -0.45em;
padding: 0 5px;
min-width: 33px;
color: #fff;
border-radius: 6px;
font-size: 0.62rem;
}


.number-pbz {
  position: relative;
  height: 3px;
  background-color: #ddd;
  margin: 5px 0;
}

.number-pbz .number-pb-shown {
 position: absolute;
background-color: #1fff81;
background-image: linear-gradient(to right, #41f202, #00c644);
top: -1px;
left: 0px;
height: 5px;
}

.number-pbz .number-pb-num {
  position: absolute;
background-color: #00b64f;
left: 0;
top: -0.45em;
padding: 0 5px;
min-width: 33px;
color: #fff;
border-radius: 6px;
font-size: 0.62rem;
}

.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;
}