.round {
    margin-top: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
    text-align: center;
    border: 1px solid #ddd;
    display: inline-block;
    font-size: 16.5px;
}

.round.active {
    border-color: #685ea6;
    border-width: initial;
}

.round.complete {
    background: #685ea6;
    color: #fff;
    border-color: #685ea6;
}

.connecting-line {
    height: 4px;
    background: #e0e0e0;
    position: absolute;
    width: 75%;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 55px;
}

.connecting-line-active {
    height: 4px;
    background: #e0e0e0;
    position: absolute;
    width: 55%;
    margin: 0 auto;
    left: 0;
    right: 30%;
    top: 55px;
}

.connecting-line-active.step-2 {
    background: #685ea6;
    width: 27%;
    right: 58%;
}

.connecting-line-active.step-3 {
    background: #685ea6;
    width: 55%;
    right: 35%;
}

.connecting-line-active.step-4 {
    background: #685ea6;
    width: 79%;
    right: 6%;
}

@media (min-width:320px)  {
    .connecting-line {
       display: none;
    }
    
    .connecting-line-active {
        display: none;
    }
}

@media (min-width:480px)  {
    .connecting-line {
       display: block;
    }
    
    .connecting-line-active {
        display: block;
    }

    .wizard-row {
        margin-left: -8%;
    }
}