html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, svg, canvas {
   margin: 0;
   padding: 0;
   border: 0;
   /*font: 0.75em Helvetica;*/
   font: 0.80em Helvetica;
   -webkit-font-smoothing: subpixel-antialiased;
}
body {
   /*transform: scale(1.1);
   transform-origin: 0.1 0.1;*/
}

.select {
   width: 150px;
   border: none;
   background-color: rgba(115, 115, 115, 0.70);
   color: #fff;
   border-radius: 0.5rem/0.5rem;
   text-align: center;
   text-align-last: center;
}

.box {
   /*position: absolute;*/
   font-size: 0.8em;
   margin: 0;
   padding: 0;
   border: 0px;
   display: inline-block;
   width: 25px;
   height: 10px;
   background-color: rgba(0, 0, 5, 0.3);
}
.box_mini {
   font-size: 0.8em;
   margin: 0;
   padding: 0;
   border: 0px;
   display: inline-block;
   width:  5px;
   height: 10px;
   background-color: rgba(0, 0, 5, 0.3);
}
.box_left {
   border-top-left-radius:    0.0rem;
   border-bottom-left-radius: 0.0rem;
}
.box_right {
   border-top-right-radius:   0.5rem;
   border-bottom-right-radius:0.5rem;
}
.button {
   width: 120px;
   border: none;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-big {
   width: 105px;
   border: none;
   background-color: #737373cc;
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button-big:hover {
   background-color: #2171b5ff;
   color: #fff;
}
.button-big-highlighted {
   width: 105px;
   border: none;
   background-color: #ffffd9ff;
   color: #000000;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button-big-dark {
   position: absolute;
   width: 125px;
   height: 20px;
   border: none;
   background-color: rgba(50, 50, 50, 0.70);
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.7em;
   left: 50%;
   margin-left: -75px;
}
.button-big-dark:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-small {
   width: 55px;
   height: 20px;
   border: 1px;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.7em;
}
.button-small:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-small-highlighted {
   width: 55px;
   height: 20px;
   border: 1px;
   background-color: #ffffd9ff;
   color: #000000;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.7em;
}
.button-x {
   position: absolute;
   right: 2%;
   width: 20px;
   height: 20px;
   border: none;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   /*border-radius: 0.5rem/0.5rem;*/
   border-radius: 50%;
   transition-duration: 0.25s;
   text-align: center;
   font-size: 0.7em;
}
.button-x:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-micro {
   width: 50px;
   border: none;
   background-color: #737373cc;
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.7em;
}
.button-micro:hover {
   background-color: #2171b5ff;
   color: #fff;
}
.button-micro-highlighted {
   width: 50px;
   border: none;
   background-color: #ffffd9ff;
   color: #000000;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.7em;
}

.button-micro2 {
   width: 25px;
   height: 20px;
   border: none;
   background-color: #737373cc;
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.4em;
}
.button-micro2:hover {
   background-color: rgba(120, 120, 120, 1.00);
   color: #fff;
   /*font-size: 0.7em;*/
}
.button-micro2-highlighted {
   width: 25px;
   height: 20px;
   border: none;
   background-color: #ffffd9ff;
   color: #000000;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   font-size: 0.7em;
}
a, .text-button {
   color: #888888;
}

.text-button.highlighted {
   color: #e2b42e;
   font-weight: bold;
   text-align: center;
   font-size: 0.8em;
}

.text-button.disabled {
   color: #444444;
}

a:hover, a:focus, .no-touch .text-button:hover, .no-touch .text-button:focus, .text-button:active {
   color: #ffffff;
   cursor: pointer;
   transition: color 125ms ease-in;
   -webkit-transition: color 125ms ease-in;
}

p.invisible, span.invisible, #sponsor.invisible {
   display: none;
}

svg {
   overflow: hidden; 
}

body {
   color: #eeeeee;
   background: #000005;
}

#warn {
   font-size: 2.0em;
   position: absolute;
   top: 10%;
   left: 2%;
}

#display {
   cursor: default;
}

#map, #animation, #overlay, #foreground {
   position: absolute;
   top: 0;
   left: 0;
   will-change: transform;
}

#details {
   width: 250px;
   position: absolute;
   /*bottom: 3%;*/
   bottom: 1%;
   left: 2%;
   pointer-events: none; 
}

#details_center {
   position: absolute;
   bottom: 15%;
   /*left: 15%;*/
   left: 200px;
   pointer-events: none; 
}

.zoom_controls {
   width: 80px;
   font-size: 1.3rem;
   background-color: rgba(0, 0, 5, 0.3);
   border-radius: 0.5rem/0.5rem;
   position: absolute;
   bottom: 18%;
   right: 2%;
   pointer-events: all; 
   opacity: 1;
}

#details_bottom {
   /*white-space-collapse: collapse;*/
   width: 240px;
   font-size: 1.3rem;
   background-color: rgba(0, 0, 5, 0.3);
   border-radius: 0.5rem/0.5rem;
   position: absolute;
   bottom: 1%;
   right: 2%;
   pointer-events: none; 
   opacity: 1;
}

#details_bottom_2 {
   width: 240px;
   font-size: 1.3rem;
   background-color: rgba(0, 0, 5, 0.0);
   border-radius: 0.5rem/0.5rem;
   display: table;
   margin-top: 1rem;
   /*padding: 0 1rem 0 1rem;*/
   padding: 0;
   pointer-events: all;
}

