/* https://www.w3schools.com/howto/howto_custom_select.asp */
/* The container must be positioned relative: */
.__kixr_select_container         { font-family: Arial, sans-serif; width: 256px }
.__kixr_select_container select  { display: none; }

.select-selected                  { background-color: #00a0ff }

/* Style the arrow inside the select element: */
.select-selected::after {
  position: absolute; content: ""; top: 18px; right: 12px; width: 0; height: 0;
  border: 6px solid; border-color: #fff transparent transparent transparent;
}

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

/* style the items (options), including the selected item: */
.select-items div,.select-selected { color: #ffffff; padding: 12px 16px; border: 1px solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer;
}

/* Style items (options): */
.select-items { position: absolute; background-color: #00a0ff; top: 100%; left: 0; right: 0; z-index: 99; }
.select-items { max-height: calc(100vh - 60px); overflow-y: auto; }

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

.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }