.template-preview {
	padding: 2px;
	overflow: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.template-preview .template-body,
.template-preview .template-errors {
	padding: 10px;
	height: 100%;
}

.template-preview .file-path {
	text-align: right;
	padding: 10px 5px;
}

.template-preview .template-errors .error-block {
	font-size: 18px;
	padding: 4px;
	border: 1px solid gray;
	display: flex;
}

.template-preview .template-errors .error-block.info {
	background: #bde5f8;
	color: #00529b;
}

.template-preview .template-errors .error-block.warning {
	background: #feefb3;
	color: #9f6000;
}

.template-preview .template-errors .error-block.error {
	background: #ffbaba;
	color: #d8000c;
}

.template-preview .template-errors .title {
	padding: 10px 0;
	font-size: 20px;
	text-align: center;
}

.template-preview .error-block .code,
.template-preview .error-block .message,
.template-preview .error-block .line-number {
	margin: 0 4px;
}

.template-preview .error-block .line-number,
.template-preview .error-block .code {
	width: 10%;
	text-align: center;
}

.template-preview .error-block .message {
	width: 80%;
}

.line-highlight {
	background: linear-gradient(
		to right,
		hsla(0, 100%, 50%, 0.1) 70%,
		hsla(0, 100%, 50%, 0.1)
	);
}