﻿/*TABS SEGMENTOS*/
/* .separator{
    border-left: 1px solid #c7c7c7;
    height: 43px;
} */
#segmentos-banca{
    padding: 120px 0px 120px 0px;    
}
.segmentos-banca #segmentos-tabs-contenedor{
    max-width: 25%;
    padding: 5px 0px 5px 0px;
}
.segmentos-banca #lista-segmentos{    
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    background-color: #f3f3f3;
    border-radius: 30px;
    padding: 10px;
    animation: btnFadeIn 0.4s ease-in forwards;
}
.segmentos-banca #lista-segmentos .segm-btn{ 
    cursor: pointer;  
    background-color: transparent; 
    width: 135px;
    padding: 15px;
    border-radius: 50px;    
    text-transform: uppercase;
    text-align: center;
    color: #012169;
    transition: 0.2s ease-in-out;    
}
@keyframes btnFadeIn{
    from{
        opacity: 0;
        transform: translateY(15px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}
.segmentos-banca #lista-segmentos .segm-btn:hover{   
    background-color: rgb(196, 196, 197);
}
.segmentos-banca #lista-segmentos .segm-btn a{   
    color: #012169;
}
.segmentos-banca #lista-segmentos .segm-btn.segm-active{
    background-color: #00C1D5;
    /* background-color: #012169; */
}
.segmentos-banca #lista-segmentos .segm-btn.segm-active:hover{
    background-color: #00c0d5b0;
    /* background-color: #012577; */
}
.segmentos-banca #lista-segmentos .segm-btn.segm-active>a{
    color: #FFF;
}
/*END TABS SEGMENTOS*/

/*Listado de tabs de los segmentos*/
.tabs-Section{
    padding-bottom: 0px;
}
.tabs-Section .nav li {
    padding: 0px 2px 0px 6px;
    cursor: pointer;
}
.tabs-Section .nav li a {    
    cursor: pointer;
    padding: 6px 30px 6px 30px;
    color: #012169;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tabs-Section .nav>li>a:focus,
.tabs-Section .nav>li>a:hover {
    background-color: rgb(243, 250, 255);
    border-radius: 22px;        
}
.nav-tabs>li>a>img {
    width: 60px;
    height: 60px;
    padding: 10px;
}
.nav-tabs{
    padding-bottom: 8px;
}
.tabs-Section .tab-content .tab-panel ul {
    display: flex;
    justify-content: space-evenly;    
}
.tabs-Section .nav-tabs>li.active>a::after{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #012169;
}
.tabs-Section .nav-tabs>li.active>a,
.tabs-Section .nav-tabs>li.active>a:focus,
.tabs-Section .nav-tabs>li.active>a {
    color: #012069;
    background-color: rgb(238, 245, 252);
    border-radius: 22px;
    box-shadow: -1px 5px 9px 3px rgb(199 193 193 / 12%) inset;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

@media (max-width:992px) {
    #segmentos-banca{
        padding: 30px 0px 50px 0px;    
    }
}
@media (min-width: 768px) and (max-width:992px) {    
    .segmentos-banca #segmentos-tabs-contenedor {
        max-width: 40%;        
    }    
}
@media (max-width: 767px) {
    /* .tabs-Section {
        pad
        ding-bottom: 5em;
    } */    
    .segmentos-banca #segmentos-tabs-contenedor {
        max-width: 55%;        
    }
    .tabs-Section .nav>li>a {
        padding-left: 10px;
        padding-right: 10px;
        line-height: 15px;
    }
    .tabs-Section .tab-content{
        overflow-x: auto;              
        margin: 0px 10px 0px 10px; 
    }
    .tabs-Section .tab-content::-webkit-scrollbar {
      display: none;
    }
    .tabs-Section .tab-content .tab-panel nav li.active img {
        height: 60px;
        padding-bottom: 5px;
        margin: 0 auto;
    }
    .tabs-Section .nav>li>a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        transition: ease-in-out 0.3s;
    }
    .tabs-Section .nav-tabs>li.active>a,
    .tabs-Section .nav-tabs>li.active>a:focus,
    .tabs-Section .nav-tabs>li.active>a {
        color: #012069;
        background-color: aliceblue;
        border-radius: 25px;
        box-shadow: -1px 5px 9px 3px rgb(199 193 193 / 12%) inset;
    }
}
/*End listado de tabs de los segmentos*/