.basemaps {
    padding: 0px;
}

.basemaps.closed .basemap.alt {
    display: inline-block;
}
.basemaps.closed .basemap.alt h4 {
    display: none;
}

.basemap {
    display: inline-block; /* todo: flexbox? */
    cursor: pointer;
}
.basemap.active img {
    
    border-color: #007bff;
    
    box-shadow: 2px 2px 4px #000;
}


/* Add hover effect to basemap */
.basemap img:hover {
  transform: scale(1.2); /* Scale up on hover */
  transition: transform 0.3s ease;
}

/* Add active (selected) basemap styles */
.basemap.active img {
  border-color: #007bff;
  box-shadow: 2px 2px 4px #000;
}

/* Apply styles to basemap images */
.basemap img {
  width: 55px;
  border: 2px solid #FFF;
  margin: 0 2px;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}