/* Always set the map height explicitly to define the size of the div element that contains the map. */

#page-container {
    position: relative;
    min-height: 100vh;
}

#content-wrap {
    padding-bottom: 70px;
}

#map {
    height: 500px;
    width: 100%;
}

header {
    background-image: url(../../assets/images/header-background.jpg);
    background-size: cover;
    background-position: right;
}

footer {
    background-image: url(../../assets/images/food.jpg);
    background-size: cover;
    background-position: bottom;
    width: 100%;
    height: 70px;
    position: absolute;
    bottom: 0;
}

.restaurant-row,
.btn,
#view-map {
    cursor: pointer;
}

.restaurant-row:hover {
    color: teal;
}

.restaurant-row:active {
    background-color: teal;
}

.btn {
    margin-left: 20px;
}

#search,
#results {
    margin: 20px;
}

#menu-details {
    margin-top: 20px;
}

#restaurant-details {
    padding-bottom: 10px;
}

label, input{
 width: auto;
 display: block;
}