.field-responsiveimage .upload-object {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;position:relative;outline:none;overflow:hidden;display:inline-block;vertical-align:top}
.field-responsiveimage .upload-object img {width:100%;height:100%}
.field-responsiveimage .upload-object .icon-container {display:table;opacity:.6}
.field-responsiveimage .upload-object .icon-container i {color:#95a5a6;display:inline-block}
.field-responsiveimage .upload-object .icon-container div {display:table-cell;text-align:center;vertical-align:middle}
.field-responsiveimage .upload-object .icon-container.image >div.icon-wrapper {display:none}
.field-responsiveimage .upload-object h4 {font-size:13px;color:#2A3E51;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:150%;margin:15px 0 5px 0;padding-right:0;-webkit-transition:padding 0.1s;transition:padding 0.1s;position:relative}
.field-responsiveimage .upload-object h4 a {position:absolute;right:0;top:0;display:none;font-weight:400}
.field-responsiveimage .upload-object p.size {font-size:12px;color:#95a5a6}
.field-responsiveimage .upload-object p.size strong {font-weight:400}
.field-responsiveimage .upload-object .meta .drag-handle {position:absolute;bottom:0;right:0;cursor:move;display:block}
.field-responsiveimage .upload-object .info h4 a,
.field-responsiveimage .upload-object .meta a.upload-remove-button,
.field-responsiveimage .upload-object .meta a.drag-handle {color:#2b3e50;display:none;font-size:13px;text-decoration:none}
.field-responsiveimage .upload-object .icon-container {position:relative}
.field-responsiveimage .upload-object .icon-container:after {background-image:url('../../../../../../../modules/system/assets/ui/images/loader-transparent.svg');position:absolute;content:' ';width:40px;height:40px;left:50%;top:50%;margin-top:-20px;margin-left:-20px;display:block;background-size:40px 40px;background-position:50% 50%;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}
.field-responsiveimage .upload-object.is-success .icon-container {opacity:1}
.field-responsiveimage .upload-object.is-success .icon-container:after {opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}
.field-responsiveimage .upload-object.is-error .icon-container:after {content:"";background:none;font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;content:"\f071";-webkit-animation:none;animation:none;font-size:40px;color:#ab2a1c;margin-top:-20px;margin-left:-20px;text-shadow:2px 2px 0 #fff}
.field-responsiveimage .upload-object.is-loading .icon-container {opacity:.6}
.field-responsiveimage .upload-object.is-loading .icon-container:after {opacity:1;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}
.field-responsiveimage .upload-object.is-success {cursor:pointer}
.field-responsiveimage .upload-object.is-success .progress-bar {opacity:0;-webkit-transition:opacity 0.3s ease;transition:opacity 0.3s ease}
.field-responsiveimage .upload-object.is-success:hover h4 a,
.field-responsiveimage .upload-object.is-success:hover .meta .upload-remove-button,
.field-responsiveimage .upload-object.is-success:hover .meta .drag-handle {display:block}
.field-responsiveimage .upload-object.is-error {cursor:pointer}
.field-responsiveimage .upload-object.is-error .icon-container {opacity:1}
.field-responsiveimage .upload-object.is-error .icon-container >img,
.field-responsiveimage .upload-object.is-error .icon-container >i {opacity:.5}
.field-responsiveimage .upload-object.is-error .info h4 {color:#ab2a1c}
.field-responsiveimage .upload-object.is-error .info h4 a {display:none}
.field-responsiveimage .upload-object.is-error .meta {display:none}
.field-responsiveimage.is-sortable {position:relative}
.field-responsiveimage.is-sortable .upload-placeholder {position:relative;border:1px dotted #e0e0e0 !important}
.field-responsiveimage.is-sortable .upload-object.dragged {position:absolute;opacity:0.5;filter:alpha(opacity=50);z-index:2000}
.field-responsiveimage.is-sortable .upload-object.dragged .uploader-toolbar {display:none}
.field-responsiveimage.is-preview .upload-button,
.field-responsiveimage.is-preview .upload-remove-button,
.field-responsiveimage.is-preview .meta a.drag-handle {display:none !important}
@media (max-width:1024px) {.field-responsiveimage .upload-object.is-success h4 a,.field-responsiveimage .upload-object.is-success .meta .upload-remove-button,.field-responsiveimage .upload-object.is-success .meta .drag-handle {display:block !important }}
.fileupload-config-form .fileupload-url-button {padding-left:0}
.fileupload-config-form .fileupload-url-button >i {color:#666}
.fileupload-config-form .file-upload-modal-image-header {background-color:#FEFEFE;background-image:-webkit-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb),-webkit-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb);background-image:-moz-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb),-moz-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb);background-image:-o-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb),-o-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb);background-image:-ms-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb),-ms-linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb);background-image:linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb),linear-gradient(45deg,#cbcbcb 25%,transparent 25%,transparent 75%,#cbcbcb 75%,#cbcbcb);-webkit-background-size:20px 20px;-moz-background-size:20px 20px;background-size:20px 20px;background-position:0 0,10px 10px}
.fileupload-config-form .file-upload-modal-image-header,
.fileupload-config-form .file-upload-modal-image-header img {border-top-right-radius:2px;border-top-left-radius:2px}
.fileupload-config-form .file-upload-modal-image-header .close {position:absolute;top:20px;right:20px;background:#BDC3C7;opacity:.7;height:24px;width:22px}
.fileupload-config-form .file-upload-modal-image-header .close:hover,
.fileupload-config-form .file-upload-modal-image-header .close:focus {opacity:.9}
.fileupload-config-form .file-upload-modal-image-header + .modal-body {padding-top:20px}
.field-responsiveimage.style-image-multi .upload-button,
.field-responsiveimage.style-image-multi .upload-object {margin:0 10px 10px 0}
.field-responsiveimage.style-image-multi .upload-button {display:block;border:2px dashed #BDC3C7;background-clip:content-box;background-color:#F9F9F9;position:relative;outline:none;float:left;width:76px;height:76px}
.field-responsiveimage.style-image-multi .upload-button .upload-button-icon {position:absolute;width:22px;height:22px;top:50%;left:50%;margin-top:-11px;margin-left:-11px}
.field-responsiveimage.style-image-multi .upload-button .upload-button-icon:before {text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:#BDC3C7}
.field-responsiveimage.style-image-multi .upload-button .upload-button-icon.large-icon {width:34px;height:34px;top:50%;left:50%;margin-top:-17px;margin-left:-17px}
.field-responsiveimage.style-image-multi .upload-button .upload-button-icon.large-icon:before {font-size:34px;height:24px;width:24px;line-height:24px}
.field-responsiveimage.style-image-multi .upload-button:hover {border:2px dashed #1F99DC}
.field-responsiveimage.style-image-multi .upload-button:hover .upload-button-icon:before {color:#1F99DC}
.field-responsiveimage.style-image-multi .upload-button:focus {border:2px dashed #1F99DC}
.field-responsiveimage.style-image-multi .upload-button:focus .upload-button-icon:before {color:#1F99DC}
.field-responsiveimage.style-image-multi .upload-files-container {margin-left:90px}
.field-responsiveimage.style-image-multi .upload-object {background:#fff;border:1px solid #ecf0f1;width:260px}
.field-responsiveimage.style-image-multi .upload-object .progress-bar {display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:3px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0}
.field-responsiveimage.style-image-multi .upload-object .progress-bar .upload-progress {float:left;width:0%;height:100%;line-height:5px;color:#fff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}
.field-responsiveimage.style-image-multi .upload-object .icon-container {border-right:1px solid #f6f8f9;float:left;display:inline-block;overflow:hidden;width:75px;height:75px}
.field-responsiveimage.style-image-multi .upload-object .icon-container i {font-size:35px}
.field-responsiveimage.style-image-multi .upload-object .icon-container.image img {border-bottom-left-radius:3px;border-top-left-radius:3px;width:auto}
.field-responsiveimage.style-image-multi .upload-object .info {margin-left:90px}
.field-responsiveimage.style-image-multi .upload-object .info h4 {padding-right:15px}
.field-responsiveimage.style-image-multi .upload-object .info h4 a {right:15px}
.field-responsiveimage.style-image-multi .upload-object .meta {position:absolute;bottom:0;left:0;right:0;margin:0 15px 0 90px}
.field-responsiveimage.style-image-multi .upload-object .meta a.drag-handle {bottom:15px}
.field-responsiveimage.style-image-multi .upload-object.upload-placeholder {height:75px;background-color:transparent}
.field-responsiveimage.style-image-multi .upload-object.upload-placeholder:after {opacity:0}
.field-responsiveimage.style-image-multi .upload-object:hover {background:#4da7e8 !important}
.field-responsiveimage.style-image-multi .upload-object:hover i,
.field-responsiveimage.style-image-multi .upload-object:hover p.size {color:#ecf0f1}
.field-responsiveimage.style-image-multi .upload-object:hover h4 {color:white}
.field-responsiveimage.style-image-multi .upload-object:hover .icon-container {border-right-color:#4da7e8 !important}
.field-responsiveimage.style-image-multi .upload-object:hover h4 {padding-right:35px}
.field-responsiveimage.style-image-multi.is-preview .upload-files-container {margin-left:0}
.form-sidebar .field-responsiveimage.style-image-multi .upload-files-container {margin-left:0}
.form-sidebar .field-responsiveimage.style-image-multi .upload-button {width:100%}
@media (max-width:1280px) {.field-responsiveimage.style-image-multi .upload-object {width:230px }}
@media (max-width:1024px) {.field-responsiveimage.style-image-multi .upload-button {width:100% }.field-responsiveimage.style-image-multi .upload-files-container {margin-left:0 }.field-responsiveimage.style-image-multi .upload-object {margin-right:0;display:block;width:auto }}
.field-responsiveimage.style-image-single.is-populated .upload-button {display:none}
.field-responsiveimage.style-image-single .upload-button {display:block;border:2px dashed #BDC3C7;background-clip:content-box;background-color:#F9F9F9;position:relative;outline:none;min-height:100px;min-width:100px}
.field-responsiveimage.style-image-single .upload-button .upload-button-icon {position:absolute;width:22px;height:22px;top:50%;left:50%;margin-top:-11px;margin-left:-11px}
.field-responsiveimage.style-image-single .upload-button .upload-button-icon:before {text-align:center;display:block;font-size:22px;height:22px;width:22px;line-height:22px;color:#BDC3C7}
.field-responsiveimage.style-image-single .upload-button .upload-button-icon.large-icon {width:34px;height:34px;top:50%;left:50%;margin-top:-17px;margin-left:-17px}
.field-responsiveimage.style-image-single .upload-button .upload-button-icon.large-icon:before {font-size:34px;height:24px;width:24px;line-height:24px}
.field-responsiveimage.style-image-single .upload-button:hover {border:2px dashed #1F99DC}
.field-responsiveimage.style-image-single .upload-button:hover .upload-button-icon:before {color:#1F99DC}
.field-responsiveimage.style-image-single .upload-button:focus {border:2px dashed #1F99DC}
.field-responsiveimage.style-image-single .upload-button:focus .upload-button-icon:before {color:#1F99DC}
.field-responsiveimage.style-image-single .upload-object {padding-bottom:66px}
.field-responsiveimage.style-image-single .upload-object .icon-container {border:1px solid #f6f8f9;background:rgba(255,255,255,0.5)}
.field-responsiveimage.style-image-single .upload-object .icon-container.image img {-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;max-width:100%;height:auto;min-height:100px;min-width:100px}
.field-responsiveimage.style-image-single .upload-object .progress-bar {display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:3px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0}
.field-responsiveimage.style-image-single .upload-object .progress-bar .upload-progress {float:left;width:0%;height:100%;line-height:5px;color:#fff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}
.field-responsiveimage.style-image-single .upload-object .info {position:absolute;left:0;right:0;bottom:0;height:66px}
.field-responsiveimage.style-image-single .upload-object .meta {position:absolute;bottom:65px;left:0;right:0;margin:0 15px}
.field-responsiveimage.style-image-single .upload-object:hover h4 {padding-right:20px}
@media (max-width:1024px) {.field-responsiveimage.style-image-single .upload-object h4 {padding-right:20px !important }}
.field-responsiveimage.style-file-multi .upload-button {margin-bottom:10px}
.field-responsiveimage.style-file-multi .upload-files-container {border:1px solid #eee;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border-bottom:none;display:none}
.field-responsiveimage.style-file-multi.is-populated .upload-files-container {display:block}
.field-responsiveimage.style-file-multi .upload-object {display:block;width:100%;border-bottom:1px solid #eee;padding-left:10px}
.field-responsiveimage.style-file-multi .upload-object:nth-child(even) {background-color:#f5f5f5}
.field-responsiveimage.style-file-multi .upload-object .icon-container {position:absolute;top:0;left:10px;width:15px;padding:11px 7px}
.field-responsiveimage.style-file-multi .upload-object .icon-container i {line-height:150%;font-size:15px}
.field-responsiveimage.style-file-multi .upload-object .icon-container img {display:none}
.field-responsiveimage.style-file-multi .upload-object .info {margin-left:35px;margin-right:15%}
.field-responsiveimage.style-file-multi .upload-object .info h4,
.field-responsiveimage.style-file-multi .upload-object .info p {margin:0;padding:11px 0;font-size:12px;font-weight:normal;line-height:150%;color:#666}
.field-responsiveimage.style-file-multi .upload-object .info h4 {padding-right:15px}
.field-responsiveimage.style-file-multi .upload-object .info h4 a {padding:10px 0;right:15px}
.field-responsiveimage.style-file-multi .upload-object .info p.size {position:absolute;top:0;right:0;width:15%;display:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-responsiveimage.style-file-multi .upload-object .progress-bar {display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:3px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;top:18px;left:0}
.field-responsiveimage.style-file-multi .upload-object .progress-bar .upload-progress {float:left;width:0%;height:100%;line-height:5px;color:#fff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}
.field-responsiveimage.style-file-multi .upload-object .meta {position:absolute;top:0;right:0;margin-right:15px;width:15%}
.field-responsiveimage.style-file-multi .upload-object .meta a.drag-handle {top:-2px;bottom:auto;line-height:150%;padding:10px 0}
.field-responsiveimage.style-file-multi .upload-object .icon-container:after {width:20px;height:20px;margin-top:-10px;margin-left:-10px;background-size:20px 20px}
.field-responsiveimage.style-file-multi .upload-object.is-error .icon-container:after {font-size:20px}
.field-responsiveimage.style-file-multi .upload-object.is-success .info p.size {display:block}
.field-responsiveimage.style-file-multi .upload-object.upload-placeholder {height:35px;background-color:transparent}
.field-responsiveimage.style-file-multi .upload-object.upload-placeholder:after {opacity:0}
.field-responsiveimage.style-file-multi .upload-object:hover {background:#4da7e8 !important}
.field-responsiveimage.style-file-multi .upload-object:hover i,
.field-responsiveimage.style-file-multi .upload-object:hover p.size {color:#ecf0f1}
.field-responsiveimage.style-file-multi .upload-object:hover h4 {color:white}
.field-responsiveimage.style-file-multi .upload-object:hover .icon-container {border-right-color:#4da7e8 !important}
.field-responsiveimage.style-file-multi .upload-object:hover h4 {padding-right:35px}
@media (max-width:1199px) {.field-responsiveimage.style-file-multi .info {margin-right:20% !important }.field-responsiveimage.style-file-multi .info p.size {width:20% !important }.field-responsiveimage.style-file-multi .meta {width:20% !important }}
@media (max-width:991px) {.field-responsiveimage.style-file-multi .upload-object h4 {padding-right:35px !important }.field-responsiveimage.style-file-multi .info {margin-right:25% !important }.field-responsiveimage.style-file-multi .info p.size {width:25% !important;padding-right:35px !important }.field-responsiveimage.style-file-multi .meta {width:25% !important }}
.field-responsiveimage.style-file-single {background-color:#fff;border:1px solid #d1d6d9;overflow:hidden;position:relative;padding-right:30px;border-radius:3px;-webkit-box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5)}
.field-responsiveimage.style-file-single .upload-button {position:absolute;top:50%;margin-top:-44px;height:88px;background:transparent;right:-2px;color:#595959}
.field-responsiveimage.style-file-single .upload-button i {font-size:14px}
.field-responsiveimage.style-file-single .upload-button:hover {color:#333}
.field-responsiveimage.style-file-single .upload-empty-message {padding:8px 0 8px 11px;font-size:14px}
.field-responsiveimage.style-file-single.is-populated .upload-empty-message {display:none}
.field-responsiveimage.style-file-single .upload-object {display:block;width:100%;padding:7px 0 9px 0}
.field-responsiveimage.style-file-single .upload-object .icon-container {position:absolute;top:0;left:0;width:15px;padding:0 5px;margin:8px 0 0 7px;text-align:center}
.field-responsiveimage.style-file-single .upload-object .icon-container i {line-height:150%;font-size:15px}
.field-responsiveimage.style-file-single .upload-object .icon-container img {display:none}
.field-responsiveimage.style-file-single .upload-object .info {margin-left:34px;margin-right:15%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field-responsiveimage.style-file-single .upload-object .info h4,
.field-responsiveimage.style-file-single .upload-object .info p {display:inline;margin:0;padding:0;font-size:13px;line-height:150%;color:#666}
.field-responsiveimage.style-file-single .upload-object .info p.size {font-weight:normal}
.field-responsiveimage.style-file-single .upload-object .info p.size:before {content:" - "}
.field-responsiveimage.style-file-single .upload-object .progress-bar {display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:3px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;top:50%;margin-top:-2px;right:5px}
.field-responsiveimage.style-file-single .upload-object .progress-bar .upload-progress {float:left;width:0%;height:100%;line-height:5px;color:#fff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease}
.field-responsiveimage.style-file-single .upload-object .meta {position:absolute;top:50%;margin-top:-44px;height:88px;right:0;width:15%}
.field-responsiveimage.style-file-single .upload-object .meta .upload-remove-button {position:absolute;top:50%;right:0;height:20px;margin-top:-10px;margin-right:10px;z-index:100}
.field-responsiveimage.style-file-single .upload-object .icon-container:after {width:20px;height:20px;margin-top:-10px;margin-left:-10px;background-size:20px 20px}
.field-responsiveimage.style-file-single .upload-object.is-error .icon-container:after {font-size:20px}

.field-responsiveimage {
    .vue-dropzone {
        display: none;
    }
    .preview-container {
        display: grid;
        grid-gap: 0.5rem;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        .cdz-preview {
            display: flex;
            position: relative;
            background: white;
            border: 1px solid rgba(0,0,0,0.2);
            div.details {
                padding: 1rem;
                flex: 1 0 0;
                min-width: 0;
                display: flex;
                justify-content: space-evenly;
                flex-direction: column;
                & > div {
                    font-size: 1.2rem;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                }
            }
            img {
                width: 15rem;
                height: 10rem;
                object-fit: cover;
            }
            div.cdz-progress {
                position: absolute;
                height: 5px;
                bottom: 0;
                width: 100%;
                display: flex;
                .dz-upload {
                    transition: width 0.2s;
                    background: hsl(200.9, 78.6%, 45.9%);
                }
            }
        }
    }
}