* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}


body{
    /*background-image: url("../img/fondo.png");
    background-repeat: repeat;
    #D2D4DC plomos
    #f6f6f6 otro plomo*/
    background-color: #F2F2F2;
    font-family: 'Open Sans', sans-serif;
    color: black;
}



.txtju {text-align: justify;}.txtiz {text-align: left;}.txtde {text-align: right;}.txtce {text-align: center;}


.titulo {font-family: 'Open Sans', sans-serif; font-size: 32px;}
.titulo0 {font-family: 'Open Sans', sans-serif; font-size: 26px;}
.titulo1 {font-family: 'Open Sans', sans-serif; font-size: 20px;}
.titulo2 {font-family: 'Open Sans', sans-serif; font-size: 18px;}
.texto0 {font-family: 'Open Sans', sans-serif; font-size: 16px;}
.texto1 {font-family: 'Open Sans', sans-serif; font-size: 14px;}
.texto2 {font-family: 'Open Sans', sans-serif; font-size: 12px;}
.texto3 {font-family: 'Open Sans', sans-serif; font-size: 11px;}
.texto4 {font-family: 'Open Sans', sans-serif; font-size: 10px;}

.titulo-ra {font-family: 'Raleway', sans-serif; font-size: 32px;}
.titulo0-ra {font-family: 'Raleway', sans-serif; font-size: 26px;}
.titulo1-ra {font-family: "Raleway", sans-serif; font-size: 20px;}
.titulo2-ra {font-family: "Raleway", sans-serif; font-size: 18px;}
.texto0-ra {font-family: "Raleway", sans-serif; font-size: 16px;}
.texto1-ra {font-family: "Raleway", sans-serif; font-size: 14px;}
.texto2-ra {font-family: "Raleway", sans-serif; font-size: 12px;}
.texto3-ra {font-family: "Raleway", sans-serif; font-size: 11px;}
.texto4-ra {font-family: "Raleway", sans-serif; font-size: 10px;}

.titulo-ro {font-family: 'Roboto', sans-serif; font-size: 32px;}
.titulo0-ro {font-family: 'Roboto', sans-serif; font-size: 26px;}
.titulo1-ro {font-family: 'Roboto', sans-serif; font-size: 20px;}
.titulo2-ro {font-family: "Roboto", sans-serif; font-size: 18px;}
.texto0-ro {font-family: "Roboto", sans-serif; font-size: 16px;}
.texto1-ro {font-family: "Roboto", sans-serif; font-size: 14px;}
.texto2-ro {font-family: "Roboto", sans-serif; font-size: 12px;}
.texto3-ro {font-family: "Roboto", sans-serif; font-size: 11px;}
.texto4-ro {font-family: "Roboto", sans-serif; font-size: 10px;}

.titulo-jr {font-family: 'Paprika', sans-serif; font-size: 32px;}
.titulo0-jr {font-family: 'Paprika', sans-serif; font-size: 26px;}
.titulo1-jr {font-family: 'Paprika', cursive; font-size: 20px;}
.titulo2-jr {font-family: 'Paprika', cursive; font-size: 18px;}
.texto0-jr {font-family: 'Paprika', cursive; font-size: 16px;}
.texto1-jr {font-family: 'Paprika', cursive; font-size: 14px;}
.texto2-jr {font-family: 'Paprika', cursive; font-size: 12px;}
.texto3-jr {font-family: 'Paprika', cursive; font-size: 11px;}
.texto4-jr {font-family: 'Paprika', cursive; font-size: 10px;}
/*=========================================
[BOTONES]
==========================================*/

