* {
    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: #f6f6f6;
    font-family: 'Open Sans', sans-serif;
    color: black;
}



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

.titulo1 {font-family: 'Open Sans', sans-serif; font-size: 20px !important;}
.titulo2 {font-family: 'Open Sans', sans-serif; font-size: 18px !important;}
.texto1 {font-family: 'Open Sans', sans-serif; font-size: 14px !important;}
.texto2 {font-family: 'Open Sans', sans-serif; font-size: 12px !important;}

/*=========================================
[BOTONES]
==========================================*/
/*=======================================*/

.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-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 !important;
    font-family: "Raleway", sans-serif;
    font-size: 16px !important;
    
    background-color: #bea2cc;
    
    padding-top: 15px;
    padding-bottom: 15px;  
}
/*=======================================*/

/*=======================================*/
/*==INPUT====================*/
.input-simple {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    padding: 4px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 2px; /* Add a top margin */
    margin-bottom: 2px; /* Bottom margin */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    outline: none;
}

.input-ingreso{
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    padding: 8px; /* Some padding */ 
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #f6f6f6;
    /*border-radius: 25px;*/
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 6px; /* Bottom margin */
    resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
    text-align: center;
    outline: none;
}

input-ingreso:required:invalid, input-simple:required:invalid { 
    outline: none;
    box-shadow: none !important; 
    border-top: none;
    border-left: none;
    border-right: none;
}
.input-ingreso:focus {border-bottom: 2px solid #2196F3;}
.input-simple:focus {background-color: #ffe5f4;outline: none;}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

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

/*=======================================*/
/*ESTO ES PARA LAS TABLAS*/

table {
    border-collapse: unset; /* IE7 and lower */
    border-spacing: 0;
    width: 99%;
    margin-left: 1px;
    margin-right: 1px;
}

.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 {
    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;  

    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: solid #ccc 1px; /* Lineas de Bordes para toda la tabla*/
    border-radius: 6px;
    /*background-color: #f1cbff; /*333 darkmode*/
}

.Esti4 th {
    /*font-family: "Raleway", sans-serif;
    color: #fff;*/
    font-family: 'Roboto', sans-serif;
    font-size: 22px;
    padding: 10px;   
}
.Esti4 td{
    font-family: 'Roboto', sans-serif;
    border-bottom: none;
    padding: 2px;
    font-size: 12px;
}
.Esti4 td:first-child {
    border-left: none;
}

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

.contabla{
    overflow: auto;
    max-height: 400px;
    height: auto;
    text-align: center;
}
.contabla_semi{
    overflow: auto;

    height: calc(100vh - 130px);
    
    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: 640px) {
    .column-card-2 {width: 100%; padding: 0px;}
    
}