:root {
    --timeline-color: var(--bs-primary);
    --timeline-shadow: var(--bs-primary-bg-subtle);
    --timeline-opacity: 0.5;
    --timeline-opacity-active: 0.9;
    --timeline-thickness: 4px;
    --timeline-point-size: 12px;
}

.timeline {
    width: 100%;
    position: relative;
    font-weight: 500;
}

.timeline:before {
    border-right-style: solid
}

.timeline:before,
.timeline:after {
    content: " ";
    display: block
}

.timeline:after {
    clear: both
}

.timeline:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100% !important;
    border-right-width: var(--timeline-thickness);
    border-right-style: solid;
    border-right-color: var(--timeline-color);
}

.timeline.timeline-line-solid:before {
    border-right-style: solid;
}

.timeline.timeline-line-dotted:before {
    border-right-style: dotted;
}

.timeline.timeline-line-dashed:before {
    border-right-style: dashed;
}

.timeline .timeline-item {
    position: relative;
    float: left;
    clear: both !important;
}

.timeline .timeline-item:after {
    clear: both;
}

.timeline-event>a {
    --bs-bg-opacity: var(--timeline-opacity);
}

.timeline-event>a.active {
    --bs-bg-opacity: var(--timeline-opacity-active);
}

.timeline .timeline-item>.timeline-point {
    color: var(--timeline-color);
    background: var(--timeline-color);
    top: calc((var(--timeline-point-size) - var(--timeline-thickness)) / 2);
    right: calc(-1 * (var(--timeline-point-size) - var(--timeline-thickness)) / 2);
    width: var(--timeline-point-size);
    height: var(--timeline-point-size);
    position: absolute;
    z-index: 100;
    border-width: 3px;
    border-style: solid;
    border-radius: 100%;
    box-shadow: 0 0 0 var(--timeline-thickness) var(--timeline-shadow);
}