html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, svg, canvas {
   margin: 0;
   padding: 0;
   border: 0;
   font: 0.75em Helvetica;
   -webkit-font-smoothing: subpixel-antialiased;
   overscroll-behavior: none;
}

.dropdown {
   width: 100%;
   position: relative;
   display: inline-block;
}

.dropdown select {
   float: center; 
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
/* border: 1px solid #ccc; */
   border-radius: 8px;
   padding: 10px 15px;
   font-size: 2.0vmin;
   color: #fff;
   background: rgba(50, 50, 50, 0.30) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"%3E%3Cpolyline points="6 9 12 15 18 9"/%3E%3C/svg%3E') no-repeat right 10px center;
   width: 100%;
   cursor: pointer;
   outline: none;
}

.dropdown select:hover {
   background: rgba(75, 75, 75, 0.50);
   border-color: rgba(33, 113, 181, 1.0);
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
} 

.dropdown select:focus {
   border-color: rgba(33, 113, 181, 1.0);
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

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

#controlpanel {
   position: absolute;
   bottom: 1%;
   right: 1%;
   text-align: center;
}

.controls_icon { 
   margin:  5px;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
   cursor: pointer;
}  
.controls_icon:hover {
   background-color: rgba(33, 113, 181, 1.00);
   cursor: pointer;
}     
#controls {
   position: absolute;
   bottom: 1%;
   right: 1%;
   text-align: center;
}

.button {
   width: 100px;
   height: 25px;
   margin:  5px;
   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: 150px;
   border: none;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button-big:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.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;
   left: 50%;
   margin-left: -75px;
}
.button-big-dark:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-small {
   width: 75px;
   border: none;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button-small:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.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;
}
.button-x:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-y {
   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: 3%;
   transition-duration: 0.25s;
   text-align: center;
}
.button-y:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}  
.button-rounded2 {
   cursor: default;
   user-drag: none;
   width: 4vmin;
   height: 4vmin;
   vertical-align: middle;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 50%;
   transition-duration: 0.25s;
}  
.button-rounded2:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-rounded {
   cursor: default;
   user-drag: none;
   width: 5vmin;
   height: 5vmin;
   vertical-align: middle;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 50%;
   transition-duration: 0.25s;
}
.button-rounded:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}

.button-right {
   cursor: default;
   user-drag: none;
   float: right;
   width: 4vmin;
   height: 4vmin;
   margin: 3px;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border: 3px solid rgba(100, 100, 100, 0.70);
   border-radius: 10%;
   transition-duration: 0.25s;
}
.button-right:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}

.button-maps {
   cursor: default;
   user-drag: none;
   float: center;
   width: 2vmin;
   height: 2vmin;
   margin:  3px;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border: 3px solid rgba(100, 100, 100, 0.70);
   border-radius: 10%;
   transition-duration: 0.25s;
}
.button-maps:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}


.button-loop {
   cursor: default;
   user-drag: none;
   float: right;
   width: 2vmin;
   height: 2vmin;
   margin:  3px;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border: 3px solid rgba(100, 100, 100, 0.70);
   border-radius: 10%;
   transition-duration: 0.25s;
}
.button-loop:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}

.button-square {
   cursor: default;
   user-drag: none;
   float: left;
   width: 2vmin;
   height: 2vmin;
   margin:  3px;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border: 3px solid rgba(100, 100, 100, 0.70);
   border-radius: 10%;
   transition-duration: 0.25s;
}
.button-square:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}

