.pix-levels {
    .pix-leveles-dot-div {
        position: relative;
        width: 30px;
        height: 30px;
        display: block;
        width: 100%;
        margin-top: -39px;
        margin-left: -15px;
    }
    .pix-levels-dot {
        position: absolute;
        width: 30px;
        height: 30px;
        display: block;
        display: inline-block;
        text-align: center;
        border-radius: 50%;
        -webkit-transition: $transition-base;
        transition: $transition-base;
    }
    .pix-levels-dot-inner {
        width: 14px;
        height: 14px;
        border-radius: 50px;
        position: absolute;
        top: 8px;
        left: 8px;
    }
    &.disabled .pix-levels-dot-inner {}
    .pix-levels-step:hover {
        .pix-levels-dot {
            -webkit-transform: scale(1.25);
                    transform: scale(1.25);
        }
    }
    .pix-levels-step {
        .progress {
            position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;
            width: 100%;
            .progress-bar {
                width:0px;
                box-shadow: none;
            }
        }
        &.complete .progress .progress-bar { width:100%; }
        &.active .progress .progress-bar { width:50%; }
        &:first-child.active .progress .progress-bar { width:0%; }
        &:last-child.active .progress .progress-bar { width: 100%; }
        &.disabled .pix-levels-dot { background-color: #f5f5f5 !important; }
        &.disabled .pix-levels-dot:after { opacity: 0; }
        &:first-child .progress { left: 50%;width: 50%; }
        &:last-child .progress { width: 50%; }
    }
}
@media (max-width: 767px) {
    .pix-levels {
        .progress {
            opacity: 0;
            .progress-bar {
                display: none;
            }
        }
    }
}