#tabla {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    border: none
  }
  
  #tabla td, #customers th {
    padding: 8px;
  }
  
  #tabla tr:nth-child(odd){background-color: #f2f2f2;}
  
  #tabla tr:hover {background-color: #ddd;}
  
  #tabla th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: white;
    color: var(--first-color);/* #0d6efd;*/
  }
  
  #tabla td:first-child,
  th:first-child {
    border-radius: 10px 0 0 10px;
  }
  #tabla td:last-child,
  th:last-child {
    border-radius: 0 10px 10px 0;
  }
  
  #tabla  tr:nth-child(odd) td{
             background: var(--second-color);/*#00E0DB;*/
  }
  #tabla tr:nth-child(even) td{
              background: var(--first-color);/*#6A77FF;*/
  }















  

 .help-block{

  color:red !important

}






:root{
  

--color--negro: #1B1B1B;

--color--blanco: #FFFFFF;

--color--verde: #2ecc71;

--color--watercourse: #27ae60;

--color--rojo: #c4c5d3; 

--color--scarlett: #82838a;

--color--naranja: #EB9532;

--color--pirategold: #f39c12;

--color--pumpkin: #d35400;

--color--purpura: #7E3661;

--color--celeste: #3498DB;

--color--azul: #2A7AAF;

--color--steelblue: #6977FF;

--color--belizehole: #5767fa;

--color--megaman: #48dbfb;

--color--greendannertile: #74b9ff;

--color--cyanite: #0abde3;

--color--celestefrancia: #2e86de;

--color--spray: #02a5ca;

}



.boton{

border: 3px solid rgba(100,100,100,0.1);

margin-bottom:20px;

padding: 10px;

width: auto;

font-family: 'Poppins',sans-serif;

font-size: 16px;

border-radius: 8px;

cursor: pointer;

color: #FFF;

background-size: 300%;

transition: 0.5s ease-in;

height: 50px;

/* text-decoration: none; */

}

/**Mi clase boton personalizado*/

.custom_btn{

border: 2px solid;

border-radius: 5px;

cursor: pointer;

margin: 0 20px;

padding: 0.2rem 0.8rem;

font-weight: bold;

font-size: 1.2rem;

display: inline-block;





}



.custom_btn:focus{

outline: 0;

}

/**Para los efectos*/

.efecto{

background-position: 100%;

background-size: 400%;

transition: background 0.5s ease-in-out;

}



.efecto:hover{

background-position: 0;

text-decoration: none;

color: var(--color--blanco);

}

/**colores */







.verde{

background-color: var(--color--verde);

color: var(--color--blanco);

border-color: var(--color--verde);

background-image: linear-gradient(45deg,var(--color--watercourse) 50%, transparent 50%);

box-shadow: 0 5px 15px 0 rgba(23, 168, 108, 0.75);

}



.verde:hover{

border-color: var(--color--watercourse);

}



.celeste{

background-color: var(--color--cyanite);

color: var(--color--blanco);

border-color: var(--color--cyanite);

background-image: linear-gradient(45deg,var(--color--spray) 50%, transparent 50%);

box-shadow: 0 5px 15px 0 var(--color--megaman);

}



.celeste:hover{

border-color: var(--color--spray);

}



.azul{

background-color: var(--color--steelblue);

color: var(--color--blanco);

border-color: var(--color--steelblue);

background-image: linear-gradient(45deg,var(--color--belizehole) 50%, transparent 50%);

box-shadow: 0 5px 15px 0 var(--color--steelblue);

}



.azul:hover{

border-color: var(--color--belizehole);

}



.rojo{

background-color: var(--color--rojo);

color: var(--color--blanco);

border-color: var(--color--rojo);

background-image: linear-gradient(45deg,var(--color--scarlett) 50%, transparent 50%);

box-shadow: 0 5px 15px 0 var(--color--scarlett);

}



.rojo:hover{

border-color: var(--color--scarlett);

}



.naranja{

background-color: var(--color--naranja);

color: var(--color--blanco);

border-color: var(--color--naranja);

background-image: linear-gradient(45deg,var(--color--pumpkin) 50%, transparent 50%);

box-shadow: 0 5px 15px 0 var(--color--pumpkin);

}



.naranja:hover{

border-color: var(--color--pumpkin);

}



.boton:hover{

background-position: right;

color: #FFF;

text-decoration: none;

transition: 0.5s ease-in;

}



.boton-azul{

background-image: linear-gradient(to left,#00B7DA,#161569,#00B7DA);

}



.boton-verde{

background-image: linear-gradient(to left,#5CB85C,#1E3C1E,#5CB85C);

}



.panel-custom > .panel-heading {

background-image: linear-gradient(to right,var(--color--steelblue),var(--color--celeste),var(--color--megaman));

color:#FFF;

border-color: #337ab7;

}



.popover-title {

color: var(--color--blanco);

background-color: var(--color--greendannertile);



}
























.href  { 
  background: #4848f4;
  border-radius: 20px; 
  color: white;
  display: block;
  float: left;
  font-family: sans-serif;
  font-size: 12px;
  height: 30px;
  line-height: 30px;
  margin: 5px;
  text-align: center;
  text-decoration: none;
  width: 30px;
}
a:active {
  background: #492bc0;
}
#slider {
  background: #ecf0f1;
  height: 500px;
  float: left;
  position: relative;
  width: 100%;
}

.box {
 
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);

  -webkit-transition: all .5s ease-out;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
  -ms-transition: all .5s ease-out;
  transition: all .5s ease-out;
}


:target {
  z-index: 10;

  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}






.tooltip > .tooltip-inner {
  background-color:#3498DB;
}