#DEV-TOOL_window {
	--header-back-ground-hsl: 0, 0%, 40%;
	display: none;
	font-family: Courier, monospace;
	font-size: 10pt;
	position: absolute;
	color: white;
	background-color: black;
	border: 2pt solid hsl(0, 0%, 70%);
	touch-action: none;
	user-select: none;
}

#DEV-TOOL_window-header {
	width: 100%;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	font-family: Tahoma, sans-serif;
	font-size: 12pt;
	background-color: hsl(var(--header-back-ground-hsl));
	padding-left: 5pt;
}

#DEV-TOOL_window-close {
	margin: 0 5pt 3pt auto;
	font-size: 16pt;
    background-color: Transparent;
	color: inherit;
	border: none;
	cursor: pointer;
	user-select: none;
}

#DEV-TOOL_window-content table {
	--spacing: 1pt;
	--table-margin: 1pt;
	--margin: calc(var(--table-margin) - var(--spacing));
	border-spacing: var(--spacing);
	margin: var(--margin);
	background-color: hsl(var(--header-back-ground-hsl));
}

#DEV-TOOL_window-content tr * {
	text-align: left;
	padding: 1pt 5pt;
	background-color: black;
}

#DEV-TOOL_window-content tr *:not(:first-child) {
	text-align: right;
}

#DEV-TOOL_window-content th {
	margin: auto;
	font-weight: bolder;
}

@media(any-hover: hover) and (pointer: fine) {
	#DEV-TOOL_window-close:hover {
		--text-shadow-hover-hsl: 0, 100%, 68%;
		--text-shadow-hover:	0 0 1pt hsl(var(--text-shadow-hover-hsl)),
								0 0 2pt hsl(var(--text-shadow-hover-hsl)),
								0 0 4pt hsl(var(--text-shadow-hover-hsl)),
								0 0 6pt hsl(var(--text-shadow-hover-hsl));
		text-shadow: var(--text-shadow-hover);
	}
}