.chart-tip {
	--tip-bg: #fff;
	position: absolute;
	z-index: 6500; /* above BOX popups */
	padding: 5px 8px;
	font: 12px Arial, sans-serif;
	line-height: 17px;
	white-space: nowrap;
	color: #222;
	background: var(--tip-bg);
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	pointer-events: none;
}
.darkmode .chart-tip {
	--tip-bg: #333;
	color: #ccc;
}
/* arrow pointing at the hovered point, :before is the border and :after is the fill */
.chart-tip:before,
.chart-tip:after {
	content: '';
	position: absolute;
	top: 100%;
	left: var(--arrow-left, 50%);
	margin-left: -8px;
	border: 8px solid transparent;
	border-top-color: #ccc;
}
.chart-tip:after {
	margin-left: -7px;
	border-width: 7px;
	border-top-color: var(--tip-bg);
}
.chart-tip.below:before,
.chart-tip.below:after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
}
.chart-tip.below:before {
	border-bottom-color: #ccc;
}
.chart-tip.below:after {
	border-bottom-color: var(--tip-bg);
}