/*=======================================
LINEAS HORIZONTALES PARA SEPARAR*/
.borde-naranja{border-bottom:6px solid #ff9800;}.borde-morado-suave{border-bottom:6px solid #bea2cc;}.borde-morado-opaco{border-bottom:6px solid #eab2ff;}.borde-morado-claro{border-bottom:6px solid #f1cbff;}.borde-morado{border-bottom:6px solid #66308C;}.borde-verde{border-bottom:6px solid #4CAF50;}.borde-celeste{border-bottom:6px solid #428bca;}.borde-lila-suave{border-bottom:6px solid #f1cbff;}.borde-nrojo{border-bottom:6px solid #f4511e;}.borde-rosa{border-bottom:6px solid #ffd4e5;}
/*=======================================*/

.custom-file-label::after {
    content: "Buscar";
}

.btnsimple{
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    color: white;
    background-color: #66308C;
    padding: 2px;
    margin:  2px;
    cursor: pointer;
    width: auto;
}
.btnsimple:hover{background-color: #ffffff;color: black;}

.btnnormal {
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    color: white;
    background-color: #66308C;
    border-radius: 4px;
    padding: 8px;
    margin:  2px;
    cursor: pointer;
    width: auto;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
}
.btnnormal:hover{background-color: #ffffff;color: black;}


.btnpildora {
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #66308C;
    color: #fff; /* Text color */
    padding: 8px; /* Some padding */
    border-radius: 15px; /* Rounded corners */
    font-size: 14px; /* Increase font size */
    font-family: "Raleway", sans-serif;
    margin-top: 8px;
    margin-bottom: 8px;
    cursor: pointer;
}

.colorwasap{background-color: #4dc247;}
.colorface{background-color: #3b5998;}


.btnCancelar, .btnAceptar, .btnRegistrar {
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    color: white;
    border-radius: 0;
    /*padding:  14px 20px;*/
    padding-top: 10px;
    padding-bottom: 12px;
    margin: 4px 0;
    cursor: pointer;
    width: 100%;
    opacity: 1;
}
.btnCancelar:hover, .btnAceptar:hover .btnRegistrar:hover{
    opacity:0.8;
}
/* Extra styles for the cancel button */
.btnAceptar {
    background-color: #4CAF50;
    /*background-color: #2196F3; /*Color Celeste*/
}
.btnCancelar {
    background-color: #f44336;
}
.btnRegistrar {
    background-color: #2196F3; /*Color Celeste*/  
}
/* Float cancel and signup buttons and add an equal width */
.btnCancelar, .btnAceptar, .btnRegistrar {
    float: left;
    width: 50%;
}

/*==========================================*/


/*==========================================*/
.bg-rosa {background-color: rgba(241,203,255, 0.3);}
.bg-rosa-o {background-color: rgb(241,203,255);}
.bg-rosa2 {background-color: rgba(255,212,229, 0.3);}
.bg-rosa2-o {background-color: rgb(255,212,229);}
.bg-grey {background-color: rgba(248,248,248, 0.7);}
.bg-blanco {background-color: rgba(255,255,255, 0.6);}
.bg-blanco-o {background-color: rgb(255,255,255);}
/*=======================================*/

/*=======================================*/
/*PIE DE PAGINA====================*/
footer{
    /*position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;*/
    color: black;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    
    background-color: #bea2cc;
    
    padding-top: 15px;
    padding-bottom: 15px;  
}


/*=======================================*/
.foto-cont {
    /*border: 1px solid #ffd700; */
    width: 118px; /* SIN MAX */
    height: 157px; /* SIN MAX */
    padding: 3px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 4px;
    border-radius: 3px ;
    background-color: #F0BF27;
}
.container-foto-img {
    width: 112px;
    height: 149px;
    overflow: hidden;
    position: relative;
    border-radius: 3px;
    /*background-color: #f6f6f6;*/
    /*background-color: black;*/
}
.container-foto-img > .cortarfoto {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    max-width: 152px;
    height: auto;
}
.container-foto-img > a .cortarfoto {
    position:absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    max-width: 152px;
    height: auto;
}


.filterDiv {
  display: none;
}
.show {
  display: block;
}


.column-card-2 {
  float: left;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  padding: 2px;
}

/*[CARD]========================================*/
.list_card {
    /*position: relative;*/
    display: block;
    text-align: center;
}
.column-emp {
    float: left;
    width: 20%;
    margin-left: auto;
    margin-right: auto;
    padding: 2px;
}
.card-emp {
    border: 1px solid #ccc;
    background-color: #fff;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border-radius: 8px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
}
.cont-card-emp {
    width: 100%;
    height: auto;
    padding: 10px;
    text-align: center;
}
/*.card-emp:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.5s;
}
/*=======================================*/


/*[Leyenda estadisticas]========================================*/
.leyenda {
    display: flex;
    flex-flow: row nowrap;
    width: auto;
    height: auto;
    box-sizing: border-box;
    align-items: center;
}
/*=======================================*/

/*ESTO ES PARA LAS TABLAS*/
table {
    border-collapse: unset; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

.Esti1 {
    border: solid #ccc 1px; /* Lineas de Bordes para toda la tabla*/
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px !important;;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;
}

.Esti1 tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
} 

.Esti1 thead {
    position: sticky;
    top: 0;
}

.Esti1 td, .Esti1 th {
    font-family: 'Roboto', sans-serif;
    /*border: 1px solid #4CAF50; /* */
    text-align: left;
    border-top: 1px solid #ccc;
}

.Esti1 td {
    font-size: 12px;
    padding: 5px;
}

.Esti1 th {
    font-family: 'Roboto', sans-serif;
    color: #2b2b2b;
    font-size: 12px;
    background-color: #dce9f9;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
    background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
    background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; 
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;  
    
    box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;  
    
    border: 1px solid #ccc;

    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 5px;
    padding-right: 5px;
}

.Esti1 td:first-child, .Esti1 th:first-child {
    border-left: none;
}

.Esti1 th:first-child {
    border-radius: 6px 0 0 0;
}

.Esti1 th:last-child {
    border-radius: 0 6px 0 0;
}

.Esti1 th:only-child{
    border-radius: 6px 6px 0 0;
}

.Esti1 tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.Esti1 tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}





/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*Estilo 2
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.Esti2 {
    /*border: solid #ccc 1px; /* Lineas de Bordes para toda la tabla*/
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px !important;;
    -webkit-box-shadow: 0 1px 1px #ccc; 
    -moz-box-shadow: 0 1px 1px #ccc; 
    box-shadow: 0 1px 1px #ccc;
}

.Esti2 tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}    

.Esti2 td {
    font-family: 'Roboto', sans-serif;
    /*border: 1px solid #4CAF50; /* */
    text-align: left;
    border-top: 1px solid #ccc;
    font-size: 12px;
    padding: 5px;
}


.Esti2 td:first-child, .Esti2 th:first-child {
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.Esti2 th:only-child{
    border-radius: 6px 6px 0 0;
}

.Esti2 tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.Esti2 tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*TABLAS SIN BORDES
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.Esti4 {
    border: none;
}
.Esti4 th {
    padding: 0px;   
}
.Esti4 td{
    padding: 0px;
}
/*=======================================*/

.Esti5 {
    background: #fff;
    border-collapse: unset;
    border: solid #ccc 1px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.2);*/
    box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
}

.Esti5 td{
    font-family: 'Roboto', sans-serif;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 10px;
    font-size: 12px;
}

.Esti5 tr:first-child td {
    border-top: none;
}
.Esti5 tr:first-child td:first-child {
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}
.Esti5 tr:first-child td:last-child {
    border-top: none;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}

.Esti5 tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;
    border-radius: 0 0 0 10px;
}

.Esti5 tr:last-child td:last-child {
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;
    border-radius: 0 0 10px 0;
}

/*Detalle Empresas======================================================*/
.Esti6 {
    background: #fff;
    border-collapse: unset;
    border: solid #ccc 1px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 8px;
    /*box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.2);*/
    box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
}

.Esti6 td{
    font-family: 'Roboto', sans-serif;
    border-top: 1px solid #ccc;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
}

.Esti6 tr:first-child td:first-child {
    border-top: none;
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}
.Esti6 tr:first-child td:last-child {
    border-top: none;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}

.Esti6 tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;
    border-radius: 0 0 0 10px;
}

.Esti6 tr:last-child td:last-child {
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;
    border-radius: 0 0 10px 0;
}

.Esti6:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.5s;
}

/*[Tabla con sin titulo]===============================*/
.Esti7 {
    background: #fff;
    border-collapse: unset;
    border: solid #ccc 1px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /*box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.2);*/
    box-shadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px;
}

.Esti7 tr:hover {
    background: #fbf8e9;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}

.Esti7 td{
    font-family: 'Roboto', sans-serif;
    border-top: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 10px;
    font-size: 12px;
}

.Esti7 tr:first-child td {
    border-top: none;
    border-left: 1px solid #ccc;
}
.Esti7 tr:first-child td:first-child {
    border-left: none;
    -moz-border-radius: 10px 0 0 0;
    -webkit-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}
.Esti7 tr:first-child td:last-child {
    border-top: none;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}

.Esti7 tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;
    border-radius: 0 0 0 10px;
}

.Esti7 tr:last-child td:last-child {
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;
    border-radius: 0 0 10px 0;
}
/*======================================================*/

.contabla{
    overflow: auto;
    padding-bottom: 4px;
    height: auto;
    text-align: center;
}
.contabla_semi{
    overflow: auto;
    max-height: 400px;
    height: auto;
    text-align: center;
}
.contabla_reg{
    overflow: auto;
    height: calc(100vh - 190px);
    text-align: center;
}


/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*BARRAS semicirculares
/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.progressbar-con {
    display: inline-block;
    max-width: 760px;
}
.progresscirculo{
    position: relative;
    margin: 4px;
    float: left;
    text-align: center;

}
.barOverflow{ /* Wraps the rotating .bar */
    position: relative;
    overflow: hidden; /* Comment this line to understand the trick */
    width: 180px; height: 90px; /* Half circle (overflow) */
    margin-bottom: -14px; /* bring the numbers up */
}
.bar{
    position: absolute;
    top: 0; left: 0;
    width: 180px; height: 180px; /* full circle! */
    border-radius: 50%;
    box-sizing: border-box;
    border: 12px solid #eee;     /* half gray, */
    border-bottom-color: #0bf;  /* half azure */
    border-right-color: #0bf;
}
/*=======================================*/

@media screen and (max-width:960px) {
    .column-emp {width: 25%;}
}

@media screen and (max-width:760px) {
    .column-emp {width: 33%;}
}

@media screen and (max-width: 680px) {
    .column-card-2 {width: 100%; padding: 0px;}
}

@media screen and (max-width: 640px) {
    .contabla_semi{max-height: 100%;}
}




@media screen and (max-width:585px) {
    .column-emp {width: 50%;}
}