#earth {
   width: 240px;
   font-size: 1.3rem;
   background-color: rgba(0, 0, 5, 0.3);
   border-radius: 0.5rem/0.5rem;
   display: table;
   margin-top: 1rem;
   padding: 0 1rem 0 1rem;
   pointer-events: all;
}

.menu_advanced {
   width: 240px;
   font-size: 1.25rem;
   text-align: center;
   background-color: rgba(2, 56, 88, 0.7);
 /*background-color: rgba(0, 0, 5, 0.7);*/
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: all;
   margin-top: 1rem;
   padding: 0.5rem 1rem 0.5rem 1rem;
   opacity: 0;
   max-height: 80rem;
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}
.menu_advanced_left {
   font-size: 1.25rem;
   overflow: hidden;
   white-space:nowrap;
   top: 20px;
   float: left;
   text-align: left;
   width:  90px;
}
.menu_advanced_right {
   font-size: 1.25rem;
   overflow: hidden;
   white-space:nowrap;
   top: 20px;
   float: right;
   text-align: center;
   width: 90px;
}
.menu_colors_left {
   font-size: 1.25rem;
   overflow: hidden;
   white-space:nowrap;
   top: 20px;
   float: left;
   text-align: center;
   width:  90px;
}
.menu_colors_right {
   font-size: 1.25rem;
   overflow: hidden;
   white-space:nowrap;
   top: 20px;
   float: right;
   text-align: center;
   width: 90px;
}

.menu_overlay {
   position: absolute;
   bottom: 140px;
   left: 0.3%;
   width: 180px;
   font-size: 1.25rem;
   text-align: center;
   background-color: rgba(2, 56, 88, 0.7);
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: none;
   margin-top: 1rem;
   padding: 0.5rem 1rem 0.5rem 1rem;
   opacity: 0;
   max-height: 80rem;
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}

#menu {
   /*position: relative;*/
   width: 240px;
   font-size: 1.25rem;
   text-align: center;
   background-color: rgba(2, 56, 88, 0.7);
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: all;
   margin-top: 1rem;
   margin-right: 0.5rem;
   padding: 0.5rem 1rem 0.5rem 1rem;
   opacity: 1;
   max-height: 80rem;
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}

#menu_title {
   text-align: center;
   font-size: 1.25rem;
}
#menu_welcome {
   width: 650px;
   left: 50%;
   margin-left:-325px;
   font-size: 1.50rem;
   display: table;
   background-color: rgba(0, 0, 5, 0.7);
   position: absolute;
   top: 2%;
   margin-bottom: -100px;
   text-align: left;
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: all;
   padding: 1.0rem 1rem 1.0rem 1rem;
   opacity: 1;
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}
.menu_download_imerg {
   width: 650px;
   left: 50%;
   margin-left:-325px;
   font-size: 1.50rem;
   display: table;
   background-color: rgba(0, 0, 5, 0.7);
   position: absolute;
   top: 25%;
   margin-bottom: -100px;
   text-align: left;
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: none;
   padding: 1.0rem 1rem 1.0rem 1rem;
   opacity: 0;
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}
#menu_about {
   width: 850px;
   left: 50%;
   margin-left:-425px;
   /*float: center;*/
   font-size: 1.30rem;
   display: table;
   background-color: rgba(0, 0, 5, 0.7);
   /*background-color: rgba(2, 56, 88, 0.7);*/
   /*position: absolute;*/
   position: absolute;
   height: 250px;
   top: 2%;
   margin-bottom: -275px;
   /*right: 2%;*/
   text-align: left;
   /*background-color: rgba(33, 113, 181, 0.50);*/
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: none;
   padding: 1.0rem 1rem 1.0rem 1rem;
   opacity: 0;
   /*max-height: 80rem;*/
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}
.menu_tools {
   width: 410px;
   left: 50%;
   margin-left:-205px;
   /*float: center;*/
   font-size: 1.30rem;
   display: table;
   background-color: rgba(0, 0, 5, 0.7);
   /*background-color: rgba(2, 56, 88, 0.7);*/
   /*position: absolute;*/
   position: absolute;
   height: 250px;
   top: 2%;
   margin-bottom: -275px;
   /*right: 2%;*/
   text-align: left;
   /*background-color: rgba(33, 113, 181, 0.50);*/
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: none;
   padding: 1.0rem 1rem 1.0rem 1rem;
   opacity: 0;
   /*max-height: 80rem;*/
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}

#performance_tip {
   width: 250px;
   right: 2%;
   margin-left:-125px;
   font-size: 1.30rem;
   display: table;
   background-color: rgba(0, 0, 5, 0.7);
   position: absolute;
   height: 100px;
   top: 2%;
   margin-bottom: -50px;
   text-align: left;
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: none;
   padding: 1.0rem 1rem 1.0rem 1rem;
   opacity: 0;
   transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
   -webkit-transition: opacity 250ms ease, max-height 250ms ease, margin-top 250ms ease;
}

.slidecontainer {
   position: absolute;
   /*left: 15px;*/
   width: 95%;
}
.slider2 {
   -webkit-appearance: none; /* Override default CSS styles */
   appearance: none;
   width: 90%;
   height: 12px;
   outline: none;
   background-color: rgba(100, 100, 100, 0.70);
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 40px;

}
.slider2:hover {
  opacity: 1;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider2::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 6px;
  height: 12px;
  background: #fff;
  cursor: pointer;
  border-radius: 5%;
}

.slider2::-moz-range-thumb {
  width: 6px;
  height: 12px; 
  background: #fff;
  cursor: pointer;
  border-radius: 5%;
}