.steps-progressbar > ul {
  display:table;
  table-layout:fixed;
  border-collapse:separate;
  margin:12px 0 10px;
  width:100%;
  padding:0;
  list-style:none;
  color:#999;
  font-size:14px;
  font-weight:400;
}

.steps-progressbar > ul > li {
  position:relative;
  display:table-cell;
  list-style-type:none;
  font-weight:400;
  text-align:center;
}

.steps-progressbar > ul > li:before {
  position:inherit;
  display:block;
  margin:10px auto 20px;
  width:30px;
  height:30px;
  border:2px solid #ededed;
  border-radius:50%;
  background-color:#fff;
  line-height:30px;
  content:" ";
  z-index:1;
}

.steps-progressbar > ul > li:after {
  position:absolute;
  top:19px;
  right:50%;
  width:100%;
  height:12px;
  box-shadow:inset 0 0 5px #f2f8fc;
  background-color:#e3e3e3;
  content:" ";
  z-index:0;
}

.steps-progressbar > ul > li:first-child:after {
  content:none;
}

.steps-progressbar > ul > li.active:before, .steps-progressbar > ul > li.previous:before {
  border-color:#374d65;
  background-color:#374d65;
}

.steps-progressbar > ul > li.active:after, .steps-progressbar > ul > li.previous:after {
  box-shadow:none;
  background-color:#374d65;
}

.steps-progressbar > ul > li.active:before {
  margin-top:0;
  margin-bottom:10px;
  width:50px;
  height:50px;
}