/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
@-webkit-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-moz-keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@keyframes passing-through {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30%, 70% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -o-transform: translateY(-40px);
    transform: translateY(-40px); } }
@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  10% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1); }
  20% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
#upload_helper, #upload_helper * {
  box-sizing: border-box; }

#upload_helper {
	position: fixed;
	display: block;
	visibility: visible;
	z-index: 999;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	padding: 0px;
	background: transparent;
	overflow: hidden;
	overflow-y: auto;
}
#upload_helper.dz-clickable {
	cursor: pointer;
}
#upload_helper.dz-clickable * {
	cursor: default;
}
#upload_helper.dz-clickable
	.dz-message,
#upload_helper.dz-clickable
	.dz-message *
	{
    	cursor: pointer;
	}
#upload_helper.dz-started
	.dz-message {
    	display: none;
	}
#upload_helper.dz-started {
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 5px 35px 0 rgba(0,0,0,0.3);
	padding: 20px 30px 20px 30px;
	position: fixed;
	left: 50%;
	top:50%;
	transform:translate(-50%,-50%);
	width: calc(100% - 60px);
	height: auto;
	z-index: 9100;
	transition: top 0.3s ease;
}
#upload_helper.dz-started ~ .upload-page-cover {
	display: block;
	z-index: 9000;
	content:" ";
	position: fixed;
	left: 0px;
	top:  0px;
	width:  100%;
	height: 100%;
	background-color: hsla(208,10%,37%,0.27);
	background-color: hsla(208,10%,37%,0);
}

#upload_helper.dz-drag-hover {
	border-style: solid;
}
#upload_helper.dz-drag-hover
	.dz-message {
		opacity: 0.5;
	}
#upload_helper
	.dz-message {
		text-align: center;
		margin:0;
		position: relative;
		top: 50%;
		transform:translateY(-50%);
	}
#upload_helper
	.dz-message
		.dz-button
		{
			background: none;
			color: inherit;
			border: none;
			padding: 0;
			font: inherit;
			font-size: 1.5rem;
			line-height: 1.8rem;
			cursor: pointer;
			outline: inherit;
		}
#upload_helper
	.dz-preview {
		position: relative;
		display: block;
		padding-bottom: 5px;
	}
#upload_helper .dz-preview:nth-child(2n+0) { background-color: #FBFBFB; }
#upload_helper .dz-preview:nth-child(2n+1) { background-color: #F5F5F5; }
	
#upload_helper
	.dz-preview:hover {
		z-index: 1000;
	}
#upload_helper
	.dz-preview:hover .dz-details {
		opacity: 1;
	}
#upload_helper
	.dz-preview.dz-file-preview .dz-image {
		border-radius: 4px;
		background: #EEEEEE;
	}
#upload_helper
	.dz-preview.dz-file-preview
		.dz-details {
			opacity: 1;
		}
#upload_helper
	.dz-preview.dz-image-preview {
		background: white;
	}
#upload_helper
	.dz-preview.dz-image-preview
		.dz-details {
			-webkit-transition: opacity 0.2s linear;
			-moz-transition: opacity 0.2s linear;
			-ms-transition: opacity 0.2s linear;
			-o-transition: opacity 0.2s linear;
			transition: opacity 0.2s linear;
		}
#upload_helper
	.dz-preview
		.dz-remove {
			font-size: 14px;
			text-align: center;
			display: block;
			cursor: pointer;
			border: none;
		}
#upload_helper
	.dz-preview
		.dz-remove:hover {
			text-decoration: underline;
		}
#upload_helper
	.dz-preview:hover
		.dz-details {
			opacity: 1;
		}
#upload_helper
	.dz-preview
		.dz-details {
			z-index: 20;
			position: absolute;
			top: 0;
			left: 35px;
			opacity: 0;
			font-size: 13px;
			width: calc(100% - 80px);
			color: rgba(0, 0, 0, 0.9);
			background-color:#A5E6D1;
			background-color: transparent;
		}
#upload_helper
	.dz-preview
		.dz-details
			.dz-size {
				display: block;
				float:right;
				width: 100px;
				text-align: right;
				font-size: 15px;
				line-height: 20px;
			}
#upload_helper
	.dz-preview
		.dz-details
			.dz-filename {
				display: block;
				width: calc(100% - 150px);
				font-size: 15px;
				line-height: 27px;
			}
#upload_helper
	.dz-preview
		.dz-details
			.dz-filename:not(:hover) {
				overflow: hidden;
				text-overflow: ellipsis;
			}
#upload_helper .dz-preview .dz-details .dz-filename span,
#upload_helper .dz-preview .dz-details .dz-size span {}
#upload_helper
	.dz-preview
		.dz-image {
			border-radius: 4px;
			border: 1px solid gray;
			overflow: hidden;
			width: 24px;
			height: 24px;
			left: 3px;
			top: 3px;
			position: relative;
			display: block;
			z-index: 10;
		}
