html {
	--light-bevel: inset 0 -0.0625rem 0 #b5b5b5,
		inset -0.0625rem 0 0 #e3e3e3,
		inset 0.0625rem 0 0 #e3e3e3,
		inset 0 0.0625rem 0 #e3e3e3;
	--light-bevel-active: 0rem 0.125rem 0.0625rem 0rem #1a1a1a33 inset,
		0.0625rem 0rem 0.0625rem 0rem #1a1a1a1f inset,
		-0.0625rem 0rem 0.0625rem 0rem #1a1a1a1f inset;
	--soft-light-bevel: 0 1px 1px rgba(0, 0, 0, 0.04);
	--dark-bevel: 0rem 0.125rem 0rem 0rem #fff3 inset,
		0.125rem 0rem 0rem 0rem #fff3 inset,
		-0.125rem 0rem 0rem 0rem #fff3 inset,
		0rem -0.0625rem 0rem 0.0625rem #000 inset,
		0rem 0.0625rem 0rem 0rem #000 inset;
	--outline: 0.0625rem 0rem 0rem 0rem #00000021 inset,
		-0.0625rem 0rem 0rem 0rem #00000021 inset,
		0rem -0.0625rem 0rem 0rem #0000002b inset,
		0rem 0.0625rem 0rem 0rem #cccccc80 inset;
	--shadow: 0rem 0.25rem 0.375rem -0.125rem #1a1a1a33;
	--even-shadow: 0 0 0.25rem -0.125rem #1a1a1a80;
}

.dashify-tooltip {
	position: absolute;
	width: max-content;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	padding: 0.25rem 0.5rem;
	filter: drop-shadow(0 -0.0625rem 0 #e3e3e3) drop-shadow(0 0.0625rem 0 #b5b5b5);
	border-width: 0 0.0625rem;
	border-color: #e3e3e3;
	border-style: solid;
	border-radius: 0.5rem;
	background-color: white;
	color: #6e6e6e;
	font-size: 13px;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	transition: all .2s;
}

.dashify-tooltip::after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px;
}

.dashify-tooltip.top {
	bottom: calc(100% + 12px);
}

.dashify-tooltip.top::after {
	border-color: white transparent transparent transparent;
	top: calc(100% - 2px);
}

.dashify-tooltip.bottom {
	top: calc(100% + 12px);
}

.dashify-tooltip.bottom::after {
	border-color: transparent transparent white transparent;
	bottom: calc(100% - 2px);
}