:root {
  --blue: #4382dd;
  --orange: #ff6625;
  --orangeHover: #ff7e3d;
  --montserrat: "Montserrat", sans-serif;
  --poppins: "Poppins", sans-serif;
  --black: #272932;
  --gray-brown: #948b89;
}

/* Apply a box-sizing border-box model to all elements */
* {
  box-sizing: border-box;
}

.baseline {
  align-items: baseline;
}

html,
body {
  background-color: #f0f0f0;
  min-height: 100vh;
  /* Ensure the minimum height is viewport height */
  font-family: var(--montserrat);
}

.ajustes-horas-form {
  padding: 40px;
  text-align: center;
}

/* Aplica un fondo claro a las filas impares */
#tbodyUsuarios tr:nth-child(odd) {
  background-color: #f9f9f9;
}

/* Aplica un fondo estándar a las filas pares */
#tbodyUsuarios tr:nth-child(even) {
  background-color: #ffffff;
}

.vacationCalendar,
.festivosCalendar {
  margin-bottom: 20px;
}

.marginRight1vw {
  margin-right: 1vw;
}

.baseline {
  align-items: baseline;
}

#activo {
  margin-left: 10px;
  align-items: baseline;
}

.activoRow {
  align-items: baseline;
  justify-content: start !important;
}

.vacationCalendar #fecha,
#festivosCalendar {
  background-color: transparent;
  color: transparent;
  border: none;
}

.flatpickr-day.selected {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
}

/* Días pendientes */
.flatpickr-day.selected.pendiente {
  background-color: #ffcc00 !important;
  /* Amarillo */
  color: white;
  border-color: #ffcc00 !important;
}

/* Días aceptados */
.flatpickr-day.selected.aceptada {
  background-color: #4caf50 !important;
  /* Verde */
  color: white;
  border-color: #4caf50 !important;
}

/* Días rechazados */
.flatpickr-day.selected.rechazada {
  background-color: red !important;
  /* Rojo */
  color: white;
  border-color: red !important;
}

/* Estilo para los días festivos */
.flatpickr-day.selected.festivo {
  background-color: #ffd700 !important;
  /* Amarillo */
  color: white;
  border-color: #ffd700 !important;
}

#mainVacacionesContainer th,
td,
li {
  font-size: large;
  font-family: var(--montserrat);
}

#mainVacacionesContainer .btnAceptar {
  margin-right: 3px;
}

.titulo {
  font-size: 1.5rem;
  background-color: var(--black);
  text-align: center;
  color: white;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}

.titulo-orange {
  font-size: 1.5rem;
  background-color: var(--orange);
  color: white;
  padding: 10px;
  border-radius: 10px 10px 0 0;
}

.dialogClientes {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  min-width: 300px;
  margin: 0 auto;
}

.dialogClientes div {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1rem;
}

.dialogClientes .titulo {
  text-align: center;
}

.dialogClientes label {
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.dialogClientes input[type="text"],
.dialogClientes input[type="submit"] {
  width: 100%;
  margin-bottom: 0.5rem;
  height: auto;
  padding: 0.5rem;
}

.dialogClientes input[type="text"] {
  margin-top: 0.1rem;
}

.dialogClientes input[type="submit"] {
  align-self: center;
  width: auto;
  margin-top: 0.5rem;
}

.labelTemp {
  font-size: 0.9rem;
}

.btnTemp {
  width: auto;
  height: auto;
}

.btnTemp:focus {
  outline: none;
  background-color: var(--orange);
}

#clientesManagementTable,
#movilesManagementTable,
#tarjetasManagementTable {
  width: 100%;
  overflow-x: auto;
  background-color: var(--black);
  color: white;
  font-size: medium;
  border-radius: 10px;
  font-family: var(--montserrat);
  align-items: center;
}

.borderRadius10 {
  border-radius: 10px;
}

.borderRadius20 {
  border-radius: 20px;
}

.borderRadius5 {
  border-radius: 5px;
}

.borderRadius10Bottom {
  border-radius: 0 0 10px 10px;
}

.borderRadius10BottomOr {
  border-radius: 0 0 10px 10px;
  border: 3px solid var(--orange);
  margin-top: 0;
}

