.slspZacinamePodnikatContainer .slspBubbleCalcHeader{
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-between;
    align-items: stretch;

    margin-bottom: 40px;
}


.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left{
    display: flex;
}

.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left > .bullet{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
}


.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .ball{
    width: var(--bullet-size);
    height: var(--bullet-size);
    position: relative;
    z-index: 10;
}


.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .ball::before{
    content: "";
    background-color: var(--color-medium-grey);
    width: calc(var(--bullet-size) * 0.8);
    height: calc(var(--bullet-size) * 0.8);
    transform-origin: center;
    left: calc(var(--bullet-size) * 0.1);
    top: calc(var(--bullet-size) * 0.1);
    border-radius: 50%;
    position: absolute;
    transition: left 0.5s, right 0.5s, top 0.5s, bottom 0.5s, width 0.5s, height 0.5s, backround-color 0.5s;
}



.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .ball::after{
    content: "";
    width: 0px;
    height: 0px;
    border-radius: 50%;
    border: 0px solid #FFFFFF;
    position: absolute;
    left: calc(50% - 4px);
    top: calc(50% - 4px);
    transition: width 0.5s, height 0.5s, border-width 0.5s, borderradius 0.5s, left 0.5s, top 0.5s;
}



.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.progress .ball::after{
    content: "";
    width: calc(var(--bullet-size) * 0.05);
    height: calc(var(--bullet-size) * 0.05);
    border-radius: 50%;
    background-color: #FFFFFF;
    border: calc(var(--bullet-size) * 0.1) solid #FFFFFF;
    position: absolute;
    left: calc(50% - calc(var(--bullet-size) * 0.1));
    top: calc(50% - calc(var(--bullet-size) * 0.1));
    transition: width 0.5s, height 0.5s, border-width 0.5s, borderradius 0.5s, left 0.5s, top 0.5s;
}



.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.done .ball::after{
    content: "";
    width: calc(var(--bullet-size)* 0.2);
    height: calc(var(--bullet-size)* 0.44);
    border-radius: calc(var(--bullet-size)* 0.01);
    background-color: transparent;
    border: calc(var(--bullet-size)* 0.1) solid #FFFFFF;
    border-bottom: 0px;
    border-right: 0px;
    transform: rotate(-140deg);
    position: absolute;
    left: calc(50% - calc(var(--bullet-size)* 0.1));
    top: calc(50% - calc(var(--bullet-size)* 0.25));
    transition: width 0.2s, height 0.2s, border-width 0.2s, borderradius 0.2s, left 0.2s, top 0.2s, border 0.2s, transform 0.2s;
}



.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.progress .ball::before, 
.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.done .ball::before
{
    width: calc(var(--bullet-size) * 1);
    height: calc(var(--bullet-size) * 1);
    left:0px;
    top: 0px;
    background-color: var(--color-light-green);
}


.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.done .ball::before
{
    background-color: var(--color-medium-green);
}







.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .line{
    width: 0px;
    height: calc(var(--bullet-size)*0.14);
    margin-left: calc(var(--bullet-size)*1.1);
    position: relative;
}

 

.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .line::before{
    content: "";
    width: calc(var(--bullet-size)*1.5);
    height: calc(var(--bullet-size)*0.14);
    background-color: var(--color-medium-grey);
    position: absolute;
    margin-left: calc(var(--bullet-size)*-1.2);
}

.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .line::after{
    content: "";
    width: 0px;
    height: calc(var(--bullet-size)*0.14);
    background-color: var(--color-light-green);
    position: absolute;
    margin-left: calc(var(--bullet-size)*-1.2);
    transition: width 0.5s, background-color 0.5s;
}

.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.progress .line::after{
    width: calc(var(--bullet-size)*1.5);
}

.slspZacinamePodnikatContainer .slspBubbleCalcHeader > .left .bullet.done .line::after{
    width: calc(var(--bullet-size)*1.5);
    background-color: var(--color-medium-green);
}