.timeline {
   position: relative;
   padding: 0;
   list-style: none;
}

.timeline:before {
   content: '';
   position: absolute;
   top: 0;
   left: 25px;
   height: 100%;
   width: 2px;
   background-color: #dee2e6;
}

.timeline-item {
   position: relative;
   margin-bottom: 1rem;
   padding-left: 60px;
}

.timeline-marker {
   position: absolute;
   left: 0;
   top: 0;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #0d6efd; /* Default color */
   border: 4px solid #fff;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1;
}

/* Color variants for timeline markers */
.timeline-marker.bg-success { background-color: #198754 !important; }
.timeline-marker.bg-warning { background-color: #ffc107 !important; }
.timeline-marker.bg-danger { background-color: #dc3545 !important; }
.timeline-marker.bg-info { background-color: #0dcaf0 !important; }
.timeline-marker.bg-secondary { background-color: #6c757d !important; }
.timeline-marker.bg-dark { background-color: #212529 !important; }

/* Timeline navigation */
.timeline-navigation {
   background: #f8f9fa;
   padding: 1rem;
   border-radius: 0.5rem;
   border: 1px solid #dee2e6;
}

.month-title {
   color: #495057;
   font-weight: 600;
}

/* Month groups */
.month-group {
   transition: opacity 0.3s ease-in-out;
}

.month-group.d-none {
   display: none !important;
}

.timeline-marker i {
   color: white;
   font-size: 1.2rem;
}

.timeline-content {
   background: #fff;
   border: 1px solid #dee2e6;
   border-radius: 0.5rem;
   padding: 1rem;
   box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.timeline-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   flex-wrap: wrap;
   gap: 0.5rem;
}

.timeline-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: #212529;
   margin: 0;
}

.timeline-date {
   font-size: 0.9rem;
   color: #6c757d;
   font-weight: 500;
}

.timeline-summary {
   color: #495057;
   line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .timeline-header {
      flex-direction: column;
      align-items: flex-start;
    }
            
    .timeline-item {
       padding-left: 45px;
    }
            
    .timeline-marker {
       width: 35px;
       height: 35px;
    }
            
    .timeline:before {
       left: 17px;
    }
}