:root {
    --beige: #f7f4f1;
    --light-gray-blue: rgba(108, 122, 137, 0.75);
    --moss-green: #6e8b3d;
    --sailor-blue: #1a3c52;
}

.leaflet-control-search .search-input {
    height: 24px;
    width: 260px;
}

.leaflet-control-search .search-cancel {
    top: 3px;
    right: 32px;
}

.leaflet-control-search .search-button {
    width: 30px;
    height: 29px;
    background: url(../images/search-icon.png) no-repeat 4px 4px #fff;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
}

.leaflet-control-search .search-button:hover {
    background: url(../images/search-icon.png) no-repeat 4px 4px #fafafa;
}

.leaflet-control-search .search-tooltip {
    min-width: 120px;
    max-height: 60vh;
    width: 80vw;
    scrollbar-width: thin; /* 'auto', 'thin', vagy 'none' */
    scrollbar-color: var(--light-gray-blue) #f7f4f1; /* Fogó és háttér színe */
}

.leaflet-control-search .search-tip {
    padding: 6px 12px;
    display: flex;
    align-items: center;
}

/* Görgetősáv alapja */
.leaflet-control-search .search-tooltip::-webkit-scrollbar {
    width: 6px;
}

/* Fogó színe (hover effektus hozzáadása) */
.leaflet-control-search .search-tooltip::-webkit-scrollbar-thumb {
    background-color: var(--light-gray-blue);
}

/* Görgetősáv háttere */
.leaflet-control-search .search-tooltip::-webkit-scrollbar-track {
    background-color: #f7f4f1;
}

/* Hover effekt a görgetősáv fogóján */
.leaflet-control-search .search-tooltip::-webkit-scrollbar-thumb:hover {
    background-color: rgba(108, 122, 137, 0.5);
}

.leaflet-control-search .search-tooltip {
    scrollbar-width: thin; /* 'auto', 'thin', vagy 'none' */
    scrollbar-color: var(--light-gray-blue) #f7f4f1; /* Fogó és háttér színe */
}

@media (max-width: 600px) {
    .leaflet-control-search .search-tooltip {
        width: 90vw;
    }
}