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

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

@media only screen and (orientation: portrait) {
.custom-map-control-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 3em Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 50px;
  cursor: pointer;
}

  input[type = button] {
      font-size: 50px !important;
   }
   
}


.custom-map-control-button:hover {
  background: rgb(235, 235, 235);
}

@media only screen and (orientation: landscape) {
.custom-map-control-button {
  background-color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 0 0.5em;
  font: 1.3em Roboto, Arial, sans-serif;
  overflow: hidden;
  height: 40px;
  cursor: pointer;
}
}

.marker-position {
    bottom: 16px;
    left: 18px;
    position: relative;
}