html {
  box-sizing: border-box;
  /* background: cornflowerblue; */
  /* font-family: "helvetica neue"; */
  /* font-size: 20px; */
  /* font-weight: 200; */
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

.search-form {
  width: 400px;
  margin: 50px auto;
}

input.search {
  /* padding: 20px; */
  /* margin: 0; */
  /* outline: 0; */
  /* border: 10px solid #f7f7f7; */
  width: 110%;
  left: -5%;
  /* position: relative; */
  z-index: 2;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
}

.suggestions {
  margin: 0;
  padding: 0;
  position: relative;
}
.suggestions li {
  background: white;
  list-style: none;
  border-bottom: 1px solid #d8d8d8;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
  margin: 0;
  /* padding: 20px; */
  transition: background 0.2s;
  display: flex;
  justify-content: space-between;
  text-transform: capitalize;
}

span.population {
  font-size: 15px;
}

.hl {
  background: #ffc600;
}