/* 	

	By Glendale Designs. Do not use without written permission: sabine@glendaledesigns.com
	Modified for a Parts Request Form w/ Picture Upload for Boss ShotShells -  GD Ticket: 22688638, re: 21970107
	
	artwork.css
	Upload an image with a nice UX. 
	
*/
.fileUploadAttr {
	position: relative;
}
.fileUploadAttr label {
	display:block;
}
.form-row.fileUploadAttr {
	margin-bottom:0 !important;
	position: relative;
	z-index: 1;
}
.fileUploadAttr .uploadedFilePath {
	border:none;
	background:#ffffff;
	margin:0;
	padding:0;
	outline-style: none;
}
.imageDroparea {
	position: relative;
	z-index: 1;
	border:2px dashed #bbb;
	border-radius: 8px;
	margin: 1rem;
	padding: 1rem;
	text-align: center;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background-color 0.5s ease;  
	background-color:#eeeeee;
}
.imageDroparea:hover {
	border-color:#1c76bc;
	background-color:#ffffdd;
}
/*	
.imageDroparea.full:before {
	content: "Click here, or drop a file here to replace the curent one.";
	position: absolute;
	bottom: 1rem;
	left:0;
	width:100%;
	text-align: center;
}
*/
.uploadIcon-helptext {
	font-style: normal;
}
.imageDroparea.uploading {
	background-image:url(/mm5/b09/themes/00000001/shadows/extensions/gd-ocstForm/artwork/loading_graphic.gif);
	background-repeat: no-repeat;
	background-position: 1rem 0.9rem;
}
.imageDroparea.uploading:after {
	content: "Uploading your image. Please Wait.";
	position: absolute;
	top: 0.5rem;
	left:67px;
	color:#c3262e;
}
.imageDroparea ul, 
.imageDroparea li {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
.imageDroparea img {
	border:none;
	display:inline-block;
	height: 100px;
	max-height: 100px;
	width:auto;
}
.imageDroparea span {
	display:block;
	margin: 0;
	padding: 0.75em 0.75em 0 0.75em;
	color:#c3262e;
	font-weight: normal;
	hyphens: none;
	white-space: normal;
	word-break: break-all;
}
.imageDroparea .uploadIcon {
	display: block;
	margin: 0 auto;
	width: 4rem;
	height: 4rem;
	background: url('/mm5/themes/00000001/shadows/extensions/gd-ocstForm/artwork/upload-cloud-icon-big.png') center center no-repeat;
	background-size: contain;
	opacity: 0.7;
}
.imageDropMessages .message {
	margin:0 !important;
}
.clearDropArea {
	position: absolute;
	z-index: 10;
	right:1.5rem;
	top:0;
	cursor: pointer; 
	font-size: 3rem; 
}

.previewDropArea{
	position: absolute;
	z-index: 10;
	right:3.5rem;
	top:30px;
	cursor: pointer; 
	font-size: 23px; 
}



/* Inline Edit Forms via JSON and Ajax */
/* viewing */
	.mode_view .show_inputs { 
		display: none;
	}
	.mode_view .saving_this { 
		display: none;
	}
	.mode_view .show_data { 
		display: inherit;
	}
	.mode_view button[type="submit"] {
		display: none;
	}
	.mode_view button[type="reset"] {
		display: none;
	}
	.mode_view .resetType {
		display: none;
	}
/* editing */
	.mode_edit .show_inputs { 
		display: inherit;
	}
	.mode_edit .saving_this { 
		display: none;
	}
	.mode_edit .show_data { 
		display: none;
	}
	.mode_edit button[type="button"] {
		display: none;
	}
/* submitting */
	.mode_submitting button,
	.mode_submitting table {
		display: none;
	}
	.mode_submitting .show_status_message {
		display: block;
	}
/* error and success messages */
	.mode_saved_ok .show_status_message,
	.mode_has_errors .show_status_message {
		display: block;
	}
	
	
/* My Avatar and My Gallery  */
.my-avatar-link {
	display: inline-block;
	transition: transform .2s; 
	width:50%;
}
.my-avatar-link:hover {
	transform: scale(1.075);
}
.noImageData {
	background: white;
	text-align: center;
	font-size: 5rem;
	color:silver;
	border-color:white;
	padding: 1rem !important;
}
.noImageData_gallery {
	text-align: center;
	padding: 1em;
	border-color:#333;
}
.noImageData_gallery:hover {
	background-color: black !important;
}
.no-gallery-image {
	display: inline-block;
	width:100px;
	height: 100px;
	background: transparent url('/mm5/themes/00000001/shadows/extensions/gd-ocstForm/artwork/no-gallery-image.png') center center no-repeat;
	opacity: 0.8;
}
.rememberCurrImage-container {
	display: block;
	position: absolute;
	padding: 0 !important;
	left:1em;
	top:1em;
	z-index: 4;
	width:64px;
	opacity: 0.5;
}
.rememberCurrImage-container .rememberCurrImage-image {
	width:100% !important;
	height: auto !important;
}
.mode_edit button[type="button"].remove-curr-image,
.remove-curr-image {
	display:inline-block; 
	border-color:transparent;
}	
.currImageData {
	display: none !important;
}
.customer-gallery-grid {
	justify-content:center; 
	align-items:center;
}
.customer-gallery-image-container {
	margin-bottom:1em;
}
.customer-gallery-image-link{
	display:inline-block; 
	border:0.5em solid #FFFFFF;
	transition: transform .2s; 
}
.customer-gallery-image-link:hover{
	border-color:silver;
	transform: scale(1.075);
}
.curr-customer-gallery-image {
	max-height:200px;
}
.artworkContainer {
	position: relative;
}
#myGallery .clearDropArea a.remove-curr-image {
	color:red;	
	font-size: 1.5rem;
}

/*

	Compact / premium variant for the review-form uploader.
	Opt-in only: add .t-upload_docs_container--compact to #t-upload_docs_container
	Existing OCST/checkout layout is untouched.

*/
.t-upload_docs_container--compact .c-form-label {
	font-size: 0.95rem;
	margin-bottom: 0.5rem;
}

.t-upload_docs_container--compact .upload-field > .u-font-16 {
	font-size: 0.8125rem;
	line-height: 1.4;
	margin-bottom: 0.5rem;
	opacity: 0.75;
}

.t-upload_docs_container--compact .imageDroparea {
	background-color: #fafafa;
	border-color: #d4d4d4;
	border-radius: 10px;
	border-width: 1px;
	margin: 0.5rem 0;
	padding: 1.25rem 1rem;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.t-upload_docs_container--compact .imageDroparea:hover {
	background-color: #ffffff;
	border-color: #1c76bc;
}

.t-upload_docs_container--compact .imageDroparea .uploadIcon {
	height: 2.5rem;
	opacity: 0.5;
	width: 2.5rem;
}

.t-upload_docs_container--compact .uploadIcon-helptext {
	font-size: 0.875rem;
}

.t-upload_docs_container--compact .imageDroparea.full {
	padding: 0.75rem;
	text-align: left;
}

.t-upload_docs_container--compact .imageDroparea img {
	height: 64px;
	max-height: 64px;
}

.t-upload_docs_container--compact .imageDroparea span {
	font-size: 0.8125rem;
	padding: 0.25em 0.5em 0 0.5em;
}

@media screen and (min-width: 40em) {
	.t-upload_docs_container--compact .imageDroparea {
		padding: .75rem;
	}
}