.borderRadius10Top {
  border-radius: 10px 10px 0 0;
}

.labelTemp {
  font-family: var(--montserrat);
  font-size: 1.2rem;
  margin-bottom: 5px;
  text-align: start !important;
}

.btnTemp {
  font-family: var(--poppins);
  color: white;
  border: none;
  background-color: var(--orange);
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 20px;
  min-width: 300px;
  max-width: 400px;
  height: auto;
}

.btnTemp2 {
  font-family: var(--poppins);
  color: white;
  border: none;
  background-color: var(--orange);
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 20px;
  min-width: 150px;
  max-width: 400px;
  height: auto;
}

.hidden {
  display: none;
}

#calendarRange::part(button) {
  font-family: var(--poppins);
  color: white;
  border: none;
  background-color: var(--orange);
  font-size: 1rem;
  padding: 0.5rem;
  border-radius: 20px;
  min-width: 100px;
  height: auto;
}

.btnTemp:hover,
#calendarRange::part(button):hover {
  background-color: var(--orangeHover);
}

.parentContainer {
  margin-bottom: 10vw;
}

#welcome b {
  font-size: 1rem;
}

.fontSize1rem {
  font-size: 1rem;
}

.displayNone {
  display: none;
}

.positionR {
  position: relative;
}

.client-selector-container,
#userStatusSelector {
  margin-bottom: 20px;
}

#calendarRange {
  margin-bottom: 20px;
  background-color: white;
  border: none;
  border-radius: 20px;
  min-width: 600px;
}

#clientSelector {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  outline: none;
  border: none;
  border-radius: 10px;
  justify-content: start;
}

#userSelector,
#userSelector2,
#tipo,
#userSelectorModal,
#newSelector,
#newSelectorNo,
#newSelectorS,
#newSelector2,
#newSelectorS2,
#jornadasSelectorModal,
#userStatusSelector,
#classSelector {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  outline: none;
  border: 2px solid var(--black);
  border-radius: 10px;
  justify-content: start;
}

#yearSelect {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  outline: none;
  color: white;
  background-color: var(--orange);
  border-radius: 10px;
  border: none;
  text-align: center;
  margin-top: 20px;
  min-width: 100px;
}

#razon {
  margin-left: 10px;
  padding: 5px;
  font-size: 14px;
  outline: none;
  color: white;
  background-color: var(--orange);
  border-radius: 10px;
  border: none;
  text-align: center;
  margin-top: 20px;
  min-width: 100px;
}

#btnAddUser {
  position: absolute;
  padding: 10px;
  top: 50%;
  font-size: 14px;
  min-width: 200px;
  right: 2%;
  transform: translateY(-50%);
  border: none;
  border-radius: 20px;
  font-family: var(--poppins);
  color: white;
  background-color: var(--orange);
}

main {
  min-height: 58vh;
}

/* Set margin and padding to 0 for the body */
body {
  width: 100%;
  min-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: calc(15px + 0.390625vw);
  background-image: url("../img/wave.png");
  margin: 0;
  padding: 0;
  justify-content: space-between;
}

/* Logo styles */
header {
  width: 100%;
  color: black;
  background-color: var(--orange);
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 30% 70%;
  box-shadow: var(--black) 0px 0px 10px;
}

.orange {
  background-color: white;
  color: black;
}

.white {
  background-color: white;
  color: black;
}

.white2 {
  background-color: white;
  color: black;
  display: grid;
  border-radius: 0 0 10px 10px;
  border-color: var(--orange);
  border-width: 2px;
  border: 2px solid var(--orange);
}

.fLight_grey {
  color: rgb(239, 239, 239);
}

.light_grey {
  background-color: rgb(239, 239, 239);
  color: black;
}

img {
  height: auto;
  width: 280px;
}

/* Navigation styles */
.nav-container {
  display: flex;
  justify-content: flex-end;
}

.dropDownContent {
  position: absolute;
  display: none;
}

ul {
  grid-row: auto;
  grid-column: auto;
  list-style-type: none;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  justify-content: space-around;
  cursor: pointer;
}

