div.sysdebug {
	z-index: 1000000000;
	&.active{
		z-index: 1000000001;
	}
	& *{
		transition: all .2s ease-in-out;
	}
	max-height: 80%;
	max-width: 80%;
	position: fixed;
	font-family: courier,monospace;
	font-size: 15px;
	vertical-align:-3px;
	display: flex;
	flex-direction: column;
	div {
		display: flex;
	}
	color:yellowgreen;
	div.event,div.event * {

	}

	span{
		display: flex;
		white-space: pre-wrap;
		padding-top: 2px;
	}

	div.head{
		flex:0 0 20px;
		min-width: 50px;
		background: #660066;
		border-top-right-radius:10px;
		border-top-left-radius:10px;
	}
	div.foot{
		flex:0 0 10px;
		background: #660066;
		border-bottom-right-radius:10px;
		border-bottom-left-radius:10px;
	}

	div.body {
		height: 80%;
		overflow: auto;
		scrollbar-width: none;
		flex-direction: column;
		div.event{
			flex-direction: column;
			gap:0px;
			padding:0px 12px 0px 12px;
			background: rgba(50,50,50,1);
			> div {
				padding:2px 3px 1px 3px;
				background: rgba(0,0,0,0.5);
			}
			div.values{
				font-size: 100%;
				gap: 10px;
				div.value {
					/*values.css*/
				}
			}
		}
		div.event.odd{
			background: rgba(30,30,30,1);
		}
		div.event.error{
			background: #660033;
		}
	}
	svg  {
		fill:none;
		line,polyline,circle,path {
			stroke: yellowgreen;
			stroke-width: 1px;
		}

	}
	svg.toggle  {
		circle {
			fill:yellowgreen;
		}
		line {
			stroke: black;
			stroke-width: 3px;
		}
		&.open  {
			line.plus {
				display: none;
			}
		}
		&.disabled  {
			line {
				display: none;
			}
		}
	}
	&.closed {
		> div.head {
			background: rgba(0,0,0,0.5);
			flex:0 0 16px;
		}
		> div.body,
		> div.foot
		{
			display: none;
		}

	}
}