.heatmap {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
}

.heatmap .axis text {
  font: 10px sans-serif;
  text-rendering: optimizeLegibility;
}

.heatmap .axis path, .heatmap .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.heatmap svg {}

.heatmap canvas, .heatmap img {
  image-rendering: optimizeSpeed;
  /* Older versions of FF          */
  image-rendering: -moz-crisp-edges;
  /* FF 6.0+                       */
  image-rendering: -webkit-optimize-contrast;
  /* Safari                        */
  image-rendering: -o-crisp-edges;
  /* OS X & Windows Opera (12.02+) */
  image-rendering: pixelated;
  /* Awesome future-browsers       */
  -ms-interpolation-mode: nearest-neighbor;
  /* IE                            */
}

.heatmap .legendCells text {
  font-size: 10px;
  font-weight: normal;
  opacity: 0;
}

.heatmap .legendCells .cell:first-child text {
  opacity: 1;
}

.heatmap .legendCells .cell:last-child text {
  opacity: 1;
}

.img-zoom-container {
  position: relative;
}

.img-zoom-lens {
  position: absolute;
  border: 1px solid #666;
  /*set the size of the lens:*/
  cursor: pointer;
  z-index: 100;
}


.img-zoom-lens:active {
  cursor: move;
}

.img-zoom-lens-big {
  position: absolute;
  border: 1px solid #666;
  /*set the size of the lens:*/
  cursor: pointer;
  z-index: 101;
}
.img-zoom-lens-big:active {
  cursor: move;
}

.img-zoom-result {
  margin: 0 auto;
  border: 1px solid #d4d4d4;
}

.my-hmap-legend .gradient {
  margin: 0 0 20px 0;
  padding: 0 0 10px 0;
  width: 100%;
  max-width: 400px;
}

.my-hmap-legend .swatches {
  width: 100%;
  float: left;
  height: 16px;
}

.my-hmap-legend .labels {
  width: 100%;
  float: left;
  position: relative;
}

.my-hmap-legend .label {
  width: 20%;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  float: left;
}

.my-hmap-legend .label.min, .my-hmap-legend .label.max {
  top: 0;
  min-width: 20px;
}

.my-hmap-legend .label.min {
  text-align: left;
}

.my-hmap-legend .label.median {
  /*  margin: 0 auto; */
  text-align: center;
  width: 60%;
}

.my-hmap-legend .label.max {
  right: 0;
  text-align: right;
}

.my-hmap-legend .hovers {
  width: 100%;
  float: left;
  height: 16px;
  margin-top: -16px;
  background-color: rgba(red, green, blue, 0.5);
}

.my-hmap-legend .hover {
  width: 20%;
  height: 16px;
  float: left;
}