#upload_helper
	.dz-preview
		.dz-image img {
			display: block;
		}
#upload_helper
	.dz-preview.dz-success
		.dz-success-mark {
			-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
			-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
			-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
			-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
			animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
		}
#upload_helper
	.dz-preview.dz-error
		.dz-error-mark {
			opacity: 1;
			-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
			-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
			-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
			-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
			animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
		}
#upload_helper
	.dz-preview
		.dz-success-mark,
#upload_helper
	.dz-preview
		.dz-error-mark {
			pointer-events: none;
			opacity: 0;
			z-index: 500;
			position: absolute;
			display: block;
			top: 3px;
			left: calc(100% - 27px);
			width: 18px;
			height: 18px;
			background-repeat: no-repeat;
			background-size: contain;
		}
#upload_helper .dz-preview.dz-complete .dz-success-mark { opacity:1; }
#upload_helper .dz-preview.dz-failed   .dz-error-mark   { opacity:1; }
/*
#upload_helper .dz-preview.dz-complete .dz-success-mark svg { display:block; }
#upload_helper .dz-preview.dz-failed   .dz-error-mark   svg { display:block; }
*/
#upload_helper .dz-preview .dz-success-mark { background-image:url(../../../images/elements/success.green.svg); }
#upload_helper .dz-preview .dz-error-mark   { background-image:url(../../../images/elements/failed.red.svg);    }
		
#upload_helper
	.dz-preview
		.dz-success-mark svg,
#upload_helper
	.dz-preview
		.dz-error-mark svg {
			display: block;
			width:  18px;
			height: 18px;
			display: none;
		}
#upload_helper
	.dz-preview.dz-processing
		.dz-progress {
			opacity: 1;
			-webkit-transition: all 0.2s linear;
			-moz-transition: all 0.2s linear;
			-ms-transition: all 0.2s linear;
			-o-transition: all 0.2s linear;
			transition: all 0.2s linear;
		}
#upload_helper
	.dz-preview.dz-complete
		.dz-progress {
			opacity: 0.1;
			-webkit-transition: opacity 0.4s ease-in;
			-moz-transition: opacity 0.4s ease-in;
			-ms-transition: opacity 0.4s ease-in;
			-o-transition: opacity 0.4s ease-in;
			transition: opacity 0.4s ease-in;
		}
#upload_helper
	.dz-preview:not(.dz-processing)
		.dz-progress {
			-webkit-animation: pulse 6s ease infinite;
			-moz-animation: pulse 6s ease infinite;
			-ms-animation: pulse 6s ease infinite;
			-o-animation: pulse 6s ease infinite;
			animation: pulse 6s ease infinite;
		}
#upload_helper
	.dz-preview
		.dz-progress {
			opacity: 1;
			z-index: 1000;
			pointer-events: none;
			position: absolute;
			height: 10px;
			left: calc(100% - 285px);
			top: calc(100% - 20px); 
			width: 180px;
			background: rgba(255, 255, 255, 0.9);
			-webkit-transform: scale(1);
			border-radius: 6px;
			overflow: hidden;
			background-color: rgba(0,0,0,0.1);
			box-shadow: inset 0 0 3px 0 rgba(0,0,0,0.2);
		}
#upload_helper
	.dz-preview
		.dz-progress
			.dz-upload {
				background-color: #00457F;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				width: 0;
				-webkit-transition: width 300ms ease-in-out;
				-moz-transition: width 300ms ease-in-out;
				-ms-transition: width 300ms ease-in-out;
				-o-transition: width 300ms ease-in-out;
				transition: width 300ms ease-in-out;
			}
#upload_helper
	.dz-preview.dz-error
		.dz-error-message {
			display: block;
		}
#upload_helper
	.dz-preview.dz-error:hover
		.dz-error-message {
			opacity: 1;
			pointer-events: auto;
		}
#upload_helper
	.dz-preview
		.dz-error-message {
			pointer-events: none;
			z-index: 1000;
			position: absolute;
			display: block;
			display: none;
			opacity: 0;
			-webkit-transition: opacity 0.3s ease;
			-moz-transition: opacity 0.3s ease;
			-ms-transition: opacity 0.3s ease;
			-o-transition: opacity 0.3s ease;
			transition: opacity 0.3s ease;
			border-radius: 8px;
			font-size: 13px;
			top: 130px;
			left: -10px;
			width: 140px;
			background: #be2626;
			background: linear-gradient(to bottom, #be2626, #a92222);
			padding: 0.5em 1.2em;
			color: white;
		}
#upload_helper
	.dz-preview
		.dz-error-message:after {
			content: '';
			position: absolute;
			top: -6px;
			left: 64px;
			width: 0;
			height: 0;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #be2626;
		}

#upload_helper h1.title-upload-area {
	font-size: 2rem;
	line-height: 1.1;
	margin: 0 0 15px 0;
}