.tooltipped {
	position: relative;
}

.tooltipped .tooltip {
	height: 45px;
	margin-top: -28px;
	display: none;
	width: 164px;
	background-color: #384060;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 50%;
	opacity: 0.5;
	transition: opacity 0.3s;
	font-size:.75em;
}
.tooltipped .tooltip.natural {
	left: 110%;
}
.tooltipped .tooltip.reversed {
	right: 110%
}

.tooltipped .tooltip::after {
	content: "";
	position: absolute;
	bottom: 50%;
	margin-bottom: -5px;
	border-width: 5px;
	border-style: solid;
}
.tooltipped .tooltip.natural::after {
	border-color: transparent #384060 transparent transparent;
	right: 100%;
}
.tooltipped .tooltip.reversed::after {
	border-color: transparent transparent transparent #384060;
	left: 100%;
}

@media (hover: hover) {
.tooltipped:hover .tooltip {
	display: initial;
	opacity: 1;
}
.tooltipped .tooltip:hover {
	display: none;
	opacity: 0.5;
}