.module-gallery-wrap {position:relative;}
.module-gallery-wrap .loading-section.overlayed {position: absolute !important;}
.module-gallery-wrap .loading-section.overlayed .container {transform: translate(0%, 20%);}
.module-gallery-wrap .action-wrapper {margin-top: 24px; margin-bottom: 10px;}
.module-gallery-wrap p.single-heading-2 {padding-top: 0;}
.module-gallery-wrap .head {display: flex; justify-content: space-between;}
.module-gallery-wrap .head .search {width: 200px;}
.module-gallery-wrap hr {margin-top: 24px;}
.module-gallery-wrap .load-more, 
.module-gallery-wrap .load-all {margin-top: 24px; text-align: center; color: var(--donkerblauw);}
.module-gallery-wrap .load-more span,
.module-gallery-wrap .load-all span {text-decoration: underline;}
.module-gallery-wrap .load-more span:hover,
.module-gallery-wrap .load-all span:hover {text-decoration: none;}
.module-gallery-wrap .load-all {font-size: 12px;margin-top: 12px;}


.module-gallery-wrap .upload-section .single-heading-3 { margin: 0; padding: 0; }
.module-gallery-wrap .upload-section { margin-bottom: 24px;padding-bottom: 24px;border-bottom: solid #bfbfbf 1px; }
.module-gallery-wrap .upload-section ul { margin-top: 12px; }
.module-gallery-wrap .upload-section li { margin: 0; list-style-type: none; }

.module-gallery {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; gap: 10px;}
.module-gallery .gallery-item {text-align: center; background: #f5f5f5; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; position: relative;}
.module-gallery .gallery-item.folder:hover {background-color: #f0f0f0;}
.module-gallery .gallery-item .gallery-item-icon {font-size: 52px; position: relative; padding-top: 80%; overflow: hidden;}
.module-gallery .gallery-item .gallery-item-icon img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: .125s all ease-in-out;}
.module-gallery .gallery-item .gallery-item-icon img:hover {transform: scale(1.1);}
.module-gallery .gallery-item .gallery-item-icon i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.module-gallery .gallery-item .gallery-item-icon.with-icon:before {font-family: "Font Awesome 5 Pro"; content: '\f15b'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.module-gallery .gallery-item .gallery-item-icon.with-icon.image:before {content: '\f03e';}
.module-gallery .gallery-item .gallery-item-icon.with-icon.pdf:before {content: '\f1c1';}
.module-gallery .gallery-item .gallery-item-icon.with-icon.word:before {content: '\f1c2';}
.module-gallery .gallery-item .gallery-item-icon.with-icon.excel:before {content: '\f1c3';}
.module-gallery .gallery-item .gallery-item-icon.with-icon.file:before {content: '\f15b';}
.module-gallery .gallery-item .gallery-item-contents {padding: 10px;}
.module-gallery .gallery-item .gallery-item-contents p {padding: 0 !important; text-align: center; word-break: break-word; font-size: 13px; line-height: 20px; margin-top: 0;}
.module-gallery .gallery-item .selectable {position: absolute; top: 5px; left: 5px; opacity: 0; transition: all 250ms ease; width: 20px; height: 20px; text-align: center; z-index: 2;}
.module-gallery .gallery-item:hover .selectable {opacity: 1;}
.module-gallery .gallery-item .selectable:before {font-family: "Font Awesome 5 Pro"; content: '\f058'; font-weight: 400; font-size: 20px; color: var(--grey)}
.module-gallery .gallery-item .selectable.selected:before {font-weight: 900; color: var(--cyaan)}
.module-gallery .gallery-item .selectable.selected {opacity: 1;}
.module-gallery-wrap .action-wrapper .bulk-actions { justify-content: center; display: flex;flex-direction: row; align-items: center; gap: 10px; margin-bottom: 24px; margin-top: 10px; }
.module-gallery-wrap .action-wrapper .bulk-actions .buttons { cursor: pointer; display: flex; margin-top: 0; gap: 10px;}
.module-gallery-wrap .action-wrapper .bulk-actions .buttons .button span i{ margin-right: 10px;}
.module-gallery-wrap .errors ul {margin-top: 0;}


.module-gallery-background {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); width: 100vw; height: 100vh; z-index: 50;}
.module-gallery-wrap.full-screen .action-wrapper {height: 84%; overflow-y: auto;}
.module-gallery-wrap.full-screen {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 20px; z-index: 55; max-height: calc(100% - 40px); max-width: calc(100% - 40px); width: 1200px; height: 910px;}
.module-gallery-wrap.full-screen module-gallery-item-wrapper {overflow-y: auto; height: 100%; max-height: 100%;}
.module-gallary-wrapper .module-preview .buttons {display: flex; align-items: center; gap: 10px; margin-top: 0 !important;}
.module-gallery-wrapper .module-preview .buttons .button {display: flex;align-items: center;}
.module-gallery-wrapper .module-preview .buttons span {display: flex; align-items: center;}
.module-gallary-wrapper .module-preview .imageholder {margin-top: 20px;}

.file-uploader-wrapper {margin-top: 10px;}
.file-uploader {display: flex; flex-wrap: wrap; gap: 10px;}
.file-uploader .upload {position: relative;flex-basis: 20%;}
.file-uploader .upload input {display: none;}
.file-uploader .upload input:disabled + label {cursor: default;}
.file-uploader .upload input:disabled + label:after {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.05);}
.file-uploader .upload .dropzone {border: dashed rgba(0, 0, 0, 0.1019607843) 2px; padding: 10px 24px; border-radius: 5px; cursor: pointer; display: inline-block; position: relative;}
.file-uploader .upload .dropzone * {pointer-events: none;}
.file-uploader .upload .dropzone:hover {border-color: rgba(0, 0, 0, 0.1647058824);}
.file-uploader .upload .dropzone.hovered {background-color: #fff; border-color: #000;}
.file-uploader .upload .dropzone.hovered * {color: #FFFFFF;}
.file-uploader .upload .file {position: relative; padding-top: 100%; width: 100%; background-color: #000;}
.file-uploader .upload .file img {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.file-uploader .upload .file .text {padding: 50% 10px 10px 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.file-uploader .upload .file .text:before {content: "\f15b"; font-family: "Font Awesome 6 Pro"; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); font-weight: 900; font-size: 30px; color: red;}
.file-uploader .upload .file .text p {padding: 0 !important; text-align: center; word-break: break-word; font-size: 13px; line-height: 20px;}
.file-uploader .upload .file .remove-file {position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; text-align: center; line-height: 20px; background-color: red; border-radius: 50%; color: #000; cursor: pointer;}
.file-uploader .upload .file .remove-file:hover {background-color: orange;}
.file-uploader .upload.new-upload {flex-basis: 100%;}

@media (max-width: 1400px) {
    .module-gallery {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
}

@media (max-width: 1200px) {
    .module-gallery {grid-template-columns: 1fr 1fr 1fr 1fr;}
}

@media (max-width: 768px) {
    .module-gallery {grid-template-columns: 1fr 1fr 1fr;}
}

@media (max-width: 576px) {
    .module-gallery {grid-template-columns: 1fr 1fr;}
}