.dropdown:hover {
  position: relative;
  z-index: 2;
  overflow: visible;
  background-color: var(--orangeHover);
}

#startTime input[type="time"],
#endTime input[type="time"],
#startRestTime input[type="time"],
#endRestTime input[type="time"] {
  height: 100%;
  width: 100%;
  padding: 0.5vw;
}

#startTime td,
#endTime td,
#startRestTime td,
#endRestTime td {
  padding: 0;
  margin: 0;
}

#welcome {
  display: flex;
  grid-row-start: 2;
  color: white !important;
  grid-column-start: 1;
  grid-column-end: none;
  overflow: hidden;
  height: fit-content;
  min-height: 100%;
  background: #101419;
  justify-content: flex-end;
  font-size: 0.55rem;
  align-items: center;
  padding-right: 3vw;
}

#informesJornadaFiltro {
  display: flex;
  flex-direction: column;
  grid-column-start: 2;
  grid-row-start: 1;
  background-color: 4b4b4b;
  color: white;
}

#filtro form {
  margin: 0;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: auto;
}

.marginLR1vw {
  margin-left: 1vw;
  margin-right: 1vw;
}

.padding0 {
  padding: 0;
}

.padding05VW {
  padding: 0.5vw;
}

.gap1vw {
  gap: 1vw;
}

.padding1vw {
  padding: 2vw;
}

@keyframes showAfterDelay {
  0% {
    opacity: 0;
  }

  25% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.5;
  }

  75% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

/* Style for the element */
.hover-effect * {
  transition: opacity 0s;
  /* Ensure there's no default transition */
  opacity: 0;
  /* Start with invisible */
}

/* Apply the animation when hovering for 2 seconds */
.hover-effect:hover * {
  animation: showAfterDelay 0.5s 0.5s forwards;
}

/* Optional: If you want the element to become invisible again when not hovered */
.hover-effect * {
  transition: opacity 0s;
}

.hover-effect:not(:hover) * {
  animation: none;
  opacity: 0;
}

.divTotal {
  gap: 1px;
  background: black;
  border: 1px solid black;
  border-radius: 10px;
}

.gap1px {
  gap: 1px;
}

.gap5px {
  gap: 5px;
}

.gap10px {
  gap: 10px;
}

.ofHidden {
  overflow: hidden;
}

.visibleOF {
  overflow: visible;
}

.red {
  background: red;
  color: white;
}

.green {
  background: green;
  color: white;
}

.textWrapN {
  text-wrap: nowrap;
}

.flexCol1f {
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  text-align: center;
  /* Center text horizontally */
}

.imageButton:hover {
  background-color: rgba(0, 0, 0, 0);
  cursor: pointer;
  transform: scale(1.2);
  /* Scale the button to 1.2 times its size */
}

.width100 .flexRowCC .containSize .imageButton {
  transform-origin: center center;
  /* Ensure scaling happens from the center */
}

.containSize {
  contain: size;
}

#jornadasModal {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#jornadasRow {
  align-self: center;
}

#jornadasRow input {
  width: 100%;
  margin: 0;
}

#jornadasRow label {
  width: 100%;
  margin-left: 20px;
}

.grid {
  display: grid;
}

.flexCol1f p {
  flex: 1;
  margin: 0;
}

.padding2VW {
  padding: 2vw;
}

.row1 {
  grid-row: 1;
}

.row2 {
  grid-row: 2;
}

.row3 {
  grid-row: 3;
}

.row4 {
  grid-row: 4;
}

.row5 {
  grid-row: 5;
}

.row6 {
  grid-row: 6;
}

.row7 {
  grid-row: 7;
}

.row8 {
  grid-row: 8;
}

.row9 {
  grid-row: 9;
}

.row10 {
  grid-row: 10;
}

.row11 {
  grid-row: 11;
}

.row12 {
  grid-row: 12;
}

.row13 {
  grid-row: 13;
}

.row14 {
  grid-row: 14;
}

.row15 {
  grid-row: 15;
}

.row7s2 {
  grid-row: 7 / span 2;
}

.row8s2 {
  grid-row: 8 / span 2;
}

.row14s2 {
  grid-row: 14;
}

