.step-wizard {

    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.step-wizard-list {
    background: #ffffff00;
    /* box-shadow: 0 15px 25px rgba(0,0,0,0.1); */
    color: #333;
    list-style-type: none;
    border-radius: 10px;
    display: flex;
    padding: 20px 10px;
    position: relative;
    z-index: 12;
    margin: 20px 0;
    overflow: auto;
}

.step-wizard-item {
    padding: 0 20px;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    min-width: 100px;
    position: relative;
}

/* line */
.step-wizard-item+.step-wizard-item:after {
    content: "";
    position: absolute;
    left: 0;
    top: 19px;
    background: #aab3db;
    width: 100%;
    height: 2px;
    transform: translateX(50%);
    z-index: -10;
}

.progress-count-done {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 600;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    color: transparent;

}

.progress-count-done:after {
    content: "";
    height: 40px;
    width: 40px;
    background: rgb(47, 170, 47);
    /* background: linear-gradient(0deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%); */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}

.progress-count-done:before {
    content: "";
    height: 10px;
    width: 20px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -60%) rotate(-45deg);
    transform-origin: center center;
}


.progress-count-later {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    margin: 0 auto;
    position: relative;
    z-index: 10;


}

.progress-count-later:after {
    content: "";
    height: 40px;
    width: 40px;
    background: #e0e0e0;
    /* background: linear-gradient(178deg, rgba(237, 237, 255, 1) 0%, rgba(176, 176, 176, 1) 100%); */
    border: 3px solid #f0f0f0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}

[data-bs-theme=dark] .progress-count-later:after {

    border: 3px solid #8b8b8b;

}

.progress-count-current {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: large;
    font-weight: bolder !important;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    color: #fff;
    font-weight: 700;


}

.progress-count-current:after {
    content: "";
    height: 60px;
    width: 60px;
    background: #65a5fd;
    /* background: radial-gradient(circle, rgba(174, 223, 238, 1) 0%, rgba(43, 142, 255, 1) 100%); */
    border: 3px solid #e6e6e6;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -10;
}



.progress-label {
    font-size: 14px;
    font-weight: 600 !important;
    margin-top: 20px;
}

.progress-label-current {
    font-size: 14px;
    font-weight: 700 !important;
    margin-top: 20px;
}

[data-bs-theme=dark] .progress-label {
    font-size: 14px;
    font-weight: 600 !important;
    margin-top: 40px;
    color: #9c9c9c;
}

.current-item .progress-count:before,
.current-item~.step-wizard-item .progress-count:before {
    display: none;
}

.current-item~.step-wizard-item .progress-count:after {
    height: 10px;
    width: 10px;
}



.current-item~.step-wizard-item .progress-label {
    opacity: 0.5;
}

.current-item .progress-count:after {

    background: #ededff;
    background: linear-gradient(0deg, rgba(237, 237, 255, 1) 0%, rgba(120, 192, 255, 1) 100%);
    border: 2px solid #4143a1;
}



.current-item .progress-count {
    color: #05032e;
}


.dropdown-menu {
    z-index: 120;
}