.timeline {
    position: relative;
    padding-left: 2rem;
}

.add-timeline-event {
    margin: 2rem 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0.85rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #dee2e6;
}

.timeline-item {
    position: relative;
}

.timeline-marker {
    z-index: 10;
    position: absolute;
    left: -1.7rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #aaa;
    border: 2px solid #fff;
    margin-top: 1rem;
    box-shadow: 0 0 0 2px #dee2e6;
}

.timeline-content {
    position: relative;
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.2); */
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 1.25rem;
    width: 1rem;
    height: 2px;
    background: #dee2e6;
}

.timeline-event-date {
    font-size: 1.6rem;
    font-weight: 300;
    color: #999;
    margin-bottom: 0.5rem;
}

/* Removed timeline-photo-grid, timeline-photo-grid-item, and timeline-image styles, replaced by shared_image_grid.css */

.dropdown .btn-link {
    color: #6c757d;
}

.dropdown .btn-link:hover {
    color: #000;
}

.dropdown-menu {
    min-width: 8rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.dropdown-item i {
    width: 1rem;
    margin-right: 0.5rem;
}

/* New styles for birth and demise events */
.birth-marker {
    background: #28a745 !important; /* Green for birth */
    box-shadow: 0 0 0 2px #28a745 !important;
}

.demise-marker {
    background: #6c757d !important; /* Gray for demise */
    box-shadow: 0 0 0 2px #6c757d !important;
}

.birth-event {
    border-left: 4px solid #28a745 !important;
}

.demise-event {
    border-left: 4px solid #6c757d !important;
}

.birth-event .timeline-event-date,
.birth-event .card-title {
    /* color: #28a745; */
}

.demise-event .timeline-event-date,
.demise-event .card-title {
    /* color: #6c757d; */
} 
.card-text {
    white-space: pre-line;
}