body {
	font: 16px;
	background: #f3f5f6;
  }
  
  .autocomplete-container {
	/*the container must be positioned relative:*/
	position: relative;
  }
  
  .autocomplete-container input {
	width: 100%;
	outline: none;
	
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 10px 15px;
	/* padding-right: 31px; */
	font-size: 14px;
  }
  
  .autocomplete-items {
	position: absolute;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.1);
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: calc(100% + 2px);
	left: 0;
	right: 0;
  }
  
  .autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
  }
  
  .autocomplete-items div:hover {
	/*when hovering an item:*/
	background-color: rgba(0, 0, 0, 0.1);
  }
  
  .autocomplete-items .autocomplete-active {
	/*when navigating through the items using the arrow keys:*/
	background-color: rgba(0, 0, 0, 0.1);
  }
  
  .clear-button {
	color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	
	position: absolute;
	right: 5px;
	top: 0;
  
	height: 100%;
	display: none;
	align-items: center;
  }
  
  .clear-button.visible {
	display: flex;
  }
    
  .clear-button:hover {
	color: rgba(0, 0, 0, 0.6);
  }