.column1 {
  grid-column: 1;
}

.column2 {
  grid-column: 2;
}

.column3 {
  grid-column: 3;
}

.column4 {
  grid-column: 4;
}

.column5 {
  grid-column: 5;
}

.column1s2 {
  grid-column: 1 / span 2;
}

table tr:last-child td:first-child,
table tr:last-child td:first-child > input {
  border-radius: 0 0 0 10px;
}

table tr:last-child td:last-child,
table tr:last-child td:last-child > input {
  border-radius: 0 0 10px 0;
}

.padding03rem {
  padding: 1rem;
}

.column2s2 {
  grid-column: 2 / span 2;
}

.column3s2 {
  grid-column: 3 / span 2;
}

.column4s2 {
  grid-column: 4 / span 2;
}

.column5s2 {
  grid-column: 5 / span 2;
}

.column7s2 {
  grid-column: 7 / span 2;
}

.column1s3 {
  grid-column: 1 / span 3;
}

.column2s3 {
  grid-column: 2 / span 3;
}

.column3s3 {
  grid-column: 3 / span 3;
}

.column1s5 {
  grid-column: 1 / span 5;
}

.width18rem {
  width: 1.8rem;
}

.width5rem {
  width: 5rem;
}

.width12rem {
  width: 1.2rem;
}

.displayContents {
  display: contents;
}

.displayBlock {
  display: block;
}

.height12rem {
  height: 1.2rem;
}

.width10rem {
  width: 10rem;
}

.mcWidth {
  width: min-content;
}

.width80 {
  width: 80%;
}

.width90 {
  width: 90%;
}

.width100 {
  width: 100%;
}

.widthMaxC-100 {
  width: max-content;
  max-width: 100%;
}

.alignIC {
  align-items: center;
}

button:not(.imageButton):hover {
  transform: scale(1.02);
  /* Scale the button to 1.2 times its size */
  background: #6b6b6b;
}

input:hover {
  background: rgb(185 229 255);
}

input:focus {
  background: rgb(168 223 255);
}

.alignSC {
  align-self: center;
}

.alignCC {
  align-content: center;
}

.height100 {
  height: 100%;
}

.alignSelfFS {
  align-self: baseline;
}

.height12rem {
  height: 1.2rem;
}

.heightMC {
  height: max-content;
}

.autoOF {
  overflow: auto;
}

.autoOFx {
  overflow-x: auto;
}

.tableContainer {
  overflow: auto;
  border-radius: 0 0 10px 10px;
  font-size: 16px;
  font-family: var(--montserrat);
  border: none;
}

.tableContainerRect {
  overflow: auto;
  font-size: 16px;
  font-family: var(--montserrat);
  border: none;
}

td {
  padding: 0.5vw;
}

.marginLR30-3VWL {
  margin-left: calc(30% - 3vw);
  margin-right: 30%;
}

.marginL5 {
  margin-left: 5%;
}

.normal {
  background: lightgray;
}

.vacaciones {
  font-size: larger;
}

.hoy {
  background: #25b3ebcc;
}

.hoyVacaciones {
  background: #c4480dcc;
  color: white;
}

.marginL10 {
  margin-left: 10%;
}

.marginLR20 {
  margin-left: 20%;
  margin-right: 20%;
}

.marginLR30 {
  margin-left: 30%;
  margin-right: 30%;
}

.marginTop1vw {
  margin-top: 1vw;
}

.margintop0Bot3vw {
  margin-top: 0;
  margin-bottom: 3vw;
}

#filtro form > div:nth-child(3) {
  align-self: center;
  grid-column-start: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#filtro form > div:nth-child(3) button {
  width: 100%;
}

.formFiltro {
  display: grid;
  grid-template-columns: auto auto;
  /* Dos columnas de ancho automático */
}

centrar {
  display: block;
  margin: 0 auto;
}

#btn-open {
  display: block;
  /* Esto asegura que el botón aparezca */
  margin: 0 auto;
  /* Centrará horizontalmente el botón */
}

.marginleft02vw {
  margin-left: 0.2vw;
}

.height2rem {
  height: 2rem;
}

.height25rem {
  height: 2.5rem;
}

