/* ==========================================================================
   Timeline Styles
   css variables: 
   --panel-border-color: var(--primary-300)
   --arrow-color: #ffffff
   ========================================================================== */

@import url("variables.ba7d9d3a96a8.css");

/* --- Base Timeline Container --- */
.timeline {
    background-color: none;
    list-style: none;
    padding: 20px 0;
    position: relative;
    width: 100%;
    margin: 0 auto; /* Center the timeline container */

}

/* --- The Vertical Line --- */
.timeline:before {
    top: 20px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: var(--primary-300);
    left: 30px;
    /* margin-left: -1.5px; */
    margin-left: -16.5px;
    z-index: 1;
}

/* --- End Cap for the Line --- */
.timeline:after {
    content: '';
    position: absolute;
    bottom: 0;
    /* left: 20px;
    transform: translateX(-50%); */
    left: 0px;
    width: 30px;
    height: 3px;
    background-color: var(--primary-300);
    z-index: 2;
}

/* --- Single Event Timeline Styles --- */
.timeline.timeline-single:before {
    background-color: transparent;
}

.timeline.timeline-single:after {
    display: none;
}

/* --- Color Variation for the Vertical Line --- */
.timeline.timeline-dark:before {
    background-color: var(--primary-500);
}
.timeline.timeline-dark:after {
    background-color: var(--primary-500);
}


/* --- Timeline List Items --- */
.timeline > li {
    margin-bottom: 20px;
    position: relative;
    /* padding-left: 70px; */
    padding-left: 50px;
}

.timeline > li:first-child {
    margin-top: -20px;
}
.timeline > li:last-child {
    margin-bottom: -20px;
}

/* Clearfix for panel content */
.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}
.timeline > li:after {
    clear: both;
}

/* --- Timeline Badge (The Circle) --- */
.timeline > li > .timeline-badge {
    color: #ffffff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    font-size: 1.5em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 30px;
    /* margin-left: -15px; */
    margin-left: -30px;
    z-index: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-badge {
    background-color: var(--primary-300) !important;
}

/* Badge Color Variations */
.timeline-badge.timeline-badge-dark {
    background-color: var(--primary-500) !important;
}

.timeline-badge.secondary {
    background-color: var(--secondary-400) !important;
}
.timeline > li > .timeline-badge i {
    font-size: 0.8em;
    color: #ffffff !important;
}

/* --- Timeline Panel (The Content Box) --- */
.timeline > li > .timeline-panel {
    width: 100%;
    /* Use a CSS variable for the border color, with a fallback */
    border: 1px solid var(--panel-border-color, var(--primary-300));
    background: #ffffff;
    border-radius: 10px; /* Slightly more rounded corners */
    padding: 20px;
    position: relative;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.08);
}

/*  Color variations */
.timeline > li > .timeline-panel.timeline-panel-dark {
    --panel-border-color: var(--primary-600);
}
.timeline > li > .timeline-panel.timeline-panel-secondary {
    --panel-border-color: var(--secondary-400);
}

/* --- Panel Arrow (Border) --- */
/* .timeline > li > .timeline-panel:before {
    position: absolute;
    top: 16px;
    left: -17px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 0 solid transparent;
    border-right: 15px solid var(--panel-border-color, var(--primary-300));
    border-bottom: 15px solid transparent;
    content: " ";
} */

/* --- Panel Arrow (Fill) --- */
/* .timeline > li > .timeline-panel:after {
    position: absolute;
    top: 17px;
    left: -15px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 0 solid transparent;
    border-right: 15px solid var(--arrow-color, #ffffff);
    border-bottom: 14px solid transparent;
    content: " ";
} */

/* --- Color Variation for the Vertical Line --- */
.timeline > li > .timeline-panel.bg-primary-50:after {
    border-right: 14px solid var(--primary-50);
}



/* --- Content Styles --- */
.timeline-title {
    font-size: 1.0rem;
    font-weight: 600;
    margin-top: 0;
    color: #333;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
    color: #555;
}
.timeline-body > p + p {
    margin-top: 5px;
}

/* --- Accordion Timeline Specific Styles --- */
.accordion-timeline > .accordion-item > .accordion-header > .accordion-button {
    min-height: 50px;
}
.accordion-timeline > .accordion-item {
    border: none !important;
}

.timeline-panel > .card {
    border: none !important;
    box-shadow: none !important;
}