/* The container must be positioned relative: */
/* variables */
:root {
  --color-logo: #2854a4;
  --color-flecha: #2854a4;
  --color-borde: gray;
  --fondo-select: white;  /* black */
  --color-select: black;  /* black */
  --fondo-item-seleccionado: #2854a4;   /* black */
  --color-item-seleccionado:black;   /* white */
}

.custom-select {
  position: relative;
  height:3.2rem;
  background: var(--fondo-select);


  border:1;
  border-color: var(--color-borde);
  border-radius:0;
}

.custom-select select {
  display: none; /*hide original SELECT element: */
}

/*  Color del SELECT seleccionado */
.select-selected {
  background-color: var(--fondo-item-seleccionado);
  color: var(--color-item-seleccionado);

  border-radius:0;

}

/* Style the arrow inside the select element: */
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid var(--color-borde);
  border-color: var(--color-flecha) transparent transparent transparent;
}


/* Point the arrow upwards when the select box is open (active): */
.select-selected.select-arrow-active:after {
  border-color: transparent transparent var(--color-flecha) transparent;
  top: 7px;
}

/* FONDO de la LISTA de OPTIONS */
.select-items div {
  background-color:var(--fondo-select);
  color: var(--color-select);
  padding: 8px 16px;
  border: 2px solid transparent;
  border-color: transparent transparent var(--color-borde) transparent;
  cursor: pointer;
  border-radius:0;
}


/* OPTION seleccionado */
.select-items {
  position: absolute;
  color:var(--color-select);
  background-color:var(--fondo-select);
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;

}

/* Hide the items when the select box is closed: */
.select-hide {
  display: none;
}


/* OPTION MARCADO como seleccionado */
.select-items div:hover, .same-as-selected {
  background-color: var(--color-logo);
  color:white;

  border-radius:0;

}