:root {
	/* --debug-bg: rgba(0,0,0,0.3); */
	/* --debug-color: #ddd; */
}
/* ======= DEBUG BOX ======= */


#debug {
	/* font-size: .9em; */
	/* padding: 1em; */
	/* color: #2b2; */
	/* background-color: var(--bg-shaded); */
}

.wrap-debug {
	/* margin: 0.5em; */
	padding: 0.8em 1em;
	
	border: 1px solid rgba(0,0,0,0.3);
	color: var(--debug-color);
	background-color: var(--debug-bg);
	
	line-height: 1.5em;
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
	/* max-width: 95%; */
}


.debug-fold {
	display: none;
	/* opacity: .1; */
	position: relative;
	/* height: 1px; */
	box-sizing: border-box;
	overflow: hidden;
}
.debug-fold div {
	display: none;
}
.debug-fold:hover {
	padding: 0.8em 1em;
	height: auto;
	opacity: 1;
}
.debug-fold:hover div {
	display: block;
}

.debug__set {
	border-bottom: 1px solid #777;
	padding: .6rem .6rem 1.2rem .6rem;
	/* white-space: pre-wrap; */
	line-height: 2;
	/* overflow: hidden; */
	/* overflow-wrap: break-word; */
}
.debug__set:first-of-type {
	/* padding-top: 2px; */
}
.debug__set:last-of-type {
	/* border-bottom: none; */
	/* padding-bottom: 0; */
}
.debug__set b {
	color: rgb(100,100,255);
}
.debug__set--pre {
	white-space: pre-wrap;
	word-break: break-word;
}
.debug__row {
	/* margin-bottom: -.6rem; */
	margin-left: .6rem;
}

.wrap-debug table {
	margin: 12px 0 0 0;
}
.wrap-debug th {
	background-color: #fff;
	border-radius: 4px 4px 0 0;
}
.wrap-debug th, .wrap-debug td {
	border: 1px solid #ccc;
	padding: 2px 4px;
}
.wrap-debug ul {
	margin-left: 1.5em;
}
.wrap-debug li::first-line {
	color: #f88;
}
.debug__key {
	color: #5a5;
	font-weight: bold;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 90%;
}
.debug__xtd {
	cursor: pointer;
}
.debug__xtd:before {
	content: '+';
}
.debug__xtd__data {
	display: none;
}

.debug_basefix {
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	transform: translateX(98%);
	text-align: right;
	font-size: .9em;
	color: #8d8;
	border-radius: .5em 0 0 0;
	
	padding: 1.5em;
	background-color: rgba(0,0,0,0.8);
	opacity: 0.2;
}
.debug_basefix b {
	color: #55a;
}
.debug_basefix i {
	color: #a55;
}

.debug_basefix:hover {
	/* right: 0; */
	width: auto;
	transform: translateX(0);
	opacity: 1;
}



/* ==== Var Highlighting | HTML Dumper ==== */

.tag { color: #7BD827; }
.att { color: #F0804F; }
.var { color: #fff; }
.val { color: #FFFF80; }

/* ==== Var Highlighting ==== */

.var--key {
	/* color: #a77; */
}
.var--type {
	color: #77a;
}

.var--var {
	color: #8DB0D3;
}
.var--comment {
	color: #3A8BDA;
}
.var--default {
	color: #fff;
}
.var--html {
	color: #fff;
}
.var--key, .var--keyword {
	color: #c0606F;
}
.var--string {
	color: #FFFF80;
}

.var--tag {
	color: #558;
}
.var--path, .var--path .var--key {
	color: #00a67d;
}
.var--path {
	background-color: var(--bg-l);
	padding: .1rem .5rem;
	margin-left: -.4rem;
	border-radius: 0 .25rem;
	border: 1px solid #ffffff11;
}
.var--ext {
	color: #88d;
}