:root {
    --fowiz-muted-color: rgba(var(--bs-emphasis-color-rgb), .5);
    --fowiz-primary-color: var(--bs-link-hover-color);
    --fowiz-checkmark-bg: var(--bs-success);
    --fowiz-checkmark-color: #fff
}

.zangdar__wizard .zangdar__step {
    display: none
}

.zangdar__wizard .zangdar__step.zangdar__step__active {
    display: block
}

.checkmark {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: var(--fowiz-checkmark-color);
    stroke-miterlimit: 10;
    margin: 5% auto;
    box-shadow: inset 0 0 0 var(--fowiz-checkmark-bg);
    animation: checkmark-fill .4s ease-in-out .4s forwards, checkmark-check .3s ease-in-out .9s both
}

.checkmark__circle {
    stroke-dasharray: 216;
    stroke-dashoffset: 216;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: var(--fowiz-checkmark-bg);
    fill: none;
    animation: checkmark-stroke .6s cubic-bezier(.65, 0, .45, 1) forwards
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 98;
    stroke-dashoffset: 98;
    animation: checkmark-stroke .3s cubic-bezier(.65, 0, .45, 1) .8s forwards
}

@keyframes checkmark-stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes checkmark-check {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes checkmark-fill {
    100% {
        box-shadow: inset 0 0 0 80px var(--fowiz-checkmark-bg)
    }
}

.step-progress {
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0
}

.step-progress li {
    flex: 2;
    position: relative;
    padding: 0 0 1rem 0;
    font-size: var(--bs-body-font-size);
    white-space: nowrap;
    overflow: visible;
    min-width: 0;
    text-align: center
}

.step-progress li:first-child:after {
    left: calc(50% + .45rem)
}

.step-progress li:last-child:after {
    display: none
}

.step-progress li:before {
    content: "";
    display: block;
    width: .35rem;
    height: .35rem;
    background-color: var(--fowiz-primary-color);
    border-radius: 50%;
    position: absolute;
    left: calc(50% - .175rem);
    bottom: calc(-1px + -.175rem);
    z-index: 5
}

.step-progress li:after {
    content: "";
    display: block;
    width: calc(100% - .9rem);
    height: 2px;
    position: absolute;
    bottom: -2px;
    left: calc(50% + .45rem);
    z-index: 2;
    border-bottom: 2px solid var(--fowiz-primary-color);
    box-shadow: inset 0 0 0 2px var(--fowiz-muted-color)
}

.step-progress .active~li:before {
    background-color: var(--fowiz-muted-color)
}

.step-progress .active:after,
.step-progress .active~li:after {
    border-bottom: 0
}

.step-progress .active:before {
    background-color: transparent;
    box-shadow: 0 0 0 2px var(--fowiz-primary-color)
}

.step-progress .step-label {
    font-size: 95%;
    color: var(--fowiz-muted-color)
}

.step-progress .active .step-label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--fowiz-primary-color)
}