HTML

<!-- Multi step form -->

<section class="multi_step_form">
<form id="msform">
<!-- Tittle -->
<!--<div class="tittle">
<h2>Verification Process</h2>
<p>In order to use this service, you have to complete this verification
process</p>
</div>-->
<!-- progressbar -->

<ul id="progressbar">
<li class="active">55 - RULETA</li>
<li class="active">89 - DROPS</li>
<li class="active">139 - TARJETA SEMANAL</li>
<li class="">199 - PASE ELITE</li>
</ul>

</form>
</section>
<!-- End Multi step form -->

CSS

/*font Variables*/
$roboto: 'Roboto', sans-serif;
/*Color Variables*/
$bc: #5cb85c;
$heding: #405867;
$pfont: #5f6771;

// Mixins
@mixin transition($property: all, $duration: 300ms, $animate: linear, $delay:0s){
transition: $property $duration $animate $delay;
}

// Placeholder Mixins
@mixin placeholder {
&.placeholder { @content; }
&:-moz-placeholder { @content; }
&::-moz-placeholder { @content; }
&::-webkit-input-placeholder { @content; }
}

// Font family link

@import url('https://fonts.googleapis.com/css?
family=Roboto:300i,400,400i,500,700,900');

.multi_step_form{
background: #f6f9fb;
display: block;
overflow: hidden;
#msform {
text-align: center;
position: relative;
padding-top: 50px;
min-height: 820px;
max-width: 810px;
margin: 0 auto;
background: #000000;
z-index: 1;
.tittle{
text-align: center;
padding-bottom: 55px;
h2{
font: 500 24px/35px $roboto;
color: #3f4553;
padding-bottom: 5px;
}
p{
font: 400 16px/28px $roboto;
color: $pfont;
}
}
fieldset {
border: 0;
padding: 20px 105px 0;
position: relative;
width: 100%;
left: 0;
right: 0;
&:not(:first-of-type) {
display: none;
}
h3{
font: 500 18px/35px $roboto;
color: #3f4553;
}
h6{
font: 400 15px/28px $roboto;
color: $pfont;
padding-bottom: 30px;
}
.intl-tel-input{
display: block;
background: transparent;
border: 0;
box-shadow: none;
outline: none;
.flag-container{
.selected-flag{
padding:0 20px;
background: transparent;
border: 0;
box-shadow: none;
outline: none;
width: 65px;
.iti-arrow{
border: 0;
&:after{
content: "\f35f";
position: absolute;
top: 0;
 right: 0;
font: normal normal normal 24px/7px Ionicons;
color: $pfont;
}
}
}
}
}
#phone{
padding-left: 80px;
}
.form-group{
padding: 0 10px;
}
.fg_2, .fg_3{
padding-top: 10px;
display: block;
overflow: hidden;
}
.fg_3{
padding-bottom: 70px;
}
.form-control, .product_select{
border-radius: 3px;
border: 1px solid #d8e1e7;
padding: 0 20px;
height: auto;
font: 400 15px/48px $roboto;
color: $pfont;
box-shadow: none;
outline: none;
width: 100%;
@include placeholder{
color: $pfont;
}
&:hover, &:focus{
border-color: $bc;
}
&:focus{
@include placeholder{
color: transparent;
}
}
}
.product_select{
&:after{
display: none;
}
&:before{
content: "\f35f";
position: absolute;
top: 0;
right: 20px;
font: normal normal normal 24px/48px Ionicons;
color: $pfont;
}
.list{
width: 100%;
}
}
.done_text{
padding-top: 40px;
.don_icon{
height: 36px;
width: 36px;
line-height: 36px;
font-size: 22px;
margin-bottom: 10px;
background: $bc;
display: inline-block;
border-radius: 50%;
color: #ffffff;
text-align: center;
}
h6{
line-height: 23px;
}
}
.code_group{
margin-bottom: 60px;
.form-control{
border: 0;
border-bottom: 1px solid #a1a7ac;
border-radius: 0;
display: inline-block;
width: 30px;
font-size: 30px;
color: $pfont;
padding: 0;
margin-right: 7px;
text-align: center;
line-height: 1;
}
}

.input-group{
padding-bottom: 40px;
.custom-file{
width: 100%;
height: auto;
.custom-file-label{
width: 168px;
border-radius: 5px;
cursor: pointer;
font: 700 14px/40px $roboto;
border: 1px solid #000000;
text-align: center;
@include transition;
color: $pfont;
i{
font-size: 20px;
padding-right: 10px;
}
&:hover, &:focus{
background: $bc;
border-color: $bc;
color: #fff;
 }
}
input{
display: none;
}
}
}
.file_added{
text-align: left;
padding-left: 190px;
padding-bottom: 60px;
li{
font: 400 15px/28px $roboto;
color: $pfont;
a{
color: $bc;
font-weight: 500;
display: inline-block;
position: relative;
padding-left: 15px;
i{
font-size: 22px;
padding-right: 8px;
position: absolute;
left: 0;
transform: rotate(20deg);
}
}
}
}
}

#progressbar {
margin-bottom: 30px;
overflow: hidden;
li {
list-style-type: none;
//color del icono y letra de la meta
color: red;
font-size: 9px;
width: calc(100%/4);
float: left;
position: relative;
font: 500 13px/1 $roboto;
&:nth-child(1){
&:before{
content: "\f201";
}
}
&:nth-child(2){
&:before{
content: "\f3eb";
}
}
&:nth-child(3){
&:before{
content: "\f119";
}
}
 &:before {
content: "\f2eb";
font: normal normal normal 40px/50px Ionicons;
width: 50px;
height: 50px;
line-height: 50px;
display: block;
//color circulo de los iconos
background: #eaf0f4;
border-radius: 50%;
margin: 0 auto 10px auto;
}
&:after {
content: '';
width: 100%;
height: 10px;
//color de lineas antes de cumplir metas
background: #eaf0f4;
position: absolute;
left: -50%;
top: 21px;
z-index: -1;
}
&:last-child{
&:after{
width: 150%;
}
}
&.active{
color: $bc;
&:before, &:after{
background: $bc;
color: white;
}
}
}
}
.action-button {
background: $bc;
color: white;
border: 0 none;
border-radius: 5px;
cursor: pointer;
min-width: 130px;
font: 700 14px/40px $roboto;
border: 1px solid $bc;
margin: 0 5px;
text-transform: uppercase;
display: inline-block;
&:hover, &:focus{
background: $heding;
border-color: $heding;
}
}

}
}