/*Hoja de Estilos : estilos*/

/*En este fichero se describen todos los estilos utilizados en la página web*/

/*Estilos de body*/


@charset "UTF-8";
body {
        font-family:'Roboto', sans-serif,'Righteous', cursive; /*Familia de fuentes*/
        font-size: 15px; /*Tamño fuente*/
        background-color: #f2f2f2; /*Color de fondo*/
      }

/*Estilos de títulos*/
h1{
color: #246355;
}

h3{
color: #246355;
font-size: 20px; /*Tamño fuente*/
background-color: #f2f2f2; /*Color de fondo*/
}

text{
	color:red;
}
/*Contendor general que contiene a las tablas SHOWALL*/
#main-container{
  width: 100%;
}

/*.tabla_normal{
background-color: white; 
  text-align: left;
  border-collapse: collapse;
  width: 80%;
}

.tabla_normal th, td{
  padding: 15px;
}

.tabla_normal thead{
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  color: white;
}

.tabla_normal tr:hover td{
   background-color: white; 
   color: black;
}





table.tabla_nula{
  text-align: left;
  border-collapse: collapse;
  width: 80%;
}

table.tabla_nula th, td{
  padding: 15px;
}

table.tabla_nula thead{
  border-bottom: solid 5px #0F362D;
}

table.tabla_nula tr:nth-child(even){
  background-color: red;
}

table.tabla_nula tr:hover td{
  background-color: none;
  color: white;
}






table.sortable{
  background-color: white; 
  text-align: left;
  border-collapse: collapse;
  width: 95%;
}

table.sortable th, td{
  padding: 4px;
}

table.sortable thead{
  background-color: #246355; 
  border-bottom: solid 2px #0F362D;
  color: white;
}

table.sortable tr:nth-child(even){
  background-color: #ddd;
}

table.sortable tr:hover td{
  background-color: #369681; 
  color: white;
}

table.show1{
  background-color: white; 
  text-align: left;
  border-collapse: collapse;
  width: 95%;
  font-size:13px;
}

table.show1 th, td{
  padding: 4px;
}

table.show1 thead{
  background-color: #246355; 
  border-bottom: solid 2px #0F362D;
  color: white;
}

table.show1 tr:nth-child(even){
  background-color: #ddd;
}

table.show1 tr:hover td{
  background-color: #369681; 
  color: white;
}
table.show1 tfoot{
  font-family:'Righteous', cursive;
   background-color: #246355; 
   border-bottom: solid 5px #0F362D;
   font-size: 13px;
   color: white;
 }



table.show{
  font-family:'Sintony', sans-serif; 
  background-color: white; 
  text-align: left;
  border-collapse: collapse;
  width: 80%;
}

table.show th, td{
  padding: 15px;
}

table.show thead{
 font-family:'Righteous', cursive;
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  color: white;
}

table.show tfoot{
 font-family:'Righteous', cursive;
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  font-size: 15px;
  color: white;
}

table.show tr:nth-child(even){
  background-color: #ddd; 
}

table.show tr:hover td{
  background-color: #369681; 
  color: white;
}*/


/*table.tablaStatsEquipos{
  font-family:'Sintony', sans-serif; 
  background-color: white; 
  text-align: left;
  border-collapse: collapse;
  width: 96%;
  font-size:13px;
}

table.tablaStatsEquipos th, td{
  padding: 10px;
}

table.tablaStatsEquipos thead{
 font-family:'Righteous', cursive;
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  color: white;
}

table.tablaStatsEquipos tfoot{
 font-family:'Righteous', cursive;
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  font-size: 12px;
  color: white;
}

table.tablaStatsEquipos tr:nth-child(even){
  background-color: #ddd; 
}

table.tablaStatsEquipos tr:hover td{
  background-color: #369681; 
  color: white;
}
*/