.circle {
  background: red;
  color: white;
  border-radius: 90px;
}

.flexRowCC {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.tooltip {
  position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #222a3f;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

.formFiltro:nth-child(1) .tooltip:hover .tooltiptext {
  right: 10%;
  left: 10%;
  font-size: 0.6rem;
}

.formFiltro .tooltip:hover .tooltiptext {
  align-content: center;
  left: auto;
  top: auto;
  font-size: 0.6rem;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  left: 0;
  bottom: 100%;
}

.margintop02vw {
  margin-top: 0.2vw;
}

.darkerThanBlack {
  background: var(--black);
}

.margintop1vw {
  margin-top: 1vw;
}

.marginBot1vw {
  margin-bottom: 1vw;
}

.marginbot02vw {
  margin-bottom: 0.2vw;
}

.marginbot2vw {
  margin-bottom: 2vw;
}

.marginBT1vw {
  margin-bottom: 2vw;
  margin-top: 1vw;
}

.margin0 {
  margin: 0;
}

.padding0 {
  padding: 0;
}

.paddingTop1vw {
  padding-top: 1vw;
}

main > div:nth-child(2) {
  grid-row-start: 2;
  grid-column: 2;
  width: 100%;
  overflow: auto;
}

h2 {
  margin: 0;
  padding: 10px;
  font-family: var(--montserrat);
  color: white;
  font-size: larger;
}

.formFiltro {
  overflow: hidden;
  height: 100%;
}

#workTimeForm {
  display: flex;
  flex-direction: column;
}

.dropdown:hover li {
  display: block;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  text-align: center;
  background-color: var(--orange);
  height: max-content;
  font-size: 0.7rem;
}

.textAlignL {
  text-align: left;
}

.textAlignC {
  text-align: center;
}

.size2REM {
  height: 1rem;
  width: 1rem;
}

.widthFAvail {
  width: -webkit-fill-available;
}

.paddingL2vw {
  padding-left: 2vw;
}

a {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  color: white;
  font-size: calc(15px + 0.390625vw);
  padding: 0;
  text-decoration: none;
  text-align: center;
  justify-content: center;
}

a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.dropdown li {
  padding: 5px;
}

.dropdown li:hover a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* Light gray background on hover */
}

.divNW {
  grid-row-start: 1;
  display: grid;
  grid-column-start: 2;
  grid-template-rows: 50% 50%;
  grid-template-columns: 5% 5% 90%;
  width: 100%;
  background-color: var(--orange);
  color: black;
  height: 100%;
  justify-content: end;
  overflow: visible;
}

.divNW div,
.divNW nav {
  display: flex;
  height: 100%;
  background-color: var(--orange);
  grid-column-start: 3;
  justify-content: space-around;
  align-items: end;
  width: 100%;
}

.dropdown-item {
  font-size: medium;
}

#startTime input[type="time"],
#endTime input[type="time"],
#startRestTime input[type="time"],
#endRestTime input[type="time"] {
  background-color: white;
  text-align: center;
}

.divNW nav {
  height: 100%;
  display: inline-flex;
  flex-direction: row;
  grid-row-start: 1;
  grid-row-end: 3;
  justify-content: space-between;
}

ul {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  color: white;
  overflow: hidden;
}

#divImagLogin ul {
  grid-column-start: 3;
}

.div {
  display: grid;
  color: white;
  grid-row-start: 2;
  grid-column-start: 2;
  height: 100%;
  grid-template-rows: auto;
}

h1 {
  overflow: hidden;
  padding: 10px;
  align-content: center;
  border: none;
  border-radius: 10px 10px 0 0;
  background-color: var(--black);
  color: white;
  font-size: larger;
  font-family: var(--poppins);
  margin: 0%;
}

.black {
  background-color: #948b89;
  color: white;
}

li {
  overflow: hidden;
  margin: 0%;
  padding: 0%;
  height: 100%;
  width: max-content;
  min-width: 100%;
}

tr,
td {
  height: 1rem;
  text-align: center;
  text-wrap: nowrap;
}

main {
  margin-top: 3vw;
  margin-bottom: 6vw;
}

.flexColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.divTotal {
  display: flex;
  overflow: auto;
}

