:root{
  --black: #202b38;
  --green:  #04AA6D;
  --midblack:  #333;
  --red:rgba(233, 12, 12, 0.814);
}
body{
  max-width: 80vw;
}
.nav-ul2h2 {
  display: inline-flex;
}
.nav-2h2{
  text-align: end;  
}
/* assets/css/style.css */
.nav-2h2 ul li a.active {
    font-weight: bold;
    color: #007bff; 
    text-align: center;

}
.hd2{
  width: 100%;
  display: flex;
  align-items: flex-end;
}
.title-h2c{
  width: 70%;
}
.butz{
  width: 30%;
}
.new-user {
  background-color:var(--green); 
  border: none;
  color: white;
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.nav-2h2 ul li {
  overflow: hidden;
}
/* Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--black);
}

/* Modal Content/Box */
.modal-content {
    background-color: var(--black);
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 36vw;
    text-align: center;

}


/* The Close Button */
.close,
span .close-register {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.form-perfil{
  text-align: center;
  display: inline-grid;
}
.close:hover,
.close:focus {
    color: var(--black);
    text-decoration: none;
    cursor: pointer;
}


/* Navbar container */
.navbar {
    overflow: hidden;
    background-color: var(--midblack);
    font-family: Arial;
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  .table-rc th,
  .table-rc td{
    font-size: 14px;
  }
  
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
  }
  
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
  }
  
  /* Add a red background color to navbar links on hover */
  .navbar a:hover, .dropdown:hover .dropbtn {
    background-color: var(--red);
  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--black);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: var(--black);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  /* Add a grey background color to dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #202b38;
  }
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
    display: block;
  }

  .nav-2h2 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  .nav-2h2  li {
    float: left;
  }
  
  .nav-2h2  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  /* Change the link color to #111 (black) on hover */
  .nav-2h2 li a:hover {
    background-color: var(--midblack);
  }


.div-forms31z{
    display: flex; /* Cambia a flex para el centrado */
    align-items: center; /* Centra verticalmente */
    justify-content: center; /* Centra horizontalmente */
    height: 100vh; /* Hace que el contenedor ocupe toda la altura de la ventana */
    margin: 0; /* Elimina cualquier margen externo */


}
.col-s31z{
  width: 32vw;
}

.h2s31z{
  text-align: center;
}
.col-s32z{
  width: 50%;
  display: inline-grid;
}

.col-s31z input,
.col-s31z textarea{
  width:100%;
  text-align: center;
  box-sizing: border-box;
}
.view-btn, .take-order-btn{
  width: 10vw;
  padding: 0.5vw 0.5dvw;
}
.table-tareas  td,
.table-tareas  tr {
  text-align: center;
}
.div-h1szt{
  width: 100%;

}

.fm-h1szt{
  display: flex;
}

.top-header{
  background-image: url('../image/banner-recoleccion.png'); /* Ajusta la ruta según sea necesario */
  background-size: contain; /* La imagen cubrirá todo el header */
  background-position: center; /* Centra la imagen en el header */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  width: 80vw;
  height: 12vw;
  display: flex;
  align-items: center; /* Centra verticalmente el contenido */
  justify-content: center; /* Centra horizontalmente el contenido */
}
/*Perfil*/

.dpf1l{
  width: 100%;
  text-align: center;
}
.div-grp{
  text-align: left;
  display: inline-block;
  border: solid #808dc3 2px;
  padding: 10px;
}

.text-p1{
  padding: 0.2em;
  margin: 0.1em;

}

.dvBtn{
  box-sizing: border-box;
  text-align: center;
}


@media (max-width: 824px) {
  .new-user{
    width: 20dvw;
    padding: 12px 0px;
    font-size: 10px;

  }
}
tbody tr:nth-child(even) button.reset-password-btn {
  background-color: coral;
}
  .reset-password-btn,
  .reset-password-btn nth-child {
    box-sizing: content-box;
    background-color: coral;
}

@media (max-width: 824px) {
  .reset-password-btn{
    width: 10dvw;
    padding: 10px 0px;
    font-size: 10px;
    box-sizing: content-box;

  }
}

@media (max-width: 824px) {
  .table-rc tr td{
    padding: 10px 0px;
    box-sizing: content-box;
    font-size: 10px;
    text-align: center;
  }
}
.paginationbar a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.paginationbar a.active {
  background-color: dodgerblue;
  color: white;
}