/* Container with vertical line */
.timeline-container {
    position: relative;
    padding-left: 50px;
    border-left: 1px solid #ccc;
    margin: 0 20px 0 40px;
}

.timeline-entry {
    margin-bottom: 40px;
    position: relative;
}

.timeline-header {
    display: flex;
    align-items: flex-start;
    position: relative;
    background-color: inherit;
}

.timeline-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    position: absolute;
    left: -76px;
    top: 0;
    padding: 8px 0;
    background-color: white;
}

.timeline-icon img, .timeline-icon svg {
    width: 60px;
    height: 60px;
}

.timeline-title {
    margin-left: 0;
    width: 100%;
}

.timeline-body, timeline-footer {
    margin-left: 0;
    margin-top: 10px;
}

.ui-timeline .tl-item .tl-body .tl-content:after {
    content: none; /* This will remove the triangles */
}

.ui-timeline-left .ui-timeline:before {
    left: 20px;
}

/* Override alternating styles for .alt class items */
@media (min-width: 768px) {
    .ui-timeline .tl-item.alt {
        text-align: left; /* Align consistently */
        margin-left: 0 !important; /* Remove unwanted left margin */
    }

    .ui-timeline .tl-item.alt:before,
    .ui-timeline .tl-item.alt:after {
        display: none; /* Remove any pseudo-elements */
    }

    .ui-timeline .tl-item.alt .tl-body .tl-entry {
        margin: 0 0 15px 20px; /* Uniform left margin like other items */
    }

    .ui-timeline .tl-item.alt .tl-body .tl-time {
        right: 15px; /* Align time to the right */
        left: auto;
        text-align: right; /* Align time text to the right */
    }

    .ui-timeline .tl-item.alt .tl-body .tl-icon {
        left: -20px; /* Align icon uniformly */
        right: auto;
    }

    .ui-timeline .tl-item.alt .tl-body .tl-content:after {
        display: none; /* Remove pseudo-element for consistency */
    }

    /* Standardize all items to align to the right of the timeline */
    .ui-timeline .tl-item {
        display: flex; /* Use flexbox for layout */
        align-items: flex-start; /* Align items vertically at the top */
        justify-content: flex-start; /* All items start from the line */
        position: relative;
        margin-left: 0; /* Remove any left margin pushing items away */
    }

    .ui-timeline .tl-body {
        padding-left: 20px; /* Space between timeline line and content */
        width: auto; /* Allow content to dictate width */
        text-align: left; /* Ensure text is aligned left */
    }
    .ui-timeline:before {
        left:50%
    }

    .ui-timeline .tl-item:before {
        display: block;
        width:0;
    }
}

.ui-timeline .tl-item .tl-body {
    width: 100%;
}