/**
 * CSS for Chamber Buck images
 */

body > p#empty {
	padding: 20px;
	text-align: center;
	font-size: 13px;
}

/* in-form preview container */
form.CRUDForm #Units-preview {
	max-height: calc( 100vh - 750px );
	overflow-y: auto;
	margin: 5px 10px;
	
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 1px;
	
	font-size: 0px; /* collapse spacing */
	/* text-align: center; */
}

/* popup preview container */
div#standalone {
	font-size: 0px; /* collapse spacing */
	width: 1500px;
	margin: auto;
}
	
	/* standalone view toolbar */
	div#standalone > #toolbar {
		display: block;
		position: fixed;
		z-index: 500;
		top: 0px;
		left: 0px;
		padding: 0px 10px;
		width: calc( 100vw - 20px );
		
		background-color: rgb(68,68,68,.95);
		border-bottom: 1px solid white;
		
		font-family: 'Rubik Light';
		color: rgba(255,255,255,.75);
		border-bottom: 1px solid white;
		
		font-size: 0px; /* collapse spacing */
	}
		/* toolbar sub-containers */
		div#standalone > #toolbar > * {
			display: inline-block;
			position: relative;
			vertical-align: top;
			padding: 0px;
			width: calc( 33% - 10px );
			vertical-align: top;
			
			font-size: 20px;
		}
		
		/* toolbar buttons subcontainer */
		div#standalone > #toolbar > #buttons {
			padding-top: 5px;
			text-align: right;
		}
		
			/* toolbar subcontainer icons */
			div#standalone > #toolbar > #buttons > .fa {
				font-size: 30px;
				cursor: pointer;
			}
				div#standalone > #toolbar > #buttons > .fa:hover {
					color: white;
				}
				
		/* other subcontainers */
		div#standalone > #toolbar > div:is(.summary, #print-instructions) {
			width: auto;
			margin-right: 75px;
			font-size: 12px;
		}
			/* subcontainer links */
			div#standalone > #toolbar > div a {
				color: rgba(150,200,255);
			}
		
	
/* images container on screen media in regular mode */
div#standalone > #images {
	margin: 80px auto 15px auto;
}
/* images container on screen media in print preview mode */
div#standalone.print > #images {
	margin-top: 200px;
}

/* denomination amount in standalone view */
div#standalone > #images > .ChamberBuckImage > data.DenominationAmount {
	top: 38px;
	font-size: 50px;
	height: 50px;
	line-height: 1;
}

/* image container */
.ChamberBuckImage {
	display: inline-block;
	position: relative;
	margin: 0px;
	width: 33.3%;
	height: auto;
	vertical-align: top;
	overflow: hidden;
	
	font-size: 0px; /* collapse spacing */
}

	/* denomation container */
	.ChamberBuckImage > data.DenominationAmount {
		display: inline-block;
		position: absolute;
		z-index: 300;
		width: 10%;
		left: 81%;
		top: 16%;
		
		text-align: left;
		font-family: Helvetica, Arial;
		font-size: 25px;
		color: black;
	}
	
	/* barcode container */
	.ChamberBuckImage > span.barcode {
		display: inline-block;
		position: absolute;
		z-index: 300;
		width: 15%;
		/* generated barcode contains padding */
		right: 1%;
		bottom: 2px;
	}
	
		/* barcode image */
		.ChamberBuckImage > span.barcode > img {
			position: relative;
			width: 100%;
			height: auto;
		}
		
		/* barcode serial no in standalone view */
		.ChamberBuckImage > span.barcode > data.UnitID {
			display: block;
			text-align: center;
			
			font-family: Helvetica, Arial;
			font-size: 10px;
			color: black;
		}
		
		/* barcode container in order form */
		form.CRUDForm #Units-preview .ChamberBuckImage > span.barcode {
			bottom: 0px;
		}
			/* barcode serial no in order form */
			form.CRUDForm #Units-preview .ChamberBuckImage > span.barcode > data.UnitID {
				transform: scale(.6);
			}
		
	/* template image */
	.ChamberBuckImage > .template {
		position: relative;
		width: 100%;
		height: auto;
	}