@CHARSET "UTF-8";

div.fileupload {
	display:inline-block;
	width: 200px;
	height: 200px;
	background-color: rgba(255,255,255,0.9);
	background-image: url('../../img/fileupload/iconmonstr-add-file-2-icon-32.png');
	background-position: center center;
	background-repeat:no-repeat;
	border-radius:3px;
	border: 1px solid rgba(0,0,0,0.1);
	cursor:pointer;
	margin: 8px 0;
	position:relative;
	box-sizing: border-box;
}

div.fileupload.empty {
}

div.fileupload.progress {
	background-image: url('../../img/fileupload/iconmonstr-upload-9-icon-48.png');
	background-size:auto;
}

div.fileupload.error {
	background-image: url('../../img/fileupload/iconmonstr-warning-6-icon-32.png');
	background-size:auto;
}

div.fileupload.general {
	background-image: url('../../img/fileupload/iconmonstr-text-file-4-icon-32.png');
}

div.fileupload.code {
	background-image: url('../../img/fileupload/iconmonstr-code-6-icon-32.png');
}

div.fileupload.video {
	background-image: url('../../img/fileupload/iconmonstr-video-icon-32.png');
}

div.fileupload.sound {
	background-image: url('../../img/fileupload/iconmonstr-audio-7-icon-32.png');
}

div.fileupload.image {
	background-image: url('../../img/fileupload/iconmonstr-picture-multi-2-icon-32.png');
}

div.fileupload .background-pattern {
	position:absolute;
	display:block;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background: url('../../img/fileupload/png-bg-pattern.jpg') repeat left top;
}

div.fileupload .preview-image {
	position:absolute;
	display:block;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}

div.fileupload.dragover {
	background-image: url('../../img/fileupload/iconmonstr-plus-2-icon-32.png') !important;
}

div.fileupload.dragover .preview-image,
div.fileupload.dragover .background-pattern {
	opacity:0;
}

div.fileupload:hover {
}

div.fileupload span.progressbar {
	display:none;
}

div.fileupload.progress .caption {
	display:none;
}

div.fileupload.progress span.progressbar {
	display: block;
	position: absolute;
	background-color: #e0e0e0;
	left: 0;
	bottom: 0;
	height: 8px;
	width: 50%;
}

div.fileupload .caption {
	border-radius: 3px;
	position: absolute;
	left: 16px;
	/* right: 0px; */
	max-width: 95%;
	bottom: 16px;
	color: #333;
	padding: 8px 16px;
	line-height: 1em;
	opacity: 1;
	z-index: 1;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	box-sizing: border-box;
	text-align: center;
	color: #fff;
	background: #45484d;
	white-space: nowrap;
	overflow: hidden;
	background: -moz-linear-gradient(top, #45484d 0%, #222222 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#222222));
	background: -webkit-linear-gradient(top, #45484d 0%,#222222 100%);
	background: -o-linear-gradient(top, #45484d 0%,#222222 100%);
	background: -ms-linear-gradient(top, #45484d 0%,#222222 100%);
	background: linear-gradient(to bottom, #45484d 0%,#222222 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#222222',GradientType=0 );
}

div.fileupload.empty .caption, 
div.fileupload.error .caption {
	display:none !important;
}

div.fileupload .caption > .name {
	display:inline;
	font-size:15px;
}

div.fileupload .caption > .type {
	display:none;
	font-size:15px;
	margin-left:8px;
	opacity:0.54;
}

div.fileupload .caption > .size {
	display:inline;
	font-size:15px;
	margin-left:8px;
	opacity:0.54;
}

div.fileupload .caption > .size:before {
	content:"(";
}

div.fileupload .caption > .size:after {
	content:")";
}

div.fileupload ul.uploader-actions {
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	z-index:99;
	top:8px;
	right:8px;
	opacity:0.0;
}

div.fileupload:hover ul.uploader-actions {
	opacity:1.0;
}

div.fileupload ul.uploader-actions > li {
	opacity:1.0;
	display:inline-block;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
	width:24px;
	height:24px;
	background-size:24px 24px;
	background-repeat:no-repeat;
	background-position:center center;
	margin-left:8px;
}

div.fileupload  ul.uploader-actions > li.upload {
	background-image:url('../../img/fileupload/iconmonstr-upload-11-icon-24.png');
}

div.fileupload  ul.uploader-actions > li.download {
	background-image:url('../../img/fileupload/iconmonstr-save-11-icon-24.png');
}

div.fileupload  ul.uploader-actions > li.remove {
	background-image:url('../../img/fileupload/iconmonstr-x-mark-icon-24.png');
}

div.fileupload.empty .remove, 
div.fileupload.error .remove {
	display:none;
}