html, body {
  background-color: #f5f5f5 ;
  height: 100% ;
}

#grid-container {
  max-height: 100vh ;
}

.tile {
  background-color: #e9ecef ;
  transition: none ;
  border: 1px solid var(--bs-secondary) ;
  min-width: 4em ;
  min-height: 4em ;
  padding: 0 ;
  display: flex ;
  justify-content: center;
  align-items: center ;
  color: #000 ;
}

.tile:hover {
  background-color: #e9ecef ;
  color: #000 ;
}

.query-point {
  overflow: hidden ;
  position: absolute ;
  top: 0 ;
  left: 0 ;
  transform: translate(-50%,-50%) ;
  padding: 1em ;
  border-radius: 1em ;
  background-color: #e9ecef ;
  border: 1px solid var(--bs-secondary) ;
  z-index: 3 ;
  transition: border-radius 0.5s ;
}

.region-label, .corner-label {
  visibility: hidden ;
  opacity: 0 ;
  transition: opacity 0.5s ;
}

#grid.use-labels .query-point {
  border-radius: 0.2em ;
}

#grid.use-labels .region-label {
  opacity: 1 ;
  visibility: visible ;
}

#grid.use-labels .corner-label {
  opacity: 1 ;
  visibility: visible ;
}

.query-point:hover {
  background-color: #a3a3ba ;
}

/*
.query-point[data-uncovered="true"] .color {
  border: 1px solid #000 ;
}
*/

.color {
  position: absolute ;
  width: 52% ;
  height: 52% ;
  border: none ;
  display: flex ;
  justify-content: center;
  align-items: center ;
  color: #000 ;
}

.color[data-index="0"] {
  transform: translate(0%,-100%) ;
}

.color[data-index="1"] {
  transform: translate(-100%,-100%) ;
}

.color[data-index="2"] {
  transform: translate(-100%,0%) ;
}