body {
}
#map {
    height: 300px;
}

.leaflet-popup {
    margin-bottom: 50px;
}

/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
/*.leaflet-popup-tip-container {
    top: 0px !important;
}*/

/*.leaflet-popup-tip {
    box-shadow: none !important;
}

.leaflet-popup:before {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}*/







.position-absolute {
    position: absolute !important;
}

.direction-button {
    bottom: 10px;
    left: 30px;
    z-index: 1111;
    padding: 5px;
    align-items: center;
    color: #fff !important;
    -moz-column-gap: 5px;
    column-gap: 5px;
    display: flex !important;
    line-height: 13px;
    text-align: center;
}