/* based on https://www.w3schools.com/howto/howto_js_autocomplete.asp */
* { box-sizing: border-box; }
body {
  font: 16px Arial;
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
}
input#autocomplete {
  position: relative;
  opacity: 1;
  z-index: 0;
  background-color: rgb(242, 242, 242);
  color: #048;
  border: 0;
  border-radius: 0;
  margin-bottom: 1px;
  height: 40px;
  font-size: 1em;
  line-height: 2.5;
  /* Search Icon */
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABV0lEQVQ4jZXSsUtbURgF8F8eDlKcHJ2CW/+FYqFU6KCDUwWhuHZykPf28OiaDE7NJJHSraFkEMHJyUUQp6KbY4eSIThkkNLhfk9u00joWe693HvOd+75vpYMnW5vDQfYwjp+4xZD9OuqnJhBKyN/wGeszD4K/MReXZUX/wgE+QQFbnCEayxhA4doY4rNuiovnwTC9l1UPsbHuiofZ762ghHe4h4v66qciooHQb6ZR4a6Kh/wHr/CyW5zV0iBwdE8ciYyxiCO27nAeuyvnyNnuIq14SikVpECW4TmzZPTQuozKe1FeB3rj1xgGPvDSHsuOt1eG/txbDgK9KUhaWPU6fZWnyGf4gXGuGjumkF6gzMsS60aSIEthe39IDc4x05dldN8lF/haziZhzFyd+fYaeUvOt3esjQk21KrHqXAhmH7O95llG9/CSxCFBhlIpP/EshEvoTIpz/U+GDixPjbxQAAAABJRU5ErkJggg==');
  background-repeat: no-repeat;
  background-position: right 10px center;
}
input#autocomplete {
  width: 100%;
  padding: 0 1em;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  /* border-top: none; */
  z-index: 99;
  max-height: 300px;
  overflow-y: scroll;
  overflow-x: hidden;
  margin-top: -1px;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #d4d4d4;
  background-color: rgb(242, 242, 242);
  color: #048;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #e4e4e4 !important;
  color: #ffffff;
}