.figure {
   position: relative;
}

.figure img, .figure svg {
    position: absolute;
    left: 0; top: 0;
    
}

.figure svg { top: 1px; left: 1px }
.hotspot {
    stroke: blue;
    fill: blue;
    opacity: 0.5;
}

.content .hotspot.map {
    fill-opacity: 1;
    fill: #acf;
    stroke: #666;
    stroke-width: 1px;
}

.content .hotspot {
    opacity: 1;
    fill: #000;
    fill-opacity: 0;
    stroke-width: 0;
    cursor: pointer;
}

.content .hotspot[data-state="checked"] {
   stroke-width: 5px;
   stroke: blue;
}


.content .hotspot[data-state*="correct"] { 
   stroke: darkgreen;
   stroke-width: 5px;
}

.content .hotspot[data-state*="wrong"] { 
   stroke: red;
   stroke-width: 5px;
}

.content .hotspot[data-state*="forgotten"] { 
   stroke: darkorange;
   stroke-dasharray: 10, 10;
}


.content .hotspot.map[data-state="checked"] {
   stroke-width: 1px;
   stroke: #666;
   fill: darkblue;
}

.content .hotspot.map[data-state*="correct"] { 
   fill: darkgreen;
   stroke-width: 1px;
}

.content .hotspot.map[data-state*="wrong"] { 
   fill: red;
   stroke-width: 1px;
}

.content .hotspot.map[data-state*="forgotten"] { 
  stroke-width: 1px;
   fill: darkorange;
   stroke-dasharray: 10, 10;
}

.content .hotspot:hover {
    fill-opacity: 0.3;
    
}