/* general */
.initiallyHidden { display: none; }
.centered { /*position: absolute;*/ width: 100%; display: block; margin-left: auto; margin-right: auto; text-align: center; }
.relative { position: relative; }
.absolute { position: absolute; }
.gray { color: gray; }
a.no-underscore { text-decoration: none; }		
.disabled { pointer-events: none; opacity:0.6; }


/* element-specific */
body { position: absolute; width: calc(100% - 16px); height: calc(100% - 16px); font-family: sans-serif; }
	@media (max-width: 320px) { body { margin: 0; width: 100%; height: 100%; } } /* iPhone 5/SE */

.version { position: absolute; right: 0px; top: 0px; font-family: sans-serif; font-size: 50%; }
/*@media screen and (-webkit-min-device-pixel-ratio : 3)  { div.version { right: 30px; } }*/ /* iPhone6plus */
/*@media only screen and (-webkit-max-device-pixel-ratio : 2)   { right: 10px; }*/

.Eq-branding-top { position: relative; margin: 10px; width: calc(100% - 20px); height: 80px; }
	.Eq-branding-top-image-div { position: relative; float: left; width: 33%; height: 100%; }
	.Eq-branding-top-image-in-div { margin: auto; display: block; }
	.Eq-branding-top-left-image {}
		@media (max-width: 340px) { .Eq-branding-top-left-image { display: none; } }
	.Eq-branding-top-center-image {}
		@media (max-width: 720px) { .Eq-branding-top-center-image { display: none; } }
	.Eq-branding-top-right-image { display: none; }
		@media (max-width: 1280px) { .Eq-branding-top-right-image { display: none; } }
#unhideBranding { position: absolute; top: -8px; left: 0; width: 100%; height: 8px; }

.sizeInfoStuff { display: none; font-family: sans-serif; font-size: 75%; }
	.thumbWidthSlider { z-index: 1; display: none; position: absolute; top: 0px; right: 35px; width: 10em; height: 0.8em; }
	.thumbViewHeightSlider { z-index: 1; display: none; position: absolute; top: 0px; right: 160px; width: 0.8em; height: 7em; }
	.sizeInfo { z-index: 1; display: none; position: absolute; top: 20px; right: 29px; color: gray; }

#toolbarIcons { position: relative; display: inline-block; right: 0; top: 0; }
	.toolbarChars { font-size: 3em; color: gray; vertical-align: 0.1em; cursor: pointer; padding-left: 10px; }
	.toolbarIcons { width: 48px; padding-left: 10px; cursor: pointer; }
		#loginIconCell { position: relative; display: inline; text-align: center; }
			#loginIcon { position: relative; /*margin-left:10px; margin-right: 10px;*/ }
			.loginIconWithUsername { margin-bottom: 0px; }
			.loginIconWithoutUsername { /*margin-bottom: 10px;*/ }
				#usernameUnderLoginIcon { position: absolute; width: 60px; top: 15px; font-size: 50%; color: gray; }
		.sortMenu { left: 20px; top: 20px; }
		#newFolder, #folderUp { display: none; }
		#trashcan  { display: none; }

