.steps_progress_container {
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 10px 0;
}

.steps_progress_circles_container {
     display: flex;
     justify-content: space-around;
     align-items: center;
     width: 200px;
}
.steps_progress_circles_container circle {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #787578;
     position: relative;

     display: flex;
     justify-content: center;
     align-items: center;
}
.steps_progress_circles_container circle:not(:last-child) ::after {
     content: '';
     position: absolute;
     margin-left: 6px;
     top: 14px;
     width: 28px;
     height: 3px;
     background: #787578;
     z-index: 1;
}
.steps_progress_circles_container circle:not(:last-child)[completed] ::after {
     background: #2EB76C;
}

.steps_progress_circles_container circle[completed] {
     background: #2EB76C;
}
.steps_progress_circles_container circle[completed] > .step_done_icon { display: block; }
.steps_progress_circles_container circle[completed] > .step_undone_icon { display: none; }
.steps_progress_circles_container circle[current] > .step_done_icon { display: block; }
.steps_progress_circles_container circle[current] > .step_undone_icon { display: none; }

.steps_progress_circles_container circle[current] {
     background: #2EB76C;
}
.steps_progress_circles_container circle[current]::before {
     content: '';
     width: 36px;
     height: 36px;
     border-radius: 50%;
     border: 3px solid #2EB76C;
     position: absolute;
     top: -6px;
     left: -6px;
     z-index: 2;
}

.steps_progress_circles_container .step_done_icon, .steps_progress_circles_container .step_undone_icon {
     font-weight: 900;
     font-size: 27px;
     color: white;
}
.steps_progress_circles_container .step_done_icon { display: none; }
.steps_progress_circles_container .step_undone_icon { display: block; }