:root {
    --fowiz-muted-color: rgba(var(--bs-headings-color-rgb), 0.5);
    --fowiz-primary-color: var(--bs-comp-active-bg);
    --fowiz-checkmark-bg: var(--bs-green);
    --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: 10% auto;
    box-shadow: inset 0 0 0 var(--fowiz-checkmark-bg);
    animation: checkmark-fill 0.4s ease-in-out 0.4s forwards,
        checkmark-check 0.3s ease-in-out 0.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 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 98;
    stroke-dashoffset: 98;
    animation: checkmark-stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.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% + 0.45rem);
}

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

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

.step-progress li:after {
    content: "";
    display: block;
    width: calc(100% - 0.9rem);
    height: 2px;
    position: absolute;
    bottom: -2px;
    left: calc(50% + 0.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: 0.9rem;
    font-weight: 600;
    color: var(--fowiz-primary-color);
}