/* dynamic tooltips */
.button-tip, 
.info-tip {
	position: relative;
}

.info-tip {
	display:inline-block;
	background-color: red;
	color: white;
	border-radius: 50%;
	font-size: 1rem;
	line-height: 30px;
	width: 30px;
	height: 30px;
	text-align: center;
	padding: 0px;
	border: 5px white;
}

.tooltip {
	display:none;
	position: absolute;		/* Absolute to the button */
	bottom: 110%;			/* the span is move to the top of the button */
	left: -15%;
	background-color: #eee;
	border-radius: 3px;
	font-size: 10px;
	color: #eee;
	padding: 1rem;
	width: 300px;
	text-transform: none;
	text-align: left;
	font-size: 1rem;
}

.tooltip:after {
	position: absolute;
	content: "";
	top: 100%;				/* set the triangle at end */
	left: 15%;				/* left side moved 10% so it looks like the tooltip */
	border-top: 5px solid gray;
	border-right: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 5px solid transparent;
}

.tooltip h1 {
	font-size: 0.85rem;
}

.button-tip:hover > .tooltip,
.info-tip:hover > .tooltip,
.button-tip:focus > .tooltip,
.button-tip:active > .tooltip {
	display:block;
}

.tooltip {
	animation: moveup 0.1s linear;
}

.tooltip b {
	color: #00e4ff;
}
@keyframes moveup {
	0% {
		/* for rotating effect rotate is set 25deg at beginning */
		transform: translateY(10px) rotate(25deg);
		opacity: 0;
	}
	100% {
		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
}