.steps-container{width:100%;min-width:340px;max-width:600px;margin:0 auto}.progressbar{counter-reset:step}.progressbar ul{pa}.progressbar li{list-style-type:none;width:25%;float:left;font-size:12px;position:relative;text-align:center;color:#7d7d7d;font-family:Roboto,Helvetica,Arial,sans-serif}.progressbar li:before{width:30px;height:30px;content:counter(step);counter-increment:step;line-height:30px;border:2px solid #7d7d7d;display:block;text-align:center;margin:0 auto 10px auto;border-radius:50%;background-color:white}.progressbar li:after{width:100%;height:2px;content:'';position:absolute;background-color:#7d7d7d;top:15px;left:-50%;z-index:-1}.progressbar li:first-child:after{content:none}.progressbar li.active{color:green}.progressbar li.active:before{border-color:#55b776}.progressbar li.active+li:after{background-color:#55b776}