/* Root */
.cool-modern-vertical-timeline-body {
    --tw-ibxD-bg: #222;
    --font-size-base: 0.9rem;
    --tw-cbx-bd-top-width: 0px;
    --tw-cbx-bd-right-width: 0px;
    --tw-cbx-bd-bottom-width: 0px;
    --tw-cbx-bd-left-width: 0px;
    --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;
    --ctlb-icon-box-size:20px;  
}

/* 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: absolute;
    top: calc(-56px - var(--ctlb-container-top-border, 0px));
    left: 0px;
    width: 100%;
    margin: 0px;
    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;
}
 
/* Icons */
.ctlb-modern-vertical-timeline-tab-btn .dot ,
.ctlb-modern-vertical-timeline-tab-btn .timeline-block-icon{
    height: var(--ctlb-icon-box-size);
    width: var(--ctlb-icon-box-size);
    background-color: var(--ctlb-icon-bg);
    color: var(    --ctlb-icon-color);
    font-size: var(--ctlb-icon-size)!important;
    fill: currentColor;
    display: inline-block;
    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;
}
 

.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;
}

.twae-border-disabled .ctlb-modern-vertical-line {
    border: none !important;
}

/* 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);
}

.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) + 210px);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding-bottom: var(--spacing-sm);
}

/* Slideshow */
.ctlb-modern-vertical-timeline .ctlb-slideshow {
    position: relative;
    width: 100%;
}

.ctlb-modern-vertical-timeline .ctlb-slideshow .swiper-wrapper {
    display: flex;
    align-items: flex-start;
    transition-property: transform, height;
}

.ctlb-modern-vertical-timeline .ctlb-slideshow .swiper-slide {
    width: 100%;
    height: auto;
    position: relative;
}

/* 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;
}

.ctlb-modern-vertical-timeline-tab-btn .dot {
    position: absolute;
    left: 180px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}


.ctlb-modern-vertical-timeline .ctlb-inner-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--tw-line-width);
    background-color: var(--tw-line-filling-color);
    transition: height 0.4s ease;
}

/* Content */
.ctlb-modern-content-box {
    flex: 1;
    width: 60%;
    position: relative;
    text-align: var(--ctlb-content-alignment);
}

.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 {
    display: none;
}
.ctlb-modern-tab-content.active {
    display: block;
}
.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{
    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;
    aspect-ratio: 16 / 9 !important;
}
.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-tab-content .story-details{
    border: none;
    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);   
}

/* iframe itself */
.ctlb-modern-tab-content .story-details .story-content iframe {
    width: 100%;
}

.ctlb-modern-labels{
    line-height: var(--ctlb-date-line-height);
    white-space: pre-wrap;
    min-width: 1px;
}
.ctlb-modern-tab-content  .wp-block-embed__wrapper{
  max-height: 550px;
}
.ctlb-modern-vertical-timeline-tab-btn .timeline-block-icon img {height: var(--ctlb-icon-box-size);
    width: var(--ctlb-icon-box-size);
    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;
}

.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-titile-bt-spacing) var(--ctlb-title-left-spacing);
    padding: var(--ctlb-title-top-padding, 0px) var(--ctlb-title-right-padding, 0px) var(--ctlb-titile-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%;
}
.ctlb-modern-vertical-timeline-tab-btn.active .ctlb-modern-date {
    color: var(--ctlb-active-icon-bg);
    transition: all 0.3s ease;
}
/* Hover */
.ctlb-modern-vertical-timeline-tab-content:hover {
    border-radius: var(--tw-cbx-radius-hover);
}

/* Mobile */
@media (max-width: 700px) {
    .ctlb-modern-vertical-timeline-tab-content-box {
        display: none;
    }

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

    .ctlb-modern-vertical-timeline-tab-btn .dot {
        left: 0;
        top: 42px;
    }

    .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) + 0.2rem);
    }
      .ctlb-modern-vertical-timeline-tab-btn .ctlb-modern-date  {
        margin-top: 10px;
         margin-left: calc(var(--ctlb-icon-box-size) + 0.2rem);
    }
    .ctlb-modern-btn-wrapper .ctlb-modern-tab-content {
        display: none;
        margin: -4rem 0 -5rem  calc(var(--ctlb-icon-box-size) + 1.5rem);
    }
     .ctlb-modern-btn-wrapper .ctlb-modern-tab-content.active{
        display: block;
        height: auto !important;
        overflow: visible;
     }
    

}