#hotspotFigures {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 500px;
}

#hotspotFigureFemale,
#hotspotFigureMale {
    transition: margin-top 0.5s ease-in-out, margin-bottom 0.5s ease-in-out; /* animate changes to margin-top */
    position: relative; 
    /* width: 100%;  */
    min-width: 500px;
    height: auto; 
    max-width: 500px; 
    /* max-height: 625px;  */
    overflow: visible;
    margin: 0px;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
    display: block;
}

#hotspotToggleContainer:has(input[type="checkbox"]:checked) ~ #hotspotFigures .hotspotFemale {
  visibility: hidden;
}
#hotspotToggleContainer:has(input[type="checkbox"]:checked) ~ #hotspotFigures .hotspotMale {
  visibility: visible;
}
#hotspotToggleContainer:not(:has(input[type="checkbox"]:checked)) ~ #hotspotFigures .hotspotFemale {
  visibility: visible;
}
#hotspotToggleContainer:not(:has(input[type="checkbox"]:checked)) ~ #hotspotFigures .hotspotMale {
  visibility: hidden;
}

#hotspotFigureMale {
  position: absolute;
  top: 0;
  left: 0;
}

/* #content_ctl00_hotspotBaseImgFemale,
#content_ctl00_hotspotBaseImgMale {
    width: 500px; 
    height: 100%; 
    object-fit: contain; 
    display: block;
} */

.hotspotShow {
    /* display: block; */
    /* opacity: 1; */
    visibility: visible;
    z-index: 1;
}

.hotspotHide img {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    /* height: 0px !important; */
    z-index: 0;
}

.hotspotModal {
    position: absolute;
    /* display: block; */
    width: 100%;
    height: auto;
}

.hotspotOpenModal {
    position: absolute; 
    border-radius: 50%; 
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.75); 
    width: 50px; 
    height: 50px; 
    transform: translate(-50%, -50%); 
    padding: 0px; 
    margin: 0px; 
    cursor: pointer;
    z-index: 2;
}

@media only screen and (max-width: 549px)
{
  /* .hotspotOpenModal {
    transform: translateX(-200px) translateY(-250px);
  } */
  #hotspotContainer,
  #hotspotFigureFemale,
  #hotspotFigureMale {
    min-width: 300px;
    max-width: 300px;
  }
}

@media only screen and (max-width: 1199px) 
{
  #hotspotModalFemale,
  #hotspotModalMale {
    margin-top: 5rem;
  }

  .hotspots-top,
  .hotspots-left,
  .hotspots-right,
  .hotspots-top-left,
  .hotspots-top-right,
  .hotspots-bottom-left,
  .hotspots-bottom-right,
  .hotspots-bottom {
    position: relative; /* Change from absolute */
    top: 0;            /* Reset positioning if necessary */
    left: 0;           /* Reset positioning if necessary */
    transform: none;   /* Remove any centering transforms */
    width: 100%;
  }
}

@media only screen and (min-width: 1200px) 
{
  #hotspotModalFemale,
  #hotspotModalMale {
    margin-left: 5rem;
  }

  .hotspots-top {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
  }

  .hotspots-bottom {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
  }

  .hotspots-left {
      right: 100%;             /* place the div immediately to the left of figure */
      top: 50%;                /* start vertical center */
      transform: translateY(-50%); /* shift up by 50% to center perfectly */
  }

  .hotspots-right {
      left: 100%;             /* place the div immediately to the right of figure */
      top: 50%;                /* start vertical center */
      transform: translateY(-50%); /* shift up by 50% to center perfectly */
  }

  .hotspots-top-left {
      bottom: 100%;
      left: 0;
      transform: translateX(-50%);
  }

  .hotspots-top-right {
      bottom: 100%;
      left: 100%;
      transform: translateX(-50%);
  }

  .hotspots-bottom-left {
      top: 100%;
      left: 0;
      transform: translateX(-50%);
  }

  .hotspots-bottom-right {
      top: 100%;
      left: 100%;
      transform: translateX(-50%);
  }
}

#hotspotContainer {
  position: relative;
}

#hotspotToggleContainer {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  max-width: 500px; 
  margin-bottom: 20px;
}

#hotspotToggle {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width: 225px; 
  border-color: lightgrey;
  border-width: 1px;
  border-style: solid;
  border-radius: 99999px;
  padding: 5px;
}

/* The switch container */
#hotspotContainer .switch {
  position: relative;
  /* display: inline-block; */
  width: 55px;
  height: 26px;
  margin-bottom: 0px;
}

/* Hide default checkbox */
#hotspotContainer .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The visual slider */
#hotspotContainer .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #283479;
  transition: .4s;
  border-radius: 34px;
}

/* The white circular knob */
#hotspotContainer .slider:before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

/* Change background color when checked */
#hotspotContainer input:checked + .slider {
  background-color: #008ECE;
}

/* Move the knob when checked */
#hotspotContainer input:checked + .slider:before {
  transform: translateX(29px);
}