.move-out{
    left: 100%; 
    top: 50%; 
    translate: 0 -50%;
}

.transition-500-ease-in-out{
    transition: all;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}

.center-rotate-90{
    transform: rotate(90deg); top: 50%; translate: 0 -100%;
}

.step-bulletpoint{
    left: 1.5px;
    width: 10px; 
    height: 10px;
    translate: 0 -2px;
    outline: solid;
    outline-width: 1px; 
    border: solid; 
    border-color: white; 
    border-width: 2px; 
    z-index: 100;
}

.progress-step-active{
    background-color: red; 
    outline-color: rgba(255, 0, 0, 0.5); 
    color: black; 
    transition: all; 
    transition-delay: 500ms;
}

.progress-step-inactive{
    background-color: gray; 
    outline-color: gray; 
    color: gray;
    transition: all; 
    transition-delay: 0ms;
}

.progress-step-active-mobile{
    background-color: red; 
    outline-color: rgba(255, 0, 0, 0.5); 
    color: black; 
    transition: all; 
    transition-delay: 500ms;
}

.progress-step-inactive-mobile{
    background-color: gray; 
    outline-color: gray; 
    color: gray;
    transition: all; 
    transition-delay: 0ms;
}