.leaflet-control-geocoder {
  background: white;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  border-radius: 5px;
  text-align: left;
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.leaflet-control-geocoder-collapsed {
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  cursor: pointer;
}

.leaflet-control-geocoder-form {
  display: none;
  vertical-align: middle;
}

.leaflet-control-geocoder-expanded .leaflet-control-geocoder-form {
  display: inline-block;
}

.leaflet-control-geocoder-form input {
  font-size: 12px;
  border: 0;
  background-color: transparent;
  width: 240px;
  outline: none;
  padding: 0 0 0 8px;
}

.leaflet-control-geocoder-form input:focus {
  outline: none;
}

.leaflet-control-geocoder-icon {
  display: inline-block;
  width: 26px;
  height: 26px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  cursor: pointer;
}

.leaflet-control-geocoder-throbber .leaflet-control-geocoder-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z' opacity='.25'/%3E%3Cpath fill='%23333' d='M12 2a10 10 0 0 1 10 10h-2a8 8 0 0 0-8-8V2Z'%3E%3CanimateTransform attributeName='transform' dur='1s' repeatCount='indefinite' type='rotate' values='0 12 12;360 12 12'/%3E%3C/path%3E%3C/svg%3E");
}

.leaflet-control-geocoder-results {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  border-top: 1px solid #ccc;
  display: none;
}

.leaflet-control-geocoder-results li {
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaflet-control-geocoder-results li:hover,
.leaflet-control-geocoder-selected {
  background-color: #f5f5f5;
}

.leaflet-control-geocoder-error {
  padding: 6px 8px;
  color: #c00;
}