.timeline {
    width: 80px;
    height: 400px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: -40px;
    top: 40px;
}

    .timeline.timeline-horizontal {
        flex-direction: row;
    }

    .timeline .timeline-step {
        --timelineColor: var(--mud-palette-secondary-blue);
        width: 100%;
        flex: 1;
        flex-direction: column;
        gap: .4rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        text-align: center;
        color: var(--mud-palette-darker-blue);
        background-color: var(--mud-palette-surface-light);
        border-radius: .4rem;
        transition: background-color .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow .3s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }

        .timeline .timeline-step.timeline-step-active {
            cursor: default;
        }

        .timeline .timeline-step .mud-icon-root {
            font-size: 1.75rem;
        }

        .timeline .timeline-step .timeline-step-text {
            color: var(--mud-palette-darker-blue);
            text-wrap: wrap;
            font-size: .75rem !important;
        }

        .timeline .timeline-step.timeline-step-active .timeline-step-text, .timeline .timeline-step:hover .timeline-step-text {
            color: var(--timelineColor);
            font-weight: bold;
        }

        .timeline .timeline-step.timeline-step-active .mud-icon-root, .timeline .timeline-step:hover .mud-icon-root {
            color: var(--timelineColor);
        }

        .timeline .timeline-step:not(:last-child)::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 40%;
            top: 55%;
            background-color: color-mix(white 80%, var(--mud-palette-medium-gray) 20%);
            border-radius: 1000px;
        }

        .timeline .timeline-step.timeline-step-completed::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 40%;
            top: 55%;
            background-color: var(--mud-palette-secondary-blue);
            border-radius: 1000px;
        }

        .timeline .timeline-step:first-child::after {
            height: 55%;
            top: 42%;
        }

        .questions-container .timeline {
            position: relative;
            flex-direction: row;
            left: 0;
            top: 0;
            width: 100%;
            height: 80px;
            justify-content: space-between
        }

            .questions-container .timeline .timeline-step {
                align-items: center;
                justify-content: center;

            }

                .questions-container .timeline .timeline-step:not(:last-child)::after {
                    height: 4px !important;
                    width: 35% !important;
                    top: 35% !important;
                    left: 85%;
                }

                .questions-container .timeline .timeline-step:first-child::after {
                    width: 40% !important;
                    left: 75%;
                }

                body:has(.question-container .GD-radio-content input[disabled]) .timeline {
                    opacity: .5;
                }

body:has(.question-container .GD-radio-content input[disabled]) .timeline * {
    pointer-events: none !important;
    cursor: default !important;
}