/* Root */
.cool-modern-vertical-timeline-body {
    --font-size-base: 0.9rem;
    --spacing-xs: 0.4rem;
    --spacing-sm: 0.4rem;
    --spacing-md: 0.5rem;
    --spacing-lg: 2rem;
    --radius-sm: 0.3rem;
    --radius-md: 0.4rem;
    --radius-lg: 2px;
}

/* Main container */
.ctlb-modern-vertical-timeline-tab-container {
    display: flex !important;
    max-width: 1200px;
    margin-top: 25px;
}

.ctlb-modern-vertical-timeline-tab-container .ctlb-year-section {
    display: none;
}

.cool-modern-vertical-timeline-body .ctl_media_control {
    margin-block: 0;
    position: relative;
    top: auto;
    left: 0px;
    width: 100%;
    margin: 0 0 8px;
    z-index: 1;
    flex-wrap: wrap;
}

.cool-modern-vertical-timeline-body .ctl_media_control p {
    margin-right: 100% !important;
    width: auto;
    font-size: 14px !important;
    text-align: start;
    margin-block: 0px;
    font-weight: 600 !important;
    white-space: nowrap;
    height: 27px;
    border: 1px solid #ccc;
    border-bottom-width: 0px;
    padding-inline: 7px;
    border-radius: 8px 8px 0 0;
    background: #f5f5f5;
    margin-bottom: 0px !important;
}

.cool-modern-vertical-timeline-body .ctl_media_control button {
    width: calc(25.5% - 11px);
    height: 28px;
    background-color: white;
}

.cool-modern-vertical-timeline-body .timeline-block-add-story {
    margin-bottom: 80px;
    margin-top: 20px;
}

/* Icons */
.ctlb-modern-vertical-timeline-tab-btn .dot,
.ctlb-modern-vertical-timeline-tab-btn .timeline-block-icon {
    height: var(--ctlb-icon-box-size, 20px);
    width: var(--ctlb-icon-box-size, 20px);
    background-color: var(--ctlb-icon-bg);
    color: var(--ctlb-icon-color);
    font-size: var(--ctlb-icon-size) !important;
    fill: currentColor;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--ctlb-icon-box-radius, 50%);
}

.ctlb-modern-vertical-timeline-tab-btn .iconpicker-item {
    font-size: var(--ctlb-icon-size) !important;
    color: var(--ctlb-icon-color) !important;
    display: flex;
    align-items: center;
}

.ctlb-modern-vertical-timeline-tab-btn .active-dot {
    background: var(--ctlb-active-icon-bg);
}



.ctlb-modern-vertical-line {
    position: absolute;
    width: var(--ctlb-middle-line-size);
    background: var(--ctlb-line-color);
    border-width: 0px calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px);
    border-style: var(--tw-line-bd-style);
    border-color: var(--tw-line-bd-color);
    z-index: 1;
    color: var(--ctlb-line-filling-color);
    transition: all 0.4s ease;
}

body:not(.block-editor-page) .ctlb-line-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--ctlb-middle-line-size) / 2);
    display: block;
    width: var(--ctlb-middle-line-size);
    background-color: var(--ctlb-line-filling-color);
    z-index: 1;
    transition: height 0.4s ease;
}

/* Year header */
.ctlb-modern-year {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 30px;
    z-index: 2;
    user-select: none;
    height: 60px;
    flex-shrink: 0;
    margin-right: var(--spacing-md);
    font-size: var(--font-size-base);
    gap: 95px;
}

.ctlb-modern-yearSec {
    font-size: var(--font-size-base);
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--ctlb-year-text-color);
    background-color: var(--ctlb-year-box-color);
    border-radius: var(--radius-sm);
    width: fit-content;
    max-width: 120px;
}

.ctlb-modern-yearSec span #ctlbyearSelect {
    font-size: var(--font-size-base);
    letter-spacing: 0.5px;
    background-color: var(--ctlb-year-box-color);
    color: var(--ctlb-year-text-color);
    height: 1.5rem;
    width: fit-content;
    max-width: 110px;
    padding: 0;
    border: none;
    cursor: pointer;
    min-width: 70px;
    background: none;
    appearance: menulist !important;
}


.ctlb-modern-yearSec span #ctlbyearSelect:focus {
    padding: 0 !important;
    outline: none;
    border: none;
    box-shadow: none;
    border-radius: 1rem;
    background-color: var(--ctlb-year-box-color);
    color: var(--ctlb-year-text-color);
}

/* Scroll buttons */
.ctlb-scroll-btns {
    display: flex;
}


