/* Relative positioning of the image map should go here. Link to the image is coded in-line in the html*/
.PlanWrapper {
  position: relative;
  margin: 0 auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  /*Use of a 'Padding Hack to make the SVG elements resize correctly -- Aspect ratio of the image is coded in-line in the html */
  height: 0;
  position: relative;
  }
/*Keep the following svp--responsive class with the container to make it work */
.svg--responsive {
  position: absolute;
  top: 0px;
  left: 0px;
  width:auto;
  height:auto;
}
  
/*Initial 'hidden' state of the info panels*/
.hidden{
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  position: absolute;
  /*left: 0;
  right: 0;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);*/
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  pointer-events: none;
}
  
/*How the panel will look when 'shown', including transition effects*/
.show{
  -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  position: absolute;
  -webkit-transform: none;
  transform: none;
  /*z-index: 100;*/
  pointer-events: auto;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}


  /* 2022 Version...*/

.info-content {
  scroll-margin: 75px;
}
.info-zone {
  display:inline;
  fill:#ffffff;
  fill-opacity:0;
  stroke:#ff0000;
  stroke-width:7.5;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  opacity:0;
}
.info-zone:hover {
  opacity: 1;
  pointer-events: auto;
  cursor: url("../cursors/magnifying-glass-white.png"), zoom-in;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.info-zone.is-active {
  stroke:rgba(3, 170, 3, 0.4);
  opacity: 1;
  fill-opacity:0.6;
  pointer-events: auto;
  cursor: default;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.info-zone-overview {
  display:inline;
  fill:#ffff00;
  fill-opacity: 1;
  stroke:#ff3c00;
  stroke-width:1;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  opacity: 1;
  stroke-opacity: 0;
}
.info-zone-overview:hover {
  opacity: 1;
  stroke-opacity: 1;
  pointer-events: auto;
  cursor: url("../cursors/magnifying-glass-white.png") 10 10, zoom-in;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.info-zone-overview.is-active {
  fill:rgb(69, 226, 69);
  opacity: 1;
  stroke-opacity: 1;
  pointer-events: auto;
  cursor: default;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.info-zone-touch-spot {
  display:inline;
  fill:#ffff00;
  stroke:#ff3c00;
  stroke-width:1;
  stroke-miterlimit:4;
  stroke-dasharray:none;
  fill-opacity: 0;
  stroke-opacity: 0;
}
.info-zone-touch-spot:hover {
  fill-opacity: 0.5;
  stroke-opacity: 1;
  pointer-events: auto;
  cursor: url("../cursors/magnifying-glass-white.png") 10 10, zoom-in;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.info-zone-touch-spot.is-active {
  fill:rgb(69, 226, 69);
  fill-opacity: 0.5;
  stroke-opacity: 1;
  pointer-events: auto;
  cursor: default;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
text {
  font: 1.5em Verdana, Helvetica, Arial, sans-serif;
  stroke:black;
  stroke-width:1;
  fill:#000000;
  fill-opacity:1;
}

.iplan-spacer-hidden {
  display:block;
  width:100%;
  height: 0px;
  -webkit-transition: height 0.4s ease-in-out;
  transition: height 0.4s ease-in-out;
}
.iplan-spacer-show {
  display:block;
  width:100%;
  height: 400px;
  -webkit-transition: height 0.4s ease-in-out;
  transition: height 0.4s ease-in-out;
}
.full-width {
  width: inherit;
}