/*table.tablaStatsEquiposMin{
  font-family:'Sintony', sans-serif; 
  background-color: white; 
  text-align: left;
  border-collapse: collapse;
  width: 96%;
  font-size:13px;
}

table.tablaStatsEquiposMin th, td{
  padding: 2px;
}

table.tablaStatsEquiposMin thead{
 font-family:'Righteous', cursive;
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  color: white;
}

table.tablaStatsEquiposMin tfoot{
 font-family:'Righteous', cursive;
  background-color: #246355; 
  border-bottom: solid 5px #0F362D;
  font-size: 12px;
  color: white;
}

table.tablaStatsEquiposMin tr:nth-child(even){
  background-color: #ddd; 
}

table.tablaStatsEquiposMin tr:hover td{
  background-color: #369681; 
  color: white;
}*/


/*Estilos de enlaces*/
a{
   font-family:'Righteous', cursive;
	color: #246355;
}


/*table.tabla_vacia{
  text-align: left;
  border-collapse: collapse;
  width: 80%;
}

table.tabla_vacia th, td{
  padding: 15px;
}

table.tabla_vacia thead{
  border-bottom: solid 5px #0F362D;
}

table.tabla_vacia tr:nth-child(even){
   background-color: #f2f2f2;
}

table.tabla_vacia tr:nth-child(odd){
   background-color: #f2f2f2;
}

table.tabla_vacia tr:hover td{
   background-color: #f2f2f2;
}*/
/************************************************************************************************************************/
/*Estilos de formularios*/
/*form{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 500px;
    }
    input[type=text], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=submit], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
    }
     input[type=date], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=password], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=text]:focus {
       border-color: #18A383;
    }
    input[type=text]:read-only {
      background-color: #C3C3C3;
    }
    input[type=text]:read-only:focus {
       border-color: red;
    }

    select {
  width: 480px;
  padding: 16px 22px;
  border: none;
  border-radius: 4px;
  background-color: #98D398;
  cursor:pointer; 
}
*/
form.grande{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 1100px;
    }
form{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 900px;
    }
    input[type=text], textarea {
      border: 0;
      outline: none;
      width: 125px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=submit], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
    }
     input[type=date], textarea {
      border: 0;
      outline: none;
      width: 150px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=password], textarea {
      border: 0;
      outline: none;
      width: 150px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=text]:focus {
       border-color: #18A383;
    }
    input[type=text]:read-only {
      background-color: #C3C3C3;
    }
    input[type=text]:read-only:focus {
       border-color: red;
    }

    select {
  width: 125px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}

form.filtro{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 900px;
    }

    input.filtro[type=text], textarea {
      border: 0;
      outline: none;
      width: 125px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }

    input[type=submit], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
    }
     input[type=date], textarea {
      border: 0;
      outline: none;
      width: 150px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=password], textarea {
      border: 0;
      outline: none;
      width: 150px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=text]:focus {
       border-color: #18A383;
    }
    input[type=text]:read-only {
      background-color: #C3C3C3;
    }
    input[type=text]:read-only:focus {
       border-color: red;
    }

    select {
  width: 125px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}
form.gigante{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 95%;
    }
    input[type=text], textarea {
      border: 0;
      outline: none;
      width: 125px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=submit], textarea {
      border: 0;
      outline: none;
      width: 480px;
      border: solid 1px #ccc;
      padding: 10px;
    }
     input[type=date], textarea {
      border: 0;
      outline: none;
      width: 150px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=password], textarea {
      border: 0;
      outline: none;
      width: 125px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=text]:focus {
       border-color: #18A383;
    }
    input[type=text]:read-only {
      background-color: #C3C3C3;
    }
    input[type=text]:read-only:focus {
       border-color: red;
    }

form.login{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 300px;
    }
