body{
    background-color: rgba(173, 166, 218, 0.23);
}

/* Nueva clase 'standardSizePlanilla':; ajustara el tamaño de los datos que se presneten en planilla */
.standardSizePlanilla {
    font-size: 11px;
}

/* Fondo de cada celda de turno en planilla */

#planillaGeneral .celdas
{
    background-color: aliceblue;
}

.trampita {
  min-width: 170px;
}

.tablaContenedoraFilas {
  max-height: 300px;
  overflow-y: auto;
}

.table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #E3E3E4;
}




/*NAV BAR*/
/* Es para maracar en los estamentos en el navbar */
.botonResumen
{
  background-color: dodgerblue !important;
  border-radius: 4px;
}
/*NAV BAR*/



/* HEADER */
.mesanio {
  background-color: rgba(0, 193, 228, 1);
  color: white;
  font-size: 2em;
  font-weight: bold;
}


.numerosemana{
  color: white;
  font-size: xx-large;
}

.turnos{
  text-align: center;
  font-weight: bolder;
  background-color: rgba(32, 39, 111,1);
  border-width: 0px;
  color: rgb(110, 110, 137);
  border-color: rgba(32, 39, 111,1);

}

.diassemana
{
  text-align: center;
  font-weight: bolder;
  background-color: rgba(32, 39, 111,1);
  border-width: 0px;
  color: rgb(199, 199, 199);
  border-color: rgba(32, 39, 111,1);
}

.diassemana1ColDiasNumero {
  font-size: large;
  font-weight: normal;
}
.diassemana1ColDiasSemanas {
  font-weight: normal;
}

.diassemana.fila-semana
{
  color: white;
  font-size: x-large;
}

.diassemana.kindall-header
{
  background-color: rgba(76, 77, 84, 1);
  color: white;
}

/* Nueva clase 'dotacionSemana' para la fila de dotacion en la cabecera de la planilla */
.dotacionSemana
{
  background-color: rgba(72, 106, 154, 1);
  border: 0px;
  color: rgb(199, 199, 199);
  font-weight: bolder;
  text-align: center;
}
/* Solo son atendidos los elementos de dotacion con nuvmeros en la fila de la clase 'dotacionSemana' */
.dotacionSemana td .dotacionAlta,
.dotacionSemana td .dotacionBaja,
.dotacionSemana td .dotacionNormal
{
  padding: 1px 0;
  font-size: 13px;
}

.dotacionSemana td .dotacionAlta:hover,
.dotacionSemana td .dotacionBaja:hover,
.dotacionSemana td .dotacionNormal:hover
{
  box-shadow: inset 0px 25px 0px 0px rgba(255, 255, 255, 0.24);
}

.camas{
  text-align: center;
  font-weight: bolder;
  background-color: rgba(32, 39, 111,1);
  border-width: 0px;
  color: rgb(236, 233, 233);
  border-color: rgba(32, 39, 111,1);

}
/* HEADER */


.nombre {
  font-weight: bold;
  color: rgb(89, 87, 103);
  background-color: rgb(232, 231, 249);
  text-align: right;
}

span.nombreTrabajador
{
  font-weight: normal;
  font-size: smaller;
}

div.formatoCeldaTurno
{
  height: inherit;
  width: inherit;
  text-align: center;
  font-size: 11px;
  padding-top: 4px;
  position: relative;

  /**********
  Se propone el cambio en el estilo del borde inferior de cada celda por box-shadow,
  de tal manera de que las sombras que hay en cada celda no impacten el el cruce de otros bordes verticales con propiedades ya establecidas
  **********/
  -moz-box-shadow: inset 0px -1px 0px 0px rgb(203, 203, 203);
  -webkit-box-shadow: inset 0px -1px 0px 0px rgb(203, 203, 203);
  box-shadow: inset 0px -1px 0px 0px rgb(203, 203, 203);
}

