/*********************************************
 * Tabs
**********************************************/
.vii-tabs__title {gap:10px var(--vii-gap-container);min-height:60px;}
.vii-tabs__title .flickity-viewport {overflow:visible;border-bottom:1px solid rgba(112, 112, 112, .2);}
.vii-tabs__title::-webkit-scrollbar {display:none;}
.vii-tabs__item {margin-right:40px;}

/* button in tab */
.vii-tabs__item button {padding:20px 10px;background:rgba(0, 0, 0, 0);}
.vii-tabs__item button:after {
    content:"";
    width:0;height:2px;
    position:absolute;bottom:0;left:0;
    transition:all 0.3s ease;
}

/* vc_row-has-fill */
.vc_row-has-fill .vii-tabs__content-item {
    padding:45px 45px 30px 45px;border-radius:8px;
    background-color:var(--vii-color-white);
}

/* flickity */
.vii-tabs__title.is-draggable .flickity-prev-next-button {
    --gradient-color:var(--vii-color-white);
    --flkt-border-w:0;

    height:100%;border-radius:0;
    top:0;bottom:0;transform:none;
    background:linear-gradient(to right, var(--gradient-color) 0%, rgba(238, 241, 245, 0) 200%);
}
.vii-tabs__title.is-draggable .flickity-prev-next-button::before {content:unset;}
.vii-tabs__title.is-draggable .flickity-prev-next-button.previous {left:0;}
.vii-tabs__title.is-draggable .flickity-prev-next-button.next {right:0;transform:scaleX(-1);}
.vii-tabs__title.is-draggable .flickity-prev-next-button[disabled="true"] {display:none;}

/* follow bg color */
.vii-bg-tertiary .vii-tabs__title.is-draggable .flickity-prev-next-button {
    --gradient-color:var(--vii-color-tertiary);
}

.vii-bg-light-gray .vii-tabs__title.is-draggable .flickity-prev-next-button {
    --gradient-color:var(--vii-color-light-gray);
}
/* hover, focus */
.vii-tabs__item button:hover,
.vii-tabs__item button:focus,
.vii-tabs__item button.active {color:var(--vii-color-primary);}

.vii-tabs__item button:hover:after,
.vii-tabs__item button:focus:after,
.vii-tabs__item button.active:after {width:100%;background-color:var(--vii-color-blue);}

/* fix cls */
.vii-tabs__content-item:not(:first-child) {
    position:absolute; top:0; left:0;
    opacity:0; visibility:hidden;
}

/*********************************************
 * Tabs Responsive
**********************************************/
@media screen and (max-width:768px) {
    .vc_row-has-fill .vii-tabs__content-item { padding:var(--vii-gap-container); }
}