form.apuestas{
      background-color: white; 
      border-radius: 3px;
      color: black;
      font-size: 1.0em; 
      padding: 20px;
      margin: 0 auto;
      width: 600px;
    }
    input.login[type=text], textarea {
      border: 0;
      outline: none;
      width: 300px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=submit], textarea {
      border: 0;
      outline: none;
      width: 300px;
      border: solid 1px #ccc;
      padding: 10px;
    }
    input[type=button], textarea {
      border: 0;
      outline: none;
      width: 300px;
      border: solid 1px #ccc;
      padding: 10px;
    }
     input[type=date], textarea {
      border: 0;
      outline: none;
      width: 150px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input.login[type=password], textarea {
      border: 0;
      outline: none;
      width: 300px;
      border: solid 1px #ccc;
      padding: 10px;
      border-radius: 4px;
    }
    input[type=text]:focus {
       border-color: #18A383;
    }
    input[type=text]:read-only {
      background-color: #C3C3C3;
    }
    input[type=text]:read-only:focus {
       border-color: red;
    }


    select {
  width: 125px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}


select.azul {
  width: 125px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #9ab5e9; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}


select.grande{
  width: 225px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}

select.muygrande{
  width: 275px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}

select.pequenho{
  width: 75px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}


 select.apuestas{
  width: 100px;
  padding: 16px 1px;
  border: none;
  border-radius: 4px;
  background-color: #98D398; /*Color de fondo*/
  cursor:pointer; /*Cambie el cursor para mostrar un clickeable*/
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    margin-right: 0.25em;
}

.iborrainputfile {
  font-size:16px; 
  font-weight:normal;
  font-family: 'Lato';
}

.inputfile-1 + label {
    color: #fff;
    background-color: #98D398;
}

.inputfile-1:focus + label,
.inputfile-1.has-focus + label,
.inputfile-1 + label:hover {
    background-color: #84b784; /*Color de fondo*/
}

.btn{
  border-radius: 3px;
  display: inline-block;
  padding: 20px 15px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3); 
  cursor:pointer;
}

.btn-soccer {
  color: white;
  background-color: #98D398; /* Color de fondo base */
}
.btn-soccer:hover {
  background-color: #8CC888; /* Color de fondo en hover */
}
.btn-soccer:active {
  background-color: #79B374; /* Color de fondo en active */
}


.btn-hockey {
  color: white;
  background-color: #6D93FD; /* Color de fondo base */
}
.btn-hockey:hover {
  background-color: #6789EC; /* Color de fondo en hover */
}
.btn-hockey:active {
  background-color: #5877D1; /* Color de fondo en active */
}


.btn-add{
  color: white;
  background-color: #3CC93F;/*Color de fondo*/
}
.btn-add:hover{
  background-color: #37B839;/*Color de fondo*/ 
}
.btn-add:active{
  background-color: #29962A;/*Color de fondo*/
}

.btn-edit{
  color: white;
  background-color: #037ffc;/*Color de fondo*/
}
.btn-edit:hover{
  background-color: #036bfc;/*Color de fondo*/
}
.btn-edit:active{
  background-color: #035afc;/*Color de fondo*/
}

.btn-delete{
  color: white;
  background-color: #e6413e;/*Color de fondo*/
}
.btn-delete:hover{
  background-color: #C93832;/*Color de fondo*/  
}
.btn-delete:active{
  background-color: #ad2a24;/*Color de fondo*/
}

.btn-search{
  color: white;
  background-color: #37648f;/*Color de fondo*/
}
.btn-search:hover{
  background-color: #264a6c;/*Color de fondo*/  
}
.btn-search:active{
  background-color: #1c354d;/*Color de fondo*/
}

.btn-show{
  color: white;
  background-color: #fc8d03;/*Color de fondo*/
}
.btn-show:hover{
  background-color: #da7a03;/*Color de fondo*/  
}
.btn-show:active{
  background-color: #c16e06;/*Color de fondo*/
}


/****************************************************************************************************************/

/*Estilos de div*/
div {
  border-radius: 5px;
  background-color: #f2f2f2;/*Color de fondo*/
}

/****************************************************************************************************************/

/*Estilos de menu*/
#menu{
      background-color: #246355;/*Color de fondo*/
      font-family:'Righteous', cursive;
      width: 100%;/*100% del ancho*/
      text-align: center;
    }
    #menu ul{
      list-style: none;
      margin: 0;
      padding: 0;
    }
    #menu ul li{
      display: inline-block;
       cursor:pointer;
    }
    #menu ul li a{
      color: white;
      display: list-item;
      padding: 16px 5px 16px 5px;
      text-decoration: none;
      cursor:pointer;
    }
    #menu ul li a:hover{
      background-color: #42B881; /*Color de fondo*/
      cursor:pointer;
    }
    .item-r{
      float: right;
    }

