/****************************************************************************
 * Navigation
 ****************************************************************************/
.tabs_wrapper .tab_nav_wrapper{
    margin: 0 0 1rem; font-size: 0;
    overflow-x: auto; overflow-y: hidden;
}
.tabs_wrapper .tab_nav{
    display: inline-block; margin: 0 0 1rem;
    white-space: nowrap; position: relative;    
}
.tabs_wrapper .tab_nav li{
    display: inline-block; padding: 0 .9375rem;
}
.tabs_wrapper .tab_nav li:first-child{ padding-left: 0;}
.tabs_wrapper .tab_nav li:last-child{ padding-right: 0;}

.tabs_wrapper .tab_nav li span{
    display: block; font-weight: 700; font-size: 1.25rem;
    color: #484848; cursor: pointer;
}
.tabs_wrapper .tab_nav li span.active{
    color: #484848;
}



/****************************************************************************
 * Slider
 ****************************************************************************/
.tabs_wrapper .tab_nav_slider{
    display: block; position: relative; height: .375rem;
    background-color: #CCCCCC; border-radius: .125rem;
    overflow: hidden; text-align: left; display: block;
}
.tabs_wrapper .tab_nav_slider .tab_nav_slider_needle{
    display: inline-block; background-color: var(--plus-ci-colour);
    border-radius: .25rem; height: .375rem;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    position: absolute; left: 0; top: 0;
}


/****************************************************************************
 * Remove Scrollbars
 ****************************************************************************/
.tabs_wrapper .tab_nav_wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.tabs_wrapper .tab_nav_wrapper::-webkit-scrollbar {
  display: none;
}

/****************************************************************************
 * Contents
 ****************************************************************************/
.tabs_wrapper .tab_contents .tab_content{
    opacity: 0; visibility: hidden; max-height: 0; overflow: hidden;
    -webkit-transition: opacity 1s ease, visibility 1s ease;
    -moz-transition: opacity 1s ease, visibility 1s ease;
    -ms-transition: opacity 1s ease, visibility 1s ease;
    -o-transition: opacity 1s ease, visibility 1s ease;
    transition: opacity 1s ease, visibility 1s ease;
}
.tabs_wrapper .tab_contents .tab_content.active{
    opacity: 1; visibility: visible; max-height: 40rem;
}

/* 
*implement elipses -lok
*/
.tabs_wrapper .tab_nav{
    width: 100%;
}
.tabs_wrapper .tab_nav li{
    max-width: 25%;
}
.tabs_wrapper .tab_nav li span{
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabs_wrapper .tab_title_lok{
    font-size: 110%;
    font-weight: bold;
}