#overview-details-card, #filter-card {
    position: fixed;
    right: 10px;
    top: 135px;
    z-index: 9999999;
}
#filter-card, #overview-details-card {
    
    background-color: rgb(255, 255, 255);
}
#filter-card {
    left: 10px !important;
    right: unset !important;
}
#filter-card .card, #overview-details-card .card {
    padding: 10px   ;
}
.btn-secondary {
    color: #000;
}
.details-box-shadow {
    -webkit-box-shadow: 10px 5px 16px 1px #ccc;
    -moz-box-shadow:    10px 5px 16px 1px#ccc;
    box-shadow: 10px 5px 16px 1px #ccc;
}
#overview-details-card .card, #filter-card .card {
    width: 30rem;
}
.map-details .divider {
    border-bottom: 1px solid #c7c7c7;
    margin-top: 10px;
}
.map-details .section-title {
    font-size: 16px;
    font-weight: 600;
}
.map-details .map-details-close-btn, .close-filter-btn {
    position: absolute;
    right: 27px;
    top: 7px;
    font-size: 15px;
}
.mouse {
    cursor: pointer;
}
.centered-screen {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
}
#filter-btn {
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 999999;

    /* padding: 5px 10px 5px 10px;
    border: 1px solid rgb(173, 173, 173);
    background-color: #fff;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px; */
}

.ui-autocomplete {
    font-size: 13px;
    height: 10rem;
    overflow: auto;
    width: 400px !important;
    position: absolute;
    z-index: 9999999999;
}
#map-filter-button, #map-clear-fliter-button, #map-filter-close-button {
    background: #0062cc;
    width: 5rem;
}
.leaflet-control, .leaflet-control a, .leaflet-control button {
    background-color: #00000077;
    color: #fff;
}

.leaflet-control-attribution.leaflet-control {
    background-color: white !important;
    color: #000 !important;
}
.leaflet-control-attribution.leaflet-control a {
    background-color: white !important;
    color: #000 !important;
}

.leaflet-control a:hover, .leaflet-control button:hover {
    background-color: #00000077  !important;
    color: #fff !important;
}
.leaflet-bottom.leaflet-right .leaflet-control-zoom {
    margin-bottom: 28px !important;
}

@media only screen and (max-width: 600px) {

    #overview-details-card .card, #filter-card .card {
        width: 100%;
        overflow: auto;
        height: 96vh;
    }
    #overview-details-card .card-body, #filter-card .card-body {
        overflow: auto;
        height: 100%;
    }
    #overview-details-card, #filter-card {
        left: 10px;
        right: 10px;
        top: 135px;
        bottom: 10px;
    }
}
#mapId .legend.leaflet-control .legend-body {
    background: rgb(255, 255, 255) !important;
    padding: 10px;
    color: #000;
    width: 15rem;
    border: 1px solid rgb(200, 200, 200);
}
#mapId .legend.leaflet-control .legend-title {
    font-weight: 600;
    font-size: 14px;
}
#mapId .legend.leaflet-control table td {
    padding: 3px;
}
#mapId .legend.leaflet-control .legend-header {
    padding: 6px;
    font-size: 14px;
    background: #0062cc;
    padding-left: 10px;
    font-weight: 600;
    display: flex;
}
#mapId .legend.leaflet-control .legend-header div {
    width: 100%;
}
#mapId .legend.leaflet-control .legend-header div:last-child {
    text-align: right;
    cursor: pointer;
    margin-right: 5px;
}
.legend.leaflet-control {
    /* display: none; */
}
.map-image-icon-border {
    border: 1px solid #5a5a5a;
    background: #5a5a5a;
    border-radius: 8px;
}