#pindropCoordinatesImage{
	text-align: left; 
}

#pindropPinLocations{
    max-width: 100%;
	width: fit-content; /*this is very important for the correct positioning of the pinLocation targets*/
	position: relative; /*this is very important for the correct positioning of the pinLocation targets*/
}

.pindropPinLocation{
	position:absolute;
	border-radius: 0.5rem;	
    background-color: rgb(255 77 77 / 80%);
	height: 32px;
	width: 32px;
	display: flex;
	border-width: 1px;
	border-style: solid;
	border-color: black;
}

#pindropLabels{
	list-style-type: none;
    display: flow-root;
    padding-left: 0;
}

.pindropLabel, .pindropLabelCorrect, .pindropLabelIncorrect, .pindropLabelPlaceholder{
	padding: 0.1vw 0.1vw;
	background-color: #F8B595;
	cursor: move;
	border-radius: 0.25rem;
	overflow: hidden;
	z-index: 2;
	opacity: 1;
	display: inline-block;
	font-size: 1em;
	padding-top: 4px;
	padding-bottom: 3px;
	min-height: 25px;
	min-width: 32px;
	max-width: 100%;
}

.pindropLabel{
	opacity: 0.95;
	z-index: 2;
}

.pindropLabelImage{
	max-width: unset !important; /*override for quiz_img_display which is always applied through media_helper (should be removed?)*/
}

.pindropLabelCorrect{
	background-color: #A1DAA1;
	border-width: 1px;
	border-style: solid;
	border-color: #44aa44;
}

.pindropLabelIncorrect {
	background-color: #f38c8c;
	border-width: 1px;
	border-style: solid;
	border-color: #aa4444;
}

.pindropLabelPlaceholder{
	opacity: 0.5;
	cursor: pointer;
}

.pindropPinLocationWithLabelPlacedHLeft{ /*horizontal alignment*/
	justify-content: start; /*pinLocation must have display: flex for this to work*/
}

.pindropPinLocationWithLabelPlacedHRight{ /*horizontal alignment*/
	justify-content: end; /*pinLocation must have display: flex for this to work*/
}

.pindropPinLocationWithLabelPlacedHCenter{ /*horizontal alignment*/
    justify-content: center; /*pinLocation must have display: flex for this to work*/
}

.pindropLabelPlacedHLeft{ /*horizontal alignment*/
	position: absolute;
	float: left;
	white-space: nowrap;
    max-width: unset;
	left:-1px;
}

.pindropLabelPlacedHRight{ /*horizontal alignment*/
	position: absolute;
	float: right;
	white-space: nowrap;
    max-width: unset;
	right:-1px;
}

.pindropLabelPlacedHCenter{ /*horizontal alignment*/
    position: absolute;
	white-space: nowrap;
    max-width: unset;
}

.pindropPinLocationWithLabelPlacedVTop{ /*vertical alignment*/
	align-items: start; /*pinLocation must have display: flex for this to work*/
}

.pindropPinLocationWithLabelPlacedVBottom{ /*vertical alignment*/
	align-items: end; /*pinLocation must have display: flex for this to work*/
}

.pindropPinLocationWithLabelPlacedVCenter{ /*vertical alignment*/
	align-items: center;  /*pinLocation must have display: flex for this to work*/
}

.pindropLabelPlacedVTop{ /*vertical alignment*/
	position: absolute;
	float: left;
	white-space: nowrap;
    max-width: unset;
}

.pindropLabelPlacedVBottom{ /*vertical alignment*/
	position: absolute;
	float: right;
	white-space: nowrap;
    max-width: unset;
}

.pindropLabelPlacedVCenter{ /*vertical alignment*/
    position: absolute;
	white-space: nowrap;
    max-width: unset;
}

#pindropLabels > .pindropLabel, .pindropLabelPlaceholder{
	margin-right: 0.8rem;
	margin-bottom: 0.8rem;
}

#pindropQuestion{
	margin:0;
	font-size: 1.1em;
	font-family: 'Patua One', 'Tw Cen MT', Sans-serif;
	padding-bottom: 20px;
}

.pindropAuthoringLabelNo{
	position: absolute;
	z-index: 1;
	cursor: move;
	float: left;
	text-align: center;
	min-height: 25px;
	opacity: 1;
	font-size: 1em;
	width: 100%;
}

#selectedLabelStickyTopContainer{
	display: none;
    position: sticky;
    top: 42px;
    left: 0;
    width: 100%;
    z-index: 50;
}

#selectedLabelStickyTopContainer .pindropLabel{
	position: relative;
}

#selectedLabelStickyBottomContainer{
    display: none;
    position: sticky;
    bottom: 0; /* Stick at the bottom */
    left: 0;
    width: 100%;
    z-index: 50;
}

#selectedLabelStickyBottomContainer .pindropLabel{
    position: relative;
}

#pindropPinLocations .pindropPinLocation.pinLocationIsTargetable,
#pindropPinLocations .pindropPinLocation.pinLocationIsTargetable .pindropLabel{
	cursor: pointer;
	background-color: rgb(248, 248, 136);
    border-color: yellowgreen;
	border-width: 1px;
    border-style: solid;
}

