html,
body {
  background-color: white;
  color: #333 !important;
}

.table > :not(:last-child) > :last-child > * {
  border-bottom-color: currentColor;
  color: black;
}

.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  background-color: var(--bs-table-bg);
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
  color: black;
}

.wrapper {
  min-height: 100vh;
}

.start_page {
  width: 400px !important;
}

ul.nav > li.active:hover {
  background-color: white !important;
  color: black !important;
}

.sidebar {
  width: 250px !important;
}

.pagination > li {
  width: 1rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.messages > li {
  background: #eeeaea;
  width: auto;
  justify-self: flex-start;
  align-self: flex-start;
}

.messages {
  background: #ededf0;
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 
Generic Styling, for Desktops/Laptops 
*/
table {
  width: 100%;
  border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td,
th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
}

#navbarSupportedContent li {
  display: none !important;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px),
  (min-device-width: 768px) and (max-device-width: 1024px) {
  .sidebar {
    width: 0px !important;
  }

  #navbarSupportedContent li {
    display: block !important;
  }

  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 1px solid #ccc;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }
  td {
    display: flex;
    justify-content: flex-end;
  }

  /*
	Label the data
  */
  td:nth-of-type(1):before {
    content: "Nombre";
  }
  td:nth-of-type(2):before {
    content: "Apellido";
  }
  td:nth-of-type(3):before {
    content: "Telefono";
  }
  td:nth-of-type(4):before {
    content: "Emergencia";
  }
  td:nth-of-type(5):before {
    content: "Email";
  }

  .tabla-citas td:nth-of-type(1):before {
    content: "Nombre";
  }
  .tabla-citas td:nth-of-type(2):before {
    content: "Apellido";
  }
  .tabla-citas td:nth-of-type(3):before {
    content: "Comentario";
  }
  .tabla-citas td:nth-of-type(4):before {
    content: "Fecha";
  }
  .tabla-citas td:nth-of-type(5):before {
    content: "Hora";
  }

  .tabla-tratamientos-registrados td:nth-of-type(1):before {
    content: "Nombre";
  }

  .tabla-tratamientos-registrados td:nth-of-type(1):before {
    content: "Precio base";
  }
  .tabla-tratamientos-registrados td:nth-of-type(1):before {
    content: "Descripcion";
  }

  .tabla-tratamientos td:nth-of-type(1):before {
    content: "No Pieza";
  }
  .tabla-tratamientos td:nth-of-type(2):before {
    content: "Descripcion";
  }
  .tabla-tratamientos td:nth-of-type(3):before {
    content: "";
  }

  .tabla-presupuesto td:nth-of-type(1):before {
    content: "ID";
  }
  .tabla-presupuesto td:nth-of-type(2):before {
    content: "Nombre";
  }
  .tabla-presupuesto td:nth-of-type(3):before {
    content: "Telefono";
  }
  .tabla-presupuesto td:nth-of-type(4):before {
    content: "Edad";
  }
  .tabla-presupuesto td:nth-of-type(5):before {
    content: "SubTotal";
  }
  .tabla-presupuesto td:nth-of-type(6):before {
    content: "Descuento %";
  }
  .tabla-presupuesto td:nth-of-type(7):before {
    content: "Descuento";
  }
  .tabla-presupuesto td:nth-of-type(8):before {
    content: "Total";
  }

  .hisory_detail td:nth-of-type(1):before {
    content: "No Pieza";
  }
  .hisory_detail td:nth-of-type(2):before {
    content: "";
  }

  .tabla-pago-en-quetzales td:nth-of-type(1):before {
    content: "Efectivo";
  }
  .tabla-pago-en-quetzales td:nth-of-type(2):before {
    content: "Tarjeta";
  }

  .tabla-pago-en-quetzales td:nth-of-type(3):before {
    content: "Monto del 7%";
  }
  .tabla-pago-en-quetzales td:nth-of-type(4):before {
    content: "Sin el 7%";
  }

  .tabla-pagos td:nth-of-type(1)::before {
    content: "Fecha";
  }
  .tabla-pagos td:nth-of-type(2)::before {
    content: "Concepto pago";
  }
  .tabla-pagos td:nth-of-type(3)::before {
    content: "Efectivo";
  }
  .tabla-pagos td:nth-of-type(4)::before {
    content: "Tarjeta";
  }
  .tabla-pagos td:nth-of-type(5)::before {
    content: "Moneda";
  }
  .tabla-pagos td:nth-of-type(6)::before {
    content: "Tipo de cambio";
  }
  .tabla-pagos td:nth-of-type(7)::before {
    content: "Total dolares";
  }
  .tabla-pagos td:nth-of-type(8)::before {
    content: "Accion";
  }
}