.tooltip-wrapper
{
	position: relative;
	display: inline-block;
}
.tooltip-wrapper .tooltip-text
{
	display: none;
	position: absolute;
	width: 200px;
	background-color: #222222;
	color: #ffffff;
	font-size: 14px;
	text-transform: none;
	font-weight: 500;
	text-align: center;
	overflow-wrap: break-word;
	padding: 6px 6px;
	z-index: 100;
}
.tooltip-wrapper .tooltip-text::after
{
	content: "";
	position: absolute;
	overflow: hidden;
	border: 5px solid;
}
.tooltip-wrapper .tooltip-left
{
	top: -4px;
	right: 110%;
}
.tooltip-wrapper .tooltip-left::after
{
	top: 0;
	left: 100%;
	margin-top: 10px;
	border-color: transparent transparent transparent #222222;
}
.tooltip-wrapper .tooltip-right
{
	top: -4px;
	left: 110%;
}
.tooltip-wrapper .tooltip-right::after
{
	top: 0;
	right: 100%;
	margin-top: 10px;
	border-color: transparent #222222 transparent transparent;
}
.tooltip-wrapper .tooltip-top
{
	bottom: 150%;
	left: 50%;
	margin-left: -100px;
}
.tooltip-wrapper .tooltip-top::after
{
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-color: #222222 transparent transparent transparent;
}
.tooltip-wrapper .tooltip-bottom
{
	top: 100%;
	left: 50%;
	margin-left: -100px;
}
.tooltip-wrapper .tooltip-bottom::after
{
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-color: transparent transparent #222222 transparent;
}
.tooltip-wrapper:hover .tooltip-text
{
	display: inline-block;
}
.tooltip-wrapper:hover .tooltip-text:hover
{
	display: none;
}
.dotted-tooltip-indicator
{
	border-bottom: 1px dotted #222222;
}