.custom-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 82px; 
}
.map-wrapper {
    position: relative;
    width: 100%;
    flex-grow: 1; 
    height: calc(100dvh - 82px - 60px); 
}
.map {
    width: 100%;
    height: 100%;
}
.map-search-box {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 1000;
    background: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.map-controls-top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1000;
}
.map-btn {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    font-size: 18px;
    color: #333;
}
.map-btn:hover {
    background-color: #f4f4f4;
}
.map-btn.active {
    background-color: #007bff;
    color: white;
    border-color: #0056b3;
}
.custom-zoom {
    top: auto !important;
    left: auto !important;
    bottom: 20px; 
    right: 20px; 
}
.custom-zoom button {
    display: inline-block !important;
    margin: 1px !important;
    height: 1.675em !important;
    width: 1.675em !important;
}
.custom-zoom .ol-zoom-in, 
.custom-zoom .ol-zoom-out {
    background-color: rgba(0, 60, 136, 0.7) !important;
    color: white !important;
    border-radius: 4px !important;
}
.dropdown-menu{
    min-width: auto !important;   /* Скидаємо стандартну ширину Bootstrap */
    width: max-content !important; /* Встановлюємо ширину по контенту */
    max-width: 350px !important; /* Максимальна ширина для запобігання занадто широкому меню */
    margin-top: 0; /* Bootstrap 4 додає відступи через Popper */
}
.dropdown-menu.show {
    max-height: 350px;
    overflow: scroll;
}

@media (max-width: 768px) {
   .map-controls-top-right {
        top: auto !important;
        right: auto !important;
        bottom: 20px; 
        left: 20px;
    }
    #locateaddrquery{
        width: calc(100dvw - 40px - 48px - 48px)
    }
    .media-hidden{
        display: none;
    }
    /* .btn{
        word-break: break-word;
        padding: 0 0 0 4px;
    } */
    .vertical-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
    #locateaddr-container_ {
        width: 100%;
        max-width: none;
    }
}