.tooltip {
	position: absolute;
	visibility: hidden;
	background: black;
	border-radius: 5px;
	z-index: 300;
	color: white;
	padding: 8px 10px;
	font-size: 0.8rem;
	opacity: 0;
	max-width: 400px;
	text-align: center;
	transition: opacity 0.3s ease;

	&.show {
		visibility: visible;
		opacity: 0.9;
	}

	.tooltip-arrow {
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		width: 0;
		height: 0;
		border-top: 5px solid #000000;
		border-right: 5px solid transparent;
		border-left: 5px solid transparent;
	}

	&.bellow {
		.tooltip-arrow {
			top: -5px;
			border-top: none;
			border-bottom: 5px solid #000000;
		}
	}
}