body{
    --main-greentype-color: #2db552;
}

.hidden{
    display:none;
}

.main-form .contenedor-form .modal-prestamo{
    width: 100%;
    overflow: hidden;
}

.main-form .contenedor-form .modal-prestamo .box_transition_step{
    display: flex;
    width: 650%;
}

.main-form .contenedor-form .modal-prestamo .box_transition_step
.container_step{
    width: 15.4%;
    transition: margin-left 0.5s ease-in-out;
    height: 600px;    
}

.modal-prestamo .progress-bar{
    display: flex;
    margin: 22px 0px 0px 0px;
}

.modal-prestamo .progress-bar .paso{
    width: 100%;
}

.progress-bar .paso:last-child .miscelanea:before,
.progress-bar .paso:last-child .miscelanea:after{
    display:none;
}

.progress-bar .paso .miscelanea:before,
.progress-bar .paso .miscelanea:after{
    position: absolute;
    content:'';
    bottom: 4px;
    right: -64px;
    height: 2px;
    width: 64px;
    background: var(--main-greentype-color);
}

.progress-bar .paso .miscelanea{
    height: 0.94rem;
    width: 0.93rem;
    border: 2px solid var(--main-greentype-color);
    display: inline-block;
    border-radius: 50%;
    position: relative;
    transition: 0.2s;
}

.progress-bar .paso .miscelanea.active{
    background:var(--main-greentype-color);
    border: 2px solid var(--main-greentype-color);
}

.progress-bar .paso .miscelanea.active:after{
    background: var(--main-greentype-color);
    transform: scaleX(0);
    transform-origin: left;
    animation: animate 0.3s linear forwards;
}

@keyframes animate{
    
    100%{
        transform: scaleX(1);
    }

}


@media (min-width: 993px){

    .progress-bar .paso .miscelanea:before, 
    .progress-bar .paso .miscelanea:after{
        right: -55px;
        width: 55px;
        bottom: 3px;
    }

    .progress-bar .paso .miscelanea {
        height: 0.83rem;
        width: 0.8rem;
    }

}

@media only screen  
and (min-width: 1200px){

    .progress-bar .paso .miscelanea:before, 
    .progress-bar .paso .miscelanea:after{
        right: -70px;
        width: 70px;
        bottom: 3px;
    }

}

@media only screen  
and (min-width: 1920px){

    .progress-bar .paso .miscelanea:before, 
    .progress-bar .paso .miscelanea:after{
        right: -82px;
        width: 82px;
        bottom: 3px;
    }

}