/*
 * GLOBAL STYLING
 */
html, body {
	font: 16px sans-serif;
	margin: 0;
	padding: 0;
}
* {
    box-sizing: border-box;
}

h1, h2 {
	margin: 0 0 10px;
}

form {
	padding: 20px;
	margin: 20px;
}

input,
textarea,
select {
	display: block;
	border: 1px solid #ccc;
	min-width: 50%;
	margin-bottom: 10px;
	padding: 8px;
}
textarea,
input[type=text] {
	-webkit-appearance: none;
	outline: 0
}

button {
	cursor: pointer;
	background: #0ae;
	border-radius: 6px;
	border: 0;
	color: #fff;
	margin: 2px 0;
	padding: 12px 30px 14px;
}


/*
 * A4 Layout
 */
@page {
	size: A4;
	margin: 0;
}


/*
 * Print
 */
@media print {
	html, body {
		width: 210mm;
		height: 297mm;
		margin: 0;
		padding: 0;
	}
	form {
		display: none !important;
	}
}


/*
 * Sign Selection/Input
 */
form {
	border: 1px dashed #ccc;
	background-color: #f8f8f8;
}
.sign-input {
	display: none;
	background-position: 98% 50%;
	background-repeat: no-repeat;
	background-size: auto 90%;
}
	.sign-input .html {
		display: none;
	}


/*
 * Signs Display/Output
 */
#sign-output {
	border-top: 1px solid #ccc;
}
#sign-output .sign {
	position: relative;
	border: 1px dotted #ccc;
	-webkit-print-color-adjust: exact; /* to force print the background color and/or image with Chrome and Safari */
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	page-break-inside: avoid;
	float: left;
	overflow: hidden;
	text-align: center;
	white-space: nowrap;
	-webkit-transform: rotateY(180deg) !important;
	-ms-transform: rotateY(180deg) !important;
	-o-transform: rotateY(180deg) !important;
	transform: rotateY(180deg) !important;
}
	#sign-output .sign div {
		position: absolute;
		min-width: 100%;
		white-space: nowrap;
		/*border: 1px dotted #f00;*/
	}
	#sign-output .sign img {
		position: absolute;
		left: 0;
		top: 0;
	}
		#sign-output .sign img.fullsize {
			width: 100%;
			height: 100%;
		}
	#sign-output .sign button {
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: rotateY(180deg) !important;
		-ms-transform: rotateY(180deg) !important;
		-o-transform: rotateY(180deg) !important;
		transform: rotateY(180deg) !important;
	}
@media print {
	#sign-output {
		border: 0 none !important;
	}
	#sign-output .sign button {
		display: none !important;
	}
}