/* 	

By Glendale Designs. Do not use without written permission: sabine@glendaledesigns.com
Modified for a charm builder

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:1px dashed #bbb;
	border-radius: 8px;
	margin-top: 1rem;
	padding: 0.5rem;
	text-align: center;
	cursor: pointer;
	font-size: 0.8rem;
	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/charm_builders/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/extenisons/gd-upload-image/upload-cloud-icon-big.png') center center no-repeat;
	background-size: contain;
	opacity: 0.7;
}
.imageDropMessages .message {
	margin:0 !important;
}
.clearDropArea {
	cursor: pointer; 
	font-size: 1.5rem; 
	position: absolute;
	z-index: 10;
	right:1.5rem;
	top:0;
}
.clearDropArea a {
	color:red;	
	font-size: 3rem;
}


/* 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/gd_build_s3/extensions/gd-upload-image/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;
}