.main_container {
    padding: 80px 0 0 0 !important;
}
.itinerary-container {
    width: 100%;
    max-width: 800px !important;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 auto;
    margin-top:-8px;
}

/* User Info Section */
.user-info {
    background-color: #e1effa;
    color: #1a658a;
    padding: 20px;
}

.user-info h2 {
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.user-details {
    font-size: 1rem;
    margin-top: 10px;
}

.user-details p {
    padding: 10px 15px;
    border-radius: 5px;
    margin: 0;
}

.user-details p span{
    color: #000000;
}

/* Timeline Container */
.timeline-container {
    padding: 20px;
    background-color: #E0E0E0;
}

/* Timeline */
.timeline {
    position: relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.timeline:before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #607D8B;
}

/* Timeline Item Styling */
.timeline-item {
    position: relative;
    padding-left: 60px;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.timeline-item:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 10px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #f0f0f0;
}

/* Status Classes */
.completed .timeline-date {
    color: #ccc;
}

.completed:before {
    background: #ccc;
}

.current .timeline-date {
    color: #607D8B;
    font-weight: bold;
}

.current:before {
    background: #607D8B;
}

.upcoming .timeline-date {
    color: #000000;
}

.upcoming:before {
    background: #000000;
}

/* Content within Timeline Item */
.timeline-date {
    font-size: 1.1rem;
    margin-bottom: 6px;
    font-weight: bold;
}

.timeline-content {
    font-size: 1rem;
    color: #666;
    line-height: 1.5;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.timeline-content .timeline-missing-info{
    color: #a94442;
    font-weight: bold;
}
.timeline-content .timeline-no-info{
    font-style: italic;
    color:#737373;
}
.timeline-content span.timeline-day{
    float: right;
    text-align: end;
    font-style: italic;
    color:#CCCCCC;
}

.timeline-content p.timeline-info{
    font-style: italic;
    color:#737373;
}

.error-container {
    padding: 20px;
    background-color: #f2dede;
    color: #a94442;
    border: 1px solid #ebccd1;
    border-radius: 5px;
    max-width: 800px;
    margin: 0 auto;
    margin-top: 20px;
}

.error-container .title {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.error-container .message {
    font-size: 1rem;
}
.error-container .cta {
    margin-top: 10px;
}
.error-container .cta a {
    color: #a94442;
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .user-details {
        flex-direction: column;
        align-items: center;
    }

    .timeline-container {
        padding: 15px;
    }

    .timeline-item {
        padding-left: 45px;
    }

    .timeline:before {
        left: 10px;
    }

    .timeline-item:before {
        left: 4px;
    }
}

@media (max-width: 480px) {
    .itinerary-container {
        margin-top: -4px;
    }
    .user-info h2 {
        font-size: 1.5rem;
    }

    .user-details p {
        font-size: 0.9rem;
        padding: 8px;
    }

    .timeline-item {
        padding-left: 40px;
    }
}