.shortcut_icon
{
	cursor: pointer;
	transition: all 250ms;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	filter: none;
}

.shortcut_tooltip
{
	display: none;
}

.shortcut_tooltip_trigger
{
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) and (min-width: 701px) and (min-height: 501px)
{
	.shortcut_tooltip_trigger:hover .shortcut_icon
	{
		filter: invert(46%) sepia(9%) saturate(3320%) hue-rotate(177deg) brightness(97%) contrast(85%);
	}

	.shortcut_tooltip
	{
		display: block;
		position: absolute;
		top: calc(100% + 11px);
		left: 50%;
		z-index: 1300;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translate(-50%, -8px) scale(0.98);
		transform-origin: top center;
		transition: opacity 140ms ease-out, transform 160ms ease-out, visibility 0ms linear 160ms;
	}

	.shortcut_tooltip_trigger:hover .shortcut_tooltip,
	.shortcut_tooltip:hover
	{
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0) scale(1);
		transition: opacity 140ms ease-out, transform 160ms ease-out, visibility 0ms linear 0ms;
	}

	.shortcut_tooltip_bridge
	{
		position: absolute;
		top: -18px;
		left: -12px;
		right: -12px;
		height: 24px;
		background: transparent;
	}

	.shortcut_tooltip_panel
	{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: max-content;
		min-width: 0;
		padding: 9px 10px 7px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0,0,0,.45);
		z-index: 5;
	}

	[data-theme="light"] .shortcut_tooltip_panel
	{
		background: #526fac;
	}

	[data-theme="dark"] .shortcut_tooltip_panel
	{
		background: #0c1c30;
		border: 0.5px solid #ffffffbf !important;
		box-shadow: 0 0 10px rgba(0,0,0,.55);
	}

	.shortcut_tooltip_panel::before
	{
		content: "";
		position: absolute;
		left: 50%;
		top: -10px;
		width: 0;
		height: 0;
		transform: translateX(-50%);
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 10px solid #4a5467;
	}

	[data-theme="light"] .shortcut_tooltip_panel::before
	{
		border-bottom: 10px solid #526fac;
	}

	[data-theme="dark"] .shortcut_tooltip_panel::before,
	[data-theme="dark"] .shortcut_tooltip_panel::after
	{
		content: none !important;
	}

	.shortcut_tooltip_nub,
	.shortcut_tooltip_nub_cover
	{
		display: none;
	}

	[data-theme="dark"] .shortcut_tooltip_nub
	{
		position: absolute;
		top: -7px;
		left: 50%;
		display: block;
		width: 14px;
		height: 14px;
		margin-left: -7px;
		background: #0c1c30;
		border-left: 0.5px solid #ffffffbf;
		border-top: 0.5px solid #ffffffbf;
		transform: rotate(45deg);
		z-index: 2;
	}

	[data-theme="dark"] .shortcut_tooltip_nub_cover
	{
		position: absolute;
		top: 0;
		left: 50%;
		display: block;
		width: 40px;
		height: 8px;
		margin-left: -20px;
		background: #0c1c30;
		z-index: 1;
	}

	.shortcut_tooltip_label
	{
		display: block;
		color: white;
		font-size: 0.7em;
		line-height: 1.15;
		letter-spacing: 0.02em;
		white-space: nowrap;
		text-align: center;
	}
}

.crosshair_icon
{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;

    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v.48a.5.5 0 0 0 1 0v-.48a6 6 0 0 1 5.48 5.48h-.48a.5.5 0 0 0 0 1h.48a6 6 0 0 1-5.48 5.48v-.48a.5.5 0 0 0-1 0v.48A6 6 0 0 1 2.02 8.5h.48a.5.5 0 0 0 0-1zM8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.pause_circle_icon
{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;

    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M5 6.25a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0zm3.5 0a1.25 1.25 0 1 1 2.5 0v3.5a1.25 1.25 0 1 1-2.5 0z'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.clear_icon
{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;

    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8.086 2.207a2 2 0 0 1 2.828 0l3.879 3.879a2 2 0 0 1 0 2.828l-5.5 5.5A2 2 0 0 1 7.879 15H5.12a2 2 0 0 1-1.414-.586l-2.5-2.5a2 2 0 0 1 0-2.828zm2.121.707a1 1 0 0 0-1.414 0L4.16 7.547l5.293 5.293 4.633-4.633a1 1 0 0 0 0-1.414zM8.746 13.547 3.453 8.254 1.914 9.793a1 1 0 0 0 0 1.414l2.5 2.5a1 1 0 0 0 .707.293H7.88a1 1 0 0 0 .707-.293z'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

.person_icon
{
    width: 24px;
    height: 24px;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;

    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6m2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0m4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4m-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10s-3.516.68-4.168 1.332c-.678.678-.83 1.418-.832 1.664z'/></svg>");
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}