/*
Free Html5 Responsive Templates
Author: Kimmy
Author URI: http://www.zerotheme.com/
*/
/* -------------------------------------------- */
/* ------------------Reset--------------------- */
@font-face {
  font-family: 'Somatic-Rounded';
  src: url('fonts/Gidole-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: 'DMSans';
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

@keyframes rellenar {
  to {
    stroke-dasharray: var(--porcentaje) 100;
  }
}
#scrollUpButton,#scrollDownButton {
  position: fixed;
  bottom: 50px;
  right: 20px;
  padding: 5px;
  background-color: #FFFFFF;
  color: #412DB6;
  border: none;
  border-radius: 100%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
#scrollDownButton{
  bottom: 0px;
}
.porcentajes{
  position:relative;
}

.porcentajes span {
  position: absolute;
  top: 0%;
  left: 0%;
  bottom: 0%;
  right: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 25px/1em Verdana;
}

circle {
  fill: none;
  stroke-width: 10;
  transform: rotate(-90deg);
  transform-origin: 50%;
  stroke-dasharray: 100 100;
  stroke: #E0E2E4;
  stroke-linecap: round;
}

circle:nth-child(2) {
  /* el segundo círculo, es el que se ve por encima del anterior y debe tener el color mas intenso y el area del porcentaje */
  stroke: var(--color);
  stroke-dasharray: 0 100;
  animation: rellenar .35s linear forwards;
}

/* -------------------------------------------- */
/* ------------------Style--------------------- */
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  /*     background: #444444 url("../images/pattern.png"); */
  background: #ffffff;
  color: #736F6F;
  font: 14px/25px Arial, Helvetica, sans-serif;
  min-height: 100%;
  clear: both;
  font-family: DMSans;
}

.vacaciones {
  float: left;
  width: 100%;
  margin: 0;
  display: none;
}

.fichajes {
  float: left;
  width: 100%;
  margin: 0;
  display: none;
}

.fichaje_entrada,
.fichaje_entrada .fichajes,
.prioridad_baja {
  color: #00ad54;
  padding: 2px 10px;
  background-color: #C0F2D8;
  border-radius: 100px;
  border: 1px solid #00ad54;
}

.fichaje_salida,
.fichaje_salida .fichajes,
.prioridad_alta {
  color: #E05260;
  padding: 2px 10px;
  background-color: #F7D4D7;
  border-radius: 100px;
  border: 1px solid #E05260;
}

.incidencia_presencia,
.prioridad_media {
  color: #dfa10e;
  padding: 2px 10px;
  background-color: #FFE8B3;
  border-radius: 100px;
  border: 1px solid #dfa10e;
}

td.fichaje_salida {
  background-color: transparent;
  border: none;
  border-radius: 0;
}

td.fichaje_entrada {
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.permiso {
  color: blue;
  padding: 2px 10px;
  background-color: rgb(214 214 253);
  border-radius: 100px;
  border: 1px solid blue;
}

/* -------------------------------------------- */
/* ------------------Header-------------------- */

header .menu ul li {
  float: left;
  padding: 5px;
  width: 100px;
  height: 100px;
  color: white;
  cursor: pointer;
  border: 1px solid transparent;
}

header #search .bienvenido {
  float: right;
  color: #fff;
  width: 100%;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.40);
}

header #search .bienvenido span {
  float: right;
  margin: 5px 0;
}

header .notificaciones {
  display: none;
}

/*header #search .bienvenido span.notificaciones{float: right;width: 28px;height: 28px;margin: 5px;border: 1px solid white;text-align:center;font-size: 24px;line-height: 28px;border-radius: 50%;cursor: pointer;display: none;} */
header #search .bienvenido .perfil {
  font-weight: bolder;
  cursor: pointer;
}

/* -------------------------------------------- */
/* ------------------Navigation---------------- */

nav .wrap-nav {
  height: auto;
  min-height: 108px;
  background: #fff;
  border: none;
}

.submenu ul li {
  float: left;
  padding: 5px;
  width: 100px;
  height: 100px;
  border-left: 1px solid #e3e5e5;
  cursor: pointer;
}

/* -------------------------------------------- */
/* ------------------Content------------------- */

#content {
  margin-bottom: 0;
  /*margin-bottom: 60px;*/
}

#loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
  z-index: 9999999;
  display: none;
}

#loading img {
  position: absolute;
  top: 25%;
  left: 55%;
  margin: -21px 0 0 -191px;
  width: 10%;
}

.block02 .seleccionar {
  float: left;
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  border: none;
  margin: 0;
  background: none;
  /*background: #f5f5f5;*/
}

.block02 .tabla table {
  float: left;
  width: 98%;
  margin: 1%;
}

.block02 .formulario {
  float: left;
  padding-top: 10px;
  width: 100%;
  min-height: 40px;
  line-height: 40px;
  border: none;
  /*border: 1px solid #bbb;*/
  margin: 0%;
  background: transparent;
}

.block02 .formulario form .configuracion_horario .fila_horario .celda_horario .subcelda_horario {
  float: left;
  width: 100%;
  margin: 0px;
  line-height: 25px;
  display: flex;
}

.block02 .formulario form .configuracion_horario .fila_horario .celda_horario .subcelda_horario input[type="checkbox"] {
  margin: 5px 15% 5px 18%;
}

.block02 .formulario form .roles_menu .item_elemento .acceso_menu {
  float: left;
  line-height: 25px;
  height: 1230px;
  width: 200px;
  margin-bottom: 15%;
}

.block02 .formulario form .roles_gestion .item_elemento .configura_gestion label{float: left;width: 228px;margin-left: 10px;}

.block02 .formulario form .requerido {
  background-color: #dddddd69;
}

.block02 .paginar {
  float: left;
  width: auto;
  min-height: 40px;
  line-height: 0px;
  border: 1px solid #bbb;
  margin: 10px 40%;
  background: rgb(221, 221, 221);
  text-align: center;
  font-size: 20px;
  cursor: pointer;
}

.textos_cookies {
  background: rgba(100, 100, 100, 0.5);
  position: fixed;
  z-index: 9999;
  width: 100% !important;
  height: 100px;
  bottom: 0;
  left: 0;
}

.tabla_listado tbody tr td span.fichajes {
  float: left;
  width: 70px;
  text-align: right;
  display: inline-block;
}

.tabla_listado tbody tr td input[type="text"]{
  float: left;
  margin: 4px;
  text-align: center;
  display: none;
  line-height: 22px;
  padding: 0 5px;
  border: 0;
  border-bottom: 1px solid #707070;
}


.modalDialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
  z-index: 99999;
  opacity: 0;
  webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div:not(.modal-content) {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  /*background: -moz-linear-gradient(#fff, #eee);background: -webkit-linear-gradient(#fff, #eee);background: -o-linear-gradient(#fff, #eee);*/
}

.modalDialog>div a.button {
  width: 17%;
  height: 30px;
  margin: 5% 13%;
  text-align: center;
  border-radius: 10px;
  background: #606061;
  color: #FFFFFF;
  padding: 1% 3%;
  line-height: 30px
}

.modalDialog>div a.button.triple {
  width: 25%;
  height: 30px;
  margin: 5% 1%;
  text-align: center;
  border-radius: 10px;
  background: #606061;
  color: #FFFFFF;
  padding: 1% 3%;
  line-height: 30px;
  text-transform: none;
}

.buttonmodalDialog {
  margin: 5px 0;
  padding: 2px 10px;
  color: #666;
  background: rgb(221, 221, 221);
  border: 1px solid #bbb;
  line-height: 24px;
  font-size: 12px;
  cursor: pointer;
}

.textomodalDialog {
  width: 15%;
  margin: 4px;
  text-align: center;
  display: inline-block;
  line-height: 22px;
  padding: 0 5px;
  border: 1px solid #949494;
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  cursor: pointer;
}

.close:hover {
  background: #00d9ff;
}

