ul.stepper {
    padding: 0 1.5rem;
    padding: 1.5rem;
    margin: 1em -1.5rem;
    overflow-x: auto;
    overflow-y: auto;
    counter-reset: section;
}
.stepper-horizontal {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.stepper-horizontal li {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: .5s;
    transition: .5s;
}
.stepper-horizontal li:not(:last-child)::after {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    height: 1px;
    margin: .5rem 0 0 0;
    content: '';
    background-color: rgba(0,0,0,0.1);
}
ul.stepper li {
    padding: 0.5rem;
    text-align: center;

    display: inline-block;
}
ul.stepper li.active .circle, ul.stepper li.completed .circle {
    background-color: #4285f4 !important;
}
ul.stepper li.active .step-label, ul.stepper li.completed .step-label {
    font-weight: 600;
    color: rgba(0,0,0,0.87);
}
ul.stepper li .circle {
    display: inline-block;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.7rem;
    color: #fff;
    text-align: center;
    background: rgba(0,0,0,0.38);
        background-color: rgba(0, 0, 0, 0.38);
    border-radius: 50%;
}
ul.stepper li .step-label {
    display: inline-block;
    color: rgba(0,0,0,0.38);
}
.stepper-horizontal li .step-label {
    margin-right: .63rem;
    margin-left: .63rem;
}