div.modal-header {
  background-color: #7d83bd;
  color: white;
}

div.modal-header.header-turno-extra {
  background-color: #7edbec;
}

div.header-devolucion-turno {
  background-color: #a593ff;
  color: white;
}

div.header-ausencias {
  background-color: #fe0000;
  color: white;
}

div.modal-header.header-orientacion {
  background-color: #d6a0d1;
}

div.modal-header.header-capacitacion {
  background-color: #8fabdd;
}

div.modal-header.header-interestamento {
  background-color: #bb9b9c;
}

div.modal-header.header-interunidad {
  background-color: #20276f;
}

div.modal-header.header-vacacion {
  background-color: #5cba6e;
  color: white;
}

div.modal-header.header-vacacionInvierno {
  background-color: #0072c4;
  color: white;
}

div.modal-header.header-licencia {
  background-color: #f8ec7e;
  color: black;
}

div.modal-header.header-permisoSindical {
  background-color: #d29c08;
  color: white;
}

div.modal-header.header-permisoFuero {
  background-color: #fe0000;
  color: white;
}

div.modal-header.header-diaAdministrativo {
  background-color: #395723;
  color: white;
}
div.modal-header.header-permisoFallecimiento {
  background-color: #6a96c5;
}

div.modal-header.header-otrosPermisos {
  background-color: #92d053;
}

/*NUEVO*/
/*div.modal-header.header-licencia-no-oficial*/
div.modal-header.header-permiso-no-oficial {
  background-color: #c5c5c5;
  color: white;
}

div.modal-body.con-contenido-fijo {
  padding-top: 0px;
}

div.contenido-fijo {
  background-color: #f3f3f3;
}

div.pregunta-wizard {
  margin-top: 15px;
}

md-radio-button.fit-form {
  margin-top: 0px;
}

md-checkbox.fit-form {
  margin-top: 0px;
  margin-left: 0px;
}

md-checkbox.no-margin-bottom {
  margin-bottom: 0;
}

md-autocomplete.separa-abajo {
  margin-bottom: 15px;
}

/* Esta accion puede resalta la lista de resultados del textbox <md-autocomplete> de angular material */
.md-virtual-repeat-container.md-autocomplete-suggestions-container {
  z-index: 1080;
}

/****** Formato tabla modalCambioTurnoServicio **********/

.tabla-dts-abiertos > thead {
  background-color: #4f81be;
  color: white;
}

.tabla-dts-abiertos > tbody > tr:nth-of-type(odd) {
  background-color: #d1d8ea;
}

.tabla-dts-abiertos > tbody > tr:nth-of-type(even) {
  background-color: #e9eef4;
}

/****** Formato autocomplete 2.0 **********/

.autocomplete-custom-template li {
  border-bottom: 1px solid #ccc;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  white-space: normal;
}

.autocomplete-custom-template li:last-child {
  border-bottom-width: 0;
}

.autocomplete-custom-template .item-title,
.autocomplete-custom-template .item-metadata {
  display: block;
  line-height: 2;
}

/* Nuevo complemento para los modals que va en los headers de cada modal */
.modal-opciones {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
}

/*  Estilo para marcador de hora a restar en caso de fuero. Se muestra en modalEditarHoraEfectiva */
div.marcadorHoraFuero {
  height: 5px;
  background-color: red;
  position: absolute;
}

/*  Edición de la hora escribiéndola sobre la etiqueta del slider (dirHorasTurnoRefuerzo).
    Se muestra en modalEditarHoraEfectiva y en modalTurnoRefuerzo */
.ui-rangeSlider:not(.ui-rangeSlider-disabled) .ui-rangeSlider-label {
  cursor: pointer;
}

.ui-rangeSlider-label input.edicionHoraSlider {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  padding: 0 4px;
  border: 1px solid #4d5566;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  font-size: 15px;
  text-align: center;
}

/*  Tabla con overflow en Y */
table.scrollY {
  overflow-y: scroll;
}

/* modalResolverInasistencias */
.app-modal-large .modal-dialog {
    width: 1250px;
}

/* Titulo del modal  responsive*/

.modal-header h2 {
    font-size: calc(16px + .5vw);
}

/* Se crea la clase 'modal-wide' que fija el valor absoluto del ancho que va a tener el modal asignado, todo bajo un media query que la activara segun el ancho minimo de pantalla */

@media (min-width: 992px) {
  .modal-wide {
    width: 96%;
  }
  /* Se crea la clase 'modal-semi-wide' que se parece al de ariba  */

  .modal-semi-wide {
    width: 85%;
  }
}

/* Barra de filtros del encabezado de un modal de reporte: los filtros se ordenan en
   columnas de igual separación, en vez de estirarse a media pantalla como hacía la
   grilla de columnas de bootstrap.
   Van alineados por arriba (no por abajo) para que quede una fila de títulos y otra
   de controles: alineados por abajo, el título de un filtro de una sola línea caía a
   media altura del filtro de al lado. */
.filtros-modal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  padding: 0 15px 10px 15px;
}

/* Los filtros no crecen: se acomodan a su contenido para que la separación entre ellos
   sea siempre la misma y el espacio sobrante quede al final de la fila, en vez de
   repartirse como huecos desiguales entre un filtro y otro. */
.filtros-modal .filtro-modal {
  flex: 0 1 auto;
  min-width: 200px;
  max-width: 320px;
  margin-bottom: 0;
}

/* Filtros que agrupan varios controles (p. ej. el periodo: modo + año + periodo) */
.filtros-modal .filtro-modal-ancho {
  max-width: none;
}

/* Grupo de filtros anclado al borde derecho de la barra. Es un contenedor propio —y no
   un margen sobre el primer filtro— para que el grupo siga pegado a la derecha aunque
   alguno de sus filtros esté oculto. */
.filtros-modal .filtros-modal-derecha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
}

@media (min-width: 992px) {
  .filtros-modal .filtros-modal-derecha {
    margin-left: auto;
  }
}

/* Opciones de header  responsive*/
@media only screen and (max-width: 768px) {
    .modal-opciones {
        display: flex;
    }
    .modal-opciones div {
        min-width: 20px;
    }

    .modal-opciones .fa{
        color: #0f2048
    }

    /* No mostrar simbolo de interrogacion*/
    .modal-opciones button {
        display: none;
    }
}