.marginLR10 {
  margin-left: 10%;
  margin-right: 10%;
}

table {
  width: 100%;
  overflow-x: auto;
  background-color: var(--orange);
  color: white;
  align-items: center;
}

/* Main section styles */
.mainLR {
  width: 100%;
  display: grid;

  grid-template-columns: 10% 80% 10%;
  height: 100%;
}

.dropdown li a {
  padding: 2vw;
  padding-top: 1vw;
  padding-bottom: 1vw;
}

/* Login form styles */
#loginForm {
  border-radius: 10px;
  padding: 2vw;
  justify-self: center;
  max-width: 600px;
  overflow-x: auto;
  overflow-y: visible;
  max-height: 100%;
  background-color: white;
  margin-bottom: 0%;
  display: flex;
  flex-direction: column;
}

#loginForm .logoLogin {
  width: 400px;
  height: auto;
  margin-bottom: 1rem;
  align-self: center;
}

label {
  text-align: start;
  color: black;
  text-align: start !important;
  margin-bottom: 10px !important;
  font-size: 1rem;
}

#loginForm label {
  text-align: start;
  margin-top: 1vw;
  margin-bottom: 0.1vw;
}

#divCheckboxes {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

#divCheckboxes label {
  font-size: 0.8rem;
}

input {
  background-color: lightgray;
  font-size: 1rem;
  height: 1.2rem;
  padding: 12px;
  font-family: var(--montserrat);
  overflow: visible;
  border: none;
  border-radius: 10px;
}

input:focus {
  background-color: rgb(216, 241, 255);
  border: none;
}

input[type="checkbox"] {
  height: 100%;
  border: none;
}

#loginForm input[type="submit"] {
  background-color: #4b4b4b;
  color: white;
  height: 2.5rem;
  margin-top: 3vw;
  margin-bottom: 1vw;
  cursor: pointer;
  font-size: 1rem;
}

#loginForm input[type="submit"]:hover {
  background-color: #ff7e3d;
}

textarea:focus,
input:focus {
  outline: none;
}

/* Footer styles */
footer {
  background-color: var(--orange);
  color: white;
  height: auto;
  font-size: smaller;
  text-align: center;
  padding: 2vw;
  border-top: 2px solid black;
}

.Copyright {
  font-size: small;
}

.btndownload {
  padding: 10px;
  font-size: medium;
  font-family: var(--montserrat);
}

#tableTimes {
  border-radius: 10px;
  font-family: var(--montserrat);
  background-color: var(--orange);
}

.clickable_th {
  color: white;
  background-color: #ff6625;
  user-select: none;
}

.clickable_th:hover {
  background-color: #ec5f22;
}

.clicked_th {
  background-color: #5c5c5c;
}

.clicked_th:hover {
  background-color: #454545;
}

#pUsuariosSelecionados {
  display: flex;
  flex-direction: column;
}

#pUsuariosSelecionados p {
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.imageButton {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  height: 1.6rem;
  width: 1.6rem;
  background-color: rgba(0, 0, 0, 0);
  border: none;
  padding: 0;
  margin: 0;
}

.grayWhite {
  background: #4b4b4b;
  color: white;
}

.fileContainer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.filePreviewIcon {
  width: 20px;
  height: auto;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 1%;
}

button[onclick='validateJustificacion("aceptar")'] {
  background-image: url("../img/check.png");
}

button[onclick='validateJustificacion("rechazar")'] {
  background-image: url("../img/refuse.png");
}

#turnosTable td {
  color: #101419 !important;
}

.close-button {
  color: transparent;
}

#archivosButton {
  background-image: url("../img/docs.png");
}

#editarButton {
  background-image: url("../img/editar.png");
  margin-right: 10px;
}

#borrarButton {
  background-image: url("../img/papelera.png");
}

.borrarButton {
  background-image: url("../img/papelera.png");
}

#watchButton {
  background-image: url("../img/eye.png");
  margin-right: 10px;
}

.watchButton {
  background-image: url("../img/eye.png");
  margin-right: 10px;
}

.btnAceptar {
  background-image: url("../img/check.png");
}

