.label-control {
  background: transparent;
  padding: 6px;
  border-radius: 4px;
  box-shadow: none;
  font-family: Arial, sans-serif;
  min-width: 40px;
  margin-bottom: 10px;
  position: relative;
}

.leaflet-bar.leaflet-control.leaflet-control-custom.label-control {
  border: none;
}

#label-settings-btn {
  width: 36px;
  height: 36px;
  background: white;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

#label-settings-btn:hover {
  background: #f8f8f8;
}

#label-settings-btn.open {
  transform: rotate(90deg);
}

#label-settings-panel {
  display: none;
  position: absolute;
  bottom: 46px; /* position above button */
  left: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  padding: 5px;
  min-width: 100px;
  z-index: 1000;
}

#label-settings-panel label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

#label-color-picker {
  width: 50%;
  height: 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
}
#circle-marker-color-picker {
  width: 50%;
  height: 25px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
}

#toggle-labels-btn {
  width: 100%;
  background: #616964;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s;
}

#toggle-legend-btn {
  width: 100%;
  background: #616964;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.3s;
}

.leaflet-control-layers-base {
  padding: 5px;
}

.label-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px 8px; /* Padding inside the boundary */
  margin: 0 !important;
  color: #fff; /* White text */
  font-size: 14px; /* Font size */
  font-weight: 500; /* Bold font */
  font-family: "Segoe UI", Tahoma, Geneva, sans-serif; /* Sleek font family */
  text-transform: capitalize; /* Capitalize the first letter of each word */
  letter-spacing: 1px; /* Letter spacing for clarity */
  display: inline-block; /* Keeps the label inline with other content */
  text-align: center; /* Center the text */
  line-height: 1.4; /* Line height for readability */
  white-space: nowrap;
  padding: 4px 8px; /* Slight padding for better spacing */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000, -1.5px 0px 0 #000, 1.5px 0px 0 #000, 0px -1.5px 0 #000,
    0px 1.5px 0 #000;
}

.label-icon::before,
.label-icon::after {
  display: none !important; /* hide the little arrow below */
}

.leaflet-top.leaflet-left {
  width: 100%;
  /* Extend the width of the left control container across the entire map */
  text-align: center;
  /* Center-align the controls within the container */
}

.buffer-slider-control {
  display: inline-block;
  /* Needed for text-align center to work on this block */
  margin-top: 10px;
  /* Adjust top margin to position the slider appropriately */
  /* No need for margin-left adjustment due to text-align center */
}

/* Adjust the slider and label styling as needed */
.buffer-slider {
  width: 200px;
  /* Adjust width of the slider */
}

.info.legend.leaflet-control {
  max-height: 20vh;
  overflow-x: auto;
  overflow-y: scroll;
}