.leaflet-container {
  height: 100%;
  width: 100%;
}
#loading-spinner {
  margin-left: "16px";
  position: "absolute";
                right: 0;
                top: "50%";
                transform: "translateY(-50%)";
                height: "24px";
                width: "24px";
}
.map-address-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
    z-index: 999;
    pointer-events: none;
  }
  .geocoder-control-input{
    background-image:
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUtJREFUeNrs1U0oBGEcx3Err0VicSc1OSqJcraKiwMXB0lSbjjszYWUm6S0e8FellyUKKWUHKQ4uGhSXnIgR2FLMb5P/Q9P2+gZ69ktNf/6NLPP0+xvn31eJuJ5XlEhKhIG/e8gx3H0j/VoxSsu8en3jOu6vt9VHODHVGMNTzjGBe4x+JsRlRj6S3GALuxhH1GMY0ueT9sIGpGQOcxq7QmcYhk7yJiCTH/dAF4wn9X+jEWZt+4gIzIFNeIBHz59N3JtsBF0hxbU+vS1y/XWRlAK5VhFmdbehjiucWZjMexiQxZFJw5Rhz4JHv5pP+Wyj0YxhS+MoR9HeMc2hmwFqaNjCc2oQgV6cYVKJNFkI0ivNxmZqgnZPzXYzJrDPwfpdY5Jue/AQr6CVK1jRe6n0ZOvIFUzOJFTPeflHaTUqRGTuXoM37BhkLG+BRgAwGBahbN+tUYAAAAASUVORK5CYII=)!important;

  }
  .leaflet-top .leaflet-control{    
  margin-top: 60px;
  }
  input[type="text"]:hover {
  cursor: pointer;
}
#addressSearch{
    padding: 10px 12px;
    font-size: 16px;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    text-align: left;
    cursor: text;
    width: 90%;
}
.leaflet-marker-icon,
.leaflet-marker-icon:hover {
  cursor: grab !important;
}
.leaflet-marker-icon.leaflet-interactive:active {
  cursor: grabbing !important;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  cursor: pointer !important;
}
/* Make search bar slimmer and inside map nicely */
.leaflet-control-geosearch {
  width: 90% !important;      /* take most of map width */
  max-width: 500px !important;
  margin: 10px auto !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
}

/* Input field style */
.leaflet-control-geosearch input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: none !important;
  font-size: 14px !important;
  outline: none !important;
}

/* Placeholder text */
.leaflet-control-geosearch input::placeholder {
  color: #999;
  font-style: italic;
}

/* Dropdown suggestion list */
.geocoder-control-suggestions {
  border-radius: 0 0 12px 12px !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  font-size: 13px !important;
  z-index: 9999;
}

.geocoder-control-suggestions li {
  padding: 6px 12px !important;
  cursor: pointer;
}

.geocoder-control-suggestions li:hover {
  background: #f0f0f0 !important;
}


/* Style the input inside */
.leaflet-control-geosearch input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: none !important;
  font-size: 14px !important;
  outline: none !important;
  box-sizing: border-box !important;
}
.esri-map-address-input{
  width: inherit;
  flex: 1; 
      padding-right: 24px; 
      border: 1px solid #ccc; 
      border-radius: 4px; 
      font-size: 14px;
      height: 32px;
      cursor:text !important;
}
.esri-map-clear-btn{
  
      position: absolute;
      right: 8px;
      background: transparent;
      border: none;
      color: #666;
      font-size: 16px;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      height: 100%;
      display: flex;
      align-items: center;
    
}
/* Suggestions dropdown stays inside */
.geocoder-control-suggestions {
  max-height: 200px !important;
  overflow-y: auto !important;
  border-radius: 0 0 12px 12px !important;
  border: 1px solid #ddd !important;
  background: #fff !important;
  z-index: 1100 !important;
}