/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
.flex-grow {
    flex: 1 0 auto;
}
/* Optional: Makes the sample page fill the window. */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.add-restaurant-dialog {
    max-width: 750px;
}
.filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.main-div {
    display: grid;
    height: 100%;
    grid-template-rows: min-content auto;
}

.filters-and-map {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.map {
    position: relative;
    overflow: hidden;
    height: auto;
    flex-grow: 2;
}

.scrollable-menu {
    height: auto;
    max-height: 600px;
    overflow-x: hidden;
}