.progress_bar_hide{display: none;}

#progress_bar_inner{display: flex; margin-bottom: 36px; }

#progress_wrapper{
    display: flex;
    justify-content: center;
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
}

.stepper_item{
    display: flex;
    /* flex-direction: column; */
    flex-direction: row;
    align-items: center;
    flex: 1;
    position: relative;
}

.stepper_item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid #BDBDBD;
    width: 100%;
    top: 20px;
    left: -50%;
    z-index: 2;
}


.stepper_item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #BDBDBD;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 2;
}

.stepper_item:first-child::before {content: none;}

.stepper_item:last-child::after {content: none;}

.stepper_item .step_circle{
    width: 36px;
    height: 36px;
    /* border: 2px solid #BDBDBD; */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
    background-color: #fff;
}

/* .stepper_item .step_circle > i{font-size: 10px;} */

.step_active .step_circle{
    /* border: 2px solid #3F9F7F; */
    box-shadow: 0 0 5px 3px #3F9F7F inset;
}

/* .step_active .step_circle > i{color: #3F9F7F;} */

.step_completed .step_circle{
    /* border: 2px solid #3F9F7F; */
    background-color: #3F9F7F;
}

/* .step_completed .step_circle > i{color: #FFF; font-size: 14px;} */


.stepper_item svg{
    width: 32px;
    height: 32px;
    display:none;
}
.check{color:#FFF;}
.pin{
    color:#3F9F7F;
    transform: scale(1.5);
    position: relative;
    top: -15px;
}

.step_completed .check{display: block;}
.step_active .pin{display: block;}








.step_completed::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid #3F9F7F;
    width: 100%;
    top: 20px;
    left: 50%;
    z-index: 3;
}

#progress_back_wrapper{
    visibility: hidden;
}

#progress_back_wrapper .back_circle{
    width: 32px;
    height: 32px;
    border: 2px solid #000465;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

#progress_back_wrapper .back_circle i{color: #000465;}



.bar{
  width: 88px;
  height: 8px;
  background-color: #FFF;
}

.step_completed .bar{background-color: #3F9F7F;}



@media only screen and (max-width: 600px){
    .bar {width: 66px;}
}

@media only screen and (max-width: 500px){
    .bar {width: 50px;}
}

@media only screen and (max-width: 400px){
    .bar {width: 40px;}
}