.templates {
	border-top: 1px solid #eee;
}

.templates-item-loading {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.templates .templates-index {
	padding: 3px 5px;
	text-align: right;
}

.templates .templates-preview {
	display: flex;
}

.templates .templates-preview .templates-preview-container {
	width: 100%;
	max-width: 50%;
}

.templates-title {
	font-size: 20px;
	position: fixed;
	left: 0;
	top: 0;
	height: 50px;
	width: 100%;
	background: black;
	z-index: 1;
	border-bottom: 1px solid #eee;
}

.templates-footer {
	position: fixed;
	left: 0;
	bottom: 0;
	height: 24px;
	width: 100%;
	background: black;
	z-index: 1;
	border-top: 1px solid #eee;
	display: flex;
	align-items: center;
}

.templates-footer a {
	margin: 0 10px;
}

.templates-title .templates-header {
	margin: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.templates-title .templates-header .controlls {
	width: 50%;
	display: flex;
}

.templates-title .templates-header .controlls .controll {
	height: 28px;
	min-width: 100px;
	margin: 0 4px;
}

.templates-body {
	margin: 55px 0;
}

.template-convert-error {
	font-size: 18px;
	color: red;
	text-align: center;
}

.templates-loading {
	padding: 10px;
	text-align: center;
	font-size: 24px;
	vertical-align: middle;
	background: darkgray;
	margin: 52px 0 28px;
}