#policy-history-card .card-body {
    --color: var(--dark-grey);
    --background-color: var(--llight-grey);
    --current-color: var(--blue);
    display: flex;
    flex-direction: row;
    gap: var(--p1);
}

#policy-history-card #policy-history-timeline {
    display: flex;
    flex-direction: column;
    gap: var(--p4);
    position: relative;
    height: fit-content;
    justify-content: center;
    align-items: flex-start;
}

#policy-history-card #policy-history-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--icon)*1.5 + var(--p4));
    transform: translateX(-50%);
    width: 1px;
    height: calc(100% - (var(--icon) * 3) - (var(--p4) * 2));
    background-color: var(--color);
}

.timeline-btn:not(.back-btn):not(.forward-btn) {
    width: calc(var(--icon) * 2/3);
    height: calc(var(--icon) * 2/3);
    margin: auto;
    border: var(--shadow-border);
    border-color: var(--color);
    border-radius: var(--icon);
    background-color: var(--background-color);
    z-index:1;
}

.timeline-btn.current-time:not(.indicator) {
    border-color: var(--current-color) !important;
}

.timeline-btn.current-time.indicator {
    border-style: dashed;
}

.timeline-btn.active {
    background-color: var(--color) !important;
}

.timeline-btn.current-time.active:not(.indicator) {
    background-color: var(--current-color) !important;
}

.timeline-btn.current-time.indicator.active {
    border-width: 3px;
    background-color: var(--background-color) !important;
}

.policy-history-popover {
    background-color: var(--light-grey);
    padding: var(--p1);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: var(--shadow-border);
}

#policy-history-card .previous-policies-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--p1);
    justify-content: center;
    align-content: flex-start;
    width: 100%;
}