// TOOLTIP
// thx: https://www.w3schools.com/css/css_tooltip.asp

// Tooltip container

.fupi_tooltip {
	position: relative;
	.fupi_tooltiptext {
		
		// Position
		position: absolute;
		z-index: 1;
		width: 160px;
		left: 0;
		bottom: 43px;

		// Styling
		white-space: break-spaces;
		visibility: hidden;
		background-color: #114e80;
		color: #e2f3ff;
		line-height: 1.3;
		font-weight: normal;
		font-size: 12px;
		text-align: left;
		padding: 5px 10px;
		border-radius: 6px;
	
	
		&:after {
			top: 100%;
			left: 25%;
			border: solid transparent;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-top-color: #114e80;
			border-width: 10px;
			margin-left: -10px;
		}
	}
	&:hover{
		.fupi_tooltiptext {
			visibility: visible;
		}
	}
}