/* Tabs */
.tabs {position: relative; overflow: hidden; background: #CCD1D9; padding: 5px 0;}

.tabs.tabs-open {}
.tabs.tabs-close {}

/* Tabs Botonera */
.tabs > ul.nav.nav-tabs {background: #CCD1D9; z-index: 1; border: 0; padding: 0 5px; display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.tabs > ul.nav.nav-tabs > li {float: none; display: block; position: relative; margin: 0;-ms-flex-preferred-size: 0;flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}

/* Tabs Botonera: Boton */
.tabs > ul.nav.nav-tabs > li > a {margin: 0 1px 0; padding: 10px 10px; color: #6c757d; border: 0;text-align: center; position: relative;font-size: 12px;}

.tabs > ul.nav.nav-tabs > li > a:focus,
.tabs > ul.nav.nav-tabs > li > a:hover {border: 0; background: rgba(255, 255, 255, 0.6);}

.tabs > ul.nav.nav-tabs > li.active > a, 
.tabs > ul.nav.nav-tabs > li.active > a:hover, 
.tabs > ul.nav.nav-tabs > li.active > a:focus  {border: 0; color: #343a40;background: #FFF;}

/* Tabs Botonera: Boton Linea */
.tabs > ul.nav.nav-tabs > li > a:before {content: "";display: block;position: absolute;top: 2px; left: -2px; bottom: 2px; border-left: 2px solid rgba(134, 133, 133, 0.3);}
.tabs > ul.nav.nav-tabs > li:first-child > a:before {display: none;}

.tabs > ul.nav.nav-tabs > li > a:hover:before,
.tabs > ul.nav.nav-tabs > li.active > a:before, 
.tabs > ul.nav.nav-tabs > li.active > a:hover:before, 
.tabs > ul.nav.nav-tabs > li.active > a:focus:before,

.tabs > ul.nav.nav-tabs > li.active + li > a:before,
.tabs > ul.nav.nav-tabs > li:hover  + li > a:before,
.tabs > ul.nav.nav-tabs > li:focus  + li > a:before

{display: none;}

/* Tabs Botonera Close Boton */
.tabs.tabs-close > ul.nav.nav-tabs {}
.tabs.tabs-close > ul.nav.nav-tabs > li > a {-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;} 

.tabs.tabs-open > ul.nav.nav-tabs > li > a {-webkit-border-radius: 4px;-webkit-border-bottom-right-radius: 0px;-webkit-border-bottom-left-radius: 0px;-moz-border-radius: 4px;-moz-border-radius-bottomright: 0px;-moz-border-radius-bottomleft: 0px;border-radius: 4px;border-bottom-right-radius: 0px;border-bottom-left-radius: 0px;}

/* Tabs Botonera: Boton Icono */
.tabs > ul.nav.nav-tabs > li > a > .fa {color: #abb1b9;}

.tabs > ul.nav.nav-tabs > li.active > a > .fa, 
.tabs > ul.nav.nav-tabs > li.active > a:hover > .fa, 
.tabs > ul.nav.nav-tabs > li.active > a:focus > .fa {color: #7f8386;}

/* Tabs Botonera: Boton Icono cerrar */
.tabs > ul.nav.nav-tabs > li > a > .btn-close {display: none; position: absolute; font-size: 14px; right: 10px; top: 13px; cursor: pointer;}

.tabs > ul.nav.nav-tabs > li.active > a > .btn-close, 
.tabs > ul.nav.nav-tabs > li.active > a:hover > .btn-close, 
.tabs > ul.nav.nav-tabs > li.active > a:focus > .btn-close {display: block; color: #ddd;}

.tabs > ul.nav.nav-tabs > li.active > a > .btn-close:hover, 
.tabs > ul.nav.nav-tabs > li.active > a:hover > .btn-close:hover, 
.tabs > ul.nav.nav-tabs > li.active > a:focus > .btn-close:hover {color: #bdbdbd;}

/* Tabs Content */
.tabs > .tab-content {background: #FFF; padding: 0;}
.tabs > .tab-content > .tab-pane {}

/* Tabs Content: Tabla */
.tabs > .tab-content > .tab-pane > .table {margin-bottom: 0;}
.tabs > .tab-content > .tab-pane > .table > thead > tr:last-child > th {border-bottom: 0;}

/* Tabs Content: Panel body */
.tabs > .tab-content > .tab-pane > .panel-body {padding: 15px;}

/* Tabs Content: p */
.tabs > .tab-content > .tab-pane > p,
.tabs > .tab-content > .tab-pane > .panel-body > p {margin: 0; padding: 15px 15px 0;}
.tabs > .tab-content > .tab-pane > p:last-child,
.tabs > .tab-content > .tab-pane > .panel-body > p:last-child {padding-bottom: 15px;} 

/* Tabs Content: List Group */
.tabs > .tab-content > .tab-pane > .list-group {margin-bottom: 0;}
.tabs > .tab-content > .tab-pane > .list-group > .list-group-item {border-left: 0; border-right: 0;}
.tabs > .tab-content > .tab-pane > .list-group > .list-group-item:first-child {border-top: 0; border-top-right-radius: 0px; border-top-left-radius: 0px;}
.tabs > .tab-content > .tab-pane > .list-group > .list-group-item:last-child  {border-bottom: 0; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}

/* Tabs Mobile */
@media (max-width: 767px){

    .tabs.tabs-open > ul.nav.nav-tabs {padding: 3px 3px 0;}
    .tabs.tabs-close > ul.nav.nav-tabs {padding: 3px;}

    .tabs > ul.nav.nav-tabs > li > a,
    .tabs.tabs-open > ul.nav.nav-tabs > li > a,
    .tabs.tabs-close > ul.nav.nav-tabs > li > a {margin: 0; font-size: 10px; padding: 10px 2px;}

    .tabs > ul.nav.nav-tabs > li > a:before {display: none;}

}