div.columnasFijas {
  font-weight: bold;
  font-size: small;
  height: inherit;
  color: rgb(89, 87, 103);
  background-color: rgb(232, 231, 249);
  text-align: right;
  padding-top: 5px;
  cursor: pointer;
  position: relative;/*Nueva propiedad que mantiene todo elemento con la clase 'subindiceSectorTrabajador'*/
}

/* Se encarga de la celda donde esta el delta*/
div.deltaHora {
  width: inherit;
  height: inherit;
  background-color: rgb(232, 231, 249);
  text-align: center;
  padding-top: 4px;
}

/* Destaca las celdas del trabajador parttime en planilla */
div.columnasFijas.highlightParttimeWorker,
div.deltaHora.highlightParttimeWorker {
  background-color: #c1e5fd;
}

/* formato del numero alineado al centro */
div.numeroDia {
  margin-left: -50%;
  margin-right: 50%;
  font-weight: bolder;
  font-size: xx-large;
  text-align: center;
  color: white;
}
/*Header con los días del mes
para que salga en rojo (festivo)
para que salga con el circulo celeste (hoy)
*/
div.numeroDiaMes {
  font-weight: normal;
  text-align: center;
  color: white;
  font-size: smaller;
}
div.numeroDiaMesDosColumnas {
  margin-left: -50%;
  margin-right: 50%;
  font-size: xx-large;
  font-weight: bolder;
}

div.numeroDiaMesFestivo {
  color: rgb(239, 34, 34) !important;
}