#pindropPinLocations .pindropPinLocation.pindropPinLocation-hover{
	border-width: 2px;
	background-color: yellow;
	border-color: rgb(135, 216, 42);
}

#pindropPinLocations .pindropPinLocation .pindropLabel.pindropLabel-hover{
	border-width: 2px;
	transform: translate(0px, -0.5px);
	background-color: yellow;
	border-color: rgb(135, 216, 42);
}

@media only screen and (max-width: 600px){

	#pindropCoordinatesImage{
		width: 100% !important; /*override for quiz_img_display inline width definition which is always applied through media_helper*/
		max-width: 800px !important; /*override for quiz_img_display which is always applied through media_helper (should be removed?)*/
	}

	.pindropPinLocation{ /*to reduce the chance of pinLocation target overlaps on smaller screens*/
		height: 25px;
		width: 25px;
		transform: translate(-5px, 5px);
		-moz-transform: translate(-5px, 5px);
		-webkit-transform: translate(-5px, 5px);
		-ms-transform: translate(-5px, 5px);
	}

	#pindropPinLocations .pindropPinLocation.pinLocationIsTargetable{
		height: 32px;
		width: 32px;
		transform: translate(-9px, 9px);
		-moz-transform: translate(-9px, 9px);
		-webkit-transform: translate(-9px, 9px);
		-ms-transform: translate(-9px, 9px);
	}
	
}

/* Highlight selected label */
.clickedLabelSelected{
	background-color: #ffe500;
    outline: 2px solid #ffa500;
}

/* Glow effect when a label is moved into a pin location */
@keyframes subtleGlowYellow {
    0% {
        box-shadow: 0px 0px 5px 0px rgba(255, 100, 0, 0.8),
                    0px 0px 10px 0px rgba(255, 215, 0, 0.6);
        outline: 1px solid rgb(255, 215, 0);
    }
    50% {
        box-shadow: 0px 0px 10px 0px rgba(255, 100, 0, 0.8),
                    0px 0px 20px 0px rgba(255, 215, 0);
        outline: 1px solid rgb(255, 215, 0);
    }
    100% {
        box-shadow: 0px 0px 5px 0px rgba(255, 100, 0, 0.8),
                    0px 0px 10px 0px rgba(255, 215, 0, 0.6);
        outline: 1px solid rgb(255, 215, 0);
    }
}

/* Label moved into pin location animation */
.pindropLabel.movedIntoPinLocation{
    animation: subtleGlowYellow 0.5s ease-in-out;
}

/* Glow effect - Animation for when a label is moved out of a pin location */
@keyframes subtleGlowRed{
	0%{ 
		box-shadow: 
		0px 0px 5px 0px rgba(255, 69, 0, 0.8),  /* Reddish-orange base shadow */
		0px 0px 10px 0px rgba(255, 165, 0, 0.6), /* Brighter orange top shadow */
		0px 0px 15px 0px rgba(255, 140, 0, 0.4); /* Soft orange outer glow for spread */
		outline: 1px solid rgb(255, 140, 0);
	}
	50%{
		box-shadow: 
		0px 0px 10px 0px rgba(255, 69, 0, 0.8),  /* Reddish-orange base shadow */
		0px 0px 20px 0px rgba(255, 165, 0, 0.6), /* Brighter orange top shadow */
		0px 0px 30px 0px rgba(255, 140, 0, 0.4); /* Soft orange outer glow for spread */
		outline: 1px solid rgb(255, 140, 0);
	}
	100%{
		box-shadow: 
		0px 0px 5px 0px rgba(255, 69, 0, 0.8),  /* Reddish-orange base shadow */
		0px 0px 10px 0px rgba(255, 165, 0, 0.6), /* Brighter orange top shadow */
		0px 0px 15px 0px rgba(255, 140, 0, 0.4); /* Soft orange outer glow for spread */
		outline: 1px solid rgb(255, 140, 0);
	}
}

/* Label moved out of pin location animation */
.pindropLabel.movedOutOfPinLocation{
    animation: subtleGlowRed 0.5s ease-in-out;
}
/*imnprove selectability of pindrop labels and pin locations*/
.pindropLabel {
	cursor: pointer !important;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation;
	z-index: 100 !important; /* High z-index to ensure labels are on top */
}

.pindropLabel * {
	pointer-events: none; /* Ensures clicks on child elements trigger the parent's click handler */
}

.pindropPinLocation {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	z-index: 10;
}

/* Make labels on pins more prominent */
.pindropPinLocation .pindropLabel {
	z-index: 101 !important;
	/* border: 2px solid transparent; */ /* Add invisible border that becomes visible on hover/selection */
}


/* Improve dragging performance for pindrop */
.ui-draggable-helper {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/* Smooth scrolling optimizations during drag */
body.dragging-active {
	overflow-x: hidden; /* Prevent horizontal scroll during drag */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

body.dragging-active * {
	pointer-events: none; /* Prevent interference during drag */
}

body.dragging-active .ui-draggable-helper,
body.dragging-active .ui-droppable {
	pointer-events: auto; /* Re-enable for drag elements */
}

/* Optimize animations during drag */
.pindropLabel {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
}

/* Reduce repaints during scroll */
#activityCanvas {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/* Smooth momentum scrolling on iOS */
body {
	-webkit-overflow-scrolling: touch;
}