/* TrivalRO Unitip popover */

#unitip {
	position: absolute;
	z-index: 1200;
	top: -1000px;
	width: 230px;
	max-width: 230px;
	display: none;
	box-sizing: border-box;
	color: #f8fbff;
	font-family: 'Informb', Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 1.42;
	pointer-events: none;
}

/* The legacy PNG point/cap are no longer needed; the scalable CSS popover
   below supplies its own pointer. */
#unitippoint,
#unitipcap {
	display: none;
	width: 0;
	height: 0;
	overflow: hidden;
}

#unitipmid {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	width: 230px;
	min-height: 42px;
	padding: 11px 14px 12px;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(47, 61, 77, 0.985) 0%, rgba(29, 41, 54, 0.99) 100%);
	border: 1px solid rgba(92, 195, 245, 0.82);
	border-bottom: 4px solid rgba(30, 144, 216, 0.95);
	border-radius: 10px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.12),
		0 8px 18px rgba(40, 90, 125, 0.28);
	color: #f8fbff;
	text-shadow: 0 1px 1px rgba(18, 38, 52, 0.65);
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}

/* Popover pointer toward the hovered row/cursor. */
#unitipmid::before,
#unitipmid::after {
	content: '';
	position: absolute;
	left: var(--unitip-arrow-x, 50%);
	width: 0;
	height: 0;
	transform: translateX(-50%);
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
}

/* Default: tooltip sits below the cursor, so the pointer is on top. */
#unitip.unitip-below #unitipmid::before,
#unitip:not(.unitip-above) #unitipmid::before {
	top: -11px;
	border-bottom: 11px solid rgba(92, 195, 245, 0.9);
}

#unitip.unitip-below #unitipmid::after,
#unitip:not(.unitip-above) #unitipmid::after {
	top: -9px;
	border-left-width: 8px;
	border-right-width: 8px;
	border-bottom: 10px solid rgb(47, 61, 77);
}

/* Near the bottom of the viewport the tooltip flips above the cursor. */
#unitip.unitip-above #unitipmid::before {
	bottom: -11px;
	border-top: 11px solid rgba(30, 144, 216, 0.95);
}

#unitip.unitip-above #unitipmid::after {
	bottom: -8px;
	border-left-width: 8px;
	border-right-width: 8px;
	border-top: 10px solid rgb(29, 41, 54);
}

#unitipmid strong {
	color: #9edcff;
	font-family: 'Grobold', 'Arial Black', sans-serif;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.35px;
	text-shadow: 0 1px 2px rgba(10, 50, 80, 0.55);
}