.incomplete{
  
}
*{
  list-style:none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}
body {
  background: #f5f6fa; /* color naranja muy bajo. Como base */  /*F3AC94 */
}
h1 {
  display: flex; /* Ordenar texto (necesario para justify */
  justify-content:center; /* Centrar texto.  */ 
  font-family: "Montserrat", sans-serif;
  margin-top:10px;
}
h2 {
  display: flex; /* Ordenar texto (necesario para justify */
  justify-content:center; /* Centrar texto*/ 
  font-family: "Montserrat", sans-serif;
}


/* Inicio del estilo del log in form */
.login-page {
  width: 360px; /* Tamaño horizontal fijo de la ventana log in */
  padding: 8% 0 0; /* Posicionamiento vertical de la ventana log in */
  margin: auto; /* Posicionamiento automatico de la ventana log in */ 
}

#logo{ /* inicio de sesion */
  width: 100%;
}

#logoinicial{
  width: 10%
  float: right;
}

.form {
  font-family: "Montserrat", sans-serif; /* Tipo de letra en el form  */
  background: #FFFFFF; /* Color de la "ventana" del forms */ /*F3AC94 */
  padding: 45px; /* Espacio blanco extra alrededor de la ventana */
  text-align: center; /* alinear texto en medio */
  
}
/* */
/* Estilo de las cajas de input (usuario y contraseña) */
.form input, .form textarea, .form select {
  font-family: "Montserrat", sans-serif;
  outline: 0;
  background:#f2f2f2 ; /*#f2f2f2*/
  width: 100%;
  border: 0; /* Remover el borde */
  margin: 0 0 15px; /* Distancia entre lineas (verticalmente) */
  padding: 15px; /* Tamaño vertical de las lineas donde ingresaremos nuestros datos */
  font-size: 15px;
}

/* Estilo del boton "Iniciar Sesion" */
.form button {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase; /* Letras sean todas MAYÚSCULAS */
  background: #E7501E; /* Color naranja. Color del boton */
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF; /* Color blanco. Color de letra */
  font-size: 15px;
  cursor: pointer;
}

.content{
  display:flex;
  flex-direction:column;
}

#formsearch{
  display:flex;
  justify-content:flex-end;
  padding-right: 10px;
}
#formsearch2{
}

#lblsearch{
  padding-right: 5px;
}
#search{
  padding-right: 5px;
}
/* https://www.color-hex.com/color-palette/1019566 */

ul {
  padding-left: 0px !important;
}

.wrapper .sidebar{
  background-color: #e07100; /* Color de sidebar */
  position: fixed;
  top:0;
  left: 0;
  width:225px;
  height:100%;
  padding: 5px 0;
  transition: all 0.5s ease;
  z-index: 1;
}

.wrapper .sidebar .profile{
  margin-bottom:30px;
  text-align: center;
}

.wrapper .sidebar .profile img {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto;
}
.wrapper .sidebar .profile h3{
  color: rgb(0, 0, 0);
  margin: 10px 0 5px;
}
.wrapper .sidebar .profile p{
  color: rgb(0, 0, 0); /* Color de las letras */
  font-size: 16px;
  margin-top:0px;
}

.wrapper .sidebar ul li a{
    display:block;
    padding: 0px 30px;
    border-bottom: 1px solid #10558d;
    color: rgb(0, 0, 0);
    font-size: 15px;
    position: relative;
}
.wrapper .sidebar ul li a .icon{
    color: #dee4ec;
    width: 30px;
    display: inline-block;
}

.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
    color: #0c7db1;
    background: white;
    border-right: 2px solid rgb(5,68,104);
}
.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
    color: #0c7db1;
}
.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
    display: block;
}

.wrapper .section{
    width: calc(100% - 225px);
    margin-left: 225px;
    transition: all 0.5s ease;
}
.wrapper .section .top_navbar #logoinicial{
  width: 169px;
  height:50px;
  object-fit: cover;
  
}
.wrapper .section .top_navbar{
  background: #ff4200; /* Color franja top */
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  justify-content:space-between;
  

}


.wrapper .section .top_navbar .sidemenu a{
    font-size: 28px;
    color: #f4fbff;
}

.wrapper .section .top_navbar .sidemenu a:hover{
    color: #a2ecff;
}

body.active .wrapper .sidebar{
    left: -225px;
}

body.active .wrapper .section{
    margin-left: 0;
    width: 100%;
}

/* Inicio del estilo de filtros */
#datatable_filter{
  display:flex;
  justify-content: space-around;
}

.buttons-excel{
  margin-right: 20px;
  border-radius: 4px !important;
}

.buttons-pdf{
  border-radius: 4px !important;
}


/* Inicio del estilo de la tabla */
.tabla-generica{
  border-collapse: collapse;
  margin-top: 25px;
  margin-bottom: 25px;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  margin-left:1%;
  margin-right:1%;
  width:98%;
}
.tabla-generica thead tr{
    background-color: #9d0303;
    color: #ffffff;
    text-align: left;
}
.tabla-generica th,
.tabla-generica td{
  padding:12px 15px;
}

