.container-bpf {
    margin-top: 20px;
}

.step {
    cursor: pointer;
    list-style-type: none;
    float: left;
    width: 20%;
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

    .step:before {
        content: '';
        width: 40px;
        height: 40px;
        line-height: 40px; 
        border: 2px solid lightgray; 
        display: block;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: white; 
        font-size: 20px;
        box-sizing: border-box; 
    }

    .step:after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        background-color: #ddd; 
        top: 20px; 
        left: -50%;
        z-index: -1;
    }

.progressbar {
    
}

    .progressbar li:first-child:after {
        content: none;
    }

    .progressbar li.completed:before {
        border-color: #6D32FF; 
        background-color: #6D32FF; 
        content: "✓"; 
        color: white; 
        text-align: center;
        line-height: 40px; 
        font-weight: bold;
        font-size: 20px; 
    }

    .progressbar li.completed:after {
        background-color: #6D32FF;
    }

    .progressbar li.current:before {
        border-color: #6D32FF; 
        background-color: white; 
        content: ''; 
        /* MÉTODO PARA A BOLINHA INTERNA */
        background-image: radial-gradient(circle at center, #6D32FF 10px, transparent 11px);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 40px 40px; 
    }

    .progressbar li.current:after {
        background-color: #6D32FF;
    }

    .progressbar li.current + li:before {
        border-color: #6D32FF;
    }

    .progressbar li.current + li:after {
        background-color: #6D32FF;
    }

    .progressbar li.disabled {
        cursor: not-allowed;
    }

    .progressbar-9-steps {
        display: flex;
        padding-left: 0;
    }

    .progressbar-9-steps .step {
        width: auto;
        flex: 1;
        float: none;
    }

@media(max-width: 550px) {
    .step span {
        font-size: x-small;
    }
}