.my-class {
	outline:solid blue;
	border:solid orange;
	background:yellow;
}

.hotspotZoomBtn {
	display:flex;
	background:white;
	border: solid 1px #aaa;
	border-radius:6px;
	padding:4px;
	gap:4px;
	margin-left:auto;
	cursor:pointer;
}

.clickImage .hotspotImgWrapper img {
  cursor: zoom-in;
}
	
/*--------- HotSpot Styling -----------*/
.hotspotFigure {
	margin:1em 0;
}
.hotspotFigure * {box-sizing: border-box; }
.hotspotFigure figcaption p{
	margin:0;
	padding:.2em 0.8em;
}
.hotspotImgWrapper {
	position:relative;
	max-width:max-content;
	border:solid 1px #eee;
	box-shadow:0 0 8px #eee;
}

/*-- caption counter --*/
figcaption.autoNum {
    counter-reset: cap-counter; 
}
figcaption.autoNum  div p{
    counter-increment: cap-counter; 
}
figcaption.autoNum div p::before {
    content: counter(cap-counter) ". "; 
}

/*-- Hotspots that outline areas --*/
.hotspot {
  outline:solid .18em #c11a;
  //translate:-50% -50%;
  position:absolute;
  top:calc(var(--top) * 1%);
  left:calc( var(--left) * 1%); 
  width:calc( var(--width, 1em) * 1%);
  height:calc( var(--height, 1em) * 1%);
  border-radius:.2em;
}
.hotspot.round {
border-radius:50%;
}
.hotspot .label {
position:absolute;
background:#161c;
background:#124b83;
opacity:.88;
font-weight:400;
border-radius:.25em;
color:white;
padding:0.2em 0.35em;
line-height:1.15;
border:solid 1px white;
box-shadow:0 .2em 0.05em -0.05em #0003;
font-size:1rem;
font-size: clamp(12px,2.5cqw, 1rem);
width:max-content; 
box-sizing: content-box;
text-align:center;
transform-origin: var(--vert,center)  var(--horz,center);
transition:.08s ease-out;
}
.hotspot:hover .label {
	z-index:6;
	scale:1.06;
} 


.hotspotFigure div[class^='fig'] {
	opacity:0.75;
}

.hotspotFigure:has(.cap) :where(.hotspot:hover, figcaption span:hover) { //background:#fc05; }

.hotspotFigure:has( .fig1:is(:hover,:focus,:active) ) .fig1 ,
.hotspotFigure:has( .fig2:is(:hover,:focus,:active) ) .fig2 ,
.hotspotFigure:has( .fig3:is(:hover,:focus,:active) ) .fig3 ,
.hotspotFigure:has( .fig4:is(:hover,:focus,:active) ) .fig4 ,
.hotspotFigure:has( .fig5:is(:hover,:focus,:active) ) .fig5 ,
.hotspotFigure:has( .fig6:is(:hover,:focus,:active) ) .fig6 ,
.hotspotFigure:has( .fig7:is(:hover,:focus,:active) ) .fig7 ,
.hotspotFigure:has( .fig8:is(:hover,:focus,:active) ) .fig8 {
  background:#fc05;
  transition:.15s background ease-out;
	opacity:1;
}

.hotspot .cap {
  position: absolute;
  top:100%;
  width: 30ch;
  font-size:12px;
  background:#fff;
}


.label.right {
  left:calc(100% + 3px);
  --horz:left;
}
.label.left {
  right:calc(100% + 3px);
  --horz:right;
}
.label.bottom {
  top:calc(100% + 4px);
  --vert:top;
}
.label.top {
  bottom:calc(100% + 4px);
  --vert:bottom;
}		
.v-bottom {
  top:100%;
  --vert:top;
}
.v-middle {
top:50%;
translate: 0 -50%; 
}
.v-top {
  bottom:100%;
  --vert:bottom;
}
.h-right {
  right: 0;
  --horz:right;
}
.h-left {
  left: 0;
  --horz:left;
}


.h-center {
  left:50%;
  transform:translateX(-50%);
}
.hotspotImgWrapper {
    font-size:clamp(11px,3vw,20px);
}
.hotspotImgWrapper img {
	user-select: none;
	vertical-align:top;
}

@supports( container-type: inline-size) {
  .hotspotFigure {
    container-type: inline-size;
    //border:solid 1px green;
  }
  .hotspotImgWrapper {
    font-size:clamp(11px,3cqw,20px);
  }
}

/*--- Back End UI Helpers ---*/
.feedbackBox {
  background:black;
  color:white;
  padding:2px;
  position:absolute;
  top:calc( var(--y, 0) * 1% );
  left:calc( var(--x, 0) * 1%);
  translate:-100% -100%;
  font-size:12px;
  font-family:monospace;
  opacity:.8;
  z-index:9;
	pointer-events:none;
}

.draggable {
  box-shadow:0 0 4px #6113;
  cursor:grab;
}
.draggable:active {
  cursor:grabbing;
}