* {
	box-sizing: border-box;
  }
  
  body {
	font: 16px Arial;   
  }
  
  /*the container must be positioned relative:*/
  .autocomplete {
	position: relative;
	display: inline-block;
	width:250px;
  }
  
  input {
	border: 1px solid transparent;
	background-color: #f1f1f1;
	padding: 10px;
	font-size: 16px;
  }
  /* makes input too wide, e.g., sign in window
  input[type=text] {
	background-color: #f1f1f1;
	width: 100%;
  }
  */
  input[type=submit] {
	background-color: DodgerBlue;
	color: #fff;
	cursor: pointer;
  }
  
  .autocomplete-items {
	position: absolute;
	border: 1px solid #b3b000;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*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;
		/* Auto-complete color */
	border: 2px solid #b3b000; 
	background-color: #f0f0eb; 
	border-bottom: 1px solid #d4d4d4; 
	
	color: #000000; 
  }
  
  /*when hovering an item:*/
  .autocomplete-items div:hover {
	background-color: #ffffff; 
  }
  
  /*when navigating through the items using the arrow keys:*/
  .autocomplete-active {
	background-color: DodgerBlue !important; 
	color: #ffffff; 
  }