/*Override para que se vea mas oscuro en el hover*/
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  cursor: pointer;
  background-color: #c2c2c2;
}

@media (min-width: 770px) {
  .dropdown-menu.dropdown-long-list {
    max-height: 85vh;
    overflow-y: auto;
  }
}

.menu {
  list-style: none;
  border-bottom: 0.1em solid black;
  margin-bottom: 2em;
  padding: 0 0 0.5em;
}

.menu:before {
  content: "[";
}

.menu:after {
  content: "]";
}

.menu > li {
  display: inline;
}

.menu > li:before {
  content: "|";
  padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
  content: "";
  padding: 0;
}

#loading-bar .bar {
  -webkit-transition: width 350ms;
  -moz-transition: width 350ms;
  -o-transition: width 350ms;
  transition: width 350ms;

  background: #ef0000;
  position: fixed;
  z-index: 10002;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  border-bottom-right-radius: 1px;
  border-top-right-radius: 1px;
}

.table-hover tbody tr:hover td {
  background-color: #a5a5a5;
}

/**
 * BOTON SALIR
 */
#cerrarSesion {
  width: inherit;
  position: fixed;
  top: 0%;
  /*right: 50%;*/
  right: 45%;
  /*z-index: 999;*/
  z-index: 1035;
}

#cerrarSesion a {
  display: block;
  background: rgba(255, 0, 0, 0.71);
  height: 40px;
  width: inherit;
  padding: 8px 16px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#cerrarSesion a:hover {
  background: #06c;
}

#nombreUnidadPlanilla {
  height: 104px;
  width: inherit;
  position: fixed;
  top: 0%;
  left: 48%;
  z-index: 1030;
}
#nombreUnidadPlanilla span {
  display: block;
  background: rgba(35, 35, 171, 0.63);
  height: 40px;
  width: inherit;
  padding: 8px 16px;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/*
Estilos de los banners 'bannerDevelopment' y 'bannerDatosPlanilla'. El primero en un ambiente de desarrollo ('development') que solo sera mostrado en el NavBar, el segundo solo se mostrara en las vistas de planillas de solo lectura y resumen, a excepcion de admin de coordinacion
*/
#bannerDevelopment {
  background-color: rgba(32, 39, 111, 0.78);
}

#bannerDatosPlanilla {
  background-color: rgba(0, 167, 122, 0.78);
  padding-right: 10px;
}

#bannerDevelopment,
#bannerDatosPlanilla {
  color: white;
  display: block;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 3px;
  position: fixed;
  top: 50px;
  width: 100%;
  z-index: 1;
}

/*
Nueva id 'atajosRapidos' alberga los botones de 'disponibilidad', 'planilla mini', 'consulta rapida' y 'dotacion efectiva'
*/
#atajosRapidos {
  position: fixed;
  right: 0;
  top: 80%;
}

/*
Estilo para los botones de 'disponibilidad', 'planilla mini', 'consulta rapida' y 'dotacion efectiva'
*/
#atajosRapidos .atajos {
  background-color: rgb(232, 231, 249);
  color: rgb(50, 122, 199);
  display: block;
  font-size: 17px;
  height: 26px;
  margin-bottom: 5px;
  outline: 0;
  text-align: center;
  width: 26px;
}

/*
Estilo para los botones de 'disponibilidad', 'planilla mini', 'consulta rapida' y 'dotacion efectiva'
*/
#dotacionProyectada {
  background-color: rgba(126, 0, 160, 0.78);
  color: white;
  width: 26px;
  height: 26px;
  font-size: 17px;
  text-align: center;
  position: fixed;
  top: 75%;
  right: 0;
  outline: 0;
  z-index: 999;
}

#fichaAsistencia {
  background-color: rgb(255, 132, 86);
  color: black;
  width: 40px;
  height: 40px;
  font-size: 14px;
  text-align: center;
  position: fixed;
  top: 50%;
  left: 0;
  outline: 0;
  z-index: 999;
  -moz-border-radius: 0px 10px 10px 0px;
  -o-border-radius: 0px 10px 10px 0px;
  -webkit-border-radius: 0px 10px 10px 0px;
}

/*Aparece unicamente en 'buscadorTrabajadorFixed'*/
#buscarTrabajador {
  position: fixed;
  top: 100px;
  left: 0;
  z-index: 999;
}

