div.sysdebug div.body div.event div.values div.value {
	&:last-child {
		flex-grow: 1;
	}
	span.int {
		color:yellow;
		margin-right:8px;
	}
	div.content {
		display: flex;
		div.bar{
			span.skipped{
				color:#656565;
			}
		}
		div.items{
			div.box{
				flex-direction: column;
			}
		}
		div.lastItem{
		}
		svg.branch,
		svg.toggle
		{
			margin-left:-20px;
			flex: 0 0 40px;
		}
		svg.pole,
		svg.terminator
		{
			flex: 0 0 20px;
		}
		span.key {
			margin-right:4px;
			color:#53989f;
		}
		span.label {
			color:lightblue;
			margin-right:8px;
		}
		span.value {
			color:lightblue;
			margin-right:8px;
		}
		&.str{
			span.value {
				
			}

		}
		&.int,&.float,&.num{
			span.value {
				color:magenta;
			}

		}
		&.error{
			span.value {
				color:lightblue;
			}
		}
		&.bool{
			span.value {
				color:orange;
			}
		}
		&.null,&.undefined{
			span.value {
				color:gray;
			}
		}
		&.null,&.bool,&.undefined,&.int,&.float,&.num {
			span.type{
				display:none;
			}
		}
	}
	div.content.object{
		flex-direction: column;
		flex-grow: 1;
		> div.items > div.box > div.content,
		> div.lastItem > div.content
		{
			> span.key::after {
				margin-left:4px;
				content:':';
				color: yellowgreen;
			}
		}

	}
	div.content.array{
		flex-direction: column;
		> div.items > div.box > div.content,
		> div.lastItem > div.content
		{
			> span.key::before {
				content:'[';
				color: yellowgreen;
			}
			> span.key::after {
				content:']';
				color: yellowgreen;
			}
		}

	}


}