#uploadContainer { position: relative; display: inline-block; margin-top: 0; border: solid 1px black; }
	.uploadContainerWithToolbar { width: calc(100% - 240px); }
	.uploaderIconChars { font-size: 3em; color: gray; vertical-align: 0.1em; cursor: pointer; }
	#pickfiles, #uploadfiles { position: relative; z-index: 1; }
	#pickfiles { left: 3px; top: 1px; }
	#pickfiles i { padding-left: 0; }
	#pickfiles img { width: 56px; vertical-align: -5px; }
	#uploadfiles { opacity: 0.4; top: 3px; }
	#uploadfiles i { /*font-size: 3.3em;*/ }
	.fa-upload { vertical-align: 0.17em; }
	#overwriteDuplicates { position: absolute; right: 3px; top: 3px; }
	#dropTarget { position: absolute; top: 0px; bottom: 0px; left: 120px; right: 0px; overflow: auto; 
				font-family: sans-serif; text-align: center; color: gray; }
		@media (max-width: 845px) { #dropTarget {line-height: 0.99em;} }
		@media (max-width: 700px) { #dropTarget {font-size: 85%;} }
		@media (max-width: 611px) { #dropTarget {font-size: 80%;} }
		@media (max-width: 515px) { #dropTarget {font-size: 70%;} }
		@media (max-width: 495px) { #dropTarget {font-size: 60%;} }
		@media (max-width: 455px) { #dropTarget {font-size: 50%;} }
		@media (max-width: 430px) { #dropTarget {font-size: 40%;} }
		@media (max-width: 410px) { #dropTarget {display: none;} }
		#textInDropTarget {}
		.delete-queued-file { margin-right: 5px; cursor: pointer; font-size: 10pt; font-weight: bold; color: gray; }
		#uploadProgress { position: absolute; left: 0; top: 0; bottom:0; width: 0%; background-color: rgb(55, 143, 214); opacity: 0.5; }

.cellContainerWrapper { position: absolute; height: calc(100% - 100px - 38px - 67px /*- *78px*/ - 0px - 0.7em); }
	.cellContainer { position: absolute; height: calc(100% - 150px - 1em); overflow: auto; }
		@media (max-width: 414px) { .cellContainer { margin: 0; width: 100%; height: 100%; } } /* mobile, up to iPhone Plus */
		.cellContainerWithoutBranding { height: calc(100% - 50px); }
		.cells { position: relative; margin: 10px 5px; padding: 10px; width: 291px; height:291px; float: left; 
					font-size: 90%; text-align: center; background-color: WhiteSmoke; 
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
		.cells:hover { border: 2px solid gray; margin: 8px 3px; }
		.deleteImageDiv { position: absolute; z-index: 10; }
		.deleteIcons { width: 24px; height: 24px; }
		.imgName { max-width: 100%; height: 2.3em; margin-top: 0.5em; margin-bottom: 0; overflow: auto; white-space: nowrap; }
			.imgName a { text-decoration: none; color: black; }
			.imgName a:hover { color: blue; }
		.thumbContainer { position: relative; height: 75%; margin-left:auto; margin-right:auto; overflow: auto; }
		.thumbTopContainer { position: relative; width: 100%; }
		.cellImage { width: 100%; visibility: hidden; }
		.spinner { position: absolute; z-index: 10; left: calc(50% - 16px); top: calc(50% - 16px); display: none; }
		.folderPreview { position: absolute; z-index: 1; width: 60%; height: 60%; top: 25%; left: 20%; overflow: auto; }
		.fpGallery { position: absolute; width: 100%; left: 0; margin-left: auto; margin-right: auto; }
		.fpImages { position: absolute; width: 100%; left: 0; }

		.iconBar { position: absolute; bottom: 10px; color: gray; }
			.toolbarIcon { position: relative; float: left; margin-left: 10px; cursor: pointer; }
			.shareIcon { }
			.publishIcon { }
			.rotateIcon { display: none; transform: rotateY(180deg); }
			.toolbarMenu { position: absolute; float: left; text-align: left; font-size: 0.71em; z-index: 99; }
			.publishMenu { left: 102px; bottom: -5px; width: 185px; }
			.selected { background-color: lightgray; }
			.mrlOptions { margin-top: .5em; margin-bottom: .5em; }
			#previewMrlIframe { border: 2px inset; width: calc(100% - 4px); }
			#mrlText { position: absolute; border-width: 1px; left: 1%; right: 1%; bottom: 2%; padding: 1%; width: calc(96% - 2px); 
				height: 6em; margin-left: auto; margin-right: auto; font-size: 1em; }

		.shortLinksContainer { width: 90%; margin: auto; position: relative; height: 2em; }
			p.shortLinks { font-size: 75%; text-align: right; }
			p.shortLinkLeft { font-size: 75%; text-align: left; position: absolute; top:0; left:0; }
			p.shortLinkRight { font-size: 75%; text-align: right; position: absolute; top:0; right:0; }
		.inpage { font-size: 75%; text-align: center; }
		.mrls { font-size: 75%; text-align: center; margin-top: 10px;}
		.boxPasswords { display: none; }
		.uploadDate { position: absolute; bottom: 0; right: 0; font-size: 60%; }

.Eq-branding-bottom { position: absolute; float: left; bottom: -2px; margin: 0px; width: calc(100% - 20px); z-index: 2;
						height: 0.7em; overflow: auto; background-color: white; /*border: 1px solid red;*/ }
	.Eq-branding-bottom:hover { z-index: 100; height: auto; }
		@media (max-height: 300px) { .Eq-branding-bottom { display: none; } }
	.Eq-copyright-notice { font-size: 0.5em; font-family: verdana, arial, sans-serif; text-align: center; color: #909090; 
							/*opacity: 0.1;*/ }
	/*.Eq-copyright-notice:hover { opacity: 1; }*/

/* ------------------------------------------------------------------------------------------------ */

.pageControls { position: absolute; z-index: 9; top: 330px; width: 150px; height: 15px; display: none; /*border: 1px solid gray;*/ }
.pageControl { width: 18px; height: 15px; border: 0; }
.gotoPageImg { width: 57px; height: 15px; }
.gotoPage { position: absolute; z-index: 99; border-radius: 2px; font-family: sans-serif; font-size: 50%; text-align: center;
	left: 44px; top: 0px; width: 18px; height: 9px; }
.pageCount {	position: absolute; z-index: 99; font-family: sans-serif; font-size: 50%; border-radius: 2px; color: white;
	left: 70px; top: 2px; }

/* ------------------------------------------------------------------------------------------------ */

#loginDialog { display: none; }
.loginLabel { font-size: 70%; }
#username, #password { width: 93%; }

/* ------------------------------------------------------------------------------------------------ */

/* all dialogs */
.publisherDialogClass { font-size:70%; }
.inputSpacer { width: 2em; height: 1em; }
.previewIframe { border: 2px inset; width: calc(100% - 4px); height: 180px; }

/* Share Multizoom Link dialog */ 
#previewSmzlIframe { margin-top: 5px; margin-bottom: 5px; }
.annotationOption { position: relative; bottom: 5px; }
	.enableAnnotationsCheckbox {position: relative; bottom: -1px; vertical-align: text-bottom; }
.shortLinkGroup { margin-top: 5px; }
	#generateShortLinkButton { position: relative; vertical-align: middle; cursor: pointer; }
	#smzlShortLinkText { position: relative; border-width: 1px; padding: 1%;  vertical-align: middle;
						width: 14em; height: 1.3em; margin-left: auto; margin-right: auto; font-size: 1em; }
.dialogTextInput2chars { width: 2em; }
.dialogTextInput7chars { width: 7em; }

/* Embed Unizooms dialog */ 
#embedUnizoomsDialog { display: none; }
#embedUnizoomsDialog>label>input {vertical-align: middle; }
.embedButton { font-size: 75%; text-align: center; margin-top: 10px;}
.embedPopup { margin-bottom: 0.5em;}
#embedId { margin-bottom: 0.3em; width: 2em; }
#embedText { position: absolute; border-width: 1px; left: 1%; right:1%; bottom: 0; padding: 1%; width: calc(96% - 2px); 
	height: 8em; margin-left: auto; margin-right: auto; font-size: 1em; }

/* MRL dialog */
.dialogTextInput4chars { width: 4em; }

/* ------------------------------------------------------------------------------------------------ */