.number-pb {
    position: relative;
    height: 7px;
    background-color: white;
    border-radius:4px;
    /*margin: 40px 0px;*/
}

.number-pb .number-pb-shown {
    position: absolute;
    background-color: #76BC1B;
    background-image: linear-gradient(to right, #76BC1B, #76BC1B);
    top: -1px;
    left: 0px;
    height: 7px;
    box-shadow: 0px 0px 3px 0px #76BC1B;
    border-radius:4px;
}

.number-pb .number-pb-num {
    position: absolute;
    left: 0px;
    min-width: 20px;
    background-color: #76BC1B;
    color: white;
    font-size: 12px;
    font-weight: bold;
    font-family: arial;
    height: 20px;
    padding: 4px 8px 0px;
    top: -0.8em;
    border-radius: 30px;
}

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