.btnRechazar {
  background-image: url("../img/refuse.png");
}

.filtroIMG {
  padding: 0;
  width: 60px;
  height: 60px;
  margin-top: 20px;
  background-image: url("../img/filtro2.png");
}

.filtroIMG:hover {
  margin-top: 15px;
  height: 65px;
  width: 65px;
  background-image: url("../img/filtro.png");
}

.oCircle {
  padding: 0;
  width: 100px;
  height: 100px;
  position: fixed;
  top: 17%;
  left: 1%;
  background-color: var(--orange);
  border-radius: 50%;
}

.oCircle:hover {
  background-color: var(--orange);
  height: 100px;
  width: 100px;
}

#btnJustif {
  min-width: 250px;
  margin-top: 10px;
}

textarea {
  resize: none;
  background-color: lightgray;
  font-size: 1rem;
  height: 1.2rem;
  padding: 10px;
  font-family: var(--montserrat);
  overflow: visible;
  border: none;
  border-radius: 10px;
}

#FaltaHoraYDia {
  font-size: 18px;
  margin: 0;
}

.border1pxorange {
  border: 1px solid var(--orange);
}

#ajustesDiv form {
  align-items: center;
  background-color: white;
}

#vacacionesDiv form {
  align-items: center;
  background-color: white;
  border-radius: 0 0 10px 10px;
}

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Enable scroll if content is taller than the viewport */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black background with opacity */
}

.modal-content {
  background-color: white;
  margin: auto;
  padding: 20px;
  border: none;
  width: 80%;
  /* Set your preferred width */
  max-height: 90vh;
  /* Ensure it doesn't exceed the viewport height */
  overflow-y: auto;
  /* Enable vertical scroll if needed */
  box-sizing: border-box;
  border-radius: 20px;
}

.modal-title {
  text-align: center;
  color: white;
  background-color: var(--black);
  padding: 10px;
  margin: -20px -20px 20px -20px;
  border-radius: 10px 10px 0 0;
  font-family: var(--poppins);
}

.form-section {
  margin-bottom: 20px;
  border: 1px solid var(--orange);
  padding: 15px;
  border-radius: 10px;
  background-color: white;
}

.form-section h3 {
  margin-top: 0;
  color: white;
  background-color: var(--orange);
  padding: 10px;
  margin: -15px -15px 15px -15px;
  border-radius: 10px 10px 0 0;
  font-family: var(--poppins);
}

.form-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.form-row-j {
  display: flex;
  justify-content: space-evenly;
}

.form-row-center {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.marginRight10px {
  margin-right: 10px;
}

.margin #pUsuariosSelecionados {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  font-size: medium;
}

.form-group {
  flex: 1;
  margin-right: 10px;
}

.marginR {
  margin-right: 10px;
}

.form-group-j {
  display: flex;
  align-items: baseline;
  flex-flow: row;
  flex: auto;
  justify-content: center;
}

.form-group:last-child {
  margin-right: 0;
}

.form-section label {
  display: block;
  margin-bottom: 5px;
  color: black;
  font-family: var(--montserrat);
}

.form-section input[type="text"],
.form-section input[type="email"],
.form-section input[type="tel"],
.form-section input[type="password"],
.form-section select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  height: auto;
  font-family: var(--montserrat);
  color: black;
}

.form-section input[type="text"]:focus,
.form-section input[type="email"]:focus,
.form-section input[type="tel"]:focus,
.form-section input[type="password"]:focus,
.form-section select:focus {
  background-color: rgb(216, 241, 255);
  outline: none;
}

.btn-primary {
  background-color: var(--orange);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  display: block;
  min-width: 200px;
  margin: 20px auto 0;
  font-family: var(--poppins);
}

.btn-primary:hover {
  background-color: var(--orangeHover);
}

fieldset {
  border: 1px solid var(--orange);
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 15px;
}

legend {
  padding: 0 10px;
  color: var(--orange);
  font-weight: bold;
}

