.field_wrapper[data-type*='file']:not([data-view]):not(data-read-only) > .Field > .traxxus_field,
.field_wrapper[data-type*='image']:not([data-view]):not(data-read-only) > .Field > .traxxus_field{
    display: grid;
    grid-template-areas:
        "click"
        "accepts"
        "dz"
        "dz-msg";
}
.field_wrapper[data-type*='file'][data-disabled]:hover,
.field_wrapper[data-type*='image'][data-disabled]:hover{
    cursor: not-allowed;
}
.field_wrapper[data-type*='file'][data-disabled]  *,
.field_wrapper[data-type*='image'][data-disabled]  *{
    pointer-events: none;
    color: var(--theme-font-4);
}
.field_wrapper[data-type*='file']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *,
.field_wrapper[data-type*='image']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *{
    display: grid;
    align-items: center;
    justify-content: center;
}
.field_wrapper[data-type*='file']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(1),
.field_wrapper[data-type*='image']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(1){
    grid-area: click;
}
.field_wrapper[data-type*='file']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(2),
.field_wrapper[data-type*='image']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(2){
    grid-area: accepts;
}
.field_wrapper[data-type*='file']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(3),
.field_wrapper[data-type*='image']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(3){
    grid-area: dz;
}
.field_wrapper[data-type*='file']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(4),
.field_wrapper[data-type*='image']:not([data-view]):not([data-read-only]) > .Field > .traxxus_field > *:nth-child(4){
    grid-area: dz-msg;
}
.field_wrapper[data-type*='file'][data-view],
.field_wrapper[data-type*='image'][data-view]{
    width: 100%;
}

.traxxus_field[data-type*='-fs']:not([data-view]) .dz-preview[data-delete-file]:before {
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background-color: var(--theme-gradient-2);
    opacity: .9;
    border-radius: var(--theme-border-radius);
}
.traxxus_field[data-type*='-fs']:not([data-view]) .dz-preview[data-delete-file] .dz-remove:before {
    content: var(--FA-icon-undo);
}
.traxxus_field[data-type*='file']:not([data-view]) .dz-preview[data-delete-file]:before,
.traxxus_field[data-type*='image']:not([data-view]) .dz-preview[data-delete-file]:before{
    content: 'File Removed';
    background-color: black;
    height: 100%;
    width: 100%;
    display: flex;
    /*! opacity: 1; */
    z-index: 2;
}
.traxxus_field[data-type*='file']:not([data-view]) .dz-preview[data-delete-file]:before,
.traxxus_field[data-type*='image']:not([data-view]) .dz-preview[data-delete-file]:before{
    content: 'Image Removed';
}

.Field.value[data-type*='file'] .img-btn,
.Field.value[data-type*='image'] .img-btn{
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 20px 1fr;
    align-items: center;
    text-align: left;
}
.Field.value[data-type*='file'] .img-btn + .img-btn {
    margin-top: 10px;
}
.Field.value[data-type*='file'] .img-btn.missing:before {
    content: var(--FA-icon-file-times);
    color: var(--theme-error);
}
.Field.value[data-type*='file'],
.Field.value[data-type*='image']{
    grid-template-areas:
        "required fieldHistory"
        "fieldEl  fieldEl ";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
}

.Field:not(.value)[data-type*='file'],
.Field:not(.value)[data-type*='image']{
    width: 100%;
}
.Field.value[data-type*='file'] > .traxxus_field > span.rich,
.Field.value[data-type*='image'] > .traxxus_field > span.rich {
    display: inline-grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr) );
    width: 100%;
}
.Field.value[data-type*='file'] > .traxxus_field > span.rich > div,
.Field.value[data-type*='image'] > .traxxus_field > span.rich > div{
    position: relative;
    display: grid;
    height: min-content;
    grid-template-areas:
        "content"
        "link";
    grid-template-columns: 1fr;
    box-shadow: var(--tertiary-box-shadow);
    margin: var(--std-unit-x1);
    border-radius: var(--theme-border-radius);
    transition: var(--fast-transition);
    page-break-inside: avoid !important;
}
.Field.value[data-type*='file'] > .traxxus_field > span.rich > div:hover,
.Field.value[data-type*='image'] > .traxxus_field > span.rich > div:hover{
    background-color: var(--color-translucent-black-lvl-0);
}

