.physikit-steps-indicator {
    display: flex;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 16px;
}

.physikit-step {
    position: relative;
    display: flex;
    flex: 1;
}

/* If the step is WAITING (gray faded) */
.physikit-step.wait-status {
    --n-bezier: cubic-bezier(.4, 0, .2, 1);
    --n-description-text-color: rgba(194, 194, 194, 1);
    --n-header-text-color: rgba(194, 194, 194, 1);
    --n-indicator-border-color: rgba(194, 194, 194, 1);
    --n-indicator-color: #0000;
    --n-indicator-icon-size: 18px;
    --n-indicator-index-font-size: 16px;
    --n-indicator-size: 28px;
    --n-indicator-text-color: rgba(194, 194, 194, 1);
    --n-splitor-color: rgba(194, 194, 194, 1);
    --n-step-header-font-weight: 600;
}

/* If the step is PROCESSING (green active) */
.physikit-step.process-status {
    --n-bezier: cubic-bezier(.4, 0, .2, 1);
    --n-description-text-color: rgb(51, 54, 57);
    --n-header-text-color: rgb(31, 34, 37);
    --n-indicator-border-color: var(--theme-palette-color-1);
    --n-indicator-color: var(--theme-palette-color-1);
    --n-indicator-icon-size: 18px;
    --n-indicator-index-font-size: 16px;
    --n-indicator-size: 28px;
    --n-indicator-text-color: #FFF;
    --n-splitor-color: rgba(194, 194, 194, 1);
    --n-step-header-font-weight: 600;
}

.physikit-step.completed-status {
    --n-bezier: cubic-bezier(.4, 0, .2, 1);
    --n-splitor-color: var(--theme-palette-color-1);
    --n-indicator-color: #0000;
    --n-indicator-border-color: var(--theme-palette-color-1);
    --n-indicator-text-color: var(--theme-palette-color-1);
    --n-description-text-color: rgba(194, 194, 194, 1);
    --n-header-text-color: rgba(194, 194, 194, 1);
}

/* Mobile: Stack vertically */
@media (max-width: 768px) {
    .physikit-steps-indicator {
        flex-direction: column;
        align-items: center;
    }

    .physikit-step {
        width: 100%;
        justify-content: center;
        margin-bottom: 16px;
    }

    .physikit-step-content-header-splitor {
        background-color: var(--n-splitor-color);
        margin: 0 !important;
        width: 1px;
        height: calc(100% - var(--n-indicator-size));
        position: absolute;
        left: calc(var(--n-indicator-size) / 2);
        bottom: -8px;
    }
}

.physikit-step-content {
    flex: 1;
}

.physikit-step-content-header {
    color: var(--n-header-text-color);
    margin-top: calc(var(--n-indicator-size) / 2 - var(--n-step-header-font-size) / 2);
    line-height: 16px;
    font-size: var(--n-step-header-font-size);
    font-weight: var(--n-step-header-font-weight);
    position: relative;
    display: flex;
    margin-left: 9px;
    transition: color 0.3s var(--n-bezier), background-color 0.3s var(--n-bezier);
}

.physikit-step-content-header-title {
    white-space: nowrap;
    flex: 0;
    font-size: 20px;
}

.physikit-step-content-header-splitor {
    background-color: var(--n-splitor-color);
    margin-top: 8px;
    height: 1px;
    flex: 1;
    align-self: flex-start;
    margin-left: 12px;
    margin-right: 12px;
    transition: background-color 0.3s var(--n-bezier);
}

.physikit-step-content-description {
    color: var(--n-description-text-color);
    margin-top: 12px;
    margin-left: 9px;
    transition: color 0.3s var(--n-bezier);
}

.physikit-step-indicator {
    background-color: var(--n-indicator-color, #30d175); /* fallback if var not set */
    box-shadow: 0 0 0 1px var(--n-indicator-border-color, #30d175);
    height: var(--n-indicator-size, 28px);
    width: var(--n-indicator-size, 28px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s var(--n-bezier), box-shadow 0.3s var(--n-bezier);
}

.physikit-step-indicator-slot {
    position: relative;
    width: var(--n-indicator-icon-size, 18px);
    height: var(--n-indicator-icon-size, 18px);
    font-size: var(--n-indicator-icon-size, 18px);
    line-height: var(--n-indicator-icon-size, 18px);
}

.physikit-step-indicator-slot-index {
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-size: var(--n-indicator-index-font-size, 16px);
    width: var(--n-indicator-icon-size, 18px);
    height: var(--n-indicator-icon-size, 18px);
    line-height: var(--n-indicator-icon-size, 18px);
    color: var(--n-indicator-text-color, #fff);
    transition: color 0.3s var(--n-bezier);
}

.physikit-step-indicator-slot-check {
    width: 18px;
    height: 18px;
    color: var(--theme-palette-color-1);
}

.physikit-step.completed .physikit-step-indicator-slot-index {
    display: inline-block;
}

.physikit-step.completed .physikit-step-indicator-slot-check {
    display: inline-block;
}


.step-3 {
    display: flex;
    flex-direction: column;
    place-items: center;
}