#map-container {
  position: relative;
  /*background-image: url('https://citygardenstl.org/wp-content/uploads/MapApp/assets/images/background/citygarden.map.final.1.png');*/
  background-repeat: no-repeat;
  background-size: 100%;
  width: 1370px; 
  height: 640px;
  overflow: hidden;
    
  
} 



.hotspot {
  position: absolute;
  width: 11px;
  height: 11px;
  background-color: #2884e0;
 /* background-image: url('/assets/images/cg.map.hotspot.png'); /* /* Add the image file for the pinpoints */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: 50%;
  border-width: 2.5px;
  border-color: black;
  border-style: solid;
  cursor: pointer;
  
}





.tooltip {
  position: absolute;
  top: 15px;
  left: -70%;
  width: 300px;
  height: 200px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.16);
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.tooltip a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Removes underline from anchor tag */
}



.tooltipone {
  position: absolute;
  top: 15px;
  left: 70%;
  width: auto; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.16); /* Black background with some transparency */
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.tooltipone a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Removes underline from anchor tag */
}



.tooltiptwo {
  position: absolute;
  bottom: 15px;
  left: 70%;
  width: auto; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.16); /* Black background with some transparency */
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.tooltiptwo a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Removes underline from anchor tag */
}


.tooltipthree {
  position: absolute;
  top: 15px;
  right: 70%;
  width: auto; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.16); /* Black background with some transparency */
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.tooltipthree a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Removes underline from anchor tag */
}



.tooltipfour {
  position: absolute;
  bottom: 15px;
  right: 70%;
  width: auto; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.16); /* Black background with some transparency */
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}



.tooltipfour a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Removes underline from anchor tag */
}

.tooltipgarden {
  position: absolute;
  top: 15px;
  right: 70%;
  width: auto; /* Adjust width as needed */
  height: auto; /* Adjust height as needed */
  padding: 3px;
  background-color: rgba(0, 0, 0, 0.16); /* Black background with some transparency */
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.tooltipgarden a {
  color: inherit; /* Inherit text color from parent */
  text-decoration: none; /* Removes underline from anchor tag */
}



/*Larger Screen Media Queries*/
@media (min-width: 1921px) {
  #map-container {
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background-size: cover;
  }
}

/*extra-large screens */
@media screen and (min-width: 1600px) {
  #map-container {
    width: 1920px;
    height: 900px;
    background-size: cover; /* Adjust background size to ensure full coverage */
  }
}

/* Slimmer Rectangular Button with SVG Icons */
.rect-button {
  position: absolute;
  width: 100px; /* Smaller width */
  height: 30px;  /* Smaller height */
  background: linear-gradient(to bottom, rgba(211, 211, 211, 0.2), rgba(255, 255, 255, 0.2)); /* Light gray gradient, almost transparent */
  border-radius: 8px; /* Semi-rounded corners */
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, transform 0.3s;
  z-index: 1000; /* Keeps it on top */
  border: 1px solid rgba(200, 200, 200, 0.4); /* Subtle border for definition */
}

.rect-button .icons {
  display: flex;
  gap: 5px; /* Space between icons */
}

.rect-button svg {
  fill: #333; /* Color for the icons */
  width: 20px; /* Icon width */
  height: 20px; /* Icon height */
}

.rect-button:hover {
  background-color: rgba(211, 211, 211, 0.4); /* Slightly darker on hover */
}

.rect-button:active {
  transform: scale(0.95);
}