.b-upload__dnd {
   color: #ccc;
   border-style: dashed;
   border-color: #ccc;
   line-height: 124px;
   text-align: center;
   border-width: 2px;
   -moz-user-select: none;
   -khtml-user-select: none;
   user-select: none; 
}
.b-upload__dnd_hover {
   color: #222;
/*   border-color: #222;*/
   border-color: #357ebd;
}
.b-upload__files{
   margin: 10px 32px 0;
}
.progress-small {
   height: 5px;
   padding: 1px;
   box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
   border-radius: 10px;
   background-color: rgba(0,0,0,.5);
}
.progress-small .bar {
   width: 0;
   height: 100%;
   position: static;
   border-radius: 10px;
   background-color: #428bca;
}
     
.b-upload {
   white-space: nowrap;
}
.b-upload__name,
.b-upload__size {
   display: inline-block;
   position: relative;
   overflow: hidden;
   max-width: 150px;
   vertical-align: middle;
}
.b-upload__size {
   color: #666;
   font-size: 12px;
}
.b-upload .js-files:after {
   clear: both;
   content: '';
   display: block;
}
.b-upload__hint {
   padding: 5px 8px;
   font-size: 12px;
   white-space: normal;
   border-radius: 3px;
   background-color: rgba(0,0,0,.08);
}

.b-thumb {
   float: left;
   margin: 4px;
   padding: 5px;
   overflow: hidden;
   position: relative;
   box-shadow: 0 0 2px rgba(0,0,0,.4);
   background-color: #fff;
}
.b-thumb__del {
   top: -6px;
   right: -1px;
   color: #FF0000;
   cursor: pointer;
   opacity: 0;
   z-index: 999;
   position: absolute;
   font-size: 20px;
   -webkit-transition: opacity .1s ease-in;
   -moz-transition: opacity .1s ease-in;
   transition: opacity .1s ease-in;
}
.b-thumb:hover .b-thumb__del {
   opacity: 1;
}
.b-thumb.fail{
   background-color: #f68f8d; 
}
.b-thumb.fail .b-thumb__remove,
.b-thumb.fail .b-thumb__progress{
   visibility: hidden;
}

.b-thumb__remove{
   display: block;
   height: 18px;
   margin-top: -3px;
   position: absolute;
   cursor: pointer;
   right: 2px;
   width: 18px;
   background: url('/img/icons/delete-icon.png') #fff center no-repeat;
}
a.b-thumb__remove:hover{
   text-decoration: none;
}
.b-thumb__rotate {
   top: 40%;
   left: 50%;
   width: 32px;
   height: 32px;
   cursor: pointer;
   margin: -16px 0 0 -16px;
   position: absolute;
/*   background: url('uploader/rotate.png');*/
}

.b-thumb__preview {
   width: 80px;
   height: 80px;
   -webkit-transition: -webkit-transform .2s ease-in;
   -moz-transition: -moz-transform .2s ease-in;
   transition: transform .2s ease-in;
}
.b-thumb__preview__pic {
   width: 100%;
   height: 100%;
   background: url('/img/icons/file-icon.png') 50% 50% no-repeat;
}

.b-thumb__name {
   width: 80px;
   height: 21px;
   overflow: hidden;
   font-size: 12px;
}

.b-thumb__progress {
   top: 75px;
   left: 10px;
   right: 10px;
   position: absolute;
}

.fileprogress {
   padding: 1px;
   height: 5px;
   box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
   border-radius: 10px;
   background-color: rgba(0,0,0,.5);
}
.fileprogress__bar {
   width: 0;
   height: 100%;
   border-radius: 10px;
   background-color: orange;
}