.stepper {
    width: 100%;
    padding: 20px 40px;
}

.stepper-steps {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

.step-container {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    text-align: center;
}

    .step-container.first .step-circle {
        margin-left: 0; /* Remove left margin for the first step */
    }

    .step-container.last .step-circle {
        margin-right: 0; /* Remove right margin for the last step */
    }

.step-circle {
    width: 25px; /* Size of the circle */
    height: 25px; /* Size of the circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ddd;
    position: relative;
    z-index: 5;
    font-size: 12px;
    font-weight: unset;
    text-align: center;
}

    .step-circle.active {
        background-color: var(--bs-primary);
    }

    .step-circle.failed {
        background-color: var(--bs-danger);
    }

    .step-circle.completed {
        background-color: var(--bs-primary);
    }

    .step-circle.notlast {
        left: 30%;
    }

    .step-circle.active i, .step-circle.completed i, .step-circle.failed i {
        color: white; /* Color of the icon when active/completed */
    }

step-circle-inner {
    display: flex;
    align-items: center;
    justify-items: center;
    flex-direction: column; /* Stack elements vertically */
    flex: 1;
    text-align: center;
    position: relative;
}

.step-title {
    margin-top: 5px;
    font-size: 12px;
}

.step-line {
    flex: 1;
    position: absolute;
    top: 25%; /* Center the line vertically relative to the circle */
    transform: translateY(-50%);
    z-index: 0;
    background-size: 35px 35px;
    background-color: #d4f4f4;
    height: 8px;
    z-index: 2;
    left: 0; /* Start from the left edge of the step */
    width: 100%; /* Extend fully to the next step */
}

    .step-line.active, .step-line.completed {
        background-color: #007A7A;
    }

    .step-line.failed {
        background-color: rgb(193, 51, 66);
    }

.step-container .step-line {
    width: calc(100% + 10px);
    left: 6.5%;
}

.step-container.first .step-line {
    width: calc(100% + 40px);
    left: 0 !important;
}

.step-container.last .step-line {
    width: calc(100% - 40px);
    left: 7.5%;
}

.stepper-content {
    padding: 20px;
    margin-bottom: 20px;
}

.stepper-navigation {
    display: flex;
    justify-content: space-between;
}

.stepper-link {
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

    .stepper-link:hover {
        text-decoration: underline;
    }

    .stepper-link i {
        margin-right: 5px;
    }