.debug {
	border: 1px solid #FF6C2D;
	color: #FF6C2D;
	font-size: 10px;
	padding: 4px;
	background-color: #F9F9F9;
}

/* Debug Mode START */
.debug-container__row-color {
	color: #d00;
}

div:not(.headline) > .debug-container__row-color {
	margin-left: 5em;
}

.debug-container__column-color {
	color: #ea0;
}

.debug-container__position-color {
	color: #04e;
}

#debug-container .debug-container__row {
	counter-increment: row;
	counter-reset: column;
	display: block !important; /* override tab logic */
	position: relative;
}

	#debug-container .debug-container__row:before,
	#debug-container .debug-container__column:before,
	#debug-container .debug-container__position:before {
		background: #fff;
		border-radius: 50%;
		display: block;
		text-align: center;
		z-index: 1;
	}

#debug-container .debug-container__row {
	outline: 3px solid #d00;
}

	#debug-container .debug-container__row:before {
		font-size: 2em;
		height: 2em;
		line-height: 1.8em;
		width: 2em;
		outline: 2px solid #d00;
		color: #d00;
		content: counter(row);
		position: absolute;
		top: -0.5em;
		left: -0.5em;
	}

#debug-container .debug-container__column {
	outline: 2px solid #ea0;
	counter-increment: column;
	counter-reset: box;
	position: relative;
}

	#debug-container .debug-container__column:before {
		font-size: 1.8em;
		height: 1.8em;
		line-height: 1.6em;
		width: 1.8em;
		outline: 2px solid #ea0;
		color: #ea0;
		content: counter(column);
		position: absolute;
		top: -0.5em;
		left: calc(50% - 1em);
	}

#debug-container .debug-container__position {
	outline: 1px solid #04e;
	counter-increment: box;
	position: relative;
	min-height: 2em;
}

	#debug-container .debug-container__position:before {
		font-size: 1.6em;
		height: 1.6em;
		line-height: 1.4em;
		width: 1.6em;
		outline: 2px solid #04e;
		color: #04e;
		content: counter(box);
		position: absolute;
		top: -0.5em;
		right: -0.5em;
	}
/* Debug Mode END */