/* styleListsAutocomp.css aplicable a campos fecha con Datepicker*/
.autocomplete-container {
  position: relative;
  width: 300px;
  margin-bottom: 3rem;
}

.autocomplete-input {
  width: 100%;
  height: 26px;
  padding: 8px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  border: 2px solid #007BFF; /* color del Borde*/
  color: #FF0000; /* colore del texto*/
}

.autocomplete-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  border: 1px solid #ccc;
  background: #eaf4ff;
  max-height: 150px;
  overflow-y: auto;
  display: none;
}

.autocomplete-item {
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.autocomplete-item:hover {
  background-color: #d0e8ff;
}

.color-box {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.validation-msg {
  color: red;
  font-size: 13px;
  margin-top: 4px;
}

/*------------------------------------------*/
/****estilos del calendario "datepicker jQuery" *******/

/* Fondo general y bordes */
.ui-datepicker {
  background-color: #f0f8ff;
  border: 1px solid #015994;
  color: #015994;
}

/* Encabezado mes/año */
.ui-datepicker-header {
  background-color: #015994;
  color: white;
  border-bottom: 1px solid #013b66;
}

/* Días de la semana */
.ui-datepicker th {
  background-color: #e3f2fd;
  color: #015994;
  font-weight: bold;
  padding: 4px;
}

/* Hover sobre días */
.ui-datepicker td a:hover {
  background-color: #bbdefb !important;
  border-radius: 4px;
  color: #000;
}

/* Día seleccionado */
.ui-datepicker .ui-state-active {
  background-color: #0277bd !important;
  color: white !important;
  border: none;
}

/*.. "Prev" y "Next".. */
.ui-datepicker-prev,
.ui-datepicker-next {
  background: #8dc9f2; /*none;*/
}

/*..End "Prev" y "Next".. */

/*------------------------------------------*/