/* Tooltip container */
.tooltip {
	position: relative;
	display: inline-block;
	cursor: help;
}

/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 300px;
	background-color: #476595;
	color: #fff;
	padding: 15px 15px;
	bottom: 0;
	right: -8px;
	bottom: 30px;
	position: absolute;
	z-index: 5;
}

.tooltip .tooltiptext:after {
	top: 100%;
	right: 0;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #476595;
	border-width: 15px;
	margin-left: -15px;
	z-index: 4;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
}