.modalDialog .divActualizaciones {
  width: 400px;
  height: 300px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #eee);
  background: -webkit-linear-gradient(#fff, #eee);
  background: -o-linear-gradient(#fff, #eee);
}

.modalDialog .divActualizaciones .buttonmodalActualizaciones {
  padding: 2px 10px;
  color: #666;
  background: rgb(221, 221, 221);
  border: 1px solid #bbb;
  line-height: 24px;
  font-size: 12px;
  cursor: pointer;
  bottom: 5%;
  right: 5%;
  position: absolute;
}

.modalDialog .divActualizaciones .textoActualizaciones {
  overflow: hidden;
  height: 80px;
  max-height: 80px;
  inline-size: 400px;
  overflow-wrap: break-word;
}

.modalDialog .divActualizaciones .divImagen {
  display: flex;
  justify-content: center
}

.modalDialog .divActualizaciones .imgActualizaciones {
  top: 0;
  left: 0;
  right: 0;
  bottom: 15%;
  margin: auto;
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 350px;
  max-height: 180px;
}

.modalDialog .divActualizaciones .checkboxActualizaciones {
  vertical-align: middle;
  bottom: 7%;
  left: 5%;
  position: absolute;
}

.modalDialog .divActualizaciones .labelActualizaciones {
  vertical-align: middle;
  bottom: 5%;
  left: 10%;
  position: absolute;
}

.modalDialog .divActualizaciones .anterior {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: 430px;
  top: 50%;
  text-align: center;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  cursor: pointer;
}

.modalDialog .divActualizaciones .siguiente {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  left: 430px;
  top: 50%;
  text-align: center;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  cursor: pointer;
}


.modalDialogEncuesta {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
  z-index: 99999;
  opacity: 0;
  webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialogEncuesta>div {
  padding: 0;
}

.ventana_rgpd > div {width: 800px;position: relative;margin: 10% auto;border-radius: 10px;background: #fff;/*padding: 5px 20px 13px 20px;background: -moz-linear-gradient(#fff, #eee);background: -webkit-linear-gradient(#fff, #eee);background: -o-linear-gradient(#fff, #eee);*/}
.ventana_contrato > div {width: 400px;position: relative;margin: 10% auto;border-radius: 10px;background: #fff;/*padding: 5px 20px 13px 20px;background: -moz-linear-gradient(#fff, #eee);background: -webkit-linear-gradient(#fff, #eee);background: -o-linear-gradient(#fff, #eee);*/}
.block02 .tabla_planilla_3-3{float: left; width: 32%;min-height: 40px;line-height: 40px;border: 1px solid #bbb;margin: 0.5%;background: transparent;}
.block02 .tabla_planilla_3-3 table{float: left; width: 98%;margin: 1%;}


/*control fichajes VP25*/
.block02 .control_fichajes { width: 100%; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.1); padding: 10px; overflow: hidden; }
.block02 .control_fichajes .tabla_scroll_wrapper { overflow: auto; width: 100%; max-height: 50vh; }
.block02 .control_fichajes table { border-collapse: collapse; width: max-content; min-width: 100%; table-layout: fixed; font-size: 14px; user-select: none; }
.block02 .control_fichajes table thead tr th { padding: 8px 12px; background: #eef2ff; color: #000; border-bottom: 1px solid #ccc; min-width: 90px; white-space: nowrap; text-align: center; font-weight: 600; position: sticky; top: 0; z-index: 2; }
.block02 .control_fichajes table thead tr th:first-child { position: sticky; left: 0; z-index: 3; background: #e0e7ff; width: 300px; min-width: 300px; max-width: 300px; }
.block02 .control_fichajes table tbody tr td:first-child { position: sticky; left: 0; z-index: 2; background: #f9fafb; text-align: left; font-weight: 600; white-space: nowrap; color: #222; width: 300px; min-width: 300px; max-width: 300px; }
.block02 .control_fichajes table thead tr th:nth-child(2) { position: sticky; left: 300px; z-index: 3; background: #e0e7ff; }
.block02 .control_fichajes table tbody tr td:nth-child(2) { position: sticky; left: 300px; z-index: 2; background: #f9fafb; text-align: left; font-weight: 600; white-space: nowrap; color: #222; }
.block02 .control_fichajes table tbody tr.ctrlfichaje td { padding: 8px 12px; border-bottom: 1px solid #acacac; white-space: nowrap; text-align: center; }
.block02 .control_fichajes table tbody tr.ctrlfichaje td.hoy { background-color: #daffe7; }


.ventana_notificaciones>div p {
  width: 100%;
  height: auto;
  cursor: unset;
  /*cursor: pointer; */
}

.ventana_rgpd>div {
  width: 800px;
  position: relative;
  margin: 10% auto;
  border-radius: 10px;
  background: #fff;
  /*padding: 5px 20px 13px 20px;background: -moz-linear-gradient(#fff, #eee);background: -webkit-linear-gradient(#fff, #eee);background: -o-linear-gradient(#fff, #eee);*/
}

.ventana-update {
  background-color: #9e9e9e;
  width: 772px;
  padding: 15px 25px 25px;
  position: relative;
  border-radius: 6px;
  color: #FFF;
  height: 70px;
  margin: 0 auto !important;
  top: 50%;
}

.active,
.accordion:hover {
  background-color: #ccc !important;
}

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 100;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

.modal-content.novedadesBody {
  position: absolute !important;
  background: #fff !important;
  margin: 0 !important;
  width: 60vw !important;
}

.modalReclutamiento {
  position: fixed;
  /* Fijar el modal en la pantalla */
  z-index: 50;
  /* Asegurar que el modal esté por encima de otros elementos */
  left: 0;
  top: 0;
  width: 100%;
  /* Hacer que el modal ocupe todo el ancho de la pantalla */
  height: 100%;
  /* Hacer que el modal ocupe todo el alto de la pantalla */
  overflow: auto;
  /* Permitir el desplazamiento si el contenido es demasiado grande */
  background-color: rgba(0, 0, 0, 0.5);
  /* Fondo semitransparente */
}

.modalContentReclutamiento {
  background-color: #fff;
  /* Fondo blanco para el contenido del modal */
  margin: 10% auto;
  /* Centrar el modal verticalmente y horizontalmente */
  padding: 30px;
  /* Espaciado interno */
  border: 1px solid #888;
  /* Borde del modal */
  width: 80%;
  /* Ancho del modal */
  max-width: 600px;
  /* Ancho máximo del modal */
  border-radius: 8px;
  /* Bordes redondeados */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* Sombra para el modal */
  position: relative;
}

.closeReclutamiento {
  color: #aaa;
  /* Color del botón de cierre */
  position: absolute;
  /* Posición absoluta dentro del contenedor del modal */
  top: 10px;
  /* Desplazamiento desde la parte superior */
  right: 10px;
  /* Desplazamiento desde la parte derecha */
  font-size: 28px;
  /* Tamaño de fuente del botón de cierre */
  font-weight: bold;
  /* Peso de fuente del botón de cierre */
}

.closeReclutamiento:hover,
.closeReclutamiento:focus {
  color: #000;
  /* Cambiar el color al pasar el ratón o enfocar */
  text-decoration: none;
  /* Quitar subrayado */
  cursor: pointer;
  /* Cambiar el cursor a una mano */
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

#caption1 {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }

  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

/* The Close Button */
.closePartes {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closePartes:hover,
.closePartes:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

.closeIOS {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.closeIOS:hover,
.closeIOS:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}



/* --------------------------------------------------------------- */
/* ------------------Estilos de Visualpresencia 2.5------------------- */
div#barraCabecera {
  background-color: #ffffff !important;
}

div#logoCabecera {
  display: none !important;
}

.divider {
  width: 2px;
  background-color: #000;
}

.img_empty_states {
  margin-bottom: 0.5rem !important;
  max-width: 7rem !important;
}

.cardsIndex {
  margin: 0 auto;
}

.cardWidget {
  position: relative;
}

.cardWidget_title {
  border-bottom: 1px solid #E2E8F0;
}

.cardsWidth1 {
  width: 32%;
  transition: transform 0.3s;
}

.cardsWidth2 {
  width: 66%;
  transition: transform 0.3s;
}

.cardWidget_body {
  max-height: 282px;
  overflow-y: auto;
}

.cardsWidth2 .cardWidget_body,
.cardsWidth1 .cardWidget_body {
  overflow-x: hidden;
}

.cardsWidth2>.cardWidget_body:has(.cardNoticias) {
  overflow-y: hidden;
}

.cardsWidth1:hover,
.cardsWidth2:hover {
  transform: scale(1.01);
}

.cardsWidth1 div.cardWidget_row {
  margin-top: 0 !important;
  flex-direction: column;
  /*border-bottom: none;*/
}

.cardsWidth1 div.cardWidget_row.overflowCumple {
  overflow-x: hidden;
}

.cardsWidth2 div.cardWidget_row {
  flex-direction: inherit;
  /*border-bottom: 1px solid #6D6D6D;*/
}

.cardsWidth2 div.cardWidget_row.overflowCumple {
  overflow-x: auto;
}

.cardsWidth1 div.cardWidget_item {
  width: 100%;
  padding: 15px 0;
  border-bottom: 1px solid #E2E8F0;
}

.cardsWidth1 div.cardWidget_itemMenu {
  width: 100%;
  /*padding: 15px 0;
  border-bottom: 1px solid #6D6D6D;*/
}

.cardsWidth1 #dropdown-leyenda,
.cardsWidth2 #dropdown-leyenda {
  padding: 10px;
  width: 100%;
  transform: translate(0px, 59px) !important;
}

.cardsWidth1 #dropdown-leyenda div {
  justify-content: start;
}

.cardsWidth1 .cardWidget_item2{
  flex-direction: column;
}

.cardsWidth1 .cardWidget_item2 .cardWidget_item2_row {
  flex-direction: row;
}

.cardsWidth2 div.cardWidget_item {
  width: 33%;
  height: 80px;
  border-bottom: 1px solid #E2E8F0;
}

.cardsWidth2 div.cardWidget_item.cardWidget_item_mitad {
  width: 50%;
  height: 80px;
  border-bottom: 1px solid #E2E8F0;
}

.cardsWidth2 div.cardWidget_itemMenu {
  width: 32%;
  /*height: 80px;
  border-bottom: 1px solid #6D6D6D;*/
}

.cardWidget_item2 {
  width: 90%;
  border-bottom: 1px solid #6D6D6D;
}

.cardsWidth2 .cardWidget_item2,
.cardsWidth1 .filtroEstadoWidget,
.cardsWidth2 .filtroEstadoWidget {
  flex-direction: row;
}

.cardsWidth2 .cardWidget_item2 .cardWidget_item2_row {
  flex-direction: column;
}

.cardWidget_row {
  color: #000000;
}

.cardsWidth1 table.dias_mes div.contenidoCalendarWidget {
  width: 3rem !important;
}

.cardsWidth2 table.dias_mes div.contenidoCalendarWidget {
  width: 6rem !important;
}

.cardsWidth2 .cardNoticias {
  display: flex;
  row-gap: 15px;
  column-gap: 15px;
  overflow-x: auto;
  /*flex-wrap: wrap;
   justify-content: space-between; */
}

.cardsWidth1 .cardNoticias {
  display: flex;
  row-gap: 10px;
  flex-direction: column;
  /* justify-content: space-between; */
}

/* .cardNoticiasItems:first-child{
  width: 100%;
} */
.cardsWidth2 .cardNoticiasItems {
  /* flex-basis: 48%; */
  /* flex-grow: 1; */
  flex-shrink: 1;
  flex-basis: 0%;
  min-width: 48%;
}

.cardsWidth1 .cardNoticiasItems {
  /* flex-basis: 48%; */
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
}

.cardsWidth1 .cardWidget_row .cardNoticiasItems {
  width: 100%;
}

.cardNoticiasItems img {
  width: 100%;
  height: 150px;
}

.sortable {
  margin: 0 auto;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  row-gap: 20px;
  column-gap: 20px;
  padding: 1.2rem;
}

.DISC .sortable {
  margin: 0 auto;
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  row-gap: 0px;
  column-gap: 20px;
  padding: 1.2rem;
}

.sortable div .card {
  cursor: move;
}

.sortable div.chosen .card {
  transform: scale(1.02), rotate(-10deg);
  box-shadow: 0px 0px 20px #ccc;
  background-color: #dadada;
}

.sortable div.ghost .card {
  opacity: 0.4;
}

.sortable div.drag .card {
  background-color: black;
}

.sortableBtn {
  width: 100%;
}

.handle {
  cursor: grab;
}

.corner-button {
  position: absolute;
  top: -15px;
  left: -15px;
  line-height: 1;
  border-radius: 50%;
  /* Hace que el botón sea completamente redondo */
  background-color: white;
  /* Fondo blanco */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Efecto de sombra */
  width: 30px;
  /* Ajusta el ancho del botón */
  height: 30px;
  /* Ajusta la altura del botón */
  color: black;
  font-size: 14px;
  transition: all 0.3s;
  /* Agrega una transición suave */
}

.corner-button:hover {
  width: 35px;
  /* Ajusta el ancho del botón */
  height: 35px;
  color: red;
  /* Cambia el color del texto a rojo */
  font-size: 24px;
  /* Aumenta el tamaño del texto en 10px */
}

.constant-tilt-shake {
  animation: tilt-shaking 0.3s infinite;
  -webkit-animation: tilt-shaking 0.3s infinite;
  cursor: grab;
}

@keyframes tilt-shaking {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(.5deg);
    -webkit-transform: rotate(.5deg);
    -moz-transform: rotate(.5deg);
    -ms-transform: rotate(.5deg);
    -o-transform: rotate(.5deg);
  }

  50% {
    transform: rotate(0eg);
  }

  75% {
    transform: rotate(-.5deg);
    -webkit-transform: rotate(-.5deg);
    -moz-transform: rotate(-.5deg);
    -ms-transform: rotate(-.5deg);
    -o-transform: rotate(-.5deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.cabeceraWidgetBody {
  border-radius: 10px;
  background: #FFF;
  box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.cabeceraWidgetIcon {
  width: 60px;
  display: flex;
  justify-content: center;
  height: 60px;
  align-items: center;
  border-radius: 100%;
  border: 1px solid;
  box-shadow: 2px 4px 5px 0px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s;
}

.cabeceraWidgetIcon:hover {
  transform: scale(1.08);
}

.leyendaActive {
  background-color: #2C2554 !important;
  color: #fff;
}

div.cards_header {
  height: 70px !important;
}

div.card_width_button {
  width: 20%;
}

div.card_width_filtros {
  width: 70%;
}

div.card_width_export {
  width: 10%;
}

.accion_multiple {
  border: 1px solid;
}

/* Contenedor checbox */
.container_check,
.container_radio {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Resetear checkbox */
.container_check input,
.container_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* checkbox nuevo */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #FFF;
  border: 1px solid #ccc;
}

.checkmark_radio {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #FFF;
  border: 1px solid #ccc;
  border-radius: 50%;
}


.container_check:hover input~.checkmark,
.container_radio:hover input~.checkmark_radio {
  background-color: #ccc;
}

/* checkbox Activado */
.container_check input:checked~.checkmark,
.container_radio input:checked~.checkmark_radio {
  background-color: #2BD47D;
  border: none;
}

.checkmark:after,
.checkmark_radio:after {
  content: "";
  position: absolute;
  display: none;
}


.container_check input:checked~.checkmark:after,
.container_radio input:checked~.checkmark_radio:after {
  display: block;
}

/* Indicador del checkbox */
.container_check .checkmark:after {
  left: 5px;
  top: 1px;
  width: 7px;
  height: 11px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

.container_radio .checkmark_radio:after {
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;

}

#ver_elemento {
  margin: 0%;
}



.input_group {
  position: relative;
  padding: 10px 0 0;
  margin-bottom: 18px;

}

.input_field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #707070;
  outline: 0;
  font-size: 13px;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
  z-index: 1;
}

input.placeholder::placeholder {
  color: #000;
  z-index: 5;
  text-align: right;
}

.input_field[type="time"] {
  padding: 7px 0 5px 0;
}

.input_field[type="number"]::-webkit-inner-spin-button,
.input_field[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input_field[type="number"]::-webkit-outer-spin-button {
  -moz-appearance: textfield;
}

.input_field::placeholder {
  color: transparent;
}

.input_field:placeholder-shown~.input_label {
  font-size: 13px;
  cursor: text;
  top: 20px;
}

.input_field:placeholder-shown~.input_label_form {
  font-size: 13px;
  cursor: text;
  top: 0px;
}

div.formularioFiltro .input_field:placeholder-shown~.input_label {
  font-size: 13px;
  cursor: text;
  top: -25px;
}

.divDatatable th {
  font-weight: bold !important;
}

.input_label {
  position: absolute;
  top: 0px;
  display: block;
  transition: 0.2s;
  font-size: 13px;
  color: black;
  font-weight: 400;
}

div.formularioFiltro .input_label {
  position: absolute;
  top: -25px;
  display: block;
  transition: 0.2s;
  font-size: 13px;
  color: black;
  font-weight: 400;
}

.input_label_form,
.input_label_form_filtro {
  position: absolute;
  top: -15px;
  display: block;
  transition: 0.2s;
  font-size: 13px;
  color: black;
}

.force.input_label_form,
.force.input_label_form_filtro,
.force.input_label_file,
.force_textarea {
  font-weight: bold;
  color: #000;
}

.force-red {
  color: red;
}

/*input:invalid {
  color: red;
}*/

.input_label_form_filtro {
  top: -30px;
}

.input_field:focus {
  padding-bottom: 6px;
  font-weight: 500;
  border-width: 2px;
  border-image: linear-gradient(to right, #2C2554, #2C2554);
  border-image-slice: 1;
}

.input_icon {
  border: 0;
  border-bottom: 1px solid #707070;
}

.input_field:focus~.input_icon {
  padding-bottom: 6px;
  font-weight: 500;
  border-width: 2px;
  border-image: linear-gradient(to right, #2C2554, #2C2554);
  border-image-slice: 1;
}

.input_field:focus~.input_label {
  position: absolute;
  top: 0px;
  display: block;
  transition: 0.2s;
  color: #2C2554;
  font-weight: 500;
}

.input_field:focus~.input_label_form {
  position: absolute;
  top: -15px;
  display: block;
  transition: 0.2s;
  color: #2C2554;
  font-weight: 500;
}

div.formularioFiltro .input_field:focus~.input_label {
  position: absolute;
  top: -25px;
  display: block;
  transition: 0.2s;
  color: #2C2554;
  font-weight: 500;
}


/* reset input */
.input_field:required,
.input_field:invalid {
  box-shadow: none;
}

.filtro_empleado_form {
  height: 26px;
}

.filtro_empleado_form label {
  top: -20px !important;
}

.filtro_empleado_form .input_icon {
  margin-top: -10px !important;
}

div#loading div.row {
  float: left;
  width: 50%;
  margin: 15% 26%;
}

.spinner {
  margin: 100px auto;
  width: 50px;
  height: 40px;
  text-align: center;
  font-size: 10px;
}

.spinner>div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;

  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {

  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4)
  }

  20% {
    -webkit-transform: scaleY(1.0)
  }
}

@keyframes sk-stretchdelay {

  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }

  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.active_tab {
  border-bottom: 2px solid #2C2554;
  color: #2C2554;
}

.active_tab_fichaje {
  color: #412DB6DE;
  font-weight: 600;
  background-color: #ffffff;
}

.inactive_tab:hover {
  border-bottom: 2px solid #BABABA;
}

.inactive_tab_fichaje:hover {
  background-color: #ffffff;
}

/*.textos_cookies{
width: 95%!important;
} */
.btn_login,
input.btn_login {
  background-color: #412DB6 !important;
  border: 1px solid #412DB6 !important;
  transition: 0.3s !important;
}

.btn_login:hover,
input.btn_login:hover {
  background-color: #FFF !important;
  border: 1px solid #412DB6 !important;
  color: #412DB6 !important;
}

div#ui-datepicker-div {
  z-index: 51 !important;
  transform: translate(-270px, 5px);
  -webkit-transform: translate(-270px, 5px);
  -moz-transform: translate(-270px, 5px);
  -ms-transform: translate(-270px, 5px);
  -o-transform: translate(-270px, 5px);
}

.active-submenu {
  background-color: #cccccc59 !important;
}

.selector_empresas {
  margin-bottom: -4px;
}

.selector_empresas select {
  width: 200px;
  background-repeat: no-repeat;
  border-bottom: 1px solid;
  background-clip: padding-box;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0 center;
  background-size: 16px 16px;
  outline: none;
}

.selector_form {
  width: 25%;
  margin-top: -10px;
}

.selector_form select {
  background-repeat: no-repeat;
  border-bottom: 1px solid;
  background-clip: padding-box;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0 center;
  background-size: 16px 16px;
  height: 36px;
  outline: none;
  padding-left: 5px;
}

.selector_idiomas {
  margin-bottom: 9px;
}

.selector_idiomas select {
  width: 40px;
  font-size: 16px;
  border-bottom: 1px solid;
  background-repeat: no-repeat;
  background-clip: padding-box;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0 center;
  background-size: 16px 16px;
  outline: none;
}

.div_icon_calendar,
.div_icon_time {
  background-repeat: no-repeat;
  background-size: 25px 25px;
  background-position: right 0 center;
}

.div_icon_calendar {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'><path d='M11 12h6v6h-6z'></path><path d='M19 4h-2V2h-2v2H9V2H7v2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm.001 16H5V8h14l.001 12z'></path></svg>");
}

.div_icon_time {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' style='fill: rgba(0, 0, 0, 1);transform: ;msFilter:;'><path d='M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z'></path><path d='M13 7h-2v6h6v-2h-4z'></path></svg>");
}

.div_icon_calendar input,
.div_icon_time input {
  cursor: pointer;
}

.upload-btn {
  margin-left: 300px;
  padding: 7px 20px;
}

.span_dataTable-ausente,
.span_prioridad-media {
  color: #dfa10e;
  padding: 2px 10px;
  background-color: #FFE8B3;
  border-radius: 100px;
  border: 1px solid #dfa10e;

}

.span_dataTable-presencia,
.span_prioridad-baja {
  color: #00ad54;
  padding: 2px 10px;
  background-color: #C0F2D8;
  border-radius: 100px;
  border: 1px solid #00ad54;

}

.span_dataTable-retraso,
.span_prioridad-alta {
  color: #E05260;
  padding: 2px 10px;
  background-color: #F7D4D7;
  border-radius: 100px;
  border: 1px solid #E05260;

}

.cabecera {
  min-height: 0 !important;
  height: 65px !important;
  padding: 0 15px !important;
}

.botonera {
  background-color: transparent;
}

.empleados label {
  display: none;
}

.empleados input {
  width: 100%;
}

.boton.first {
  cursor: pointer;
}

#search.cabecera-dropdown .bienvenido div {
  color: #707070;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#form_festivo {
  height: 200px;
  overflow: auto;
}

body::-webkit-scrollbar {
  width: 8px;
  display: block;
  /* width of the entire scrollbar */
}

body::-webkit-scrollbar-thumb {
  background: #2C2554;
  border-radius: 4px;
}

.sidebarModulos::-webkit-scrollbar,
.submenu-items::-webkit-scrollbar,
div.pq-select-menu::-webkit-scrollbar,
div.dataTables_scrollBody::-webkit-scrollbar,
div.divDatatable::-webkit-scrollbar,
.divContenedor::-webkit-scrollbar,
#form_festivo::-webkit-scrollbar,
.divNotificaciones::-webkit-scrollbar,
#dropdown-tarjetas::-webkit-scrollbar,
#modal_denuncia::-webkit-scrollbar,
.opciones_idioma::-webkit-scrollbar {
  width: 5px;
  display: block;
}

.sidebarModulos::-webkit-scrollbar-track,
.submenu-items::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
div.pq-select-menu::-webkit-scrollbar-track,
div.dataTables_scrollBody::-webkit-scrollbar-track,
div.divDatatable::-webkit-scrollbar-track,
.divContenedor::-webkit-scrollbar-track,
#form_festivo::-webkit-scrollbar-track,
.divNotificaciones::-webkit-scrollbar-track,
#dropdown-tarjetas::-webkit-scrollbar-track,
#modal_denuncia::-webkit-scrollbar-track,
.opciones_idioma::-webkit-scrollbar-track {
  background: transparent;
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
.sidebarModulos::-webkit-scrollbar-thumb,
.submenu-items::-webkit-scrollbar-thumb,
div.pq-select-menu::-webkit-scrollbar-thumb,
div.dataTables_scrollBody::-webkit-scrollbar-thumb,
div.divDatatable::-webkit-scrollbar-thumb,
.divContenedor::-webkit-scrollbar-thumb,
#form_festivo::-webkit-scrollbar-thumb,
.divNotificaciones::-webkit-scrollbar-thumb,
#dropdown-tarjetas::-webkit-scrollbar-thumb,
#modal_denuncia::-webkit-scrollbar-thumb,
.opciones_idioma::-webkit-scrollbar-thumb {
  background: #2C2554;
  border-radius: 4px;
}

div.divDatatable::-webkit-scrollbar-thumb {
  background: #2C2554;
}


.sidebar {
  box-shadow: none;
  border-radius: 0%;
  left: 0px;
  z-index: 100;
  transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -o-transition: all .5s ease;
  -webkit-border-radius: 0%;
  -moz-border-radius: 0%;
  -ms-border-radius: 0%;
  -o-border-radius: 0%;
  width: 16em;
}

.sidebar .icon-menu:hover {
  color: rgb(55 65 81 / var(--tw-text-opacity));
}


.sidebar .icon-menu {
  justify-content: start;
  /*flex-direction: column;*/
  line-height: initial;
  gap: 10px;
}

.sidebar-submenu {
  padding: 1em !important;
  z-index: 50;
  margin-left: 1% !important;
  top: 75px !important;
  overflow: auto !important;
  height: auto !important;
  width: 70%;
  transform: none !important;
  -webkit-transform: none !important;
  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;

}

/*.sidebar-submenu div:first-child{
  border-bottom: 1px solid #707070 !important;
}*/
.sidebar-submenu a:hover {
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.section-container {
  background-color: #f2f2f2;
  position: relative;
  top: 0;
  left: 224px;
  width: calc(100% - 224px);
  transition: all 0.5s ease;
  overflow-x: hidden;
}

.hoverTabla {
  cursor: pointer;
}

.hoverTabla:hover {
  color: #2C2554;
  border-bottom: 1px solid #2C2554;
}

.divDatatable,
.divContenedor {
  height: 72vh !important;
  overflow: auto;
  overflow-x: hidden;
}

.divDatatable div.dataTables_wrapper table {
  margin: 0 !important;
  padding: 0 !important;
}

.divDatatable .boton-tabla-vpc,
.boton-tabla-desabilitado,
.divDatatable .tabla_accion {
  border: 1px solid #2C2554 !important;
  padding: 0.25rem 1.25rem 0.25rem 1.25rem;
  color: #2C2554;
  font-weight: 500;
  text-align: center;
  border-radius: 9999px;
  background-color: #fff;
}

.botones-tabla-vpc-borde {
  border: 1px solid #2C2554 !important;
  padding: 0.25rem 1.25rem 0.25rem 1.25rem;
  color: #2C2554;
  font-weight: 500;
  text-align: center;
  background-color: #fff;
  margin-right: 1px;
}

.botones-tabla-vpc-borde:first-child {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.botones-tabla-vpc-borde:last-child {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.botones-tabla-vpc-borde:only-child {
  border-radius: 9999px;
  /* Redondea todas las esquinas */
}

.divDatatable .boton-tabla-vpc-left {
  border: 1px solid #2C2554 !important;
  padding: 0.25rem 1.25rem 0.25rem 1.25rem;
  color: #2C2554;
  font-weight: 500;
  text-align: center;
  background-color: #fff;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  margin-right: 1px;
}

.divDatatable .boton-tabla-vpc-right {
  border: 1px solid #2C2554 !important;
  padding: 0.25rem 1.25rem 0.25rem 1.25rem;
  color: #2C2554;
  font-weight: 500;
  text-align: center;
  background-color: #fff;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  margin-right: 1px;
}

.divDatatable .boton-tabla-vpc-center {
  border: 1px solid #2C2554 !important;
  padding: 0.25rem 1.25rem 0.25rem 1.25rem;
  color: #2C2554;
  font-weight: 500;
  text-align: center;
  background-color: #fff;
  margin-right: 1px;
}

.divDatatable .boton-tabla-vpc:hover,
.divDatatable .boton-tabla-vpc-left:hover,
.divDatatable .boton-tabla-vpc-right:hover,
.divDatatable .boton-tabla-vpc-center:hover,
.divDatatable .tabla_accion:hover,
.divDatatable .botones-tabla-vpc-borde:hover {
  color: #fff !important;
  background-color: #2C2554;
  cursor: pointer;
}

a#botonPrincipal.buttonModal {
  border: 2px solid #2C2554 !important;
}

a#botonSecundario.buttonModal {
  border: 2px solid #D9D9D9 !important;
}

a#botonSecundarioInput.buttonModal {
  border: 2px solid #B91C1C !important;
}

.boton-tabla-vpc-ver {
  border: 1px solid #2C2554 !important;
  padding: 0.25rem 1.25rem 0.25rem 1.25rem;
  color: #2C2554;
  font-weight: 500;
  text-align: center;
  background-color: #fff;
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  margin-right: 1px;
}

.boton-tabla-vpc-ver:hover {
  color: #fff !important;
  background-color: #2C2554;
  cursor: pointer;
}

table.tablaDatatable {
  margin: 0.75em 0 0 0 !important;
  width: 100% !important;
  table-layout: 200px;
  height: 200px;
  overflow: scroll;
  padding-left: 9px;
}

table.tablaDatatable.tablaDoble {
  width: 100% !important;
}

table.tablaDatatable.dataTable thead th {
  border-bottom: 1px solid #f2f2f2;
  padding: 5px 20px 0 20px !important;
  position: sticky;
  top: -1px;
  z-index: 1;
  background-color: #F9B226;
}

table.tablaDatatable.dataTable thead th:first-child {
  border-top-left-radius: 10px;
}

table.tablaDatatable.dataTable thead th:last-child {
  border-top-right-radius: 10px;
}

table.tablaDatatable.dataTable tbody tr td {
  /*background-color: #fff !important; */
  padding: 0 0 0 10px !important;
  font-size: 14px !important;
  border-bottom: 1px solid #707070 !important;
  max-width: 200px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #333 !important;
}

table.tablaDatatable.dataTable tbody tr td:first-child {
  max-width: 30px !important;
}

table.tablaDatatable.dataTable tbody tr.odd>td.sorting_1 {
  background: rgba(255, 255, 255, 0.25) !important;
}

table.tablaDatatable.dataTable tbody tr.even>td.sorting_1 {
  background: rgba(217, 217, 217, 0.45) !important;
}

table.tablaDatatable.dataTable thead .sorting,
table.tablaDatatable.dataTable thead .sorting_asc,
table.tablaDatatable.dataTable thead .sorting_desc {
  background-position-x: left !important;
}

table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.odd td.sorting_1,
table.dataTable.stripe tbody tr.odd td.sorting_1 {
  background: rgba(255, 255, 255, 0.25) !important;
}

table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr.even td.sorting_1,
table.dataTable.stripe tbody tr.even td.sorting_1 {
  background: rgba(217, 217, 217, 0.45) !important;
}

table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover>td.sorting_1,
table.dataTable.display tbody tr:hover>td.sorting_1 {
  background: #C2C2C2 !important;
}

table.dataTable.display tbody tr.odd.selected>td,
table.dataTable.display tbody tr.even.selected>td {
  background-color: rgba(249, 178, 38, 0.50) !important;
}

table.tablaDatatable input[type="text"] {
  float: left;
  margin: 4px;
  text-align: center;
  display: none;
  line-height: 22px;
  padding: 0 5px;
  border: 1px solid #949494;
}

.checkAll.sorting_desc,
.checkAll.sorting_asc,
.checkAll.sorting {
  background-image: none !important;
}

/*INnput de busqueda de datatable y leyenda de paginacion*/
.dataTables_filter {
  display: none !important;
}

.dataTables_info {
  display: none !important;
}

.paginar {
  margin: 10px 0 !important;
}

table.dataTable.no-footer {
  border-bottom: 1px solid #e2e8f0 !important;
}

table.dataTable.no-theader {
  border-bottom: 1px solid #e2e8f0 !important;
}

/*Estilos para el icono responsive de Datatable*/
table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child:before {
  background-color: transparent !important;
  color: #2BD47D !important;
  border-color: #2BD47D !important;
  box-shadow: none !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr.parent>td.dtr-control:before {
  background-color: transparent !important;
  color: #E05260 !important;
  border-color: #E05260 !important;
  box-shadow: none !important;
}

table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
  padding-left: 30px !important;
}

/* Oculta el control dtr-control solo en esta tabla */
.tabla-no-responsive td.dtr-control,
.tabla-no-responsive th.dtr-control {
    display: none !important;
}

/* Ajusta tamaño y padding para que la tabla se adapte en pantallas pequeñas */
.tabla-no-responsive {
    width: 100% !important;
    table-layout: fixed; /* Forza un ancho fijo para las columnas */
    font-size: 12px; /* Tamaño base más pequeño */
}

.tabla-no-responsive th,
.tabla-no-responsive td {
    padding: 4px 2px !important; /* Padding más compacto */
    white-space: nowrap; /* Evita que el texto se parta */
    overflow: hidden; /* Oculta el texto que no cabe */
    text-overflow: ellipsis; /* Añade puntos suspensivos para texto truncado */
    font-size: 12px !important; /* Tamaño base para celdas */
    position: relative; /* Necesario para tooltips personalizados si se usan */
}

/* Estilo para tooltip nativo (mejora visual) */
.tabla-no-responsive th:hover,
.tabla-no-responsive td:hover {
    cursor: pointer; /* Indica que la celda/encabezado es interactivo */
}

/* Ajustes para pantallas medianas */
@media (max-width: 900px) {
    .tabla-no-responsive {
        font-size: 10px !important;
    }
    .tabla-no-responsive th,
    .tabla-no-responsive td {
        padding: 3px 2px !important;
        font-size: 10px !important;
    }
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 600px) {
    .tabla-no-responsive {
        font-size: 8px !important; /* Tamaño aún más pequeño */
    }
    .tabla-no-responsive th,
    .tabla-no-responsive td {
        padding: 2px 1px !important; /* Padding mínimo */
        font-size: 8px !important;
    }
}

/* Permite que las columnas tengan anchos más proporcionados */
.tabla-no-responsive th:nth-child(1),
.tabla-no-responsive td:nth-child(1) {
    width: 5% !important;
    min-width: 30px !important; /* Asegura un ancho mínimo para el checkbox */
    text-align: center; /* Centra el checkbox */
}
.tabla-no-responsive th:nth-child(2), /* Nombre */
.tabla-no-responsive td:nth-child(2) {
    width: 27% !important; /* Ajustado para compensar */
}
.tabla-no-responsive th:nth-child(3), /* Empresa */
.tabla-no-responsive td:nth-child(3) {
    width: 22% !important; /* Ajustado para compensar */
}
.tabla-no-responsive th:nth-child(4), /* Centro/Delegación */
.tabla-no-responsive td:nth-child(4) {
    width: 22% !important; /* Ajustado para compensar */
}
.tabla-no-responsive th:nth-child(5), /* Departamento/Centro */
.tabla-no-responsive td:nth-child(5) {
    width: 15% !important;
}
.tabla-no-responsive th:nth-child(6), /* IDRH */
.tabla-no-responsive td:nth-child(6) {
    width: 10% !important;
}

/* Evita el scroll horizontal en el contenedor */
.divDatatable {
    overflow-x: hidden !important; /* Desactiva scroll horizontal */
    max-width: 100%; /* Asegura que no exceda el contenedor */
}

/* ========== ESTILO BASE ========== */
.tabla-no-responsive td.dtr-control,
.tabla-no-responsive th.dtr-control {
    display: none !important;
}


.tabla-no-responsive-7 {
    width: 100% !important;
    table-layout: fixed;
    font-size: 12px;
}

.tabla-no-responsive-7 th,
.tabla-no-responsive-7 td {
    padding: 4px 2px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px !important;
    position: relative;
}

.tabla-no-responsive-7 th:hover,
.tabla-no-responsive-7 td:hover {
    cursor: pointer;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 900px) {
    .tabla-no-responsive-7 {
        font-size: 10px !important;
    }
    .tabla-no-responsive-7 th,
    .tabla-no-responsive-7 td {
        padding: 3px 2px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 600px) {
    .tabla-no-responsive-7 {
        font-size: 8px !important;
    }
    .tabla-no-responsive-7 th,
    .tabla-no-responsive-7 td {
        padding: 2px 1px !important;
        font-size: 8px !important;
    }
}

/* ========== ANCHO DE COLUMNAS ========== */
.tabla-no-responsive-7 th:nth-child(1),
.tabla-no-responsive-7 td:nth-child(1) {
    width: 5% !important;
}
.tabla-no-responsive-7 th:nth-child(2),
.tabla-no-responsive-7 td:nth-child(2) {
    width: 22% !important; /* Nombre */
}
.tabla-no-responsive-7 th:nth-child(3),
.tabla-no-responsive-7 td:nth-child(3) {
    width: 16% !important; /* Empresa */
}
.tabla-no-responsive-7 th:nth-child(4),
.tabla-no-responsive-7 td:nth-child(4) {
    width: 16% !important; /* Centro/Delegación */
}
.tabla-no-responsive-7 th:nth-child(5),
.tabla-no-responsive-7 td:nth-child(5) {
    width: 14% !important; /* Departamento/Centro */
}
.tabla-no-responsive-7 th:nth-child(6),
.tabla-no-responsive-7 td:nth-child(6) {
    width: 12% !important; /* IDRH */
}
.tabla-no-responsive-7 th:nth-child(7),
.tabla-no-responsive-7 td:nth-child(7) {
    width: 15% !important; /* Fecha */
}

/* ========== CONTENEDOR DATATABLE ========== */
.divDatatable {
    overflow-x: hidden !important;
    max-width: 100%;
}

/*table.stripe.hover.dataTable.fixedHeader-floating{
 padding: 0 !important;
}
div.dtfh-floatingparent.dtfh-floatingparenthead{
  margin-top: 190px!important;
  text-align: left!important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
  border-top-left-radius: 2rem !important;
  border-top-right-radius: 2rem !important;
  height: 50px!important;
}

div.dtfh-floatingparent.dtfh-floatingparenthead table.dataTable thead th{
  border: none !important;
  background-position-x: left !important;
  line-height: 40px !important;
}*/


div.dataTables_length,
div.dataTables_paginate.paging_simple_numbers,
div.dataTables_scrollBody table thead {
  display: none !important;
}

div.dataTables_scrollBody table {
  margin-top: 0 !important;
}

.filtros.flex {
  display: flex !important;
}

.filtros {
  border-bottom: 1px solid #707070;
  height: 26px !important;
  margin-right: 5px;
}

.filtros.filtros_form {
  margin-right: 0px;
}

.filtros i {
  font-size: 25px;
  display: none;
}

.filtros div {
  width: auto !important;
  color: black;
}

.filtros label {
  /*display: none;*/
}

.filtros input {
  width: 100%;
}

.filtros input::placeholder,
.filtros .pq-select-text::placeholder {
  color: #707070;
}

span.ui-icon.ui-icon-triangle-1-s {
  display: none;
}

div.pq-select-button {
  background: transparent;
  border-top: 0px;
  border-radius: 0;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 0px;
  padding: 0 0 0.5rem 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

div.pq-select-button::after {
  content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  width: 16px;
  height: 12px;
}

div.pq-select-popup-cont {
  transform: translate(-270px, 5px);
  padding: 0.5em;
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  -webkit-transform: translate(-270px, 5px);
  -moz-transform: translate(-270px, 5px);
  -ms-transform: translate(-270px, 5px);
  -o-transform: translate(-270px, 5px);
}

div.pq-select-popup {
  border: none !important;
  box-shadow: none !important;
}

div.pq-select-popup .pq-select-all {
  border: none !important;
  background-color: transparent;
}

label.pq-select-all input[type="checkbox"] {
  margin-right: 5px;
}

div.pq-select-shadow-fix {
  height: 0px !important;

}

div.pq-select-text {
  font-family: Somatic-Rounded !important;
  font-size: 13px;
  max-width: none !important;
}

div.tabla-empty,div.tabla-empty2 {
  width: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 60px;
  height: 100%;
}

div.pq-select-button {
  width: 100% !important;
}

div.pq-select-text .ui-state-default {
  background-color: transparent !important;
}

div.pq-select-popup-cont div.pq-select-popup {
  font-family: Somatic-Rounded !important;
  width: 250px !important;
}

div.pq-select-search-div {
  margin: 10px 0px;
  width: auto !important;
}

.pq-select-search-input {
  width: 100% !important;
}

.pq-select-option-label {
  border-bottom: 1px solid #ACACAC !important;
  padding: 5px 0 5px;
}

.pq-select-option-label:first-child {
  border-top: 1px solid #ACACAC !important;
  border-bottom: 1px solid #ACACAC !important;
  padding: 5px 0 5px;
}

div.selector_filtro div.pq-select-button {
  border-bottom: 1px solid #000 !important;
}

.ui-accordion-header,
.ui-state-active {
  background-color: #ffffff !important;
  color: #000 !important;
}

.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 23px;
  box-shadow: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2BD47D;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
  -moz-transform: translateX(12px);
  -o-transform: translateX(12px);
}

.slider.round,
#checkboxDenuncias .slider {
  border-radius: 34px;
}

.slider.round:before,
#checkboxDenuncias .slider:before {
  border-radius: 50%;
}

/* Prueba para nuevo fichador */
#fichadorModal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
  z-index: 99999;
}

#fichadorModal>div {
  width: 430px;
  position: relative;
  margin: 2.5% auto;
  padding: 10px;
  border-radius: 10px;
}

;

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#contendor_reloj {
  width: 100%;
  /*height: 85vh;*/
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px;
}

#clock-container {
  position: absolute;
  font: 56px "Open Sans", sans-serif;
  color: hsl(0, 0%, 25%);
  z-index: 1000;
}

.contener_entrada_salida_form #clock-container {
  z-index: 13;
}

.contener_entrada_salida,
.contener_entrada_salida_form {
  z-index: 10;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;

}

.contener_entrada_salida button.boton,
.contener_entrada_salida_form div.boton_fichar {
  margin-bottom: 0.5rem;
  border-width: 1px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  border-color: #2C2554;
  height: 300px;
  width: 400px;
  background: #2C2554;
  color: #FFFFFF;
  z-index: 10;
  padding: 5%;

}

.contener_entrada_salida button:first-child,
.contener_entrada_salida_form div:nth-child(1) {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  text-align: left;
}

.contener_entrada_salida button:last-child,
.contener_entrada_salida_form div:nth-child(2) {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
  text-align: right;
}

.contener_entrada_salida_form div:nth-child(1) {
  display: flex;
  justify-content: start;
  align-items: center;
}

.contener_entrada_salida_form div:nth-child(2) {
  display: flex;
  justify-content: end;
  align-items: center;
}

.contener_entrada_salida div.circulo,
.contener_entrada_salida_form div.circulo_form,
.contener_entrada_salida_form div.circulo_form_index {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 100%;
  background-color: #fff;
  top: 15px;
  border: 1px solid #2C2554;
  z-index: 999;
}

.contener_entrada_salida_form div.circulo_form,
.contener_entrada_salida_form div.circulo_form_index {
  top: 36px;
  z-index: 12;
}

.contenedor_button_item button {
  margin-bottom: 0.5rem;
  border-width: 1px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: center;
  border-color: #2C2554;
  height: 30px;
  width: 300px;
  background: #2C2554;
  color: #FFFFFF;
}

.contenedor_button_item button:first-child {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
  margin-right: 10px;
}

.contenedor_button_item button:last-child {
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.contener_entrada_salida button.boton:hover,
.contener_entrada_salida_form div:nth-child(1):hover,
.contener_entrada_salida_form div:nth-child(2):hover,
.contenedor_button_item button:hover {
  background-color: #ffffff;
  cursor: pointer;
  color: #2C2554;
  border: 1px solid;
}

.contenedor_button {
  display: flex;
  flex-direction: column;

  align-items: center;
  width: 100%;

  z-index: 10;
}

.contenedor_button div {
  display: flex;
}

.contenedor_button div button {
  /*width: 50%;*/
}

.top {
  top: -10px;
}


.right {
  right: -10px;
}

.textarea {
  display: flex;
  justify-content: center;
  width: 100%;
}

.textarea textarea {
  width: 50%;
  z-index: 10;
}

.metodos-ocultos {
  display: none;
}

.metodos-visible {
  display: block;
}

.procesos-ocultos {
  display: none;
}

.procesos-visible {
  display: block;
}

.selectbox_idioma {
  width: 79px;
  margin: auto;
  position: relative;
}

.select_idioma {
  background: #fff;
  width: 100%;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, .16);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: .2s ease all;
  position: relative;
  z-index: 200;
  border: 2px solid transparent;

}

.select_idioma.active,
.select_idioma:hover {
  border-bottom: 1px solid #2C2554;
  background-color: #FFFFFF !important;
}

.select_idioma.active:before {
  content: "";
  display: block;
  height: 0;
  width: 0;
  border-top: 15px solid #2C2554;
  border-right: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  position: absolute;
  bottom: -30px;
  left: calc(50% - 15px);
}

.select_idioma i {
  font-size: 20px;
  color: #2C2554;
}

.opciones_idioma {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, .16);
  max-height: 400px;
  overflow: auto;
  z-index: 100;
  width: 180%;
  display: none;
}

.opciones_idioma.active {
  display: block;
  position: absolute;
  top: 70px;
  left: -30px;
}

.contenido-opcion {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: .2s ease all;
}

.opciones_idioma .contenido-opcion {
  padding: 10px;
  background-color: #ffffff;
}

.contenido-opcion img {
  width: 25px;
  height: 25px;
}

.opciones_idioma .contenido-opcion:hover {
  background: #2C2554;
  color: #ffffff;
}

.opciones_idioma .contenido-opcion:hover .titulo,
.opciones_idioma .contenido-opcion:hover .descripcion {
  color: #fff;
}

.exportOrg {
  margin-bottom: 7px;
}

.olivia-f0 {
  font-size: 20px !important;
  fill: black !important;
}

.olivia-f1 {
  font-size: 17px !important;
  fill: black !important;
}

.olivia-f2 {
  font-size: 14px !important;
  fill: black !important;
}

.olivia-img {
  clip-path: circle(50%);
}

.drop-zone {
  height: 200px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  color: #cccccc;
  border: 2px dashed #2C2554;
  border-radius: 10px;
}

.drop-zone--over {
  border-style: solid;
}

.drop-zone__input {
  display: none;
}

.drop-zone__thumb {
  width: 50%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: #cccccc;
  background-size: cover;
  position: relative;
}

.drop-zone__thumb::after {
  content: attr(data-label);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 5px 0;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.75);
  font-size: 14px;
  text-align: center;
}

.drop-zone__prompt {
  color: #2C2554;
}

div.divContenido p:has(img) {
  background-color: transparent;
}

div.divContenido div:not(:has(img)) {
  background-color: #fff;
  border-radius: 20px;
  padding: 20px;
  height: 400px;
  width: 750px;
}

div.divContenido p a span {
  display: contents;
}

span.ql-picker-label {
  display: flex !important;
}

div.ql-editor {
  overflow-y: auto;
  max-height: 300px;
}


.carousel-itemContenido {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 95%;
}

.GestionRolesTable {
  height: 72vh !important;
  overflow: auto;
  overflow-x: hidden;
}

/* 
  Tour de Bienvenida
*/
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 2.5rem 5rem;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 80vw;
  animation: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.logo_container_2 {
  position: absolute;
  top: 10%;
  left: 10%;
}

.tour-step {
  transition: all 0.3;
  width: 100%;
}

.step-indicators {
  position: absolute;
  bottom: 15%;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  margin-top: 5rem;
}

.step-indicator_w {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: all .3s;
}

.step-indicator_w:hover {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

.step-indicator_w.active {
  width: 30px !important;
  border-radius: 50px;
  background-color: #412db6 !important;
}

.logo_welcometour {
  max-width: 100%;
  display: inline !important;
}

.paragraph {
  font-size: 18px;
  font-weight: 400;
  line-height: 29px;
  /* text-align: center; */
  color: #4F4F4F;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.paragraph_2 {
  font-size: 16px;
}

.paragraph_3 {
  font-size: 16px;
}

.paragraph_image {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.title_card {
  font-size: 22px;
  font-weight: 600;
  line-height: 26.63px;
  text-align: center;
  color: #412DB6;
  text-align: center;
  margin-top: 2rem;
}

.logo_container_1 {
  width: 200px;
  margin: 0 auto;
}

.logo_container_2 {
  width: 150px;
}

.content_container {
  display: flex;
  align-items: center;
  /* flex-direction: row; */
}

.content_container>img {
  width: 40%;
  height: auto;
}

.content_container>p {
  width: 50%;
}

.svg_icon_wt {
  margin-right: 1rem;
}

#prevStep,
.prevStep {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(10%, -50%);
  font-size: 4rem;
  color: #412db6;
  opacity: 1;
  transition: all .3s;
}

#nextStep,
.nextStep {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-10%, -50%);
  font-size: 4rem;
  color: #412db6;
  opacity: 1;
  transition: all .3s;
}

#nextStep:hover,
#prevStep:hover,
.prevStep:hover,
.nextStep:hover {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

.overlay_welcome_2 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay_welcome {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(100, 100, 100, 0.5);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.card_welcome {
  padding: 2rem;
  border-radius: 20px;
  background-color: #ffffff;
  max-width: 600px;
}

.clase_modal_buton {
  width: 42px;
  height: 42px;
  background-color: #EFEFEF;
  padding: 1rem;
  margin-left: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(-30%, 30%);
  transition: all .3s;
}

.clase_modal_buton:hover {
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.4));
}

.step-indicators_n {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 19.36px;
  text-align: center;
  padding-top: 1.5rem;
}

/* Vanilla CSS for flip card */
.card__content {
  transform-style: preserve-3d;
}


.card__front,
.card__back {
  backface-visibility: hidden;
}

.card__back {
  transform: rotateY(.5turn);
}


.cardApp.clicked .card__content {
  transform: rotateY(0.5turn);
  /* Rotación al hacer clic */
}

@media only screen and (max-width: 1700px) {
  div.cards_header {
    height: auto !important;
  }

  div.card_width_export {
    padding: 10px;
    width: auto;
  }

  div.botonera>div:first-of-type>div:first-of-type>div:nth-child(2)>div:first-of-type {
    padding: 10px 0;
    flex-wrap: wrap;
  }

  div.botonera>div:first-of-type>div:first-of-type>div:nth-child(2)>div:first-of-type>div:first-of-type {
    width: auto !important;
  }

  .dias_mes {
    width: 100% !important;
  }

  .cardsWidth1 table.dias_mes div.contenidoCalendarWidget {
    width: 1.1rem !important;
  }

  .cardsWidth2 table.dias_mes div.contenidoCalendarWidget {
    width: 3.1rem !important;
  }

  /* div.card_width_filtros > div:first-of-type {
    padding: 10px 0;
    flex-wrap: wrap;
  }
  div.card_width_filtros > div:first-of-type > div:first-of-type {
    width: auto !important;
  } */
  .divDatatable .tablaBotones .boton-tabla-vpc-right,
  .divDatatable .tablaBotones .boton-tabla-vpc-left,
  .divDatatable .tablaBotones .boton-tabla-vpc-center {
    padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    font-size: 15px;
  }

  div.botonera>div:first-of-type>div:first-of-type {
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
  }

  div.botonera>div:first-of-type>div:first-of-type>div:nth-child(-n + 3) {
    margin: 0 !important;
    width: 100%;
  }
}

@media only screen and (max-width: 1350px) {
  div.botonera.sticky {
    position: initial !important;
  }

  .celda_horario {
    float: none;
  }

  .cardsWidth1 {
    width: 48%;
  }

  .cardsWidth2 {
    width: 48%;
  }

  .cardsWidth2 div.cardWidget_row {
    flex-direction: column;
  }

  .cardsWidth2 div.cardWidget_row div.cardWidget_item,
  div.cardWidget_itemMenu {
    width: 100% !important;
  }

  div.cardWidget_itemMenu {
    width: 92% !important;
  }

  /* .dias_mes {
    width: 250% !important;
  } */
  .cardsWidth1 table.dias_mes div.contenidoCalendarWidget {
    width: 1.1rem !important;
  }

  .cardsWidth2 table.dias_mes div.contenidoCalendarWidget {
    width: 1.1rem !important;
  }

  div#widget_calendario_web div.cajames {
    margin: 0 !important;
  }

  div.botonera>div:first-of-type>div:first-of-type {
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
  }

  div.botonera>div:first-of-type>div:first-of-type>div:nth-child(-n + 3) {
    margin: 0 !important;
    width: 100%;
  }

  div.calendario {
    overflow: auto !important;
  }

  div.cajames {
    width: 40% !important;
    margin: 0px 15px 15px 50px !important;
  }

  #clock-container {
    font-size: 40px;
  }

  .contener_entrada_salida_form div.circulo_form,
  .contener_entrada_salida_form div.circulo_form_index {
    height: 200px;
    width: 200px;
    top: 25px;
  }

  .contener_entrada_salida button.boton,
  .contener_entrada_salida_form div.boton_fichar {
    height: 200px;
    width: 300px;
  }

  .divDatatable .tablaBotones .boton-tabla-vpc-left,
  .divDatatable .tablaBotones .boton-tabla-vpc-center,
  .divDatatable .tablaBotones .boton-tabla-vpc-right {
    font-size: 15px;
  }
}

@media only screen and (max-width: 1024px) {
  div.botonera.sticky {
    position: initial !important;
  }

  #fichadorModal>div {
    width: 95vw;
    padding: 10px 0px;
  }

  .block02 .formulario {
    width: 95%;
  }

  .row .block02 .col-full {
    width: auto !important;
  }

  #dropdown-tarjetas {
    width: 100%;
  }

  .cardsIndex,
  .sortableBtn {
    width: 135%;
  }

  .cardsWidth1 {
    width: 100%;
  }

  .cardsWidth2 {
    width: 100%;
  }

  .dias_mes {
    width: 100% !important;
  }

  .cardsWidth1 table.dias_mes div.contenidoCalendarWidget {
    width: 1rem !important;
  }

  .cardsWidth2 table.dias_mes div.contenidoCalendarWidget {
    width: 1rem !important;
  }

  .ocultoMobile {
    display: none !important;
  }

  #loading img {
    width: 50% !important;
    margin: 0 -30% !important;
  }

  div#logoCabecera {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  #cookies {
    width: 100% !important;
  }

  .sidebar {
    left: -230px;
  }

  .sidebar-submenu {
    z-index: 100 !important;
    height: 100vh !important;
    width: 100% !important;
    top: 0 !important;
  }

  .section-container {
    left: 0px;
    width: calc(100% - 90px);

  }

  .selector_empresas select,
  .selector_idiomas select {
    width: 90% !important;
    margin: 5px 10px !important;
  }

  #breadcrumbs_list {
    font-size: 15px;
  }

  .botonera {
    position: inherit !important;
    width: 130% !important;
  }

  .botonera .tarjetasContainer {
    justify-content: center;
    align-items: center;
  }

  .tarjetasContainer .tarjetasColumnas {
    flex-direction: column !important;
    width: 85% !important;
  }

  div.card_width_export,
  div.card_width_button {
    width: 100%;
  }

  div.card_width_button {
    margin: 0;
  }

  #tarjetaFiltros {
    width: 100% !important;
    /*width: 92% !important;
    height: 300px !important;*/
    height: auto !important;
    padding: 0 !important;

  }

  #tarjetaFiltros .redondoMobil:first-child {
    border-radius: 15px 0 0 15px;
    /* Bordes redondeados a la izquierda */
  }

  #tarjetaFiltros .redondoMobil:last-child {
    border-radius: 0 15px 15px 0;
    /* Bordes redondeados a la derecha */
  }

  #tarjetaFiltros .redondoMobil:not(:first-child):not(:last-child) {
    border-radius: 0;
    /* Sin bordes redondeados */
  }

  #containerFiltro {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    justify-items: center !important;
    grid-row-gap: 50%;
  }

  #containerFiltrosRow {
    flex-direction: column;
    justify-content: space-evenly;
  }

  #divFiltros {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 40px 5px;
  }

  #tabsMobile {
    width: 117%;
  }

  .datatableContainer {
    width: 132% !important;
  }

  .divDatatable {
    height: 100vh !important;
  }

  .calendarioMobile {
    display: flex;
    flex-direction: column;
    padding: 0 6% !important;
    width: 134% !important;
  }

  .leyenda.leyendaHorario,
  .leyenda.leyendaTotal {
    height: 200px !important;
    width: 100% !important;
    padding: 0 !important;
  }

  div.calendario {
    overflow: auto !important;
  }

  div.cajames {
    width: 100% !important;
    margin: 0 0 15px 0 !important;
  }

  .pq-select-popup-cont {
    left: 195.8594px !important;
  }

  div.pq-select-popup-cont div.pq-select-popup {
    width: 200px !important;
  }

  div.formMobile {
    width: 136% !important;
    display: flex !important;
    justify-content: center !important;
  }

  div.formMobile div.formulario {
    padding: 15px !important;
  }

  div.formMobileRow {
    width: 100%;
  }

  .inputMobile {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-gap: 20px 10px;
  }

  .inputMobile div {
    width: 100% !important;
    margin: 0px !important;
  }

  .tarjetaFichaje {
    width: 130% !important;
  }

  table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control {
    padding-left: 30px !important;
  }

  #clock-container {
    font-size: 20px;
  }

  .contener_entrada_salida_form div.circulo_form,
  .contener_entrada_salida_form div.circulo_form_index {
    height: 100px;
    width: 100px;
    top: 23px;
  }

  .contener_entrada_salida button.boton,
  .contener_entrada_salida_form div.boton_fichar {
    height: 100px;
    width: 170px;
  }

}