/****************************************************************************************************************/

/*Estilos de la ventana modal*/

#modal {
  width:100%; /*100% del ancho de la página*/
  height:100%; /*100% del alto de la página*/
  position:fixed; /*Posición fija*/
  background-color: rgba(1, 1, 1, 0.75); /*Color de fondo con opacidad*/
  top:0; /*Posicion superior*/
  left:0; /*Posicionn lateral*/
  z-index:10; /*Hace que se posicione encima de todos los elementos*/
}

#contenido-interno { 
  background: #919191;
  position: absolute; /*Posicion absoluta*/
  z-index: 20; /*Hace que se posicione encima de todos los elementos*/
  border-radius:5px;
  width: 500px;
  height: 90px;
  margin-top: 250px;
  margin-left: 420px;
}

#aviso{
  position:absolute;
  margin-left: 20px;
  background-color: transparent;
}

#aviso img{
  width: 50px; /*Ancho de 50px en la imagen dentro del modal*/
}

#mensajeError{
  font-size: 15px; /*Tamño fuente*/
  font-weight: bold;
  position: absolute; /*Posicion absoljuta*/
  margin-left: 178px;
  margin-top: 30px;
  color: #d50000;
  background-color: transparent;
}

#cerrar {
  position:absolute; /*Posicion absoljuta*/
    top:0px;
    right:0px;
    padding:2px;
}

/****************************************************************************************************************/

/*Estilos de las cajas de mensajes*/
.caja_mensaje{
background:#98D398; /*Color de fondo*/
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
width: 100%;
}

.caja_mensaje_letra_negra{
  background:#98D398; /*Color de fondo*/
  color:#000000;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 100%;
  }

  .caja_mensaje_amarillo_letra_negra{
    background:#ffe047; /*Color de fondo*/
    color:#000000;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 100%;
    }

  

.caja_mensaje_large{
  background:#98D398; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 100%;
  font-size:x-large;
  }

.caja_mensaje40{
  background:#98D398; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 40%;
  }


  .caja_mensaje40_hockey{
    background:#6d93fd; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 40%;
    }

.caja_mensaje_75_hockey{
background:#6d93fd; /*Color de fondo*/
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
width: 75%;
font-size: 2.0em;
}
.caja_mensaje_75{
  background:#98D398; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 75%;
  font-size: 2.0em;
  }
  .caja_mensaje_ganador{
    background:#ffd500; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 50%;
    font-size: 2.0em;
    }
  .caja_mensaje_50{
    background:#98D398; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 50%;
    font-size: 2.0em;
    }

    

    .caja_mensaje_50_hockey{
      background:#6d93fd; /*Color de fondo*/
      color:#FFFFFF;
      font-weight:bold;
      padding:4px;
      text-align:center;
      width: 50%;
      font-size: 2.0em;
      }

.caja_mensaje_75_rojo{
background:#AD4039; /*Color de fondo*/
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
width: 75%;
font-size: 2.0em;
}

.caja_mensaje_rojo{
background:#AD4039; /*Color de fondo*/
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
width: 100%;
}

.caja_mensaje_rojo_large{
  background:#AD4039; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 100%;
  font-size:x-large;
  }

.caja_mensaje_verde75{
  background:#98D398; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 75%;
  }

  .caja_mensaje_amarillo75{
    background:#ffdc51; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 75%;
    }

