.event-dark-timeline-section {
    position: relative;
    background-color: var(--section-outer-color);
}

.event-dark-timeline-section-inner {
    background-color: var(--section-inner-color);
    padding: 56px;
}

.event-dark-timeline-section .section-circle-top-left {
    transform: translate(-64%, -23%)
}

.z-index2 {
    position: relative;
    z-index: 2;
}

.event-dark .event-container-outer {
    position: relative;
    display: flex;
    align-items: flex-start;
}

.event-dark .timeline-date-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    align-items: center;
    /* position: absolute;
    top: 40px;
    left: 0; */
}

/* EVENT DARK PAGE TIMELINE SECTION */
.event-dark {
    --timeline-row-radius: 52px;
    --timeline-grey: #3D3D3D;
    --green: #07BC57;
    --purple: #8000FF;
    --time-text-color: #07BC57;
    --white60: rgba(255, 255, 255, 0.6);
    --white: rgba(255, 255, 255, 1);
    --white80: rgba(255, 255, 255, 0.8);
    --white70: rgba(255, 255, 255, 0.7);
    --radio-color: #3D3D3D;

    --bg-color-1: #000;
    --section-outer-color: #000;
    --section-inner-color: transparent;
    --line-dot-color: #3D3D3D;

    --marquee-speed: 20s;
}

.event-dark.theme-2 {
    --timeline-row-radius: 52px;
    --timeline-grey: rgba(0, 0, 0, 0.24);
    --green: #D4E000;
    --purple: #8000FF;
    --time-text-color: #000;
    --white60: #000;
    --white: #000;
    --white80: #000;
    --white70: #000;
    --radio-color: #fff;

    --bg-color-1: #FF8861;
    --section-outer-color: transparent;
    --section-inner-color: #FF8861;
    --line-dot-color: #3D3D3D;

    --marquee-speed: 20s;
}

.timeline-date-container .date-square {
    height: 94px;
    width: 94px;
    background-color: var(--purple);
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 50px;
    color: #ffffff;
}

.timeline-date-container .date-square-month {
    color: var(--white);
}

.timeline-date-container .date-square-day {
    color: var(--white80);
}

.time-list-container {
    width: 620px;
}

.timeline-row {
    display: flex;
    flex-direction: column;
}

.body-content-has-no-cards .timeline-row-header {
    border-bottom: none;
}

.timeline-row-header {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--timeline-grey);
    border-top: none;
    border-right: none;
    position: relative;
    padding-left: 1.5rem;
    padding-bottom: 40px;
    align-items: center;
    cursor: pointer;
    transition: all ease 0.3s;
}

.timeline-row-header::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: -2px;
    background-color: var(--bg-color-1);
    z-index: 2;
}

.time-list-container .timeline-row:first-child .timeline-row-header {
    padding-top: 64px;
}

/* .time-list-container .timeline-row.body-content-has-cards:not(.active) .timeline-row-header {
    padding-bottom: 25px;
} */

/* .time-list-container .timeline-row.body-content-has-cards.body-container-count-2:not(.active) .timeline-row-header {
    padding-bottom: 0;
} */

/* .time-list-container .timeline-row.body-content-has-cards.body-container-count-3:not(.active) .timeline-body-container:nth-child(3),
.time-list-container .timeline-row.body-content-has-cards.body-container-count-3:not(.active) .timeline-body-container:nth-child(4) {
    height: 0px;
}

.time-list-container .timeline-row.body-content-has-cards.body-container-count-4:not(.active) .timeline-body-container:nth-child(3),
.time-list-container .timeline-row.body-content-has-cards.body-container-count-4:not(.active) .timeline-body-container:nth-child(4),
.time-list-container .timeline-row.body-content-has-cards.body-container-count-4:not(.active) .timeline-body-container:nth-child(5) {
    height: 0px;
} */

.timeline-expand-btn {
    height: 28px;
    width: 28px;
    flex-shrink: 0;
    position: relative;
    border: 1px solid var(--white60);
    cursor: pointer;
    transition: border ease 0.3s;
}

.timeline-expand-btn::before {
    content: ' ';
    position: absolute;
    height: 11px;
    width: 1px;
    background-color: var(--white60);
    left: calc(50% - 0.5px);
    top: 50%;
    transform: translateY(-50%);
    transition: height ease 0.3s;
    transform-origin: center;
}

.timeline-expand-btn::after {
    content: ' ';
    position: absolute;
    background-color: var(--white60);
    height: 1px;
    width: 11px;
    left: 50%;
    transform: translateX(-50%);
    top: calc(50% - 0.5px);
    transition: transform ease 0.3s, background-color ease 0.3s;
}

.event-dark-timeline-section .timeline-title {
    color: var(--white70);
    font-size: 18px;
    margin: 8px 0 0;
}

.event-dark-timeline-section .active .timeline-title {
    color: var(--white);
}

.timeline-time {
    color: var(--time-text-color) !important;
    margin: 0;
    position: relative;
}

.timeline-time::after {
    content: ' ';
    position: absolute;
    left: -1.5rem;
    /* same as padding-left of timeline-row */
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--radio-color);
    outline: 1.5px solid var(--radio-color);
    outline-offset: 3px;
    transition: all ease 0.3s;
}

.timeline-body-container {
    padding-top: 0;
    transition: all ease 0.3s;
    border: 1px solid var(--timeline-grey);
    border-bottom: none;
    border-right: none;
    position: relative;
    transition: all ease 0.3s;
}