div.numeroDiaMesHoy {
	background-color: #00C1E4;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

div.numeroDiaMesHoyDosColumnas {
  width: 45px;
  margin-left: -63.5%;
  font-weight: bolder;
}

div.numeroDia:hover {
  box-shadow: inset 40px 0px 0px 0px rgba(255, 255, 255, 0.27);
  border-radius: 5px;
}

/*
Nueva clase 'turnoDia' solo para la etiqueta 'i' que establece el color para los iconos de los turnos de dias de la planilla
 */
i.turnoDia {
  color: rgb(255, 236, 0);
}

i.turnoNoche {
  color: rgba(168, 215, 255, 0.88);
}

span.nroCamas
{
  display: inherit;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
}

span.nroCamas:hover
{
  background: rgba(255, 255, 255, 0.2);
}

span.nroCamasTitulo
{
  font-size: 12px;
}

div.nombreDiaSemana {
  margin-left: -100%;
}
div.nombreDiaSemanaUnaCol {
  font-weight: normal;
}

/* La clase 'contenedorRelativo' mantiene adentro los elementos de clases o IDs con 'position: absolute' */
.contenedorRelativo
{
  position: relative;
}

.subindiceSectorTrabajador
{
  /*Nueva clase para mostrar los subindices de los sectores de cada trabajador*/
  position: absolute;
  top: 0;
  left: 1px;
  font-size: 12px;
}

.superIndiceDiaTurno
{
    position: absolute;
    font-size: 0.6em;
    display: -webkit-inline-box;
    margin-top: -5px;
    margin-left: -15px;
    color: black;
}
/* Nueva clase 'supindiceSectorResumen' solo para describir el sector de cada trbajador en una planilla de resumen */
.supindiceSectorResumen
{
  position: absolute;
  font-size: .9em;
  font-weight: 600;
  display: -webkik-inline-box;
  margin-top: -6px;
  margin-left: -6px;
}

.supindiceDetalleTurno {
  position: absolute;
  font-size: 0.6em;
  display: -webkit-inline-box;
  margin-top: -3px;
  margin-left: -1px;
}

.supindiceDetalleTurno.highlightParttimeSuffix {
  background-color: #7edbec;
  border-radius: 10px;
  padding: 0 2px;
}

/* NUEVAS CLASES PARA MEJORA EN FORMATO DE NOMBRE EN PLANILLA */
.divContainerNombre {
  display: flex;
  padding-top: 6px;
  justify-content: flex-end;
}

/* Destaca las celdas del trabajador parttime en planilla para el contenedor de solo alias */
.divContainerNombre.highlightParttimeWorker {
  background-color: #c1e5fd;
}

.divCentralNombre {
  white-space: nowrap;
}
.divIzquierdoNombre {
  display: inline-flex;
  font-weight: bold;
  margin-top: -6px;
  margin-right: auto;
  margin-left: 2px;
}
.divDerechoNombre {
  font-weight: bolder;
  font-size: 0.7rem;
  margin-top: -4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
/* NUEVAS CLASES PARA MEJORA EN FORMATO DE NOMBRE EN PLANILLA */
/**
 * Clase usada para resaltar la abreviatura de un turno en planilla
 * si un trabajador tiene ciertos días continuos de trabajo
 * (por lo general considera 7 días)
 */
.dias-trabajo-continuo {
  color: #fe0000;
  font-weight: bold;
}

.ticketCubiertoTurno {
  position: absolute;
  font-size: 0.7em;
  display: inline-block;
  bottom: 0;
  left: 0;
}

/* Nueva clase 'ticketTurnoExtraValidado' para los bloques correspondientes a turnos extras con validacion */
.ticketTurnoExtraValidado {
  position: absolute;
  font-size: 0.6em;
  display: inline-block;
  bottom: 0;
  left: 10%;
  color: red;
}

/* Nueva clase 'ticketObservacion' para los bloques correspondientes a turnos con observacion */
.ticketObservacion
{
  position: absolute;
  font-size: 0.8em;
  display: -webkit-inline-box;
  margin-top: -7px;
  margin-left: -11px;
}

.horaExtra
{
  position: absolute;
  font-size: 0.7em;
  display: -webkit-inline-box;
  margin-top: 2px;
  margin-left: -18px;

}

/* Nuevas clases 'horaExtraInicio' y 'horaExtraTermino' que van al lado de cada turno con horas extras definidas */
.horaExtraInicio
{
  position: absolute;
  font-size: 0.7em;
  display: -webkit-inline-box;
  margin-top: 2px;
  margin-left: -18px;
}

.horaExtraTermino
{
  position: absolute;
  font-size: 0.7em;
  display: -webkit-inline-box;
  margin-top: 2px;
  margin-left: 1px;
}

/* Nueva clase 'saldoPositivo' aosciadas solo a las clases 'horaExtraInicio' y 'horaExtraTermino' para el resalto de las horas positivas */
.horaExtraInicio.saldoPositivo,
.horaExtraTermino.saldoPositivo
{
  color: #1B94FF;
  font-weight: 800;
}

/* La clase 'saldoPositivo' dentro de 'div.devolucion' tebdran otro color de fuente para contrastar con el fondo */
div.devolucion .horaExtraInicio.saldoPositivo,
div.devolucion .horaExtraTermino.saldoPositivo
{
  color: rgb(145, 219, 249);
}

.subindiceSector {
  position: absolute;
  font-size: 0.8em;
  display: inline-block;
  bottom: 0;
  left: 50%;
}

.tiempo-programado {
  background-color: #402525;
  border-radius: 16px;
  color: white;
  display: inline-block;
  font-size: 0.8em;
  padding: 1px 2px;
  position: absolute;
  bottom: 0;
  left: 75%;
  z-index: 1;
}

.tiempo-programado-semana {
  background-color: #402525;
  border-radius: 16px;
  color: white;
  display: inline-block;
  font-size: 0.8em;
  padding: 1px 2px;
  position: absolute;
  bottom: 0;
  /* left: 75%; */
  left: -20%;
  z-index: 1;
}

.indicadorTipoPermisoParcial {
    position: absolute;
    font-size: 0.6em;
    display: inline-block;
    bottom: 0;
    left: 10%;
    color: black;
}

.imparhead {
  box-shadow: inset 100px 100px rgba(83, 88, 127, 0.3);
}


/** Nueva forma 11 Nov 2021 **/

.diaSemanaImpar{
  border-left-color: rgba(42, 88, 111, 0.34) !important;
  border-left-width: medium;
  border-left-style: solid;
}
.diaSemanaPar{
  background-color: rgba(176, 136, 195, 0.19);
}
.sabadoImpar{
  border-left-color: rgba(70, 32, 111, 0.28) !important;
  border-left-width: 0.4em;
  border-left-style: solid;
  background: rgba(170,77,255,0.22);
}
.sabadoPar{
  background: rgba(176, 136, 195, 0.39);
}
.domingoImpar{
  border-left-color:rgba(42, 88, 111, 0.34) !important;
  border-left-style: solid;
  background: rgba(170,77,255,0.22);
}
.domingoPar{
  background: rgba(176, 136, 195, 0.39);
  background-clip: padding-box;
}

/** Nueva forma 11 Nov 2021 **/

.separacionSector {
  border-bottom-color: rgba(42, 88, 111, 0.54) !important;
  border-bottom-width: medium !important;
  border-bottom-style: solid;
}

.separacionSectorUnaCol {
  border-bottom-color: rgb(0 0 0) !important;
  border-bottom-width: thin;
  border-bottom-style: solid;
}

.separacionSectorTop {
  border-top-color: rgba(42, 88, 111, 0.54) !important;
  border-top-width: medium !important;
  border-top-style: solid;

}

/* Al modificar una cama le da el estilo al input */
input.dotacionAlta
{
  background-color: #008B07 !important;
  color: white;
}

input.dotacionBaja
{
  background-color: #FF4F4F !important;
  color: white;
}

.advertencia
{
  background-color: rgba(255, 79, 79, 0.84);
  color: white;
  font-size: initial;
}

.informacion
{
  background-color: #5bc0de;
  color: white;
  font-size: initial;
}

.nota
{
  background-color: #5BC0DE;
  color: white;
}

.intervaloFecha
{
  /*background: rgb(232, 231, 239);*/
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}

.intervaloFecha .input-group
{
  width: 33%;
}

.detalleSector {
  float: right;
}

.logoLogin {
  top: -20px;

}

#planillaGeneral
{
    width: 98vw;
}

#planillaGeneral table
{
    margin: 0 auto;
}
#planillaGeneral th,
#planillaGeneral td
{
    cursor: default;
    outline: 0;
}

#planillaGeneral tbody tr:hover .nombreTrabajadorPlanilla,
#planillaGeneral tbody tr:hover .deltaHora
{
  background-color: rgb(208, 194, 194);
  font-weight: bolder;
}

#planillaGeneral tbody tr:hover .formatoCeldaTurno
{
  background-color: rgba(222, 222, 222, 1);
}

/*
Al poner el cursor encima de la fila, los turnos de los fines de semana cambian su opacidad a un tono un poco mas oscuro
*/



#planillaGeneral tbody tr .formatoCeldaTurno:hover
{
  /*******
  Se agrega un nuevo evento de hover solo para las celdas de turnos, con color de fondo definido.
  Este evento se activa solo al posicionar el cursor sobre el turno, el cual es la intersección entre la fila del trabajador y la columna de turno del día.
  NOTA: No funciona cuando el turno del día es una 'Licencia' (tanto 'oficial' como 'no oficial'), 'Vacación', 'Turnos Extra', 'Cambio Turno', 'Cambio Turno De Servicio', 'Devolución Turno', y 'Devolución Turno de Servicio';
  *******/
  background-color: rgb(162, 189, 195);
}

#planillaGeneral.hoverTurnoPlanilla2 tbody tr .imparCeldaTurno:hover,
#planillaGeneral.hoverTurnoPlanilla2 tbody tr .formatoCeldaTurno:hover
{
  /*******
  Se agrega un nuevo evento de hover solo para las celdas de turnos, con color de fondo definido.
  Este evento se activa solo al posicionar el cursor sobre el turno, el cual es la intersección entre la fila del trabajador y la columna de turno del día.
  NOTA: No funciona cuando el turno del día es una 'Licencia' (tanto 'oficial' como 'no oficial'), 'Vacación', 'Turnos Extra', 'Cambio Turno', 'Cambio Turno De Servicio', 'Devolución Turno', y 'Devolución Turno de Servicio';
  *******/
  /* background-color: red; */
}

#planillaGeneral tbody .numerosemana td:nth-child(2)
{
  /********
  Se agrega un nuevo parámetro para la casilla que contiene el nombre de la planilla de un estamento en particular
  ********/
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

#planillaGeneral tbody td.columnaNumerica {
    background-color: rgba(32, 39, 111, 0.78);
    color: aliceblue;
    text-align: center;
    font-weight: bold;
    width: 30px;
}

/*clases de los indicadores de status de cada unidad en la vista de RRHH*/
.activo{
      color: #58CA58;
      float: right;
}

.inactivo{
  color: #E22121;
  float: right;
}

.implementando{
  color: #E8DA16;
  float: right;
}

/*
Solo es para la tabla del 'modalReportePorTrabajador'
*/
.tabla-semana-reporte-trabajador {
    display: inline-block;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    border: rgba(240, 248, 255, 0);
    height: 350px;
}

.tabla-semana-reporte-trabajador thead tr {
  position: fixed;
  height: 18px;
  z-index: 2;
}

.tabla-semana-reporte-trabajador thead th {
  background-color: white;
  width: 65.1px;
}

.tabla-semana-reporte-trabajador thead th:nth-child(1) {
  width: 28px;
}

.tabla-semana-reporte-trabajador tbody {
  margin-top: 18px;
  display: block;
}

.tabla-semana-reporte-trabajador tbody td {
  position: relative;
  display: table-cell;
  height: 25px;
  -moz-box-shadow: inset 0px -1px 0px 0px rgb(203, 203, 203);
  -webkit-box-shadow: inset 0px -1px 0px 0px rgb(203, 203, 203);
  box-shadow: inset 0px -1px 0px 0px rgb(203, 203, 203);
  width: 35px;
  max-width: 35px;
  text-align: center;
}

.tabla-semana-reporte-trabajador tbody td .superIndiceDiaTurno{
  left: 0;
  margin-left: -32px;
  color: black;
}

.tabla-semana-reporte-trabajador tbody td:nth-child(odd) {
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgba(212, 231, 240, 0.54);
}

.tabla-semana-reporte-trabajador tbody td.numeroSemana {
  width: 14px;
  max-width: 10px;
  border-left: 0px;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/*
Solo aparece en la grilla semanal de modalReportePorTrabajador
*/
.entreMeses {
  background-color: #6F6F6F !important;
  border-left-color: #6F6F6F !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.entreMeses .superIndiceDiaTurno {
  color: #6F6F6F !important;
}
.entreMeses .filaMes {
  position: absolute;
  left: 0;
  z-index: 1;
  color: white;
}


.inicioSemana,
.finalSemana {
  background-color: #f9f9f9 !important;
  border-left-color: #f9f9f9 !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.inicioSemana .superIndiceDiaTurno,
.finalSemana .superIndiceDiaTurno {
  color: #f9f9f9 !important;
}

/*
'#blockFechaTurnoMini' es el elemento que muestra la fecha del turno en el que el cursor esta posicionado en la 'vista miniatura'
 */
#blockFechaTurnoMini {
  background: #929292;
  border-top-left-radius: 10px;
  color: white;
  display: block;
  font-weight: 600;
  font-size: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: center;
  width: 550px;
}

span.nombreIndicadorFecha {
  font-weight: normal;
}

/* Animaciones experimentales. En este caso con cambio de tipo de turno */
@keyframes resaltarTurno { /* CSS3 */
  0%   {
    box-shadow: 0px 40px 0px rgba(98, 182, 255, 0.52) inset;
    color: white;
  }
  50%   {
    box-shadow: 0px 40px 0px rgba(98, 182, 255, 0.52) inset;
    color: white;
  }
  100% {
    box-shadow: 0px 40px 0px rgba(98, 182, 255, 0) inset;
    color: inherit;
  }
}

.resaltoCambioTipoTurno {
  animation: resaltarTurno 3s 1;
}

/* Animaciones experimentales. En este caso con cambios en la fila de trabajador */
@keyframes resaltarFila {
  0%   {
    box-shadow: 0px 40px 0px rgba(98, 182, 255, 0.52) inset;
  }
  50%   {
    box-shadow: 0px 40px 0px rgba(98, 182, 255, 0.52) inset;
  }
  100% {
    box-shadow: 0px 40px 0px rgba(98, 182, 255, 0) inset;
  }
}

.resaltoCambioEnFila {
  animation: resaltarFila 3s 1;
}

/* Nueva clase 'listaConsultaTurnosActivosDia' para las tablas del modal 'ConsultaTurnosActivos' */
.listaConsultaTurnosActivosDia tr:nth-child(even) td {
  background: #D4D4D4;
}

/* Las clases 'turnoDia' y 'turnoNoche' de la clase 'listaConsultaTurnosActivosDia' con estilos definidos */
.listaConsultaTurnosActivosDia tr td.turnoDia {
  box-shadow: inset 0px 0px 0px 20px rgba(240, 248, 255, 0.46);
}
.listaConsultaTurnosActivosDia tr td.turnoNoche {
  box-shadow: inset 0px 0px 0px 20px rgba(176, 136, 195, 0.19);
}

/*
  Nueva clase llamada 'disponibilidadUsuario' con sus propias clases hijas, y esta en la vista de disponibilidad
 */
.disponibilidadUsuario {
  font-size: 1.2em;
  margin-left: -5px;
  margin-right: -5px;
}

.disponibilidadUsuario .nombreDiaDisponibilidad {
  background-color: rgba(32, 39, 111,1);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disponibilidadUsuario .dias {
  background-color: rgba(32, 39, 111,1);
  color: white;
  display: flex;
  height: 4.1em;
  justify-content: center;
  align-items: center;
}

.disponibilidadUsuario .diaHoy {
  background-color: rgba(0, 193, 228, 1);
}

.disponibilidadUsuario .dias span,
.disponibilidadUsuario .dias i {
  font-size: 1.5em;
}

.disponibilidadUsuario .dias.impar {
  background-color: rgb(55, 61, 123);
}

.disponibilidadUsuario .flex-contenedor {
  display: flex;
  height: 4.1em;
  justify-content: center;
  align-items: center;
}

.disponibilidadUsuario .flex-contenedor .flex-item:nth-child(1) {
  width: 66%;
  text-align: center;
  position: relative;
}

.disponibilidadUsuario .flex-contenedor .flex-item:nth-child(2) {
  width: 33%;
  text-align: left;
}

.disponibilidadUsuario .flex-contenedor .flex-item:nth-child(1) .supindiceDetalleTurno {
  font-size: 10px;
  position: absolute;
  bottom: 65%;
}

.disponibilidadUsuario .flex-contenedor .flex-item:nth-child(2) .ticketTurnoExtraValidado {
  font-size: inherit;
  background: #ff4c4c;
  border-radius: 10px;
  color: white;
  padding: 0 4px;
  position: absolute;
  bottom: 10%;
  right: 0;
}

textarea.sin-resize {
  resize: none;
}

.turnosDia {
  background-color: aliceblue;
}

.turnosNoche {
  background-color: #F7EFF7;
  margin-bottom: 5px;
}

#guardarDisponibilidadUsuario {
  background-color: #5cb85c;
  position: fixed;
  bottom: 5vh;
  right: 5vw;
}

#guardarDisponibilidadUsuarioDesk {
  background-color: #5cb85c;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

#guardarDisponibilidadUsuario[disabled],
#guardarDisponibilidadUsuarioDesk[disabled] {
  color : rgba(0, 0, 0, 0.26);
  background-color: transparent;
}

/*
  Nueva clase llamada 'disponibilidadUsuarioMovil' con sus propias clases hijas, y esta en la vista de disponibilidadMovil
 */
.disponibilidadUsuarioMovil {
  font-size: 1.2em;
}

.disponibilidadUsuarioMovil .dias {
  background-color: rgba(32, 39, 111,1);
  color: white;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.disponibilidadUsuarioMovil .dias.diaHoy {
  background-color: rgba(0, 193, 228, 1);
}

.disponibilidadUsuarioMovil .dias span,
.disponibilidadUsuarioMovil .dias i {
  font-size: 1.5em;
}

.disponibilidadUsuarioMovil .dias.impar {
  background-color: rgb(55, 61, 123);
}

.disponibilidadUsuarioMovil .flex-contenedor {
  display: flex;
  height: 4.1em;
}

.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(1) {
  width: 25%;
  text-align: center;
}

.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(2) {
  /*width: 50%;*/
  width: 45%;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(3) {
  width: 25%;
  text-align: center;
}

.disponibilidadUsuarioMovil .flex-contenedor b.tipoTurnoLibre {
  color: #BBBBBB;
}

.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(2) .supindiceDetalleTurno {
  font-size: inherit;
  position: absolute;
  top: 15%;
}
.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(2) .subindiceSector {
  font-size: inherit;
  position: absolute;
  bottom: 10%;
}
.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(2) .ticketTurnoExtraValidado {
  font-size: inherit;
  background: #ff4c4c;
  border-radius: 10px;
  color: white;
  padding: 0 4px;
  position: absolute;
  bottom: 5%;
  right: 0;
}
.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(2) .indicesDisponibilidad {
  position: absolute;
  top: 8%;
  left: 75%;
}

.disponibilidadUsuarioMovil .flex-contenedor .flex-item:nth-child(2) .turnoOuOe {
  position: absolute;
  top: 60%;
  left: 5%;
}

/*
Nuevas clases para la nueva planilla de inicio de cada sesion de administrador (coordinadora)
*/
.notasDerecha {
  text-align: right;
}

.notasDerecha span{
  background-color: red;
  border-radius: 13px 0 13px 13px;
  color: white;
  font-size: 15px;
  padding: 4px 8px 4px 5px;
  display: inline-block;
  margin: 1px 0;
}

.notasIzquierda {
  text-align: left;
  width: 70%;
}

.notasIzquierda span{
  background-color: red;
  border-radius: 0 13px 13px 13px;
  color: white;
  font-size: 15px;
  padding: 4px 5px 4px 8px;
  display: inline-block;
  margin: 1px 0;
}

.notasDerecha strong,
.notasIzquierda strong {
  display: block;
  margin-top: 4px;
}

span.notasPublicas {
  background-color: #7AB6EA;
  color: white;
}

span.notasAdmins {
  background-color: orange;
  color: white;
}

span.notasPrivadas {
  background-color: #BFBFBF;
  color: white;
}

/* Nueva clase 'tabla-editar-rotativa' que es utilizada en modalEditarRotativa y en modalCrearRotativa */
.tabla-editar-rotativa .nombreDia {
  background-color: rgba(32, 39, 111,1);
  color: white;
}

.tabla-editar-rotativa .dias {
  background-color: rgba(32, 39, 111,1);
  color: white;
  margin-left: -30px;
}

.tabla-editar-rotativa .dias,
.tabla-editar-rotativa .descripcion-turno {
  height: 4.1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tabla-editar-rotativa .dias.mini,
.tabla-editar-rotativa .descripcion-turno.mini {
  height: 2em;
}

.tabla-editar-rotativa .dias.impar {
  background-color: rgb(55, 61, 123);
}

.manito:hover {
  cursor: pointer;
}

.form-control.form-width-70 {
  width: 70px;
}

.form-control.form-width-100 {
  width: 100px;
}

/* La clase 'form-more-gray' solo establecera el estilo a un elemento de formulario que este desabilitado */
.form-control[disabled].form-more-gray {
  background-color: rgb(204, 204, 204);
}



/* Animación en css que "sacude" el texto */
.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}