#uploader_states{
    display:none;
    position: fixed;
    bottom: 0;
    right: 10px;
    border: 1px solid #ccc;
    font-family: Arial;
    background-color: #ffffff;
    width: 300px;
    font-family: Arial;
    font-size: 14px;
    line-height: 1.3em;
    z-index: 2;
}

#uploader_states > .inner{
    max-height: 253px;
    overflow-x: hidden;
    overflow-y: auto;
}

#uploader_states #uploader_states_head{
    background-color: #eaeaea;
    padding: 10px;
    font-weight: bold;
    position: relative;
    border-bottom: 1px solid #ccc;
}

#uploader_states #uploader_states_head .minimize_uploader_states{
    position: absolute;
    top: 9px;
    right: 10px;
    border: 1px solid #ccc;
    cursor: pointer;
    padding: 3px;
    line-height: 12px;
}

#uploader_states #uploader_states_head .minimize_uploader_states:hover{
    background-color: #dddddd;
}

#uploader_states > .inner .upload_item{
    border-top: 1px solid #cccccc;
    padding: 10px;
    position: relative;
}

#uploader_states > .inner .upload_item:first-child{
    border-top: none;
}

#uploader_states > .inner .upload_item:hover{
    background-color: #f5f5f5;
}

#uploader_states > .inner .upload_item .cancel_upload, 
#uploader_states > .inner .upload_item .remove_upload{
    display: block;
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 3px;
    width: 20px;
    text-align: center;
    line-height: 15px;
    background-color: #b80808;
    color: #ffffff;
    cursor: pointer;
}

#uploader_states > .inner .upload_item .upload_filename{
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
    white-space: nowrap;
}

#uploader_states > .inner .upload_item .upload_error{
    color: #b80808;
    margin-top: 5px;
}

#uploader_states > .inner .upload_item .upload_progress{
    margin-top: 5px;
}

#uploader_states > .inner .upload_item .progress_bar{
    position: relative;  
    height: 20px; 
    border: 1px solid #ccc;
}

#uploader_states > .inner .upload_item .progress_bar .progress{
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #07721e;
}

#uploader_states > .inner .upload_item .progress_bar .progress_percent_label{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #555;
    line-height: 20px;
}

#uploader_states > .inner .upload_item .progress_bar .progress_percent_label.over50{
    color: #ffffff;
}




.single_image_upload{
    position: relative;
    overflow: hidden;
}

.single_image_upload input[type=file]{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-appearance: none;
    width: 1000%;
    height: 100%;
    z-index: 0;
}

.single_image_upload.not-cropable input[type=file]{
    z-index: 2;
}


.single_image_upload .img{
    background-color: #ccc;
    background-image: none;
    position: relative;
    min-height: 80px;
    z-index: 1;
}

.single_image_upload .img img{
    display: block;
    width: 100%;
    height: auto;
}

.single_image_upload .img i{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 50px;
}

.single_image_upload.has-image .img{
    background-color: transparent;
}

.single_image_upload .delete,
.single_image_upload .crop{
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 50;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    padding: 5px;
    background-color: rgba(255,255,255,0.7);
    color: #000000;
}

.single_image_upload .crop{
    right: 39px;
}

#crop_form img{
    max-width: 1000px;
}

.crop_image_submit{
    margin-top: 15px;
    width: 100%;
}

.single_image_upload.has-image:hover .delete,
.single_image_upload.has-image:hover .crop{
    display: block;
}

.single_image_upload.has-image .img i{
    display: none;
}

.multi_image_upload{

}

.multi_image_upload .uploaded-img{
    display: block;
    float: left;
    width: 180px;
    height: 180px;
    position: relative;
    margin-right: 15px;
    margin-bottom: 15px;
}

.multi_image_upload .uploaded-img img{
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
}

.multi_image_upload .uploaded-img .delete, 
.multi_image_upload .uploaded-img .crop{
    display: none;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 50;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
    padding: 5px;
    background-color: rgba(255,255,255,0.7);
    color: #000000;
}

.multi_image_upload .uploaded-img .crop{
    right: 39px;
}

.multi_image_upload .uploaded-img:hover .delete, 
.multi_image_upload .uploaded-img:hover .crop{
    display: block;
}

.multi_image_upload .uploader-new-image{
    display: block;
    float: left;
    position: relative;
    width: 180px;
    height: 180px;
    border: 1px solid #ccc;
    overflow: hidden;
}

.multi_image_upload input[type=file]{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-appearance: none;
    width: 1000%;
    height: 100%;
    z-index: 1;
}

.multi_image_upload .plus{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    z-index: 0;  
}




.category-header-uploader{
    margin-bottom: 20px;
}

.category-header-uploader .single_image_upload:not(.has-image) .img{
    min-height: 300px;
}

.category-image-uploader{
    width: 400px;
    height: 400px;
    margin-bottom: 20px;
}

.category-image-uploader .single_image_upload .img{
    width: 400px;
    height: 400px;
}




.uploader-new-file{
    display: block;
    position: relative;
    border: 1px solid #aaa;
    background-color: #eee;
    height: 40px;
    overflow: hidden;
}

.uploader-new-file label{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 0;
}

.uploader-new-file input{
    position: absolute;
    top: -10000px;
    left: -10000px;
    width: 20000px;
    height: 20000px;
    cursor: pointer;
    background-color: transparent;
    z-index: 1;
}

.uploader-file-list{
    margin-top: 15px;
}

.uploader-file-list .uploaded-file{
    border: solid #ccc;
    border-width: 0 1px 1px 1px;
    padding: 10px 10px 5px 10px;
    position: relative;
    background-color: #fff;
    line-height: 1em;
}

.uploader-file-list .uploaded-file .delete{
    display: none;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
}

.uploader-file-list .uploaded-file a{
    display: inline-block;
    max-width: 85%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #555;
}

.uploader-file-list .uploaded-file:hover{
    background-color: #ebebeb;
}

.uploader-file-list .uploaded-file:hover .delete{
    display: block;
}

.uploader-file-list .uploaded-file:first-child{
    border-width: 1px 1px 1px 1px;
}