@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
  }

  .form-group {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

.maxheight30px {
  max-height: 30px;
}

.fontSize08REM {
  font-size: 0.8rem;
}

.fontSize1REM {
  font-size: 1rem;
}

.fontSize2REM {
  font-size: 2rem;
}

.modal-table {
  grid-row-start: 2;
  grid-column: 1;
}

.modal-table table {
  width: 100%;
}

.modal-table div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.flexRow {
  display: inline-flex;
  flex-direction: row;
}

.flexRowSE {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-evenly;
  border-radius: 0 0 10px 10px;
}

.flexRowCenter {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
}

#usuariosTable {
  width: 100%;
  overflow-x: auto;
  background-color: white;
  color: black;
  font-size: medium;
  margin-bottom: 20px;
}

.filter-section {
  background-color: #f9f9f9;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

#comentario {
  min-height: 50px;
}

#justiForm {
  text-align: start;
  align-items: center;
}

.flexColSE {
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: 17px;
  font-family: var(--poppins);
}

#diaSemana {
  display: inline-flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

#diaSemana label {
  font-size: 0.8rem;
}

#filtro input {
  padding: 1vw;
  margin-right: 10px;
  margin-bottom: 10px;
}

.datosDiv {
  display: flex;
  flex-direction: column;
  font-size: large;
  margin: 0;
}

.datosDiv .clienteDiv {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  border-radius: 10px 10px 0 0;
}

.clienteDiv > *,
section > * {
  border-radius: 10px 10px 0 0;
}

section {
  border-radius: 10px;
}

.datosDiv .empleadoDiv {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
}

.gridMR {
  display: grid;
  grid-template-rows: min-content;
}

.gridAuto {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

#divJornadas {
  flex-direction: column;
}

#divJornadas #jornadasManagementTable td {
  text-wrap: wrap;
}

#divJornadas .containSize {
  contain: none;
}

.height14rem {
  height: 1.4rem;
}

.height54rem {
  height: 5.4rem;
}

.height18rem {
  height: 1.8rem;
}

@media only screen and (max-width: 768px) {
  #ajustesDiv form {
    display: flex;
    flex-direction: column;
  }

  #divMenu {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    gap: 1vw;
  }

  #divMenu section {
    width: auto;
  }

  #divMenu section:nth-child(2n) {
    grid-column: 2;
  }

  #formFiltro label {
    align-content: center;
  }

  #diaSemana * {
    font-size: 1rem;
    align-self: center;
  }

  .oCircle {
    top: 17%;
  }

  #divCheckboxes {
    display: inline-table;
  }

  #personalData > div > div:nth-child(n) {
    --dynamic-row: calc(var(--n) + 1);
    grid-row: var(--dynamic-row);
    grid-column: 1 / span 2;
  }

  #credentialData > div > div:nth-child(n) {
    --dynamic-row: calc(var(--n) + 1);
    grid-row: var(--dynamic-row);
    grid-column: 1 / span 2;
  }

  main.marginL10 {
    margin-left: 5%;
  }

  main div.marginLR10 {
    margin-left: 5%;
    margin-right: 5%;
  }
}

@media only screen and (max-width: 480px) {
  .phoneFlexCol {
    display: flex;
    flex-direction: column;
  }

  .phoneMarginLR10 {
    margin-right: 10%;
    margin-left: 10%;
  }

  #divMenu {
    display: inline-flex;
    gap: 1vw;
    flex-direction: column;
  }

  #diaSemana > div,
  .divCheckboxes > div,
  #diaSemana,
  .divCheckboxes {
    display: contents;
  }

  #diaSemana > div div {
    display: inline-table;
  }

  #filtro form > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
    align-items: center;
    /* Optional: Center items vertically */
  }

  .formFiltro > div > * {
    display: block;
  }

  .modal-table {
    overflow: auto;
  }

  .formFiltro > div > button {
    margin-left: 1vw;
    margin-right: 1vw;
  }

  .oCircle {
    top: 35%;
  }

  main.marginL10 {
    margin-left: 0;
  }

  main div.marginLR10 {
    margin-left: 0;
    margin-right: 0;
  }

  .divNW nav {
    display: inline-grid;
    grid-template-columns: 33% 33% 33%;
  }

  #divTarjetas,
  #divMoviles {
    flex-direction: column;
  }

  .containSize {
    contain: none;
  }
}