.caja_mensaje_rojo75{
  background:#AD4039; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 75%;
  }

  .caja_mensaje_rojo65{
    background:#AD4039; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 65%;
    }

  .caja_mensaje_gris75{
    background:#7e7978; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 75%;
    }

    .caja_mensaje_forfeit75{
      background:#c66767; /*Color de fondo*/
      color:#FFFFFF;
      font-weight:bold;
      padding:4px;
      text-align:center;
      width: 75%;
      }

    .caja_mensaje_gris100{
      background:#7e7978; /*Color de fondo*/
      color:#FFFFFF;
      font-weight:bold;
      padding:4px;
      text-align:center;
      width: 100%;
      }

      .caja_mensaje_gris95{
        background:#7e7978; /*Color de fondo*/
        color:#FFFFFF;
        font-weight:bold;
        padding:4px;
        text-align:center;
        width: 95%;
        }

        .caja_mensaje_gris95:hover{
          background:#5e5d5d; /*Color de fondo*/
          color:#FFFFFF;
          font-weight:bold;
          padding:4px;
          text-align:center;
          width: 95%;
          }

  

.caja_mensaje_rojo2{
background:#AD4039; /*Color de fondo*/
color:#FFFFFF;
font-weight:bold;
padding:4px;
width: 100%;
}

.tablaInicio{
  background-color: #f2f2f2;
}
img{
  cursor:pointer;
}

.caja_jugador1{
  background:#6c98ef; /*Color de fondo*/
  color:#FFFFFF;
  font-weight:bold;
  padding:4px;
  text-align:center;
  width: 95%;
  font-size: 1.0em;
  }

  .caja_jugador2{
    background:#AD4039; /*Color de fondo*/
    color:#FFFFFF;
    font-weight:bold;
    padding:4px;
    text-align:center;
    width: 95%;
    font-size: 1.0em;
    }

    .caja_jugador3{
      background:#f2a633; /*Color de fondo*/
      color:#FFFFFF;
      font-weight:bold;
      padding:4px;
      text-align:center;
      width: 95%;
      font-size: 1.0em;
      }
      .caja_jugador4{
        background:#76ee7d; /*Color de fondo*/
        color:#FFFFFF;
        font-weight:bold;
        padding:4px;
        text-align:center;
        width: 95%;
        font-size: 1.0em;
        }

.content {
  width: 100%;
  float: left;
  background-color: #F5F5F5;
  padding-right: 0;
  padding-left: 0;
  border: 1px none #FFFFFF;
}
.ImagenSeccion2 {
  float: left;
  height: auto;
  margin-right: 25px;
  margin-left: 25px;
  overflow: hidden;
  margin-top: -40px;
  margin-bottom: 0px;
  /*width: auto;*/
}

.ImagenSeccion4 {
  float: left;
  height: auto;
  margin-left: 85%;
  margin-top: -100px;
  margin-bottom: 0px;
  z-index: 1500;
}


.ImagenSeccion3 {
  float: left;
  height: auto;
  overflow: hidden;
  margin-left: 90%;
  margin-top: -60px;
  margin-bottom: 0px;
}

.ImagenAdmin {
  float: left;
  height: auto;
  margin-right: 25px;
  margin-left: 95%;
  overflow: hidden;
  margin-top: -100px;
  margin-bottom: 0px;
  z-index: 1500;
}

.Donate {
  float: left;
  height: auto;
  margin-right: 25px;
  margin-left: 80%;
  overflow: hidden;
  margin-top: -60px;
  margin-bottom: 0px;
  z-index: 1500;
  font-family:'Righteous', cursive;
  font-size: 15pt;
  border-top-width: 0px;
  border-right-width: 1px;
  border-bottom-width: 0px;
  border-left-width: 1px;
  border-top-style: dashed;
  border-bottom-style: dashed;
  border-top-color: #FFFFFF;
  border-right-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  border-left-color: #FFFFFF;
  color: #CC0033;
  padding-top: 11px;
  padding-bottom: 11px;
  text-shadow: 1px 1px #FFFFFF;
  text-transform: uppercase;
}

