.debugDomLayersRoot {
	outline: 12px groove rgba(0,255,255,0.3);
	outline-offset: -6px;
}

.debugDomLayersRoot.domLayerPlaceholder,
.debugDomLayersPlaceholder{
	outline: 12px groove rgba(255,0,0,0.8);
	outline-offset: 0;
	display: block;
}

div.sysdebug.domLayersServer {
	left: 0;
	top: 20%;
	&.closed > div.head {
		border-radius: 0 10px 10px 0;
		min-width:16px;
		flex: 0 0 50px;
		border-left: 4px solid #660066;
	}
	table.info{
		left:calc(100% + 0px);
	}


}
div.sysdebug.domLayersClient{
	right: 0;
	top: 20%;
	&.closed > div.head {
		border-radius: 10px 0 0 10px;
		min-width:16px;
		flex: 0 0 50px;
		border-right: 4px solid #660066;
	}
	table.info{
		right:100%;
	}

}
div.sysdebug.domLayersServer,
div.sysdebug.domLayersClient
{
	table.info {
		position: absolute;
		border:1px solid black;
		color: black;
		border-radius: 10px 10px 10px 10px;
		background: yellowgreen;
		top:-1px;
		
		tr:nth-child(even) {
			background-color: rgba(0,0,0,0.1);
		}

		td {
			padding: 0 5px;
			white-space: nowrap;
			&.key {
				font-weight: normal;
			}
			&.value {
				font-weight: bold;
			}
		}


	}

	div.body{
		color: black;
		background: gray;
		div {
			display:block;
		}

		table.info{
			display: none
		}

		div.domLayersContainer{
			display: flex;

		}
		div.domLayersContainer div{
			flex-direction: row;
			width: fit-content;
			border:1px solid black;
			padding:0;
			margin:3px 20px;
		}
		div.domLayersContainer .slice{
			display: none;
		}

		div._debug.domLayers div.domLayersContainer {
			.slice{
				background: none;
				border: none;
				opacity: .5;
				margin-top: -18px;
				padding:1px;
				height: 13px;
				display: block;
			}
			.layer{
				margin-bottom: 18px;
			}
			.layer > pre{
				margin-bottom: 18px;
			}
			.layer:hover > div.slice{
				opacity: 1;
			}
		}


		:not(.original) >  div.layer.original{
			background: #CEFFE1;
		}
		div.layer.original{
			background: rgba(0,255,100,0.1);
		}
		/** pages **/
		/** modules **/
		:not(.replace) >  div.layer.replace{
			background: rgba(255,120,0,0.7);
		}
		div.layer.replace{
			background: rgba(255,120,0,0.2);
		}

		:not(.remove) >  div.layer.remove{
			background: rgba(255,0,0,0.7);
		}
		div.layer.remove{
			background: rgba(255,0,0,0.2);
		}

		/** pages old **/

		div.layer.reference{
			background: rgba(0,100,255,0.1);
		}


		div.layer.alias{
			background: rgba(255,100,0,0.1);
		}

		pre{
			background: rgba(0,0,0,0.1);
		}


		pre,
		div.slice
		{
			position: relative;
		}

		div.layer:hover > pre{
			font-weight: bold;
			text-decoration: underline;
		}
	}

}