#filter {
    width: 66%;
    max-width: 500px;
    display: inline-block;
    position: relative;
}

#filterInput {
  /*background-image: url('/css/searchicon.png'); Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%;
  box-sizing: border-box;
  font-size: 100%; /* Increase font-size */
  padding: 12px 20px 12px 20px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#filterList {
  /* Remove default list styling */
  list-style-type: none;
  min-width: 100%; /* Full-width */
  padding: 0;
  margin: 0;
  display: block;
  position: absolute;
  z-index: 1;
}

#filterList li {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px 20px 12px 20px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 100%; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}

#filterList li:hover:not(.header) {
  background-color: #eee; /* Add a hover effect to all links, except for headers */
}

@media screen and (max-width: 480px) {
    #filterInput {
        padding: 6px 10px 6px 10px; /* Add some padding */
        margin-bottom: 6px; /* Add some space below the input */
    }
    #filterList li {
        padding: 6px 10px 6px 10px; /* Add some padding */
        font-size: 90%;
    }
}