#cabezaSec {
  border-top-width: 2px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-top-style: solid;
  border-right-style: none;
  border-bottom-style: solid;
  border-left-style: none;
  border-top-color: #FFCC00;
  border-right-color: #FFCC00;
  border-bottom-color: #FFCC00;
  border-left-color: #FFCC00;
  margin-top: 30px;
  background-color: #FFCC00;
  background-image: url(../Images/numeros_cabecera.png);
  box-shadow: 0px 0px 3px #000000;
}

#nombreSec {
  font-family:'Righteous', cursive;
  font-size: 24pt;
  /* [disabled]background-color: #D4AE8B; */
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: dashed;
  border-bottom-style: dashed;
  border-top-color: #FFFFFF;
  border-right-color: #FFFFFF;
  border-bottom-color: #FFFFFF;
  border-left-color: #FFFFFF;
  color: #CC0033;
  padding-top: 11px;
  padding-bottom: 11px;
  margin-top: auto;
  margin-bottom: auto;
  text-shadow: 1px 1px #FFFFFF;
  text-transform: uppercase;
}


#nombreDonar {
  font-family:'Righteous', cursive;
  font-size: 15pt;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  color: #CC0033;
  padding-top: 11px;
  padding-bottom: 11px;
  margin-top: auto;
  margin-bottom: auto;
  text-shadow: 1px 1px #FFFFFF;
  text-transform: uppercase;
}

.dropbtn {
  font-family:'Righteous', cursive;
  background-color: #246355;
  color: white;
  padding: 16px 5px 16px 5px;
  font-size: 16px;
  border: none;
}

.dropdown {
  font-family:'Righteous', cursive;
  position: relative;
  display: inline-block;
}
.dropdown-2 {
  font-family:'Righteous', cursive;
  position: relative;
  display: inline-block;
}

.dropdown-content {
  font-family:'Righteous', cursive;
  display: none;
  position: absolute;
  background-color: #544e50;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 10;
}

