html { position: relative; width: 100%; height: 100%; }
body { position: absolute; margin: 8px; padding: 0; width: calc(100% - 16px); height: calc(100% - 16px); touch-action: none; -ms-touch-action: none; }

.version { position: absolute; right: 0; bottom: -8px; font-family: sans-serif; font-size: 7px; z-index: 99; }

.mainview { position: absolute; margin: 0; padding: 0; border: 1px solid lightgray; width: calc(100% - 2px); height: calc(100% - 2px); overflow: hidden; }
	.imageview { position: absolute; margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: hidden; cursor: zoom-in; }
	.imageLayer { position: absolute; margin: 0; padding: 0; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; /* background-size: 100%; color: #eeeeee; */ }
	.mainSpinner { position: relative; display: block; width: 64px; margin: auto; top: calc(50% - 32px); }

.backButton { position: absolute; top: 4px; left: 4px; width: 48px; height: 48px; opacity: 0.75; visibility: hidden; }
.backButton-mobile { top: 6px; left: 6px; /*width: 6%; height: 60px;*/ }
.backButton-retina { top: 6px; left: 6px; /*width: 12%; height: 120px;*/ }

.annotation-controls { display: none; position: absolute; z-index: 2; max-width: calc(100% - 68px); top: 4px; right: 68px; margin: 0; padding: 0; }
	.annotation-button { position: relative; cursor: pointer; height: 41px; float: right; margin-left: 5px; }
	/*#annotate {}*/
	/*.annotating { background-image: url(images-multizoom/annotate-on.png); }*/
	#exportPDF, #downloadAnnotations { display: none; }
		.exportOptionsDialogClass { font-size: 0.8em !important; } /* override font-size in .ui-widget */
		.exportOptionsDialogClass ul { list-style-type: none; }
		.disabled { pointer-events: none; opacity: 0.6; }
	.download-csv-image { height: 100%; }
		.csv-text-on-image-container { position: relative; }
		.csv-text-on-image { position: absolute; top: 35%; left: 35%; font-size: 0.6em; color: white; }
	.annotation-options { display: none; position: absolute; top: 42px; right: -64px; min-width: 180px; font-family: Arial; background-color: whitesmoke; padding: 5px; border: 1px solid #ddd; border-top: 0; }
		/*.redaction-mode {}*/
		/*.redaction-opacity {}*/

.eqLogo { position: absolute; z-index: 99; top: 4px; right: 4px; margin: 0; padding: 2px; float: right; border-radius: 3px; background-color: rgb(255, 255, 255); }
#eqLoading { display: none; }
.eqLogoProxy { position: absolute; margin: 0; padding: 2px; top: 4px; right: 4px; width: 50px; height: 24px; float: right; z-index: 9; border-radius: 3px; cursor: pointer; }
.eqBigLogo { position: absolute; top: 4px; right: 4px; margin: 0; padding: 0; background-color: #ffffff; border: 0; border-radius: 0; }
/*.eqLogoImg { natural size: width: 50px; height: 24px; }*/

.downloadButtonBig { display: none; position: absolute; border: 0; top: 40px; right: 4px; /*width: 48px; height: 48px;*/ opacity: 0.75; cursor: pointer; }
.downloadButtonBig-mobile { width: 6%; /*height: 60px;*/ }
.downloadButtonBig-retina { width: 12%; /*height: 120px;*/ }

.toggleChromeButton { display: none; position: absolute; float: right; z-index: 90; width: 3em; /*height: 120px;*/ opacity: 0.10; }
.toggleChromeButtonTopLeft { top: 4px; left: 4px; }
.toggleChromeButtonTopRight { top: 4px; right: 4px; }
.toggleChromeButtonBottomRight { bottom: 4px; right: 4px; }
.toggleChromeButtonBottomLeft { bottom: 4px; left: 4px; }
.toggleChromeButtonBottomWithThumbToggle-mobile { bottom: 4%; }
.toggleChromeButtonBottomWithThumbToggle-retina { bottom: 7%; }
.rotateRightMobile { display: none; position: absolute; float: right; z-index: 90; right: 5px; bottom: 5px; width: 3em; /*height: 120px;*/ opacity: 0.10; }

.prevNextPage { display: none; position: absolute; top: 45%; width: 6%; /*height: 90px;*/ opacity: 0.10; }
.prevPage { left: 2%; }
.nextPage { right: 2%; }
.prevPage:hover { transform:scale(1.2); opacity: 1.0; }
.nextPage:hover { transform:scale(1.2); opacity: 1.0; }
.prevNextPage-mobile { top: 1%; padding: 5%; }
.prevNextPage-retina { top: 15%; padding: 5%; width: 6%; /*height: 90px;*/ }

.navigation { display: none; position: absolute; bottom: 45px; right: 4px; z-index: 98; cursor: zoom-in;
	background-image: url("images-multizoom/transparent.gif"); background-repeat: no-repeat;
	opacity: 0.80; border: 10px solid rgb(153, 153, 153); }
	.navigation-left { left: 4px; }
	.navigation-right { right: 4px; }
	.navigation-mobile { bottom: 75px; }
	.navigation-retina { bottom: 150px; }
	.zoomDragBox { position: absolute; display: none; border: 2px solid rgb(255, 0, 0); cursor: move; z-index: 99; background-image: url("images-multizoom/transparent.gif"); }

	.zoomInfo { position: absolute; padding: 4px; border-radius: 3px; opacity: 0.7; 
		color: white; background-color: #666666; font-family: sans-serif; /*font-size: 80%;*/ }
	.zoomLevel { bottom: 5px; right: 5px; font-weight: bold; }
		/*.zoomLevel-mobile { font-size: 300%; }*/
		/*.zoomLevel-with-zoom-buttons { position: relative; display: inline-block; bottom: 10px; right: 8px; padding: 4px; 
			border-radius: 3px; color: white; background-color: #666666; 
			font-family: sans-serif; font-size: 80%; font-weight: bold; 
			opacity: 0.5; }*/
	.rotatedAngle { top: 5px; right: 5px; }
		
.zoombuttons { position: absolute; bottom: 4px; float: right; z-index: 99; cursor: pointer; }
	.zoombuttons-left { left: 4px; }
	.zoombuttons-right { right: 4px; }
	.zoombutton { width: 30px; height: 30px; }
	/*.zoombutton-mobile { width: 60px; height: 60px; }*/
	/*.zoombutton-retina { width: 120px; height: 120px; }*/
	.zoombuttons-square-in-corner { position: fixed; width: 65px; }
	.zoombuttons-mobile-square-in-corner { position: fixed; width: 65px; }
	.zoombuttons-retina-square-in-corner { position: fixed; width: 65px; }
	#rotateLeft, #rotateRight, #show_thumbnails, #hide_thumbnails { display: none; }
		
.showHideThumbs { position: absolute; bottom: 4px; width: 30px; height: 30px; z-index: 99; cursor: pointer; }
.showHideThumbs-left	{ left: 4px; }
.showHideThumbs-right { right: 4px; }
.showHideThumbs-mobile { bottom: 5px; width: 30px; height: 30px; }
.showHideThumbs-retina { bottom: 5px; width: 60px; height: 60px; }
.showThumbs, .hideThumbs { width: 30px; height: 30px; opacity: 0.10; }
.showThumbs:hover, .hideThumbs:hover { transform:scale(1.2); opacity: 1.0; }
.showHideThumbs-mobile { width: 30px; height: 30px; }
.showHideThumbs-retina { width: 60px; height: 60px; }

.thumbnails { position: absolute; padding: 0; bottom: 0; width: 100%; /*height: 152px;*/ overflow: hidden; }
.thumbs { position: absolute; bottom: 0; margin: auto; overflow: hidden; }
.thumb { padding: 0; float: left; border: 1px solid; overflow: hidden; width: 140px; height: 140px; margin: 5px; background: no-repeat; }
.thumb-mobile { border: 2px solid; }
.hilitedThumb {	border-color: blue; }
.unhilitedThumb { border-color: #d8d8d8; }
.pageNumberOnThumb { position: relative; top: 4px; left: 4px; float: left; padding: 3px; z-index: 98; 
	opacity: 0.5; background-color: #eeeeee; border-radius: 3px; font-family: sans-serif; font-size: 60%; }
.pageNumberOnThumb-mobile { font-size: 400%; color: #888888; background-color: #ffffff; }
.spinnerInThumb { position: relative; width: 30%; }

.pageControls { display: none; position: absolute; bottom: 30px; height: 30px; z-index: 99; /*width: 360px;*/ /*border: 1px solid gray;*/ }
.pageControls-mobile { bottom: 5px; height: 60px; /*width: 720px;*/ }
.pageControls-mobile-above-thumbnails { bottom: 150px; height: 60px; margin: 5px; /*width: 720px;*/ }
/*.pageControls-without-ff-rew { width: 280px; }*/
/*.pageControls-without-prev-next-ff-rew { width: 195px; }*/
.pageControl { width: 36px; height: 29px; }
.pageControl-mobile { width: 72px; height: 58px; }
.gotoPageImg { width: 115px; height: 29px; }
.gotoPageImg-mobile { width: 230px; height: 58px; }
.gotoPage { position: absolute; z-index: 99; border-radius: 3px; font-family: sans-serif; font-size: 100%; text-align: center;
	left: 122px; /* depends on width of buttons on the left */
	top: 2px; width: 43px; height: 19px; /* depends on the graphic underneath */ }
.gotoPage-mobile { left: 232px; top: 4px; width: 86px; height: 42px; font-size: 200%; border-radius: 6px; }
.gotoPage-iOS { left: 234px; top: 5px; width: 58px; height: 32px; font-size: 200%; border-radius: 6px; }
.gotoPage-without-prev-next-ff-rew { left: 42px; }
.gotoPage-mobile-without-prev-next-ff-rew { left: 82px; }
/*** actual iPhone 4: ***/
.gotoPage-iOS-without-prev-next-ff-rew { left: 82px; }
/*** desktop Safari simulating iOS:
.gotoPage-iOS-without-prev-next-ff-rew { left: 82px; top: 5px; width: 85px; height: 41px; font-size: 200%; border-radius: 6px; } ***/
.pageCount {	position: absolute; z-index: 99; font-family: sans-serif; border-radius: 3px; color: white;
	left: 175px; top: 6px; }
.pageCount-without-ff-rew { left: 132px; }
.pageCount-without-prev-next-ff-rew { left: 100px; }
.pageCount-mobile { left: 350px; top: 12px; font-size: 200%; }
.pageCount-mobile-without-prev-next-ff-rew { left: 185px; top: 11px; font-size: 200%; }

.placeholder { color: #aaa; }

/*** doesn't seem to work when defined statically, before links are created
.pageLinks { position: 'absolute'; z-index: "1"; border: '1px dotted gray'; border-radius: '5px'; }
.pageLinks-fileNotFound { border: '2px dotted red'; background-color: 'aliceblue' }
***/

@media (max-width: 736px) { /* largest mobile phone: iPhone 8plus landscape */
	html, body { margin: 0; padding: 0; width: 100%; height: 100%; } 
	.mainview { border-width: 0; }
	.version { display: none; /*bottom: 0px;*/ }
	.thumb { width: 70px; height: 70px; }
	/*.eqLogoImg { width: 10%; height: 48px; }*/
}
@media (max-width: 375px) { /* iPhoneX = 375x635, iPhone8plus: 414x622 */
	#rewind, #fast_forward { display: none; }
	.gotoPage { left: 80px; }
	.pageCount { left: 135px; }
}
@media (max-width: 319px) {	/* for EmbedUnizoom preview in UploadAndZoom - 319 < mobile phone */
	.eqLogoImg { width: 25px; height: 12px; }
	.eqLogoProxy { top: 4px; right: 4px; width: 25px; height: 12px; }
	.annotation-controls { max-width: calc(100% - 40px); right: 40px; }
	.annotation-button { height: 25px; margin-left: 3px; }
	.csv-text-on-image { top: 35%; left: 30%; font-size: 0.4em; }
	.prevNextPage { width: 30px; height: 45px; }
	.navigation { bottom: 22px; border-width: 2px; }
	.zoomLevel { bottom: 1px; right: 1px; padding: 1px; border-radius: 1px; font-size: 60%; font-weight: normal; }
	.zoombuttons { bottom: 0; }
	.zoombutton { width: 15px; height: 15px; }
	.showHideThumbs { bottom: 0; width: 15px; height: 15px; }
	.showThumbs, .hideThumbs { width: 15px; height: 15px; }
	.thumbs { bottom: 0; }
	.thumb { width: 50px; height: 50px; }	
	.pageControls { bottom: 15px; height: 15px; }
	.pageControl { width: 18px; height: 15px; }
	.gotoPageImg { width: 70px; height: 15px; }
	.gotoPage { font-size: 60%; left: 66px; top: 0; width: 25px; height: 9px; }
	.pageCount { left: 100px; top: 1px; bottom: 1px; font-size: 60%; }
	#rewind, #fast_forward { display: inline; }
	.version { display: none; }
	.annotation-options { font-size: 30%; min-width: 110px; top: initial; padding: 0; right: -40px; }
}