body {
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	font-size: 12pt;
}
* {
	box-sizing: border-box;
}

.main {
	width: 100%;
	height: 100%;
}

.header {
	width: 100%;
	background-color: blanchedalmond;
	text-align: center;
}

.title {
	margin: 0;
}

.subtitle {
	margin: 0;
	background-color: black;
	color: white;
	padding: 1em;
}
.status {
	background-color: darkorange;
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: 0.2em;
}
.login {
	font-size: 1em;
}
.register 
	font-size: 0.8em;
}


.control-view {
	width: 100%;
	height: 100%;
	margin-top: 1em;
	overflow: auto;
	background-color: blanchedalmond;
}
.control-panel {
	display: inline-block;
	width: 100%;
	min-height: 10em;
	background-color: whitesmoke;
	margin-top: 1em;
	padding-top: 1em;
	padding-left: 0.5em;
	padding-right: 0.5em;

	
}
.file-selection, .preview-certificateimg-button {
	font-size: 1em;
	padding: 1em;
	border: none;
	background-color: grey;
	color: white;

	display: inline-block;
	
}
.file-selection:active, .preview-certificateimg-button:active {
	background-color: black;
}


.preview{
	display: inline-block;
	width: 100%;
	min-height: 10em;
	background-color: whitesmoke;
	margin-top: 1em;
	
}
.preview-pdf {
	width: 100%;
	height: 100vh;
	border: 1px solid red;
	display: none;
}
.preview-certificateimg {
	width: 100%;
	padding: 0;
}
.hidden {
	display: none;
}
.font-size-input {
	display: inline-block;
	width: 5em;
	background-color: white;
	border: 1px solid black;
	border-radius: 1em;
	padding: 0.2em;
}

.output-preview-list {
	width: 100%;
	display: flex;	
	flex-direction: column;
	gap: 0.5em;

	a {
		padding: 1em;
		background-color: blanchedalmond;
	}
}