.number-pb {
  position: relative;
  height: 8px;
/* background-color: #ddd; */
  margin: 10px 60px;
}

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

.number-pb .number-pb-num {
  position: absolute;
/*  background-color: #fff; */
  left: 0;
  top: -0.45em;
  font-size: 120%;
  padding: 0 5px;
  min-width: 20px;
}

.dream .number-pb-shown {
  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;
}

.sun .number-pb-shown {
  background-image: linear-gradient(to right, #ff6600, #ff9900, #ffcc00);
/*
  -moz-box-shadow:    0 0 3px 0 #e5e9bf;
  -webkit-box-shadow: 0 0 3px 0 #e5e9bf;
  box-shadow:         0 0 3px 0 #e5e9bf;
*/
}
.sun .number-pb-num { color: #e00;}
.number-pb-txt { font-size: 12px; text-align: left; padding-bottom: 8px;}
.sun .number-pb-txt { color: #e00;}

/*---------------------------------- progressbar
*/

.progressbar {
	box-sizing: border-box; -webkit-box-sizing: border-box;
	position: fixed; top: 0; bottom: 0; right: 0; left: 0;
	width: 600px;
	height: 86px;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 10px; -webkit-border-radius: 10px;
	padding: 20px 60px 0;
	margin: auto;
	z-index: 500;
}
.progressbar .number-pb { margin: 0;}
.progressbar .sun .number-pb-num { color: #fff; font-weight: bold;}
.progressbar .number-pb-txt { color: #fff; text-align: center;}
@media screen and (max-width: 768px){
.progressbar { width: 100%;}
}