.uploader {
  /*padding: 10px;*/
}
.uploader .queueList:before,
.uploader .queueList:after {
  content: " ";
  display: table;
}
.uploader .queueList:after {
  clear: both;
}
.uploader .uploaderFile {
  float: left;
  width: 110px;
  height: 110px;
  position: relative;
}
.uploader .uploaderFile-drag {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 3px dashed #e6e6e6;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAABLCAIAAAB7tddWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1Q0VBNzA0MjEyMDUxMUUzODk2Q0JFM0Q1RjE4QkExQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1Q0VBNzA0MzEyMDUxMUUzODk2Q0JFM0Q1RjE4QkExQyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAzNDA2MkY1MTIwMzExRTM4OTZDQkUzRDVGMThCQTFDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAzNDA2MkY2MTIwMzExRTM4OTZDQkUzRDVGMThCQTFDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+K6izdgAAAvpJREFUeNrsnFmPqkAQhWmX667gEp9c/v+/MkSDG+4LrvdcSYgRbw/0ALZQ9WBUJOn+uqvqHGCG3e93hUJRUoSAQBAIAkEgCASBIBAE4neRicEcII51Xb/dbnjPGOt0OqlUKok7ApN3jIKwY6DUIBAEgkAQCALho/X47TeXy8U0TcuyrtdrZKPs9/v2m8FgINYgf9QX/gTV+Xw2DCNKBJKmxmKxsAVc0kEcDgfyGq8CNp/Pa5qWy+WiHG6v13v7/XPt6Ha7Al5D3HQ1Go1sNkvtU8lkMsmtESSoCASBSFqEW/DQ0tbr9W63O51OKK6FQkFV1XQ6nSwQ0OOTyQSvjknZbDaA0mq1QCQafSFFasxmM4eCE1Do0+lUQrcSFggsPhzq20NgsVqtkpIax+MxMs+C/aXruvMxaonND75J9W5hUWWxuYAVdRfTg8EplUphGJywQPAFuBd5Dlhw/aDwwgVtCDgCdzph1QisG+dosVjkn44WYxjGC4XnvBuNRtvt9gtA2Hv47SGsZKVS4ef8eDzG4vMVCrpSgEU3xPbZbDar1erLl1AQ7XabU8xAAXvB3XffBnIHwkR2QcUYq9fr5XIZOxkTg6BEkeNLKdQF7AWPFBy1AoUmu8RG/HmE91nxM+J/ORIr07VcLvf7feCt+stAQGIBRNJtOJolDAhdj/hXGj5+u+TzIKAF+MbkK00XFta2BhDRUE0/9gv8Elogbu4TBW8+nyPhHSeuaVqtVuNQC6TzyQUCXsg0TbfyAxfIKogr9ynP1GJyYQZ57qbg7AuIRfclKZwSlDqWBQSmxM9zFALYh+fFBwJJSkNgqeFxSrAPw+EQ9QJew7Is2Sj8FgSW2nu1gylYPkKRMsRTA+4IcjA2fxsnDkLOq/IfACFP54uP1yAQBIJAEIh4gWCPkHk+GJ7AjU/fICJ+qlIghEfoDwQMtRjvyLYDRih4rsDT+bBM9tP5kuhrzN++e6SqqvCdYUb/SIO6BoEgEASCQBAIAkEgCEQg8VeAAQAB1bbO2qoeewAAAABJRU5ErkJggg==) #fff no-repeat center center;
}
.uploader .uploaderFile-drag.filePicker-hover {
  border-color: #999;
}
.uploader .uploaderFile-img {
  display: none;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 4px;
  background-color: #fff;
  border: solid 1px #ddd;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}
.uploader .uploaderFile-img .inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.uploader .filePicker {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
}
.uploader .filePicker.webuploader-dnd-over {
  border: 3px dashed #999;
}
.uploader .filePicker .filePicker-file {
  position: absolute;
  width: 100%;
  height: 100%;
}
.uploader .filePicker .webuploader-element-invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}
.uploader .filePicker .filePicker-label {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.uploader .filePicker .webuploader-pick {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 0;
  background: none;
  padding: 0;
  color: #fff;
  cursor: pointer;
  text-overflow: -99em;
}
.uploader .filePicker .webuploader-pick.webuploader-pick-hover {
  background: rgba(0, 0, 0, 0.1) !important;
}
.uploader .img-wrap {
  width: 100px;
  height: 100px;
  -webkit-display: table-cell;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.uploader .img-wrap img {
  max-width: 100%;
  max-height: 100%;
}
.uploader .file-wrap {
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.uploader .file-wrap .file-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}
.uploader .file-wrap .file-label {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.uploader .file-tools {
  box-sizing: border-box;
  position: absolute;
  z-index: 11;
  left: 5px;
  top: 5px;
  width: 100px;
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  display: none;
}
.uploader .file-tools .tools-del {
  width: 16px;
  height: 16px;
  display: inline-block;
  background: url(../images/icons-upload.png) no-repeat -49px -24px;
  cursor: pointer;
}
.uploader .file-tools .tools-del:hover {
  background-position: -49px 0;
}
.uploader .file-tools .tools-preview {
  width: 19px;
  height: 16px;
  display: inline-block;
  background: url(../images/icons-upload.png) no-repeat -70px -24px;
  cursor: pointer;
  margin-right: 8px;
}
.uploader .file-tools .tools-preview:hover {
  background-position: -70px 0;
}
.uploader .file-alert {
  display: none;
  z-index: 10;
  position: absolute;
  height: 22px;
  left: 0;
  width: 100%;
  bottom: 0;
}
.uploader .file-alert .error {
  display: block;
  background-color: #f43838;
  font-size: 12px;
  color: #fff;
  text-align: center;
  height: 22px;
  line-height: 22px;
  overflow: hidden;
}
.uploader .file-progress {
  display: none;
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 8px;
  overflow: hidden;
  z-index: 5;
}
.uploader .file-progress span {
  overflow: hidden;
  width: 0;
  height: 100%;
  background: #0bcf5e url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAQCAYAAADwMZRfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMjgwMTE3NDA3MjA2ODExODA4M0E4MzgzMTAzRTZGOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRjFGMDIxRDFEMEIxMUUzQUExRkU5NjcxMEMxOEM3QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRjFGMDIxQzFEMEIxMUUzQUExRkU5NjcxMEMxOEM3QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDQ4MDExNzQwNzIwNjgxMTgwODNBODM4MzEwM0U2RjkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDI4MDExNzQwNzIwNjgxMTgwODNBODM4MzEwM0U2RjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz62XI8XAAABI0lEQVR42oSTf0vDMBCGkyajTBmOwXR+Bb//9/EvnT+GTkXGbJv4XImlS3MuEK5prs+99ya1IYQ7a+3cTEfouu6euM83yDfsGb7t11XbtltiLEAqkm+IzpQqJECfyGLP/CglVlV1SVjn72OM/RxXi0lNKHDYttfEetyKqJA4QFI80OOromZG2ORKTnL+3qPmhc2jAloSFucgMn40k5HukxqX+5FD5NjeSPhS1CyArXI/JhAxuWmarVEcliOniJ8UyHvk+RtFOwVUO+c2RUh+DfDmSTwqgYCsaO3i5J6Y8jgCelZu8gzQrQg7BzFAdlQ7KCZfAVoO6/y4Rv0HTH5Qaljv/aBGVZJ+sk9MfleKzMVkEfEvRO4DbT2S2Comr2mt/hVgANU+nayGWj9TAAAAAElFTkSuQmCC) repeat-x;
  -webit-transition: width 200ms linear;
  -moz-transition: width 200ms linear;
  -o-transition: width 200ms linear;
  -ms-transition: width 200ms linear;
  transition: width 200ms linear;
  -webkit-animation: progressmove 2s linear infinite;
  -moz-animation: progressmove 2s linear infinite;
  -o-animation: progressmove 2s linear infinite;
  -ms-animation: progressmove 2s linear infinite;
  animation: progressmove 2s linear infinite;
  -webkit-transform: translateZ(0);
}
@-webkit-keyframes progressmove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 17px 0;
  }
}
@-moz-keyframes progressmove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 17px 0;
  }
}
@keyframes progressmove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 17px 0;
  }
}
.uploader .filelist {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  float: left;
}
.uploader .filelist:before,
.uploader .filelist:after {
  content: " ";
  display: table;
}
.uploader .filelist:after {
  clear: both;
}
.uploader .filelist li {
  float: left;
  margin: 0 8px 20px 0;
}
.uploader .tip-test {
  font-size: 14px;
  color: #666;
  margin: 10px 0 0;
}
.uploader .tip-test a {
  color: #428bca;
  text-decoration: underline;
}