/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */
.dropzone, .dropzone * {
  box-sizing: border-box; }

.dropzone {
  position: relative; }
  .dropzone .dz-preview {
    position: relative;
    display: inline-block;
    width: 120px;
    margin: 0.5em; }
    .dropzone .dz-preview .dz-progress {
      display: block;
      height: 15px;
      border: 1px solid #aaa; }
      .dropzone .dz-preview .dz-progress .dz-upload {
        display: block;
        height: 100%;
        width: 0;
        background: green; }
    .dropzone .dz-preview .dz-error-message {
      color: red;
      display: none; }
    .dropzone .dz-preview.dz-error .dz-error-message, .dropzone .dz-preview.dz-error .dz-error-mark {
      display: block; }
    .dropzone .dz-preview.dz-success .dz-success-mark {
      display: block; }
    .dropzone .dz-preview .dz-error-mark, .dropzone .dz-preview .dz-success-mark {
   /*   position: absolute;*/
      display: none;
  /*    left: 30px;
      top: 30px;
      width: 54px;
      height: 58px;
      left: 50%;
      margin-left: -27px; */}

/* MY CUSTOM CODE */
/*------------------------------------------------------------*/
.dropzone {
       border: gray solid thin;
       border-radius: 5px;
       background-color: #eeeeee;
       padding-left: 5px;
}

.dz-default.dz-message {
      cursor: pointer;
      color: #337ab7;
      height: 20px;
}


.dz-preview.dz-file-preview.dz-processing.dz-success.dz-complete,  .dz-preview.dz-image-preview.dz-processing.dz-success.dz-complete{
    height: 55px;
    width: inherit;
    display: block;
    padding-bottom: 5px;
}

.dz-preview.dz-file-preview.dz-processing, .dz-preview.dz-image-preview.dz-processing {
    height: 55px;
    width: inherit;
    display: block;
    padding-bottom: 5px;
}

.dz-preview.dz-file-preview.dz-error.dz-complete, .dz-preview.dz-image-preview.dz-error.dz-complete {
    height: 55px;
    width: inherit;
    display: block;
    padding-bottom: 5px;
}

.dz-image {
    display: none;
}

.dz-details {
    height: inherit;
    width: 100%;
    height: 20px;  
    margin-bottom: 5px; 
}

.dz-preview.dz-file-preview.dz-error.dz-complete .dz-details, .dz-preview.dz-image-preview.dz-error.dz-complete .dz-details {
    display: none;
    height: inherit;
    width: 100%;
    height: 20px;  
    margin-bottom: 5px; 
}


.dz-size {
    float: left;
    width: 25%;
}

.dz-filename {
    float: left;
    width: 75%;
}

.dz-filename span {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    overflow: hidden
    
}

.dz-preview.dz-file-preview.dz-processing.dz-success.dz-complete .dz-progress, .dz-preview.dz-image-preview.dz-processing.dz-success.dz-complete .dz-progress  {
    float: left;
    width: 50%;
    margin-top: 3px;
}

.dz-preview.dz-file-preview.dz-processing .dz-progress, .dz-preview.dz-image-preview.dz-processing .dz-progress  {
    float: left;
    width: 50%;
    margin-top: 3px;
}


.dz-preview.dz-file-preview.dz-error.dz-complete .dz-progress, .dz-preview.dz-image-preview.dz-error.dz-complete .dz-progress {
    display: none;
}

.dz-preview.dz-file-preview.dz-error.dz-complete .dz-error-message, .dz-preview.dz-image-preview.dz-error.dz-complete .dz-error-message {
    width: 90%;
    margin: 0px 0px -20px 0px;
    color: darkblue;
}

/*.dz-preview.dz-file-preview.dz-error.dz-complete .dz-error-message > span {
    width: 100%;
}*/

a.dz-remove {
    float: left;
    padding-left: 7px;
    margin-bottom: 7px;
    padding-bottom: 7px;
    width: 35%;
    box-sizing:border-box;
}

.dz-preview.dz-file-preview.dz-error.dz-complete a.dz-remove, .dz-preview.dz-image-preview.dz-error.dz-complete a.dz-remove {
    display: none;
}


.dz-success-mark > svg{
    float: right;
    position: relative;
    height: 20px;
    width: 20px;
    /*margin: 0px 10px 15px 0px;*/
    /*padding-bottom: 10px;*/
    background-color: green;
    border-radius: 20px;
    display: none;
}

.dropzone .dz-preview .dz-success-mark svg g{
    background-color: green;
    display: none;
}

.dz-preview.dz-file-preview.dz-error.dz-complete svg g, .dz-preview.dz-image-preview.dz-error.dz-complete svg g{
    background-color: red;
    display: none;
}

.dz-error-mark > svg{
    display: none;
    float: right;
    position: relative;
    height: 20px;
    width: 20px;
    /*margin: 0px 10px 15px 0px;*/
    /*padding-bottom: 10px;*/
    background-color: red;
    border-radius: 20px;
}

.dz-preview.dz-file-preview.dropzoneRepeatedFile, .dz-preview.dz-image-preview.dropzoneRepeatedFile {
    width: 90%;
    color: darkblue;
}

.rightOK {
    float: right;
    color: #337ab7;
}