.Field.value[data-type*='file'] > .traxxus_field > span.rich > div > *,
.Field.value[data-type*='image'] > .traxxus_field > span.rich > div > *{
    grid-area: content;
    display: inline-grid;
    align-items: center;
    justify-content: center;
    padding: var(--std-unit-x2);
}
.Field.value[data-type*='file'] > .traxxus_field > span.rich > div > div:last-of-type,
.Field.value[data-type*='image'] > .traxxus_field > span.rich > div > div:last-of-type{
    grid-area: link;
    display: flex;
    align-items: center;
    justify-content: center;
}


.field_wrapper[data-type*='file'] .dz,
.field_wrapper[data-type*='image'] .dz {

}
.field_wrapper[data-type*='file'] .dz-preview > .dz-details > div > span,
.field_wrapper[data-type*='image'] .dz-preview > .dz-details > div > span {
    background-color: unset;
}


/* styles for file-type icons */

.img-btn[data-mime-type="application/x-freearc"]:before,
.img-btn[data-mime-type="application/x-7z-compressed"]:before,
.img-btn[data-mime-type="application/x-rar-compressed"]:before,
.img-btn[data-mime-type="application/x-gtar"]:before,
.img-btn[data-mime-type="application/zip"]:before {
    content: var(--FA-icon-file-archive);
}

.img-btn[data-mime-type="video/x-flv"]:before,
.img-btn[data-mime-type="video/mp4"]:before,
.img-btn[data-mime-type="application/x-mpegURL"]:before,
.img-btn[data-mime-type="video/MP2T"]:before,
.img-btn[data-mime-type="video/3gpp"]:before,
.img-btn[data-mime-type="video/quicktime"]:before,
.img-btn[data-mime-type="video/x-msvideo"]:before,
.img-btn[data-mime-type="video/x-ms-wmv"]:before,
.img-btn[data-mime-type="video/webm"]:before {
    content: var(--FA-icon-file-video);
}

.img-btn[data-mime-type="image/apng"]:before,
.img-btn[data-mime-type="image/bmp"]:before,
.img-btn[data-mime-type="image/gif"]:before,
.img-btn[data-mime-type="image/x-icon"]:before,
.img-btn[data-mime-type="image/jpeg"]:before,
.img-btn[data-mime-type="image/png"]:before,
.img-btn[data-mime-type="image/svg+xml"]:before,
.img-btn[data-mime-type="image/tiff"]:before,
.img-btn[data-mime-type="image/webp"]:before {
    content: var(--FA-icon-file-image);
}

.img-btn[data-mime-type="audio/wave"]:before,
.img-btn[data-mime-type="audio/wav"]:before,
.img-btn[data-mime-type="audio/x-wav"]:before,
.img-btn[data-mime-type="audio/x-pn-wav"]:before,
.img-btn[data-mime-type="audio/webm"]:before,
.img-btn[data-mime-type="audio/ogg"]:before {
    content: var(--FA-icon-file-music);
}

.img-btn[data-mime-type="application/pdf"]:before {
    content: var(--FA-icon-file-pdf);
}

.img-btn[data-mime-type="application/msword"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.wordprocessingml.document"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.wordprocessingml.template"]:before,
.img-btn[data-mime-type="application/vnd.ms-word.document.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-word.template.macroEnabled.12"]:before {
    content: var(--FA-icon-file-word);
}

.img-btn[data-mime-type="application/vnd.ms-excel"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.spreadsheetml.template"]:before,
.img-btn[data-mime-type="application/vnd.ms-excel.sheet.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-excel.template.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-excel.addin.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-excel.sheet.binary.macroEnabled.12"]:before {
    content: var(--FA-icon-file-excel);
}
.img-btn[data-mime-type="application/vnd.ms-powerpoint"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.presentationml.presentation"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.presentationml.template"]:before,
.img-btn[data-mime-type="application/vnd.openxmlformats-officedocument.presentationml.slideshow"]:before,
.img-btn[data-mime-type="application/vnd.ms-powerpoint.addin.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-powerpoint.presentation.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-powerpoint.template.macroEnabled.12"]:before,
.img-btn[data-mime-type="application/vnd.ms-powerpoint.slideshow.macroEnabled.12"]:before {
    content: var(--FA-icon-file-powerpoint);
}