/* Custom css to build the tree map. */

table {
  width: inherit;
}
#map {
  position: relative;
  /* When retrieving the point positions, the default body css added 8px margin around the image, so all values are slightly off */
  margin: 8px;
  padding: 8px;
}
img#map-background {
  /* Override the theme default value to display a big map */
  max-width: initial;
}
div:hover:after 
{
  content: attr(title);
  background: #fff;
  padding: 5px 12px;
  border: solid 1px #ddd;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}
.plant {
  height: 15px;
  width: 15px;
  background-color: #F87900;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
  position: absolute;
}
.tree {
  height: 40px;
  width: 40px;
  background-color: #BAFFC9;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
  position: absolute;
}
.fruit {
  height: 40px;
  width: 40px;
  background-color: #EAA50F;
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
  position: absolute;
}
.new_fruit {
  height: 40px;
  width: 40px;
  background-color: #EAA50F;
  background-image: linear-gradient(45deg, transparent 45%, #919195 50%, transparent 55%, transparent 100%);
  border-radius: 50%;
  border: 1px solid;
  display: inline-block;
  position: absolute;
}
.dead {
  height: 15px;
  width: 15px;
  background-color: black;
  border-radius: 50%;
  border: 1px solid;
  display: none;
  position: absolute;
}
.flower {
  height: 5px;
  width: 5px;
  background-color: #BBE9FF;
  border-radius: 50%;
  border: 1px solid;
  display: none; //inline-block;
  position: absolute;
}