.tooltip {
	position: absolute;
	display: block; /* We keep it in the DOM but hidden */
	visibility: hidden;
	opacity: 0;
	z-index: 1000;
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-out;
    transform: translateY(5px);		/* Small slide effect */
    pointer-events: none;			/* Prevents the tooltip from flickering if the mouse hits it */
	
	width:				400px;
	padding:			8px;
	background-color:	var(--tooltip-bg-color);
	font-size:			14px;
	border-radius:		5px;
	box-shadow:			0 1px 4px var(--shadow-color);;
}

.tooltip.is-active {
	visibility:			visible;
	opacity:			1;
	transform:			translateY(0);
}

.tooltip h3 {
	margin-top:			0;
}

.tooltip h4 {
	font-size:			16px;
	margin-top:			0;
	margin-bottom:		2px;
}

.tooltip p {
	margin-top:			6px;
	margin-bottom:		0;
}

.tooltip a {
	/* Since you cannot move the cursor over a tooltip, the user cannot click on a link in a
	 * tooltip. Therefore, make them look like the surrounding text so the user doesn"t try to
	 * click on them.
	 */
	color:				inherit;
	text-decoration:	none;		/* No underline */
}

.tooltip a:visited {
	/* The link may have been visited somewhere else, so make this text look like the
	 * surrounding text too.
	 */
	color:				inherit;
}