body {margin:0;}

#x_date, #n_date { display:none; }

input#date { 
  width:0px;
  min-width:0px;
  max-width:0px;
  visibility:hidden;
}
span#loading {
 display:inline-block;
}

#choose_date {
  vertical-align:bottom;
  font-weight:bold;
  font-size:.9rem;
}

.center {
  margin:auto;
  width:50%;
}

#date_found_message {
  border:2px #BFBFBF solid;
  color:red;
  background-color:white;

  position:relative;
  top:-90px;
  left:700px;

  padding:5px;

  width:200px;
  max-width:200px;
  min-width:200px;

}

#date_selected_found { display:none; }

#noaa_image {
  z-index: 2;
  position:absolute;
  left: 25px;
  top: 10px;
  opacity:0.0;
  filter:alpha(opacity=0);
}

/* ---------------*/
/* qpe6 section   */

div#qpe6_files { display:none; }
div#qpe6_available { display:none; }


#qpe-menu {
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 11px; /* Smaller font to save space */
    
    /* The Magic: Hide it until the user hovers over the image area */
    opacity: 0; 
    transition: opacity 0.3s ease-in-out;
    pointer-events: none; /* Prevents the menu from blocking clicks on the image */
}

/* Show the menu when the parent container is hovered */
div[style*="position: relative"]:hover #qpe-menu {
    opacity: 1;
    pointer-events: auto;
}

.hour-trigger {
    cursor: pointer;
    margin: 0 3px;
    text-decoration: underline;
}

.hour-trigger:hover {
    color: #00bcff;
}

.menu-label {
    font-weight: bold;
    margin-right: 10px;
    color: #aaa;
}

.hour-trigger {
    margin: 0 5px;
    cursor: pointer;
    transition: color 0.2s;
}

.hour-trigger:hover {
    color: #00bcff;
    text-decoration: underline;
}