.leaflet-control-zoom-in, .leaflet-control-zoom-out {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	color: rgba(255, 255, 255, .8) !important; 
	font-size: 18px !important;
	font-weight: 400 !important;
}

.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 d='M12.2 13l3.4 6.6c.6 1.1 2.5-.4 2-1.2l-4-6.2z' fill='%23FFFFFFCC'/%3E%3Ccircle cx='10.8' cy='8.9' r='3.9' fill='none' stroke='%23FFFFFFCC' stroke-width='1.5'/%3E%3C/svg%3E") !important;
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.leaflet-control-geocoder-expanded {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	color: rgba(255, 255, 255, .8) !important; 
}

.leaflet-control-geocoder-address-detail {
	color: rgba(255, 255, 255, .8) !important; 
}

.leaflet-popup-content {
	color: white !important;
}

.leaflet-control-geocoder-form input {
	color: rgba(255, 255, 255, .8) !important; 
	font-size: 12px !important;
	font-weight: 400 !important;
    letter-spacing: -.01em !important;
	font-family: 'Inter', 'Open San', sans-serif !important;
	padding: 5px !important;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none; /* Remove default browser styling for the button */
    background-color: transparent; /* Set the background color of the cancel button */
    border-radius: 50%; /* Optional: Make it circular */
    width: 16px; /* Adjust width */
    height: 16px; /* Adjust height */
    border: none; /* Optional: Add a border */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23FFFFFFCC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer; /* Add a pointer cursor */
	color: rgba(255, 255, 255, .8) !important;
}
ul.leaflet-control-geocoder-alternatives li a {
	color: white;
}

ul.leaflet-control-geocoder-alternatives li a span:first-of-type{
	color: rgba(255, 255, 255, .8) !important;
}

ul.leaflet-control-geocoder-alternatives li a span:last-of-type{
	color: rgba(255, 255, 255, .8) !important;
	font-weight: lighter;
}

ul.leaflet-control-geocoder-alternatives li:hover {
	background-color: rgba(22, 22, 23, .8) !important;
}

.leaflet-popup-content-wrapper{
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.popup-content {
    height: 240px !important;
    overflow-y: auto !important;
    --scrollbar-color-thumb: rgba(255, 255, 255, .8);
	--scrollbar-color-track: transparent;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 6px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .popup-content {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .popup-content::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .popup-content::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .popup-content::-webkit-scrollbar {
        width: var(--scrollbar-width-legacy);
        height: var(--scrollbar-width-legacy);
    }
}

.leaflet-popup-content .table tbody tr *{
    background-color: transparent !important; /* Light gray for odd rows */
	color: rgba(255, 255, 255, .8) !important;
}

#popup-tabs .nav-link.active {
	color: rgba(22, 22, 23, .8) !important;
	background-color: rgba(255, 255, 255, .8) !important;
}

#popup-tabs .nav-link {
	color: #2997ff !important;
}
.leaflet-popup-close-button {
	color: rgba(255, 255, 255, .8) !important;
}

.leaflet-popup-close-button:hover {
	color: white !important;
}

.leaflet-popup-tip {
	background-color: rgba(22, 22, 23, .8) !important;
	backdrop-filter: saturate(140%) blur(6px);
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}