.ctlb-scroll-btns .ctlb-scroll-up,
.ctlb-scroll-btns .ctlb-scroll-down {
    height: 2rem;
    width: 2rem;
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-sm);
    background-color: var(--ctlb-icon-bg);
    color: var(--ctlb-icon-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.8;
}

.ctlb-scroll-btns .ctlb-scroll-up.disabled,
.ctlb-scroll-btns .ctlb-scroll-down.disabled {
    pointer-events: auto;
    cursor: not-allowed;
    filter: grayscale(80%);
}

/* Menu */
.ctlb-modern-vertical-tab-menu {
    width: calc(var(--ctlb-icon-box-size, 20px) + 280px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-bottom: var(--spacing-sm);
}

/* Tabs wrapper */
.ctlb-modern-btn-wrapper {
    margin-left: var(--spacing-md);
    height: calc(100% - 60px);
    padding-left: 10px;
    padding-right: 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5rem;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.ctlb-modern-btn-wrapper::-webkit-scrollbar {
    width: 0px;
    display: none;
}

/* Buttons */
.ctlb-modern-vertical-tab-menu button {
    text-align: left;
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    padding: 20px 20px 20px 15px;
    transition: background 0.3s ease;
    position: relative;
    z-index: 1;
    box-shadow: none;
    color: black;
}

.ctlb-modern-vertical-timeline-tab-btn {
    position: relative;
    padding: 20px 10px 20px 15px;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

.ctlb-modern-vertical-timeline-tab-btn .dot {
    position: absolute;
    left: calc(260px - (var(--ctlb-icon-box-size, 20px) / 2));
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.ctlb-modern-vertical-timeline-tab-btn .dot.ctlb-modern-has-icon {
    height: calc(var(--ctlb-icon-box-size, 20px) + 20px) !important;
    width: calc(var(--ctlb-icon-box-size, 20px) + 20px) !important;

    left: calc(260px - ((var(--ctlb-icon-box-size, 20px) + 20px) / 2)) !important;
}

/* Content */
.ctlb-modern-content-box {
    flex: 1;
    width: 60%;
    position: relative;
    text-align: var(--ctlb-content-alignment, left);
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 10px;
}


.ctlb-modern-tab-content {
    display: none;
    background-image: linear-gradient(to right,
            var(--tw-cbx-bg),
            var(--tw-cbx-bg-gradient));
}

.ctlb-modern-tab-content.active {
    display: block;
}

.ctlb-modern-content-box .ctlb-modern-tab-content {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.ctlb-modern-content-box .ctlb-modern-tab-content.active {
    position: relative;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

.ctlb-modern-tab-content.active .story-content p {
    color: var(--ctlb-sub-heading-color);
    font-size: var(--ctlb-sub-head-font-size);
    font-family: var(--ctlb-sub-head-font-family);
    font-weight: var(--ctlb-sub-head-font-weight);
    line-height: var(--ctlb-sub-head-line-height);
    margin: var(--ctlb-desc-top-spacing) var(--ctlb-desc-right-spacing) var(--ctlb-desc-bt-spacing) var(--ctlb-desc-left-spacing) !important;
    padding: var(--ctlb-desc-top-padding) var(--ctlb-desc-right-padding) var(--ctlb-desc-bt-padding) var(--ctlb-desc-left-padding);
}

.ctlb-modern-tab-content.active .story-content span a {
    color: var(--ctlb-sub-heading-color);
    text-decoration: none;
}

.ctlb-modern-tab-content.active .story-content img,
.ctlb-modern-tab-content.active .story-content .ctlb-block-video iframe,
.ctlb-modern-tab-content.active .story-content .wp-block-embed__wrapper iframe,
.ctlb-modern-tab-content.active .story-content video,
.ctlb-modern-tab-content.active .story-details .ctlb-block-video iframe,
.ctlb-modern-tab-content.active .story-details .wp-block-embed__wrapper iframe,
.ctlb-modern-tab-content.active .story-details .story-content iframe,
.ctlb-modern-tab-content.active .story-details video {
    position: unset;
    width: var(--ctlb-media-width, 100%);
    height: var(--ctlb-media-height, auto);
    margin: var(--ctlb-media-top-margin, 0px) var(--ctlb-media-right-margin, 0px) var(--ctlb-media-bottom-margin, 0px) var(--ctlb-media-left-margin, 0px);
    padding: var(--ctlb-media-top-padding, 0px) var(--ctlb-media-right-padding, 0px) var(--ctlb-media-bottom-padding, 0px) var(--ctlb-media-left-padding, 0px);
    border-width: var(--ctlb-media-top-border, 0px) var(--ctlb-media-right-border, 0px) var(--ctlb-media-bottom-border, 0px) var(--ctlb-media-left-border, 0px);
    border-style: solid;
    border-color: var(--ctlb-media-border-color, #D91B3E);
    max-width: calc(100% - var(--ctlb-media-right-margin, 0px) - var(--ctlb-media-left-margin, 0px));
    box-sizing: border-box;
    border-radius: var(--ctlb-media-border-radius, 0);
    aspect-ratio: 16 / 9 !important;
}

.ctlb-wrapper .ctlb-modern-tab-content .story-content {
    padding: var(--ctlb-container-top-padding, 5px) var(--ctlb-container-right-padding, 5px) var(--ctlb-container-bottom-padding, 10px) var(--ctlb-container-left-padding, 5px);
}

.ctlb-modern-labels {
    line-height: var(--ctlb-date-line-height);
    white-space: pre-wrap;
    min-width: 1px;
    position: relative;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ctlb-modern-tab-content .wp-block-embed__wrapper {
    max-height: 550px;
}

.ctlb-modern-tab-content .wp-block-embed__wrapper::before {
    display: none !important;
    padding-top: 0 !important;
}

.ctlb-modern-tab-content.active .story-content .wp-block-embed__wrapper,
.ctlb-modern-tab-content.active .story-details .wp-block-embed__wrapper {
    width: var(--ctlb-media-width, 100%);
    height: var(--ctlb-media-height, auto);
    max-width: calc(100% - var(--ctlb-media-right-margin, 0px) - var(--ctlb-media-left-margin, 0px));
    max-height: none;
}

.ctlb-modern-content-box .ctlb-block-video,
.ctlb-modern-content-box .wp-block-embed {
    display: flex;
    justify-content: var(--ctlb-content-alignment);
}

.ctlb-modern-vertical-timeline-tab-btn .timeline-block-icon img {
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    border-radius: var(--ctlb-icon-box-radius, 50%);
    object-position: center;
}


.ctlb-modern-tab-content .story-details {
    border-radius: calc(var(--ctlb-container-top-radius, 10px) - 2px) calc(var(--ctlb-container-right-radius, 10px) - 2px) calc(var(--ctlb-container-bottom-radius, 10px) - 2px) calc(var(--ctlb-container-left-radius, 10px) - 2px);
    overflow: hidden;
    background: var(--ctlb-container-bg-color, #fff);
    box-shadow:
        var(--ctlb-container-shadow-inset) var(--ctlb-container-shadow-x-axis, 0px) var(--ctlb-container-shadow-y-axis, 10px) var(--ctlb-container-shadow-blur, 40px) var(--ctlb-container-shadow-spread, 0px) var(--ctlb-container-shadow-color, rgba(0, 0, 0, 0.1));
    padding: 0px;
    border: 0px solid var(--ctlb-story-border-color);
    border-width: var(--ctlb-container-top-border, 1px) var(--ctlb-container-right-border, 1px) var(--ctlb-container-bottom-border, 1px) var(--ctlb-container-left-border, 1px);
}



.ctlb-modern-tab-content .story-details :where(.timeline-block_title, .ctlb-block-title) {
    font-size: var(--ctlb-head-font-size);
    font-family: var(--ctlb-head-font-family);
    font-weight: var(--ctlb-head-font-weight);
    line-height: var(--ctlb-head-line-height, calc(var(--ctlb-head-font-size) + 7px));
    color: var(--ctlb-heading-color);
    margin: var(--ctlb-title-top-spacing) var(--ctlb-title-right-spacing) var(--ctlb-title-bt-spacing) var(--ctlb-title-left-spacing);
    padding: var(--ctlb-title-top-padding, 0px) var(--ctlb-title-right-padding, 0px) var(--ctlb-title-bt-padding, 0px) var(--ctlb-title-left-padding, 0px);
}

.ctlb-modern-vertical-timeline-tab-btn .ctlb-modern-date {
    color: var(--ctlb-date-color);
    font-size: var(--ctlb-date-fontsize);
    font-family: var(--ctlb-date-font-family);
    font-weight: var(--ctlb-date-font-weight);
    transition: all 0.3s ease;
    max-width: 85%;
    overflow-wrap: break-word;
    word-break: break-word;
}

.ctlb-modern-vertical-timeline-tab-btn .ctlb-modern-subtitle {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 85%;
}

.ctlb-modern-vertical-timeline-tab-btn.active .ctlb-modern-date {
    color: var(--ctlb-active-icon-bg);
    transition: all 0.3s ease;
}

/* Mobile */
@media (max-width: 700px) {

    .ctlb-modern-vertical-tab-menu {
        width: 100vw;
        height: 100vh;
    }

    .ctlb-modern-vertical-timeline-tab-btn .dot {
        left: calc(10px - (var(--ctlb-icon-box-size, 20px) / 2));
        top: 42px;
    }

    .ctlb-modern-vertical-timeline-tab-btn .dot.ctlb-modern-has-icon {
        left: calc(10px - ((var(--ctlb-icon-box-size, 20px) + 20px) / 2)) !important;
    }

    .ctlb-modern-btn-wrapper {
        max-height: 800px;
    }

    .ctlb-modern-vertical-timeline-tab-container {
        margin: 0;
    }

    .ctlb-modern-vertical-timeline-tab-btn.active .ctlb-modern-date {
        margin-top: 10px;
        margin-left: calc(var(--ctlb-icon-box-size, 20px) + 0.2rem);
    }

    .ctlb-modern-vertical-timeline-tab-btn .ctlb-modern-date {
        margin-top: 10px;
        margin-left: calc(var(--ctlb-icon-box-size, 20px) + 0.2rem);
    }

    .ctlb-modern-btn-wrapper .ctlb-modern-tab-content {
        display: none;
        margin: -4rem 0 -5rem calc(var(--ctlb-icon-box-size, 20px) + 1.5rem);
    }

    .ctlb-modern-btn-wrapper .ctlb-modern-tab-content.active {
        display: block;
        height: auto !important;
        overflow: visible;
    }


}

.ctlb-new-design .ctlb-modern-tab-content .story-content {
    padding: var(--ctlb-container-top-padding, 22px) var(--ctlb-container-right-padding, 22px) var(--ctlb-container-bottom-padding, 22px) var(--ctlb-container-left-padding, 22px);
}


.ctlb-new-design .ctlb-modern-tab-content .story-details {
    border-radius: calc(var(--ctlb-container-top-radius, 22px) - 2px) calc(var(--ctlb-container-right-radius, 22px) - 2px) calc(var(--ctlb-container-bottom-radius, 22px) - 2px) calc(var(--ctlb-container-left-radius, 22px) - 2px);
    overflow: hidden;
    background: var(--ctlb-container-bg-color, #fff);
    box-shadow:
        var(--ctlb-container-shadow-inset) var(--ctlb-container-shadow-x-axis, 0px) var(--ctlb-container-shadow-y-axis, 10px) var(--ctlb-container-shadow-blur, 40px) var(--ctlb-container-shadow-spread, 0px) var(--ctlb-container-shadow-color, rgba(0, 0, 0, 0.1));
    padding: 0px;
    border: 0px solid var(--ctlb-story-border-color);
    border-width: var(--ctlb-container-top-border, 1px) var(--ctlb-container-right-border, 1px) var(--ctlb-container-bottom-border, 1px) var(--ctlb-container-left-border, 1px);
}


.ctlb-new-design .ctlb-modern-tab-content .story-details :where(.timeline-block_title, .ctlb-block-title) {
    font-size: var(--ctlb-head-font-size, 20px);
    font-family: var(--ctlb-head-font-family);
    font-weight: var(--ctlb-head-font-weight);
    line-height: var(--ctlb-head-line-height, 30px);
    color: var(--ctlb-heading-color);
    text-align: var(--ctlb-content-alignment, left);
    margin: var(--ctlb-title-top-spacing, 2px) var(--ctlb-title-right-spacing, 0px) var(--ctlb-title-bt-spacing, 0px) var(--ctlb-title-left-spacing, 0px);
    padding: var(--ctlb-title-top-padding, 0px) var(--ctlb-title-right-padding, 0px) var(--ctlb-title-bt-padding, 10px) var(--ctlb-title-left-padding, 0px);
}

.ctlb-new-design .ctlb-modern-tab-content.active .story-content p {
    margin: var(--ctlb-desc-top-spacing, 0px) var(--ctlb-desc-right-spacing, 0px) var(--ctlb-desc-bt-spacing, 0px) var(--ctlb-desc-left-spacing, 0px) !important;
    padding: var(--ctlb-desc-top-padding, 0px) var(--ctlb-desc-right-padding, 0px) var(--ctlb-desc-bt-padding, 0px) var(--ctlb-desc-left-padding, 0px);
    text-align: var(--ctlb-content-alignment, left);
    line-height: var(--ctlb-sub-head-line-height, 30px);
}

.ctlb-new-design .ctlb-modern-vertical-timeline-tab-btn.active .ctlb-modern-date {
    color: #F12945;
    transition: all 0.3s ease;
}

.ctlb-new-design .ctlb-modern-vertical-timeline-tab-btn .active-dot {
    background: var(--ctlb-active-icon-bg, #000000);
}

.ctlb-new-design .ctlb-modern-yearSec span option {
    background-color: #C7374B;
    color: var(--ctlb-year-text-color);
}