/* SBCCH Socios custom CSS */
/* Powered by Hiva */
:root {
  --color1: #2196f3;
  --color2: #00BCD4;
  --color3: #4d4d4d;
  
}

html {
  font-size: 90% !important;
}
a {
    letter-spacing: -0.025rem;
    color: #00b6d3;
}
body {
    padding-top: 1rem !important;
}
p {
    line-height: 1.3em !important;
}
.text-withe {
    color: #fff !important;
}
.navbar-vertical .navbar-brand>img, .navbar-vertical .navbar-brand-img {
    max-height: 80px;
}
.sidenav-header {
    height: 120px;
}
.sidenav .navbar-brand {
    padding-top: 1rem;
}
.campo-requerido {
    font-weight: bold;
    color: red;
    margin-left: 0.5rem;
}
.tabla-asociados {
    font-size: 0.75rem !important;
}
.btn-pequenno {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    color: #fff !important;
    font-size: 0.75rem;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.tabla-asociados .btn-pequenno {
    font-size: 75%;
}
.btn-default {
    color: #333 !important;
    font-weight: 700;
}
.btn-salir {
    display: inline-block !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 10px !important;
    color: #fff !important;
    border-radius: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0px !important;
    border: 0px !important;
}
.btn-rojo {
    background: #f44336;
}
.btn-verde {
    background: #82d616;
}
.btn-celeste {
    background: #17c1e8;
    color: #fff !important;
}
.btn-amarillo {
    background: #ffc107;
}
.btn-gris {
    background: #e3e3e3;
    color:#000 !important;
}
.btn-gris:hover {
    color:#fff !important;
}
.btn-pequenno:hover,
.btn-salir:hover {
    background: #333;
}
.btn-default:hover {
    background: #e3e3e3 !important;
}
.disable-btn,
.disable-btn:hover {
    background: #e3e3e3 !important;
    color:#000 !important;
}
/*****/
.form-control {
    padding: 0.5rem 0.75rem !important;
}
/**/
button.dt-button {
    padding: 0.2rem 0.5rem !important;
    font-size: 80%;
    background: #82d616 !important;
    color: #fff !important;
    border: 0px !important;
}
button.dt-button:hover {
    background: #333 !important;
}
table.table tr > th {
    color: #000 !important;
    font-size: 0.75rem !important;
}
table#tabla tr > th {
    border-bottom: 1px solid #000;
}
.dataTables_filter {
        display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}
.dataTables_info {
        font-size: 0.7rem;
    background: #e3e3e3;
    padding: 0.2rem 0.5rem !important;
    border-radius: 5px;
    display: inline-block;
    margin-top: 1rem;
}
#tabla_filter input {
    margin-left: 1rem;
}
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
    opacity: 1 !important;
}



.sidenav {
    z-index: 1040 !important;
}
table.dataTable thead>tr>th.sorting:before, table.dataTable thead>tr>th.sorting:after, table.dataTable thead>tr>th.sorting_asc:before, table.dataTable thead>tr>th.sorting_asc:after, table.dataTable thead>tr>th.sorting_desc:before, table.dataTable thead>tr>th.sorting_desc:after, table.dataTable thead>tr>th.sorting_asc_disabled:before, table.dataTable thead>tr>th.sorting_asc_disabled:after, table.dataTable thead>tr>th.sorting_desc_disabled:before, table.dataTable thead>tr>th.sorting_desc_disabled:after, table.dataTable thead>tr>td.sorting:before, table.dataTable thead>tr>td.sorting:after, table.dataTable thead>tr>td.sorting_asc:before, table.dataTable thead>tr>td.sorting_asc:after, table.dataTable thead>tr>td.sorting_desc:before, table.dataTable thead>tr>td.sorting_desc:after, table.dataTable thead>tr>td.sorting_asc_disabled:before, table.dataTable thead>tr>td.sorting_asc_disabled:after, table.dataTable thead>tr>td.sorting_desc_disabled:before, table.dataTable thead>tr>td.sorting_desc_disabled:after {
    font-size: 1rem !important;
}
/**/
/*.bloq-titulo {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items:flex-start;
    margin-bottom: 1rem;
}*/
.bloq-titulo {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: center;
    margin-bottom: 1rem;
}
.bloq-titulo h2 {
    margin-bottom: 0px;
    font-size: 1.9rem;
    display: block;
    width: 100%;
}
.bloq-titulo h3 {
    margin-bottom: 0px;
    font-size: 1.3rem;
    display: block;
    width: 100%;
    color: var(--color1);
}
.navbar>.container-fluid {
    align-items: flex-start !important;
}
.breadcrumbs {
    max-width: 80%;
}
@media screen and (max-width: 768px) 
{
    .bloq-titulo h2 {
        font-size: 1.5rem;
    }
    .bloq-titulo h3 {
        font-size: 1rem;
    }   
    ol.breadcrumb a,
    ol.breadcrumb li {
        font-size: 0.7rem !important;
    } 
}
.btn-dashboard {
    background: #17c1e8;
    border-radius: 5px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.btn-dashboard i {
    margin-right: 0.3rem;
}
.btn-dashboard-2 {
    background: #00718b;
}
.btn-dashboard h3 {
    color: #fff !important;
    text-align: center;
    width: 100%;
    display: block;
    font-size: 1.2rem;
    margin-bottom: 0px !important;
    line-height: 1.3em !important;
}
.btn-dashboard:hover {
    background: #0cafd5;
}
.btn-dashboard-2:hover {
    background: #004352;
}
.texto_plano {
    border-bottom: 1px solid #e3e3e3;
    padding-bottom: 0.3rem;
}
.bg-gray-100 {
    background-color: #efefef !important;
}
label, .form-label {
    margin-left: 0px !important;
    display: block;
}
.per-20 td {
    width: 25% !important;
    max-width: 25% !important;
}
.titulos-label {
    display: inline-block;
    background:var(--color1);
    border-radius: 5px;
    padding: 3px 0.8rem;
    color: #fff;
}
@media screen and (max-width: 1366px) {
    .btn-dashboard h3 {
        font-size: 1.1rem;
    }
}
@media screen and (max-width: 1200px) {
    .btn-dashboard h3 {
        font-size: 1rem;
    }
}
/**/
.navbar-vertical .navbar-nav>.nav-item .nav-link.active {
    color: var(--color3);
    background-color: #fff;
}
.sidenav {
    background-color:var(--color1) !important;
}
.sidenav.vistas_asociado {
    background-color:#5f5c62 !important
}
.sidenav p {
    color: #fff;
}
.navbar-vertical .navbar-nav .nav-link {
    color: #fff;
}
/*****/
.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: auto !important;
}
/**/
.img_socio {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center;
    display: block;
}
/**/
.bloq-descargar {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
}
.bloq-icon-descargar {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.4);
    background: #30287c;
    color: #fff !important;
    margin-right: 1rem;
}
.bloq-icon-descargar i {
    font-size: 1.7rem;
}
.bloq-icon-descargar:hover {
    background: #17c1e8
}
.bloq-text-descargar {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
}
/******/
.btn-plataforma {
    text-decoration: none !important;
    font-size: 0.8rem;
    border-radius: 4px;
    padding: 0.2rem 0.5rem;
    color: #000 !important;
    background: #fff;
    text-align: center;
    position: absolute;
    right: 2rem;
    bottom: 2rem;
}
.btn-plataforma:hover {
    box-shadow: 1px 2px 3px rgba(0,0,0,0.3);
}