#dialog {
  padding: 0!important;
  margin: 10px 0;
}

.ui-dialog {
  max-width: 95%;
}

#topheading,
nav,
nav > span  {
  color: #0072bb!important;
 
}

nav > span  {
margin-left: 25px;
}

#dialog-info p {
  text-align: left; /* justify; */
}

#toplogo {
  height: 55px!important;
  margin-top: -14px;
  margin-left: 5x;
  margin-right: 15px;
}
 
/* Hide 'leaflet' in attribution. Use in leaflet 1.8.0 when attributions of base layers are 
concatinated when attribution is added with L.control.attribution. See bug report at github: 
https://github.com/Leaflet/Leaflet/issues/8416 */
.leaflet-control-attribution a:first-of-type { 
   display: none;
}

.leaflet-control-attribution span:first-of-type { 
  display: none;
}

/**************************/

label.slider-outer {
  float: right;
  height: .33em;
  margin-right: -5px;
  margin-left: 5px;
}

/* CSS to style range inputs that look consistent across all browsers
   Thanks to:
     https://range-input-css.netlify.app
     https://github.com/Cool-Runningz/range-input.css
*/

/*********** Baseline, reset styles ***********/
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 5rem;
}

/* Removes default focus */
input[type="range"]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #d5d5d5;
  border-radius: 0.5rem;
  height: .66rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -2.7199999999999998px; /* Centers thumb on the track */
  background-color: #797979;
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type="range"]:focus::-webkit-slider-thumb {
  /*
  outline: 3px solid #797979;
  outline-offset: 0.125rem;
  */
  background-color: #222;
}

/*********** Firefox styles ***********/
/* slider track */
input[type="range"]::-moz-range-track {
  background-color: #d5d5d5;
  border-radius: 0.5rem;
  height: .66rem;
}

/* slider thumb */
input[type="range"]::-moz-range-thumb {
  background-color: #797979;
  border: none; /*Removes extra border that FF applies*/
  border-radius: 0.5rem;
  height: 1rem;
  width: 1rem;
}

input[type="range"]:focus::-moz-range-thumb{
  /* 
  outline: 3px solid #797979;
  outline-offset: 0.125rem;
  */
  background-color: #222;
}

/**************************/

#legend.show { /* to be faded in by JS */
  opacity: 1;
  visibility: visible;
  }
#legend {
  width: 140px!important;
  height: 115px!important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 800ms ease;
}
#legend p {
  margin: 0;
  line-height: 1.2em;
}
#legend td {
  line-height: 1em;
  padding-left: 8px;
}

#legend td.color {
  border: none;
  width: 1em;
  padding-left: 0;
}

/**************************/

.bmu {
  overflow: hidden;
  width: 100%;
  height: 190px;
  margin-top: -40px;
  justify-content: right;
  display: flex;
}

.bmu img {
  float: right;
  margin-right: -30px;
  margin-top: -15px;
}

@media screen and (max-width: 700px) {
 .bmu {
   justify-content: center;
   margin-top:-20px;
 }

 .bmu img {
   height: 130px!important;
   margin-right: 0;
 }
}


.moretext p {
  line-height: 1.1em;
  margin: 0;
}