/**************************** TIMELINE ****************************/

.timeline {
    position: relative;
    display: none;
}

    .timeline.active {
        display: block;
    }

    .timeline .column.left {
        padding-right: 54px;
    }

    .timeline .column.right {
        padding-top: 61px;
        padding-left: 54px;
    }

    .timeline .row {
        position: relative;
        margin: 0;
    }

.card_wrap {
    padding-right: 54px;
}

    .card_wrap.right {
        padding-left: 54px;
    }

@media (max-width: 768px) {
    .mobile_view {
        padding-right: 0px;
        padding-left: 56px;
    }
}

/**************************** TIMELINE CARD ****************************/

.timeline_card {
    z-index: 10;
    position: relative;
    margin-top: 64px;
    padding: var(--spacing-2xl);
}

    .timeline_card .content_wrapper {
        color: rgba(var(--base-text)) !important;
    }

        .timeline_card .content_wrapper .heading {
            color: rgba(var(--base-heading)) !important;
        }

    .timeline_card:not(.right) {
        text-align: end !important;
    }

        .timeline_card:not(.right) .link {
            justify-content: end;
        }

@media (max-width: 768px) {
    .timeline_card {
        z-index: 10;
        position: relative;
        margin-top: 24px;
        padding: 24px;
    }
}

.timeline_card:first-of-type {
    margin-top: 0px;
}

.timeline_card::before {
    content: "";
    position: absolute;
    top: 28px;
    right: -12px;
    width: 0;
    height: 0;
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 13px solid rgba(var(--base-bg-color1));
}

.timeline_card.right::before {
    left: -12px;
    right: unset;
    border-left: unset;
    border-right: 13px solid rgba(var(--base-bg-color1));
}

.timeline_card .pin {
    position: absolute;
    top: 28px;
    right: -70px;
}

.timeline_card.right .pin {
    left: -70px;
    right: unset;
}

@media (max-width: 768px) {
    .timeline_card.right .pin {
        left: -56px;
        right: unset;
    }
}

.timeline_card .tag {
    font-size: 0.8125rem;
    color: rgba(var(--base-highlight-text));
    line-height: 140%;
    letter-spacing: 0.15em;
    padding-bottom: var(--spacing-l);
}

@media (max-width: 768px) {
    .timeline_card .tag {
        margin-bottom: 12px;
    }
}

.timeline_card .content_wrapper .heading {
    font-size: 1.5625rem;
    padding-bottom:  var(--spacing-l) !important;
}

@media (max-width: 768px) {
    .timeline_card .content_wrapper .heading {
        font-size: 1.3125rem;
        margin-bottom: 12px !important;
    }
    .timeline_card .content_wrapper p {
        font-size: 0.875rem;
    }
}

.wrapper {
    display: flex;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

@media (max-width: 768px) {
    .wrapper {
        display: flex;
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

/**************************** MOBILE FILTER DROPDOWN ****************************/
.filter_timeline .timeline_button {
    width: 100%;
    border-radius: unset !important;
    color: #0076AD;
    border-left: unset !important;
    border-right: unset !important;
    border-top: #ddd solid 1px;
    border-bottom: #ddd solid 1px;
    font-size: 0.8125rem;
    line-height: 140%;
    letter-spacing: 0.15em;
    font-weight: 700;
    background-color: white;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
}

.filter_timeline .dropdown-menu {
    transform: translate(0px, 80px) !important;
    width: 100%;
    padding: 12px 32px;
    padding: var(--spacing-m) var(--spacing-2xl) !important;
}

    .filter_timeline .dropdown-menu .tab .nav-link {
        padding-bottom: 12px;
        font-size: 1rem;
        line-height: 150%;
        color: #767676 !important;
    }

        .filter_timeline .dropdown-menu .tab .nav-link.active {
            display: none;
        }

    .filter_timeline .dropdown-menu .tab:last-of-type .nav-link {
        padding-bottom: 0;
    }

.filter_timeline .timeline_button::after {
    display: none !important;
}

.filter_timeline .timeline_button .icon-up {
    display: none;
}

.filter_timeline .timeline_button .icon-down {
    display: block;
}

.filter_timeline .timeline_button.show .icon-up {
    display: block;
}

.filter_timeline .timeline_button.show .icon-down {
    display: none;
}

/* PINPOINT */
.base-bg .pin .stroke {
    stroke: rgba(var(--base-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.base-bg .pin .circle {
    fill: rgba(var(--base-highlight-text)) !important;
}
.base-bg .pin .fill {
    fill: white !important;
}

/* C1 */
.c1-bg .pin .stroke {
    stroke: rgba(var(--c1-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c1-bg .pin .circle {
    fill: rgba(var(--c1-highlight-text)) !important;
}
.c1-bg .pin .fill {
     fill: white !important;
}

/* C2 */
.c2-bg .pin .stroke {
    stroke: rgba(var(--c2-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c2-bg .pin .circle {
    fill: rgba(var(--c2-highlight-text)) !important;
}
.c2-bg .pin .fill {
    fill: rgba(var(--c2-bg-color1), 1) !important;
}

/* C3 */
.c3-bg .pin .stroke {
    stroke: rgba(var(--c3-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c3-bg .pin .circle {
    fill: rgba(var(--c3-highlight-text)) !important;
}
.c3-bg .pin .fill {
    fill: rgba(var(--c3-highlight)) !important;
}

/* C4 */
.c4-bg .pin .stroke {
    stroke: rgba(var(--c4-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c4-bg .pin .circle {
    fill: rgba(var(--c4-highlight-text)) !important;
}
.c4-bg .pin .fill {
    fill: white !important;
}

/* C5 */
.c5-bg .pin .stroke {
    stroke: rgba(var(--c5-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c5-bg .pin .circle {
    fill: rgba(var(--c5-highlight-text)) !important;
}
.c5-bg .pin .fill {
    fill:  rgba(var(--c2-bg-color1), 1) !important;
}

/* C6 */
.c6-bg .pin .stroke {
    stroke: rgba(var(--c6-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c6-bg .pin .circle {
    fill: rgba(var(--c6-highlight-text)) !important;
}
.c6-bg .pin .fill {
    fill: white !important;
}

/* C7 */
.c7-bg .pin .stroke {
    stroke: rgba(var(--c7-highlight-text)) !important;
    stroke-width: 2;
    fill: none;
}
.c7-bg .pin .circle {
    fill: rgba(var(--c7-highlight-text)) !important;
}
.c7-bg .pin .fill {
    fill: rgba(var(--c7-highlight)) !important;
}

.pin .fill {
    fill: transparent !important;
}