/* Nueva clase 'nota-privacidad' que estandariza las etiquetas para cada nivel de privacidad de cada nota del usuario administrador */
.nota-privacidad {
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: white;
  margin-left: 3px;
  padding: 3px 5px;
}
/* Nueva clase 'nota-solo-admins' que etiqueta una nota de visibilidad administrador del usuario administrador */
.nota-solo-admins {
  background-color: orange;
}
/* Nueva clase 'nota-publica' que etiqueta una nota de visibilidad publica del usuario administrador */
.nota-publica {
  background-color: #7ab6ea;
}

/* La clase 'opcion-nota' corresponde a las opciones de cada nota o comentario en el 'modalNota' */
.opcion-nota {
  color: rgba(136, 136, 136, 1);
  margin-left: 10px;
  outline: none;
}

/* La clase 'no-publica' corresponde a la opcion de cada nota o comentario que no es de estado publico en el 'modalNota' */
.no-publica {
  color: rgba(136, 136, 136, 0.4);
}

img#logoSidebarRflex {
  height: 90px;
  max-height: 8vh;
}

/* Estilos de colores personalizados para los botones de angular material */

.md-button.md-yellow,
.md-button.md-yellow:not([disabled]):hover {
  background: rgb(245, 227, 42) !important;
  color: #b3b3b3;
}

.md-button.md-gray,
.md-button.md-gray:not([disabled]):hover {
  background: #b3b3b3 !important;
  color: white;
}

.md-button.md-success,
.md-button.md-success:not([disabled]):hover {
  background: rgb(92, 184, 92) !important;
  color: white;
}

.md-button.md-no-background,
.md-button.md-no-background:not([disabled]):hover {
  background: transparent !important;
  box-shadow: 0 0 0 0 black;
  color: inherit;
}

/* se declaran las propiedades para el ordenamiento de las columnas de tablas asociadas a smart-table */

.st-sort-ascent:before {
  content: "\25B2";
}

.st-sort-descent:before {
  content: "\25BC";
}

.st-sort-default:before {
  content: "\25B4\25BE";
}

/* Clases para botones de soporte en vista de inicio */
.btn.botones-soporte {
  padding-bottom: 30px;
  padding-top: 30px;
  font-weight: bold;
}

/* Clases para mostrar mano en cursor al hacer hover */
.cursor-mano {
  transition: opacity 0, 3s;
  -webkit-transition: opacity 0.3s;
}

.cursor-mano:hover {
  cursor: pointer;
  opacity: 0.5;
}

/*Se agregó esta clase especificamente para las cabeceras de los reportes,
ya que si la tabla tiene ordenamiento (sort) y tiene habilitada la opción de cabecera fija
al momento de ubicarse en la cabecera de la columna a ordenar esta se pone transparente
dejando ver los datos de la fila que está debajo de la cabecera.
 */
.cursor-manoSinTransparencia:hover {
  cursor: pointer;
  background-color: skyblue;
}

/* Estilos para spinner en linea con labels */
span.spinnerLabel {
  margin-left: 3px;
}

span.spinnerLabel md-progress-circular {
  display: inline-block;
}

/* Estilo para agregar scroll a multiselects muy altos */
multiselect ul {
  max-height: 1000%;
}

/* Define el color de letra blanco */
.text-white {
  color: white;
}

/* Define el color de letra verde y en negrita*/
.text-green-bold {
  color: green;
  font-weight: bold;
}

.ocultarBordes {
  border: hidden;
}

/* Clases sitio atención a publico */
.contenedorFondoBlanco {
  background-color: #ffffff;
  border-radius: 10px;
}
.contenedorSecundarioAzul {
  background-color: #337ab7;
  color: floralwhite;
  border-radius: 10px;
}
/* Define el color de letra roja */
.text-red {
  color: red;
}

/* Define el color de letra verde */
.text-green {
    color:green;
}

/* Define el color de letra naranjo */
.text-orange {
    color:orange;
}


/*Aumenta la jerarquia del aviso que se muestra al exportar un excel,
 *para evitar que las cabeceras de las tablas queden sobre el.
 */
md-dialog.aumentarZIndex {
  z-index: 200;
}
/**
*Genera estilo para una linea divisora.
*/
.hr-estilo-azul {
  border: 0;
  border-top: 4px double #337ab7;
  width: 90%;
}
.dimensionLogoCentroAyuda {
  width: 170px;
  height: 100px;
}

/* Clase para scrollbar (Usada sitio tutoriales.) */
.scrollbar-primary::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #337ab7;
}

/* Clase para scrollbar (Usada sitio tutoriales.) */

.sinMargenSuperior {
  margin-top: 0px;
}

.conMargenDerecho {
  margin-right: 5px;
}

