/* The container must be positioned relative:*/
.autocomplete {
  position: relative !important;
  display: inline-block !important;
}

.autocomplete-items {
  position: relative !important;
  border: 1px solid #d4d4d4 !important;
  border-bottom: none !important;
  border-top: none !important;
  z-index: 0 !important;
  overflow: auto;
  display: block;
  height: 150px;
  overflow-y: scroll;
  /* Position the autocomplete items to be the same width as the container:*/
  top: 30.5% !important;
  left: 0% !important;
  right: 0 !important;
}

.autocomplete-items div {
  padding: 10px !important;
  cursor: pointer !important;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* When hovering an item:*/
.autocomplete-items div:hover {
  background-color: #ddeefb !important; 
  font-weight: bold !important;
}

/* When navigating through the items using the arrow keys:*/
.autocomplete-active {
  font-weight: bold !important;
  background-color: #ddeefb !important;
}