.hd-word {

	position: relative;

	cursor: help;

	border-bottom: 1px dotted currentColor;

}


/*
|--------------------------------------------------------------------------
| Tooltip
|--------------------------------------------------------------------------
*/

.hd-word::after {

	content: attr(data-translation);

	position: absolute;

	left: 50%;
	bottom: calc(100% + 10px);

	transform:
		translateX(-50%)
		translateY(4px);

	background:  rgb(29, 107, 79);
	color: #fff;

	padding: 8px 12px;

	border-radius: 6px;

	font-size: 14px;
	line-height: 1.4;

	white-space: nowrap;

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	z-index: 999999;

	transition:
		opacity .15s ease,
		transform .15s ease;

}


/*
|--------------------------------------------------------------------------
| Arrow
|--------------------------------------------------------------------------
*/

.hd-word::before {

	content: "";

	position: absolute;

	left: 50%;
	bottom: calc(100% + 4px);

	transform: translateX(-50%);

	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid  rgb(29, 107, 79);

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	z-index: 999999;

}


/*
|--------------------------------------------------------------------------
| Desktop Hover
|--------------------------------------------------------------------------
*/

@media (hover: hover) {

	.hd-word:hover::after {

		opacity: 1;

		visibility: visible;

		transform:
			translateX(-50%)
			translateY(0);

	}


	.hd-word:hover::before {

		opacity: 1;

		visibility: visible;

	}

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (hover: none) {

	.hd-word {

		cursor: pointer;

	}


	.hd-word.hd-active::after {

		opacity: 1;

		visibility: visible;

		transform:
			translateX(-50%)
			translateY(0);

	}


	.hd-word.hd-active::before {

		opacity: 1;

		visibility: visible;

	}

}