dd.attribute-data.attribute-data–active-storage {

display: flex;
flex-wrap: wrap;

} .attachments-listing {

width: 20rem;
margin-right: 1rem;
margin-bottom: 1rem;

} .direct-upload {

display: inline-block;
position: relative;
padding: 7px 14px;
margin: 0 3px 3px 0;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
font-size: 11px;
line-height: 13px;
min-width: 100%;

}

.direct-upload–pending {

opacity: 0.6;

}

.direct-upload__progress {

position: absolute;
top: 0;
left: 0;
bottom: 0;
opacity: 0.2;
background: #0076ff;
transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
transform: translate3d(0, 0, 0);

} .direct-upload.direct-upload–complete{

.direct-upload__progress{
  transition: background 0.5s ease;
  background: #00ffa3;
}

}

.direct-upload–complete .direct-upload__progress {

opacity: 0.4;

}

.direct-upload–error {

border-color: red;

}

input[data-direct-upload-url] {

display: none;

}

// view edit .active__storage__admin > .field-unit__field {

.field-unit__field__picture{
  display: flex;
  width: 220%;
  flex-wrap: wrap;
  .attachments-listing{
    width: 10rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
  }
}

} .active__storage__admin > .field-unit__field .field-unit__field__picture .attachments-listing {

width: 10rem;
margin-right: 1rem;
margin-bottom: 1rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 160px;

} .active__storage__admin > .fileinput {

min-width: 300px;

}

// upload file …

.button_to_upload_files{

position: inherit;

width: 100%; min-height: 100px; padding: 2rem; } .btn-file.btn-file-admin{

position: inherit;
overflow: hidden;
vertical-align: middle;

} .fileinput .thumbnail.thumbnail-admin{

cursor: pointer;
width: 250px;

}