.panelJusto {
  min-height: 75px;
  max-height: 250px;
  overflow-y: auto;
}

/* Esta clase permite agregar elementos md-checkbox a dropdowns evitando el efecto de hover en el elemento a */
li.dropwdown-opt-md-checkbox > a:hover {
  background-color: rgba(250, 250, 250, 0);
}

/* Esta clase alinea un elemento de fontawesome en el label del md-checkbox. Usado en un dropdown */
li.dropwdown-opt-md-checkbox i {
  display: inline;
  padding-right: 0.3em;
}

.table-hover-claro tbody tr:hover td {
  background-color: #a5a5a5;
  opacity: 0.7;
  filter: alpha(opacity=50);
}

.form-margin-5 {
  margin-bottom: 5px;
}

.form-margin-10 {
  margin-bottom: 10px;
}

.text-nowrap {
  white-space: nowrap;
}

/**
 * Estas clases usan el alineamiento con 'flexbox' para alinear las grillas hijas del elemento padre.
 * Solo usar con el elemento padre que anide grillas hijas para determinados tamaños (ej: div.row > div.col-sm-*, div.col-md-*, div.col-lg-*)
 */
.flex-col-sm-align-bottom,
.flex-col-md-align-bottom,
.flex-col-lg-align-bottom {
  display: block;
}

@media (min-width: 768px) {
  /* Solo usar con el elemento padre (ej: div, div.row) que anide grillas hijas solo con clases '.col-sm-*' */
  .flex-col-sm-align-bottom {
    display: flex;
    align-items: flex-end;
  }
}

@media (min-width: 992px) {
  /* Solo usar con el elemento padre (ej: div, div.row) que anide grillas hijas solo con clases '.col-md-*' */
  .flex-col-md-align-bottom {
    display: flex;
    align-items: flex-end;
  }
}

@media (min-width: 1200px) {
  /* Solo usar con el elemento padre (ej: div, div.row) que anide grillas hijas solo con clases '.col-lg-*' */
  .flex-col-lg-align-bottom {
    display: flex;
    align-items: flex-end;
  }
}

.letras-lila{
    color: #981ae2;
}

span.indicador-atencion {
    position: absolute;
    top: 8px;
    right: 10px;
    color: red;
    font-size: 8px;
}
/* Envia elemento al fondo con un pequeño margen inferior */
.push-bottom {
    position: absolute;
    bottom: 1%;
}

.borde-continuo {
    outline: 1px solid black;
}

/*
  Esta pseudo-clase solo se aplica al bloque 'dpFechaSemana' del directive 'dirCambiarOpcionesFecha'.
  Aplica pseudo-clase ':hover' a los botones (que representan los días del calendario del 'datepicker' en angularStrap)
  del elemento 'tbody' de la clase 'datepicker'.
  Replica los mismos colores (de fondo y borde) de la pseudo-clase ':hover' para la clase 'btn-default' en bootstrap,
  pero solo lo aplica en botones que no contengan las clases 'btn-primary' y 'btn-info'
 */
dir-cambiar-opciones-fecha > #dpFechaSemana .datepicker tbody tr:hover td button:not(.btn-primary):not(.btn-info) {
    background-color: #e6e6e6;
    border-color: #adadad;
}

.col-centrada{
    float: none;
    margin: 0 auto;
}

/*
    Las próximas 2 clases sirven para generar cuadros de imágenes de forma circular.
    circular-portrait = contenedor de la imagen.
    circular-portrait clase que tendra la imagen que esté dentro del contenedor.
*/
.circular-portrait {
    position: relative;
    width: 160px;
    height: 160px;
    overflow: hidden;
    border-radius: 50%;
}

.circular-portrait img {
    width: 100%;
    height: auto;
}

/*
    Usadas para la muestra de imágenes en el módulo de artículos
*/
.containerImagenes {
    width: 300px;
    height: 300px;
}

.containerImagenes img {
    max-height: 100%;
    max-width: 100%;
}



/* Borra las flechas de suma y resta de cada '<input/>' tipo número y con clase 'arrows-none' */
/* Fuente: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box */

