body {
  padding: 10px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
.banner { padding-right: 2em;}
.headermenu {
  padding-left: 2em;
}
a {
  color: #00B7FF;
}
.error {
    color: red
}
.success {
    color: green;
}

html, body {
    height: 100%;
    display: flex;
    margin: 0;
    flex: 1 1 auto;
    flex-direction: column;
}
header, h1.banner a {
/*                position: fixed; */
    color: #f0f0f0;
    width: 100%;
/*                display: block; */
/*                border-bottom: 1px solid #cccccc; */
    z-index: 2;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;

}
a {
    text-decoration: none;
}
.logo img {
    padding: 0;
    display: inline-block;
    width: auto;
    height: auto;
    image-rendering: auto;
    position: relative;
    border: none;
    max-width: 100%;
}
.conversions { font-size: smaller; margin-top: 1em; }
.gcs select { width: 4em; }
#ds input { width: 7em; }
#dms input { width: 5em; }
#ddm input { width: 6em; }
#dd input { width: 7em; }
label.gcs {
    width: 2em;
    display: inline-block;
}
header .container, header .inner-container{ display: flex; flex-direction: row; align-items: center; }
body { font-family: sans-serif;  background: #202020; color: #f0f0f0; }
.wrapper { display: inline-block; position: relative; margin: 5px; }
.wrapper:hover { outline: 3px solid blue; outline-offset: 2px; outline-radius: 3px; }
.map {
    display: flex;
    flex: 1 1 100%;
    min-width: 200px;
    min-height: 100px;
    width: 100%;
    height: 100%;
    border: 1px solid black;
    margin: 0;
    padding-bottom: 10px;
}
.panorama, .video, .image {
    display: inline-block;
    width: 700px;
    height: 400px !important;
    border: 1px solid black;
    margin: 0;
    flex: 1 0 auto;
}
header, #main-content {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
h1.banner { display: inline-block; font-size: 1.2em; }
header { flex-direction: column; align-items: flex-start; }
div#container, div#main-content, div#map-container {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
}
div#media-container {
    display: flex;
    flex: 0 1 auto;
}
#main-content, #media-container {
    min-height: 0;
}
div#main-content { flex-direction: row; align-content: flex-start; align-items: flex-start; }
div#map-container { flex-direction: column; align-content: flex-start; align-items: flex-start;
    padding-right: 10px;
}
div#media-container { flex-direction: column; align-content: flex-start; align-items: flex-start;
    height: 100%; overflow: scroll; }
.sunHotSpot {
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%22208%22%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22117%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20fill-opacity%3D%22.78%22%20cy%3D%22143%22%20cx%3D%2213%22%20r%3D%2211%22%20fill%3D%22%23fff%22%2F%3E%0A%3Ccircle%20cy%3D%22169%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cy%3D%22195%22%20cx%3D%2213%22%20r%3D%227%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%22195%22%20r%3D%222.5%22%2F%3E%0A%3Cpath%20d%3D%22m5%2083v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-5%205v6h6v-6zm-5%205v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20110a7%207%200%200%200%20-7%207%207%207%200%200%200%207%207%207%207%200%200%200%207%20-7%207%207%200%200%200%20-7%20-7zm-1%203h2v2h-2zm0%203h2v5h-2z%22%2F%3E%0A%3Cpath%20d%3D%22m5%2057v6h2v-4h4v-2zm10%200v2h4v4h2v-6zm-10%2010v6h6v-2h-4v-4zm14%200v4h-4v2h6v-6z%22%2F%3E%0A%3Cpath%20d%3D%22m17%2038v2h-8v-2z%22%2F%3E%0A%3Cpath%20d%3D%22m12%209v3h-3v2h3v3h2v-3h3v-2h-3v-3z%22%2F%3E%0A%3Cpath%20d%3D%22m13%20136-6.125%206.125h4.375v7.875h3.5v-7.875h4.375z%22%2F%3E%0A%3Cpath%20d%3D%22m10.428%20173.33v-5.77l5-2.89v5.77zm1-1.73%203-1.73-3.001-1.74z%22%2F%3E%0A%3C%2Fsvg%3E%0A')
}
.leaflet-control, .leaflet-container {
  color: black;
}
.leaflet-geosearch-bar {
  width: 600px;
}