.button-micro {
   width: 50px;
   border: none;
   background-color: rgba(100, 100, 100, 0.70);
   color: #d9d9d9;
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button-micro:hover {
   background-color: rgba(33, 113, 181, 1.00);
   color: #fff;
}
.button-micro2 {
   width: 10px;
   height: 10px;
   border: none;
   background-color: rgba(50, 50, 50, 0.10);
   color: rgba(100, 100, 100, 0.70);
   border-radius: 0.5rem/0.5rem;
   transition-duration: 0.25s;
}
.button-micro2:hover {
   background-color: rgba(120, 120, 120, 1.00);
   color: #fff;
}a, .text-button {
   color: #888888;
}

.videocontrols {
   color: #fff;
   position: absolute; /* Required for positioning */
   bottom: 2%; /* Initial vertical position */
   left: 50%; /* Initial horizontal position */
   transform: translate(-50%, 0);
   text-align: center;
}

.datetime {
   color: #fff;
   font-weight: bold;
   font-size: 2.0vmin;
   text-align: left;
   position: absolute; /* Required for positioning */
   bottom: 1%; /* Initial vertical position */
   left: 1%; /* Initial horizontal position */
}

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

.draggable {
  width: 60vmin;
  position: absolute; /* Required for positioning */
  top: 1%; /* Initial vertical position */
  right: 1%; /* Initial horizontal position */
  transform: translate(0%, 0);
  border-radius: 8px;
  cursor: grab;
}

.nasa_logo {
  cursor: pointer;
  width: 15vmin;
  padding: 15px 15px;
}

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 {
   position: absolute;
   top: 10%;
   left: 2%;
}

#display {
   cursor: default;
}

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

#colorbar {
   position: absolute;
   top: 1%;
   right: 1%;
   text-align: center;
}

#logo {
   position: absolute;
   top: 1%;
   left: 1%;
   text-align: center;
}

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

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

#details_bottom {
   position: absolute;
   bottom: 1%;
   right: 2%;
   pointer-events: none; 
   opacity: 1;
}

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

#video_player {
   display: inline-block;
}  

/*
#video_player:hover {
   background: rgba(75, 75, 75, 0.50);
   border-color: rgba(33, 113, 181, 1.0);
   box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
*/

#earth {
   width: 180px;
   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: 180px;
   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_advanced_events {
   position: absolute;
   width: 180px;
   bottom: 285px;
   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_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);*/
   background-color: rgba(0, 0, 5, 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;
}

#tools {
   display: none;
   position: absolute;
   top: 65%;
   right: 5%;
   width: 180px;
   font-size: 2.5vmin;
   text-align: center;
   background-color: rgba(50, 50, 50, 0.5);
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: all;
   margin-top: 1rem;
   padding: 0.5rem 1rem 0.5rem 1rem;
   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_about {
   display: block;
   position: absolute;
   transform: translate(-50%, -50%);
   top: 55%;
   left: 50%;
   width: 75%;
   font-size: 2.5vmin;
   text-align: center;
   background-color: rgba(50, 50, 50, 0.30);
   border-radius: 0.5rem/0.5rem;
   overflow: hidden;
   pointer-events: none;
   padding: 1.0rem 1rem 1.0rem 1rem;
   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;
}

#bufferIcon {
   display: none;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 10;
}

#bufferIcon div {
   width: 40px;
   height: 40px;
   border: 4px solid rgba(33, 113, 181, 0.3);
   border-top: 4px solid black;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

.vidslider {
   -webkit-appearance: none; /* Override default CSS styles */
   appearance: none;
   width: 33vmin;
   height: 1vmin;
   outline: none;
   background-color: rgba(100, 100, 100, 0.50);
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 40px;

}
.vidslider:hover {
  opacity: 1;
}

.slidecontainer {
   position: absolute;
   left: 5px;
   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.50);
   -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%;
}

    .minimize-icon {
      width: 20px;       /* Adjust the width as needed */
      height: 2px;       /* Adjust the thickness of the line */
      background-color: black; /* The color of the icon */
      margin: 10px;      /* Optional: Add spacing */
      border-radius: 1px; /* Slight rounding for a smoother appearance */
    }

    .icon-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px; /* Optional: Adjust container size */
      height: 40px;
      border: 1px solid #ddd; /* Optional: Add a border to see the bounds */
      border-radius: 5px; /* Optional: Rounding of container */
    }

    .icon-container:hover .minimize-icon {
      background-color: red; /* Optional: Change color on hover */
    }