/* tabs */
/*.hs_tabs_header > ul {list-style: none;padding-left: 0;display: inline-flex;position: relative;}
.hs_tabs_header > ul li {position: relative;padding: 0 8px;padding-bottom: 8px;cursor: pointer;color: #fff;}
.hs_tabs_header > ul li.active {color: var(--e-brand-primary-50);}
.hs_tabs_header > ul li.active::after {content: '';display: block;width: 100%;height: 3px;background-color: var(--e-secondary-dark);position: absolute;left: 0;bottom: 0;}
.hs_tabs_header > ul li::after {content: '';display: block;width: 100%;height: 3px;background-color: var(--e-bg-dark);background-color: #fff;position: absolute;left: 0;bottom: 0;}
*/


/* hs tabs */
.hs_tabs_header > ul::-webkit-scrollbar-track {border-radius: 5px;}
.hs_tabs_header > ul::-webkit-scrollbar {}
.hs_tabs_header > ul::-webkit-scrollbar-thumb {}

.hs_tabs {max-width: 70%;}
.hs_tabs_header {margin-bottom: 15px;padding: 5px 0; padding-left: 0;}
.hs_tabs_header ul {display: inline-block;margin-bottom: 0;list-style: none;padding: 0px;}
.hs_tabs_header > ul {
    display: flex;grid-auto-flow: column;flex-wrap: nowrap;
    max-width: 100%;overflow-x: auto;padding-bottom: 15px;
}
.hs_tabs_header ul li {font-family: inter; padding: 8px 10px;text-transform: uppercase;font-weight: 600;font-size: 14px;color: var(--e-heading);display: inline-block;min-width: max-content;cursor: pointer;}
/*.hs_tabs_header > ul li::after {background-color: var(--e-heading) !important;}*/
.hs_tabs_header ul li.active {color: var(--e-brand-primary-50);position: relative;background-color: transparent;}
.hs_tabs_header ul li.active::after {content: '';display: block;border-bottom: 3px solid var(--e-secondary);border-left: initial !important;border-right: initial !important;width: 100%;min-height: 1px;position: absolute;bottom: -5px;left: 0;}

/* end hs_tabs*/

.hs_tabs_init.hs_tabs_initilized[data-direction="vertical"] {
    display:flex;
}
.hs_tabs_init.hs_tabs_initilized[data-direction="vertical"] .hs_tabs_header.clearfix {
    width: 30%;
}
.hs_tabs_init.hs_tabs_initilized[data-direction="vertical"] .hs_tabs_header > ul {
    flex-direction: column;
    align-items: unset;
}

/*==========================================================================
                cx_tab_style_underline 
========================================================================== */



html body .cx_tab_style_underline ul{
    gap:12px;
}

html body .cx_tab_style_underline .hs_tabs_header > ul {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    overflow: unset;
    padding-bottom: 0;
    border-bottom: 1px solid var(--grey-47)!important;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    width: auto;
}

html body .cx_tab_style_underline.hs_tabs_init.hs_tabs_initilized[data-direction="vertical"] .hs_tabs_header > ul {
    border-bottom: unset !important;
}

html body .cx_tab_style_underline ul li {

    border-bottom: 1px solid transparent !important;
    color: var(--text-53)!important;
    padding:0;
    margin:0;
    text-transform: capitalize;

}

html body .cx_tab_style_underline ul li h3 {margin:0 4px 12px;}

html body  .cx_tab_style_underline ul li.active {

    color: var(--brand-primary-50) !important;
    position: relative;
    overflow:visible !important;
    
}

html body .cx_tab_style_underline ul li.active::after{border-bottom: 4px solid var(--brand-primary-50)!important;z-index: 9;bottom: -2px;overflow: visible;}

/*==========================================================================
                tab style button 
========================================================================== */

.cx_tab_style_button .hs_tabs_header {
    padding: 0;
    margin-bottom: 16px;
}

.cx_tab_style_button ul {
    max-width: max-content;
    border: 1px solid var(--grey-47);
    padding: 0;
    overflow: unset;
    border-radius: var(--cx-radius-md);
    gap: 4px;
    background-color: var(--grey-45);
}

.cx_tab_style_button ul li {
    padding: 8px 12px;
    border: 1px solid transparent;
    text-transform: capitalize !important;
    color: var(--text-51);
    margin: -1px;
}

.cx_tab_style_button ul li.active, .cx_tab_style_button ul li:hover {
    border-radius: var(--cx-radius-md);
    border-color: var(--grey-48);
    background-color: var(--white-50);
    color: var(--primary-50);    
}

.cx_tab_style_button li > * {
    margin: 0;
}