@media screen and (max-width: 780px) {
  #welcomeTour {
    display: none;
  }

  .sidebar-submenu {
    margin-left: 0% !important;

  }

  .fila_head {
    background-color: #f9b226;
    border-radius: 15px 15px 0 0;
  }

  .celda_head {
    padding: 15px 30px 10px 30px !important;
  }

  .fila_body:nth-child(even) {
    background: rgba(217, 217, 217, 0.45) !important;
  }

  .fila_body:nth-child(odd) {
    background: rgba(255, 255, 255, 0.25) !important;
  }

  .fila_body {
    margin: 0 !important;
  }

  .celda_body {
    padding: 15px 30px 10px 30px !important;
    font-size: 14px !important;
    max-width: 200px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #333 !important;
  }

  .tabla_accion_left {
    border: 1px solid #2C2554 !important;
    padding: 0.25rem .5rem 0.25rem .75rem !important;
    color: #2C2554 !important;
    font-weight: 500;
    text-align: center;
    background-color: #fff;
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    font-size: 15px !important;
  }

  .tabla_accion_right {
    border: 1px solid #2C2554 !important;
    padding: 0.25rem .75rem 0.25rem .5rem !important;
    color: #2C2554 !important;
    font-weight: 500;
    text-align: center;
    background-color: #fff;
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px;
    font-size: 15px !important;
  }

  .tabla_accion_right:hover,
  .tabla_accion_left:hover {
    background-color: #2C2554;
    color: #ffffff;
  }

  .modalDialog {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(100, 100, 100, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div#ui-datepicker-div {
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
  }

  div.pq-select-popup-cont {
    transform: translate(-150px, 5px);
    -webkit-transform: translate(-150px, 5px);
    -moz-transform: translate(-150px, 5px);
    -ms-transform: translate(-150px, 5px);
    -o-transform: translate(-150px, 5px);
  }

  .cardWidget_item2 {
    flex-direction: column !important;
  }

  .cardsWidth2 .filtroEstadoWidget {
    flex-direction: column;
  }

}

.confirm-renting-btn, 
.cancel-renting-btn {
  visibility: visible !important;
  opacity: 1 !important;
  background-color: #2C2554 !important;
  color: white !important;
}

.texto-jefe {
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}
.texto-jefe:hover {
  color: #0056b3;
}