/* Chrome, Safari, Edge, Opera */
input.arrows-none[type=number]::-webkit-inner-spin-button,
input.arrows-none[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.arrows-none[type=number] {
  -moz-appearance: textfield;
}

/* Hace que un '<input/>' con clase 'datalist-arrow-visible' y que trabaje con '<datalist>' tenga la flecha de selección visible */
/* Fuente: https://stackoverflow.com/questions/35196782/how-to-make-datalist-arrow-to-be-always-visible */
input.datalist-arrow-visible[list]::-webkit-calendar-picker-indicator {
  opacity: 1;
}


.no-resizable {
	resize: none;
}

.letra-morada-rflex {
    color: #58589F
}

.borde-redondeado-20-px {
    border-radius: 20px;
}

.sombra-morada-rflex {
    -webkit-box-shadow: 2px 2px 5px #58589F;
    -moz-box-shadow: 2px 2px 5px #58589F;
    box-shadow: 2px 2px 5px #58589F;
}
/* Clase que agrega blur al componente que se le asigna la clase. */
.filtro-blur{
    filter: blur(10px);
    -webkit-filter: blur(10px);
}

.fondo-transparente{
    background-color: transparent !important;
}

.fondo-blanco{
    background-color: white;
}

/* Elimina bordes y sombras de un control */
.sin-bordes-ni-sombras{
    border: none;
    box-shadow:none;
    -webkit-box-shadow :none;
}

/* Permite hacer que un modal ocupe la pantalla completa. */
.modal-dialog-fullscreen{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    /*Le dejamos este z-index para que se muestre sobre otros controles,
    pero tambien quede debajo de la linea roja de carga.*/
    z-index: 10001;
}

.background-blur-planilla{
    height: auto;
    min-height: 100%;
    border-radius: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-image:url("../images/planillaDifuminada.png");
    background-color: rgb(250,250,250);
    border:none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.padding-25-px{
    padding: 25px;
}


/* Ng-material Component CSS
Utilizado para cambiar el stilo de un md-select y asimilarlo mas a boostrap*/

md-select.custom-dropdown {
    margin-top: 0;
}

md-select.custom-dropdown[aria-expanded="true"] .md-select-value{
    background-color: #f5f5f5;
}

md-select.custom-dropdown[aria-expanded="true"] .md-select-icon{
    width: auto;
}

md-select.custom-dropdown[aria-expanded="true"] .md-select-icon:after{
    transform: rotate(180deg) scaleY(0.5) scaleX(1);
    transition: all 0.5s
}


md-select.custom-dropdown .md-select-value{
    border-bottom-color: #3f4c4f;
    position: relative;
    font-size: 11px!important;
}

md-select.custom-dropdown .md-select-value:hover {
    background-color: #f5f5f5;
}


/* Ng-material Component CSS
Utilizado para cambiar el stilo de un md-select */

/*
Botón pequeño usado en la vista de microplanning
*/
.btn-circle.btn-xs{
    width: 14px;
    height: 14px;
    padding: 0px 0px 0px 0px;
    border-radius: 15px;
    font-size: 7px;
    text-align: center;
    margin-bottom: 2px;
}

.form-horizontal .control-label.text-left{
    text-align: left;
}

.bg-lineas-diagonales-lilas{
    background: repeating-linear-gradient(120deg,#53587f4d 5px,#53587f4d 11px,#20276f 0px,#20276f 20px);
    font-weight: bolder;
    color: white;
}

.img-redonda {
    width: 13em;
    min-width: 2em;
    max-width: 13em;
    min-height: 2em;
    max-height: 13em;
	border: 4px solid #58589f;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.spinner-panel {
    padding: 20px;
}

.margen-tb-20-px {
    margin-top: 20px;
    margin-bottom: 20px;
}

.margen-tb-2-px {
    margin-top: 2px;
    margin-bottom: 2px;
}

.time-input-cs {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.new-input-cs {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.old-input-cs {
    z-index: -1;
    height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border: none;
}

.time-input-cs > div > table > thead > tr > th:nth-child(1),
.time-input-cs > div > table > thead > tr > th:nth-child(2),
.time-input-cs > div > table > tbody > tr > td:nth-child(1),
.time-input-cs > div > table > tbody > tr > td:nth-child(2),
.time-input-cs > div > table > tfoot > tr > th:nth-child(1),
.time-input-cs > div > table > tfoot > tr > th:nth-child(2) {
    display: none !important;
}

img#nps_banner {
  height: auto;
  max-width: 100%;
}

/* Disposición horizontal de los selectores del modo 'periodo fijo' del directive
   dirCambiarOpcionesFecha: los deja en una fila con separaciones iguales en vez de
   repartidos en columnas de la grilla, que dejan huecos según el ancho del contenedor.
   Se activa con el atributo 'disposicion-horizontal' del directive. */
.fila-opciones-fecha-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    margin-right: 0;
}

.fila-opciones-fecha-flex > div {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

.fila-opciones-fecha-flex .input-group-btn {
    display: inline-block;
    width: auto;
}