.dropdown-content a {
  font-family:'Righteous', cursive;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content-2 {
  font-family:'Righteous', cursive;
  display: none;
  position: absolute;
  left: 100%;
  background-color: #544e50;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content-2 a {
  font-family:'Righteous', cursive;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #42B881;}

div.contenedor_flotante{
    position: relative;
    display: inline-block;
    text-align: center;
    background-color: #f2f2f2;
    color:black;

}
 
div.texto-encima{
    position: absolute;
    top: 10px;
    left: 10px;
}
div.centrado{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div.centrado_pie{
   width: 200px;
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
}

/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #98d398;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* The container */
.containerAzul {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerAzul input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkAzul {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerAzul:hover input ~ .checkmarkAzul {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerAzul input:checked ~ .checkmarkAzul {
  background-color: #6d93fd;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkAzul:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerAzul input:checked ~ .checkmarkAzul:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerAzul .checkmarkAzul:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}






.containerPeq {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerPeq input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkPeq {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerPeq:hover input ~ .checkmarkPeq {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerPeq input:checked ~ .checkmarkPeq {
  background-color: #98d398;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkPeq:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerPeq input:checked ~ .checkmarkPeq:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerPeq .checkmarkPeq:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}





.containerPeqVerde {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerPeqVerde input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkPeqVerde {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #b4aeae;
}

/* On mouse-over, add a grey background color */
.containerPeqVerde:hover input ~ .checkmarkPeqVerde {
  background-color: #9d9898;
}

/* When the checkbox is checked, add a blue background */
.containerPeqVerde input:checked ~ .checkmarkPeqVerde {
  background-color: #98d398;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkPeqVerde:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerPeqVerde input:checked ~ .checkmarkPeqVerde:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerPeqVerde .checkmarkPeqVerde:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}











.containerPeqRojo {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerPeqRojo input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkPeqRojo{
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #b4aeae;
}

/* On mouse-over, add a grey background color */
.containerPeqRojo:hover input ~ .checkmarkPeqRojo {
  background-color: #9d9898;
}

/* When the checkbox is checked, add a blue background */
.containerPeqRojo input:checked ~ .checkmarkPeqRojo {
  background-color: #f27474;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkPeqRojo:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerPeqRojo input:checked ~ .checkmarkPeqRojo:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerPeqRojo .checkmarkPeqRojo:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}






















.containerPeqAzul {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerPeqAzul input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkPeqAzul {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerPeqAzul:hover input ~ .checkmarkPeqAzul {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerPeqAzul input:checked ~ .checkmarkPeqAzul {
  background-color: #6d93fd;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkPeqAzul:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerPeqAzul input:checked ~ .checkmarkPeqAzul:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerPeqAzul .checkmarkPeqAzul:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}













.containerPeqAmarillo {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.containerPeqAmarillo input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkPeqAmarillo {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerPeqAmarillo:hover input ~ .checkmarkPeqAmarillo {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerPeqAmarillo input:checked ~ .checkmarkPeqAmarillo {
  background-color: #FFCC00;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkPeqAmarillo:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerPeqAmarillo input:checked ~ .checkmarkPeqAmarillo:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerPeqAmarillo .checkmarkPeqAmarillo:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}





/*
.containerSinEsp {
  display: block;
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.containerSinEsp input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


.checkmarkSinEsp {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}


.containerSinEsp:hover input ~ .checkmarkSinEsp {
  background-color: #ccc;
}


.containerSinEsp input:checked ~ .checkmarkSinEsp {
  background-color: #98d398;
}


.checkmarkSinEsp:after {
  content: "";
  position: absolute;
  display: none;
}


.containerSinEsp input:checked ~ .checkmarkSinEsp:after {
  display: block;
}


.containerSinEsp .checkmarkSinEsp:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}*/

#showMenu{
  text-align: left;
  border-collapse: collapse;
  width: 60%;
  font-size:15px;
}

#showMenu th, td{
  padding: 4px;
}

#showMenu td{
  background-color: white; 
}

#showMenu thead{
  background-color: #246355; 
  border-bottom: solid 2px #0F362D;
  color: white;
}

#showMenu tfoot{
  font-family:'Righteous', cursive;
   background-color: #246355; 
   border-bottom: solid 5px #0F362D;
   font-size: 13px;
   color: white;
 }



 #showMenu tr td, th { 
  border-top-right-radius: 0;               
  border-top-left-radius: 0; 
  border-bottom-left-radius: 0; 
  border-bottom-right-radius: 0; 
}

#showMenu th:first-child {   
  border-top-left-radius: 5px; 
}

#showMenu th:last-child {   
  border-top-right-radius: 5px; 
}

#showMenu td:last-child {   
  border-bottom-right-radius: 5px; 
}

#showMenu td:first-child {   
  border-bottom-left-radius: 5px; 
}




#showMenu tr{
background-color: transparent;
border-color: transparent;
font-family: 'Roboto';
}








/* The container */
.containerBlanco {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
color:white;
}

/* Hide the browser's default checkbox */
.containerBlanco input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkBlanco {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerBlanco:hover input ~ .checkmarkBlanco {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerBlanco input:checked ~ .checkmarkBlanco {
  background-color: #98d398;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkBlanco:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerBlanco input:checked ~ .checkmarkBlanco:after {
  display: block;
}

/* Style the checkmark/indicator */
.containerBlanco .checkmarkBlanco:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* The container */
.containerBlancoAzul {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 1px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color:white
}

/* Hide the browser's default checkbox */
.containerBlancoAzul input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmarkBlancoAzul {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerBlancoAzul:hover input ~ .checkmarkBlancoAzul {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerBlancoAzul input:checked ~ .checkmarkBlancoAzul {
  background-color: #6d93fd;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkBlancoAzul:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.containerBlancoAzul input:checked ~ .checkmarkBlancoAzul:after {
  display: block;
}

/* Style the checkmark/indicator */
.containeBlancoAzul .checkmarkBlancoAzul:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}