.donor-tooltip {
	position: relative;
}

.donor-tooltip__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.donor-tooltip__icon svg {
	margin: auto;
}

.donor-tooltip__container {
	--x: -50%;
	width: 36ch;
	max-width: 20ch;
	visibility: hidden;
    opacity: 0;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(var(--x), 97%);
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
	transition: opacity 0.2s, visibility 0.2s;
	z-index: 3;
}

.donor-tooltip__container--medium {
	max-width: 24ch;
}

.donor-tooltip__container--large {
	max-width: 28ch;
}

.donor-tooltip__container--xlarge {
	max-width: 36ch;
}


.donor-tooltip__text {
	position: relative;
	padding: 11px;
	background-color: #FFFFFF;
	color: var(--cryomate-teal, #20504E);
	font-family: "TT Commons" !important;
	font-size: 12px !important;
	font-weight: 450 !important;
	line-height: 17.28px !important;
	box-shadow: 0px 3px 6.6px 0px #00000040;
	z-index: 0;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.donor-tooltip__container svg {
	position: relative;
	max-height: 12px;
	z-index: 1;
}

/* ON DESKTOP - DISPLAY TOOLTIP ON HOVER & FOCUS */
/* FULL NO DISPLAY ON MOBILE */
@media (min-width: 787px){
	.donor-tooltip:focus .donor-tooltip__container,
	.donor-tooltip:hover .donor-tooltip__container,
	.donor-tooltip__icon:focus > .donor-tooltip__container,
	.donor-tooltip__icon:hover > .donor-tooltip__container,
	.donor-tooltip__container:focus,
	.donor-tooltip__container:hover {
		visibility: visible;
		display: flex;
		opacity: 1;
		z-index: 3;
	}
	
	.donor-tooltip__icon {
		cursor: help;
	}
}

/* HANDLE LEFT & RIGHT EDGES */
@media (max-width: 1150px){
	/*~ pdp donor vials left on mid size screens */
	.donor-tooltip--vial .donor-tooltip__container {
		--x: -20%;
	}
	
	.donor-tooltip--vial svg {
		padding-right: 60%;
	}
}

/*~ left */
.wp-block-query li:first-child .donor-tooltip__container--left,
.wp-block-query li:nth-child(4n) .donor-tooltip__container--left {
	--x: -20%;
}

.wp-block-query li:first-child .donor-tooltip__container--left svg,
.wp-block-query li:nth-child(4n) .donor-tooltip__container--left svg {
	padding-right: 60%;
}

/*~ right */
.wp-block-query li:nth-child(3n) .donor-tooltip__container--right {
	--x: -80%;
}

.wp-block-query li:nth-child(3n) .donor-tooltip__container--right svg {
	padding-left: 60%;
}