.tooltip {
  position: relative; /* Needed to position the tooltip text (position: absolute) */
  display: inline-block; /* Makes the container behave like a block element, allowing for better control over layout */
}

.tooltip .tooltiptext {
  visibility: hidden; /* Hides the tooltip text by default */
  width: 150px; /* Adjust as needed */
  background-color: #f44336; /* Red background for a warning/danger alert */
  color: white; /* White text */
  text-align: center; /* Center the text */
  border-radius: 6px; /* Rounded corners */
  padding: 8px 10px; /* Add some padding */
  position: absolute; /* Positions the tooltip text relative to the container */
  z-index: 1; /* Ensures the tooltip appears on top of other content */
  bottom: 150%; /* Position the tooltip above the container */
  left: 50%; /* Center the tooltip horizontally */
  margin-left: -75px; /* (Half of the width to center) */
  opacity: 0; /* Starts hidden */
  transition: opacity 0.3s; /* Smooth transition when appearing */
}

/* Arrow at the bottom */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px; /* Center the arrow */
  border-width: 5px;
  border-style: solid;
  border-color: #f44336 transparent transparent transparent; /* Arrow color matching the background */
}

/* Show the tooltip when hovering over the container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.eventprm{
    position:relative; 
    display:block; 
    margin:30px auto 8px auto; 
    border:1px solid #888; 
    border-radius: 8px; 
    width: 640px; 
    padding:4px 40px;
}

.legend{
    padding:8px;
    border:0;
}



.bldgorg{
    background-color:orange;  border:2px solid #999; float:left; width:16px; height:16px; margin:2px; border-radius:4px; cursor:pointer;
    border-image: linear-gradient(to top left, #222 0%, #dedede 100%) 1
}

.bldggrn{
    background-color:#7be382;  border:2px solid #999; float:left; width:16px; height:16px; margin:2px; border-radius:4px; cursor:pointer;
    background-image: radial-gradient(to top, #7be382 20%, green 80% );
    border-image: linear-gradient(to top left, #222 0%, #dedede 100%) 1
}

.ifr{
    width:500px; height:180px; transform: scale(0.9); scrolling:yes; border:1px solid #ccc;
        padding: 4px 0 40px 0;
}

.dispbz{
    display:none; position:relative; width:500px; height:200px; border:2px solid #888; background-color:white; vertical-align:bottom; margin: 8px; padding:0 6px; clear:both; font-size:16px;
}




@media screen and (max-width: 780px) {
    .eventprm{
        width: 96%;
        padding: 4px 0;
    
    }
 
.legend{
    line-height: 50px; vertical-align:top;   
}
    
    
    .bldgorg{ 
        width:11px; height:11px;
    }
  
    .bldggrn{ 
        width:11px; height:11px;
    }  
    
    .ifr{
        width:94%;
        padding: 4px 0 40px 0;

        
    }    
    .dispbz{
        width:94%;
        margin-left: auto;
        margin-right: auto;
    }   
    
}