.timeline-body-content-container {
    height: 0px;
    overflow: hidden;
    transition: height ease 0.3s, opacity linear 0s;
    position: relative;
    display: inline-flex;
    column-gap: 1.5rem;
    top: -33px;
    z-index: 3;
    opacity: 0;
    /* padding-left: 70px; */
}

/* .timeline-body-cards-container  {
    display: inline-flex;
    column-gap: 1.5rem;
    padding-left: 70px;
    overflow: hidden;
    transition: height ease 0.3s, opacity linear 0s;
} */
.active .timeline-body-content-container {
    transition: height ease 0.3s, opacity linear 0.2s 0.1s;
    opacity: 1;
}

.active .timeline-time::after {
    background-color: var(--purple);
    outline: 1.5px solid var(--purple);
    outline-offset: 5px;
}

.active .timeline-expand-btn {
    border-color: var(--purple);
}

.active .timeline-expand-btn::after {
    background-color: var(--purple);
}

.active .timeline-expand-btn::before {
    background-color: var(--purple);
    height: 0px;
    background-color: var(--purple);
}

.active.has-body-container:not(.body-content-has-no-cards) .timeline-row-header {
    border-bottom-left-radius: var(--timeline-row-radius);
    padding-bottom: 54px;
}

.active .timeline-body-container {
    border-top-left-radius: var(--timeline-row-radius);
    /* padding-top: var(--timeline-row-radius); */
    /* margin-bottom: -40px; */
    margin-bottom: 0;
    margin-top: -1px;
}

.active .timeline-body-container.not-first {
    border-bottom-left-radius: var(--timeline-row-radius);
}

.active .timeline-body-container.not-first:last-child {
    border-bottom-left-radius: 0;
}

.timeline-body-container::after {
    left: var(--timeline-row-radius);
}

.active.has-body-container .timeline-row-header::after {
    left: var(--timeline-row-radius);
    width: calc(100% - var(--timeline-row-radius));
}

.timeline-horizontal-line {
    height: 1px;
    width: 0;
    top: -1px;
    background-color: var(--timeline-grey);
    left: var(--timeline-row-radius);
    position: absolute;
    transition: width 0s linear;
    z-index: 2;
}

.active .timeline-horizontal-line {
    width: calc(100% - (var(--timeline-row-radius) + 10px));
    transition: width 0.8s ease-out 0.16s;
}

.timeline-horizontal-line::after {
    position: absolute;
    content: ' ';
    height: 7px;
    width: 7px;
    border-radius: 3.5px;
    background-color: var(--line-dot-color);
    right: 0;
    top: 50%;
    transform: translateY(-50%) scale(0);
    transition: transform 0s linear;
}

.active .timeline-horizontal-line::after {
    transition: transform 0.3s ease-out .96s;
    transform: translateY(-50%) scale(1);
}

.timeline-speaker-image-container {
    height: 63px;
    width: 63px;
    margin-bottom: 10px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--timeline-grey);
}

.timeline-speaker-image-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.timeline-speaker-card {
    position: relative;
    max-width: 160px;
    flex: 1;
}

.timeline-speaker-card .speaker-name {
    margin: 0;
    min-height: unset;
    line-height: 1.2;
    margin-bottom: 6px;
    color: var(--white);
    font-size: 18px;
}

.timeline-speaker-card .speaker-destination {
    min-height: unset;
    color: var(--white70);
    font-size: 14px;
}

.active .timeline-body-container {
    border-bottom-left-radius: var(--timeline-row-radius);
    border-bottom: 1px solid var(--timeline-grey);
    margin-bottom: 0;
    padding-bottom: 30px;

}

.active .timeline-body-container:last-child {
    border-bottom: unset;
    border-bottom-left-radius: unset;
    padding-bottom: 10px;
}

.timeline-body-container.first,
.timeline-body-container.not-first {
    transition: all ease 0.3s, border linear 0s, left ease 0.1s;
}

.timeline-body-container::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    bottom: -1px;
    background-color: var(--bg-color-1);
    z-index: 2;
    left: 0;
}

.active .timeline-body-container::after {
    left: var(--timeline-row-radius);
    width: calc(100% - var(--timeline-row-radius));
}

.active .timeline-body-container:last-child::after {
    content: none;
}

.event-dark-timeline-section .grid-lines {
    position: absolute;
    left: 20px;
    bottom: 40px;
    transform: scale(-1);
    opacity: 0.9;
}

.grid-lines-container {
    position: absolute;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    overflow: hidden;
}

.active.timeline-row:last-child .timeline-body-container {
    margin-bottom: 0;
}

.timeline-description-container {
    padding-top: .5rem;
    overflow: hidden;
    width: 90%;
    transition: height ease 0.3s, opacity linear 0.2s 0.1s;
}

.event-dark .timeline-description-container p {
    color: var(--white70);
    font-weight: 300;
}

.theme-2 .timeline-speaker-image-container {
    border: none;
}

@media (max-width: 767.98px) {
    .event-dark .timeline-date-container {
        position: static;
        top: unset;
        left: unset;
    }

    .event-dark .event-container-outer {
        flex-direction: column;
    }

    .event-dark-timeline-section-inner {
        padding: 24px;
        padding-bottom: 0;
    }
}