.tabla-generica tbody tr {
    border-bottom: 1px solid #dddddd;
}

.tabla-generica tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}
.tabla-generica tbody tr:last-of-type {
    border-bottom: 2px solid #e07100;
}
.tabla-generica tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}
/* Buscador */
.buscador {
  position:relative;
  width: 30rem;
  background: #e07100;
  border-radius: .7rem;
}

.buscador button, input{
  
}

.row{
  display: flex;
  justify-content: space-evenly;
  padding-top: 15px;
}

.row .col{
  width:50%;
}


/* Inicio del estilo de botones y dialogs para agregar valores a la bd */

.btn_abrir{
  position: fixed !important; /* Posicionar el boton abajo a la derecha y que sea siempre visible */
  right:5% !important; /* Distancia para que no este pegado a la derecha */
  bottom:5% !important; /* igual pero abajo */
  font-size:50px !important; /* Tamaño de la letra y boton */
  border-color: white !important;
  color: white !important; /* Color de la letra */
  background-color: #F29400 !important; /* Color amarillo del boton */
  cursor: pointer !important; /* Cambio de forma de mouse de punta a manita */
  border-radius: 50% !important; /* Redondear las esquinar. Estilo circulo */
  width: 75px !important; /* tamaño para hacerlo un circulo perfecto */
  height: 75px !important;
}
#btn_abrir{
  position: fixed !important; /* Posicionar el boton abajo a la derecha y que sea siempre visible */
  right:5% !important; /* Distancia para que no este pegado a la derecha */
  bottom:5% !important; /* igual pero abajo */
  font-size:50px !important; /* Tamaño de la letra y boton */
  border-color: white !important;
  color: white !important; /* Color de la letra */
  background-color: #F29400 !important; /* Color amarillo del boton */
  cursor: pointer !important; /* Cambio de forma de mouse de punta a manita */
  border-radius: 50% !important; /* Redondear las esquinar. Estilo circulo */
  width: 75px !important; /* tamaño para hacerlo un circulo perfecto */
  height: 75px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn_abrir2{
  position: fixed; /* Posicionar el boton abajo a la derecha y que sea siempre visible */
  left:5%; /* Distancia para que no este pegado a la derecha */
  bottom:5%; /* igual pero abajo */
  font-size:50px; /* Tamaño de la letra y boton */
  border-color: white;
  color: white; /* Color de la letra */
  background-color: #F29400; /* Color amarillo del boton */
  cursor: pointer; /* Cambio de forma de mouse de punta a manita */
  border-radius: 50%; /* Redondear las esquinar. Estilo circulo */
  width: 75px; /* tamaño para hacerlo un circulo perfecto */
  height: 75px;
}

.btn_cerrar{
  position: fixed; /* Posicionar el boton abajo a la derecha y que sea siempre visible */
  right:5%; /* Distancia para que no este pegado a la derecha */
  top:15%; /* igual pero arriba */
  font-size:50px; /* Tamaño de la letra y boton */
  border-color: white;
  color: white; /* Color de la letra */
  background-color: #f44336; /* Color rojo del boton */
  cursor: pointer; /* Cambio de forma de mouse de punta a manita */
  border-radius: 50%; /* Redondear las esquinar. Estilo circulo */
  width: 65px; /* tamaño para hacerlo un circulo perfecto */
  height: 65px;
}

.btn_link {
  align-items: center;
  border-radius: .25rem; /* Redondear esquinas */
  color: #fff;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600; /* efecto de negritas */
  font-family: "Montserrat", sans-serif;
  border-right: 1px solid #bbb;
}
#configurar.btn_link {
  color: #0b5394;
  font-size: 20px;
}

.btn_configurar{
  position: fixed; /* Posicionar el boton abajo a la derecha y que sea siempre visible */
  right:5%; /* Distancia para que no este pegado a la derecha */
  bottom:5%; /* igual pero abajo */
  font-size:50px; /* Tamaño de la letra y boton */
  border-color: white;
  color: white; /* Color de la letra */
  background-color: #0b5394; /* Color azul del boton */
  cursor: pointer; /* Cambio de forma de mouse de punta a manita */
  border-radius: 50%; /* Redondear las esquinar. Estilo circulo */
  width: 75px; /* tamaño para hacerlo un circulo perfecto */
  height: 75px;
}

#gear.btn_configurar{
  width: 65px; /* tamaño para hacerlo un circulo perfecto */
  height: 65px;
  bottom:15%; /* igual pero abajo */
  background-color: #3B75A9;
}

#page-mask { /* Sombra oscura cuando se abra el dialog */
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

dialog {
  position: fixed;
  top: 10%;
  font-family: 'Montserrat', sans-serif;
  width: 80%;
  margin:auto;
  box-shadow: 0px 0px 200px 200px rgba(0, 0, 0, 0.5);

  
}

.modal-content h3{
  text-align:center;
  font-family: 'Montserrat', sans-serif;
  font-size:25px;


}



footer{
  
}

#consulta{
  color: red;
}