html {
  height: 100%;
}
body {
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

* {
  box-sizing: border-box;
}

.center-text {
  text-align:center;
}

#right-container {
  overflow:auto;
  display: flex;
  flex-direction: column;
  flex-grow:1;
}

.btn-group-xs {
  padding-bottom:5px;
  width:50%;
  margin-left:auto;
  margin-right:auto;
}
.btn-group-md {
  padding-bottom:5px;
  width:70%;
  margin-left:auto;
  margin-right:auto;
}

/* only top gets four sides to avoid 2 pixel border between groups */
.btn-group-box-top {
  border:1px solid black;
}
.btn-group-box {
  border-left:1px solid black;
  border-right:1px solid black;
  border-bottom:1px solid black;
}

#stations-rx-list {
  overflow:auto;
}

/* make full height and place a border around element */
.boxit {
  border:1px solid black;
  min-height:100%;
}

.half-height {
  height:50%;
  min-height:50%;
}

.fullheight {
  flex-grow: 1;
}

#stations-received-ul {
  list-style-type: none;
}

.glyph-red { color: #ff0000; }
.glyph-yellow { color: #ffff00; }
.glyph-green { color: #00ff00; }

#right-side {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* place legend at bottom of map */
#map-legend {
  position:absolute;
  bottom:0px;
  left:0px;
  border-top:1px solid black;
  height:25px;
  width:100%;
  min-width:100%;
  flex-grow:0;
}

#btn-login {
  position:absolute;
  right:0;
}

#map-progress-bar { display:none; }
#graph-progress-bar { display:none; }
#stations-map {
  flex-grow:1;
  width:100%;
}

.marker_black {
  font-weight: bold;
  line-height: 1.2;
  font-style: italic;
  font-size: 15px;
  border-radius: 10px;
  color: white;
  background-color: black;
  border-color: white;
}
.leaflet-tooltip-top.marker_black::before {
  border-top-color: black;
}
.marker_dimgray {
  font-weight: bold;
  line-height: 1.2;
  font-style: italic;
  font-size: 15px;
  border-radius: 10px;
  color: white;
  background-color: dimgray;
  border-color: white;
}
.leaflet-tooltip-top.marker_dimgray::before {
  border-top-color: black;
}
.marker_darkgray {
  font-weight: bold;
  line-height: 1.2;
  font-style: italic;
  font-size: 15px;
  border-radius: 10px;
  color: white;
  background-color: darkgray;
  border-color: black;
}
.leaflet-tooltip-top.marker_darkgray::before {
  border-top-color: black;
}
.marker_red {
  font-weight: bold;
  line-height: 1.2;
  font-style: italic;
  font-size: 15px;
  border-radius: 10px;
  color: black;
  background-color: red;
  border-color: black;
}
.leaflet-tooltip-top.marker_red::before {
  border-top-color: black;
}
.marker_yellow {
  font-weight: bold;
  line-height: 1.2;
  font-style: italic;
  font-size: 15px;
  border-radius: 10px;
  color: black;
  background-color: yellow;
  border-color: black;
}
.leaflet-tooltip-top.marker_yellow::before {
  border-top-color: black;
}
.marker_green {
  font-weight: bold;
  line-height: 1.2;
  font-style: italic;
  font-size: 15px;
  border-radius: 10px;
  color: black;
  background-color: green;
  border-color: black;
}
.leaflet-tooltip-top.marker_green::before {
  border-top-color: black;
}