#app {
    height: 100vh;
    width: 100vw;
}

* { box-sizing: border-box; }

/* Optional: Makes the sample page fill the window. */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: 16px Arial;
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
  width: 100%;
}

/* Map overlay */
.map-overlay {
    /* Position and size */
    position: absolute;
    top: 20px;
    left: 800px;
    width: 20%;
    height: auto;
}

#search-results {
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
    max-height: 400px;
    overflow-y: scroll;
}

#search-results.is-loading {
    border: 4px solid red;
    background-color: red;
}

.search-bar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.2),0 -1px 0px rgba(0,0,0,0.02);
    border-radius: 4px;
}

/* Search results */
#search-input-autocomplete-list {
    /* Size */
    max-height: 100%;
}

/* Search result */
#search-input-autocomplete-list div {
    /* Size and spacing */
    height: 100%;
    padding: 10px 20px;

    /* Design */
    border-bottom: 1px solid #ddd;
}

/* Search result - hover */
#search-input-autocomplete-list div:hover {
    background-color: #00D1B2;
    color: white;
    cursor: pointer;
}

#search-input-autocomplete-list div:hover strong {
    color: white;
}

.autocomplete-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: DodgerBlue !important;
  color: #ffffff;
}