img.temporary-file {
	display: block;
	margin: 0px 5px;				
	width: 40%;
	height: 60%;
	max-width: 100%;
}

.container {
	margin: auto;
	max-width: 50%;
	max-height: 50%;
}

.output-image {
	width: 100%;
	height: 100%;
	/* height: 300px; */
	text-align: center;				
}

.final-image {
	margin:auto;
	border:2px solid black;	
}

.final-image.photo{
	/* width: 354px;
	height: 454px; */
	max-width: 354px;
	max-height: 454px;
}

.final-image.doc{
	width: 214px;
	/* height: 301px; */
	height: auto;
}

.final-image.doc img {
	width: 210px;
	/* height: 297px; */
	height: auto;
	object-fit: contain;
}
.final-image.photo img {
	/* width: 350px;
	height: 450px;
	object-fit: cover; */
	width: 100%;
	height: 100%;
	object-fit: contain;
	max-height: inherit;
}

#rotateImageBtnClk,
#cropImageBtn,
#rotateImageBtnAntiClk {
	font-size: 1.5rem;
}


@media screen and (max-width: 600px) {
	
	.final-image {
		margin: auto;
		width: 85%;
		height: 85%;
	}

	.final-image img {
		width: 100%;
		height: auto;
	}

/* 
	.final-image object {
		width: 100%;
		height: 350px;
	}
 */

	.final-image object {
		width: 100%;
		aspect-ratio: 45/35;
	}

	.container {
		max-width: 100%;
	}
/*	
	img, .final-image {
		max-height: 300px;
		max-width: 100%;					
	}
 */
	
	
}