.gallery-item { position: relative; border-bottom:1px solid var(--mag-element-border-color); }
.gallery-item-inner, .gallery-item { height:110px; }
.gallery-item-inner, .gallery-header { position: relative; }
.gallery-header { padding: 6px 0; padding-top:10px; }
.gallery-item .gallery-header .time { float:right; }
.gallery-item .thumb { max-height: 80px; }
.gallery-item .gallery-header { padding-left: 120px; padding-right: 15px; word-break: break-all; white-space: normal; }
.gallery-item .gallery-image { position: absolute; padding: 0px; top: 10px; background-color: var(--mag-page-bg-color); border: 4px solid var(--mag-element-border-muted-color);}
.gallery-item .gallery-image img { border-radius: var(--mag-border-radius); }
.gallery-item-desc { margin:5px 10px 5px 0; }

.gallery-item .inline-actions { display: none; position:absolute; bottom:10px; left:120px; }
    .gallery-item .inline-actions .actionLink, .gallery-item .inline-actions .disbled-actionLink { margin-right:10px; font-size:10px; white-space:nowrap; }
    .gallery-item .inline-actions .disbled-actionLink { color: var(--mag-base-400); }
.thumbnail-mode:after { clear:both; content:""; display:block;}
.thumbnail-mode .gallery-header { display: none; }
.thumbnail-mode .gallery-item, .thumbnail-mode .gallery-item-inner {  display:inline-block; border-bottom:0; }
ul.data-list.thumbnail-mode { margin-right: -1%; margin-left: -1%; }
.thumbnail-mode li { float: left; margin-right: 1%; margin-left: 1%; }
.thumbnail-mode .gallery-image { position: relative; display: block; }
.uploader { display: inline-block; }
.panel-top-border { border-bottom:1px solid #dcdcdc;  margin-bottom:5px; }

.thumbnail-mode .inline-actions { z-index:1000; left:3px; bottom:17px; background-color:var(--mag-page-bg-300); width:85px; height:20px; opacity:0.9; }
.thumbnail-mode .action-move-up, .thumbnail-mode .action-move-down { display: none !important; }
.thumbnail-video-square { height: 138px !important; }
.thumbnail-video-rect { height: 205px !important; }

.thumbnail-mode .gallery-item .action-delete {float: right;}
.thumbnail-mode .gallery-item .action-edit {float: left;margin-left: 5px;}
.thumbnail-mode .gallery-item .inline-actions {margin-bottom:7px;}
.thumbnail-mode .edit-action-text, .thumbnail-mode .delete-action-text {display: none !important;}
.thumbnail-mode .action-delete-icon-list, .thumbnail-mode .action-edit-icon-list {display: none !important;}
.thumbnail-mode .action-delete-icon-thumbnail, .thumbnail-mode .action-edit-icon-thumbnail{display: block !important; top:4px;}

.gallery-assets-container.flexbox-container.flex-row { justify-content: flex-start; margin-right: calc((100% - 4*(22.5%))/-8); margin-left: calc((100% - 4*(22.5%))/-8); }
.gallery-assets-container .flexbox-item { width: 22.5%; margin-right: calc((100% - 4*(22.5%))/8); margin-left: calc((100% - 4*(22.5%))/8); }
.gallery-assets-container .flexbox-item:hover img { transform: none; }

.gallery-assets-container.flexbox-container::after { height: 0; width: 31.5%; content: ""; }

#relatedListBody #rl-Photo_Gallery .horizontalLine { margin-top: 0; }

@media(max-width:992px) { .gallery-assets-container .flexbox-item { width: 30%; }
}
@media(max-width:767px) {
    .thumbnail-mode .inline-actions {display: block;}
    .gallery-assets-container .flexbox-item { width: 45%; }
}
@media (max-width: 576px) {
    .flexbox-item { width: 100%; }
    .gallery-assets-container.flexbox-container.flex-row { margin-right: 0; margin-left: 0; }
}
@media(max-width:450px) {
    .data-list-container:not(.thumbnail-mode) .gallery-item-inner, .data-list-container:not(.thumbnail-mode) .gallery-item { height: 150px; }
    .data-list-container:not(.thumbnail-mode) .gallery-item .inline-actions { left: 0; }
    ul.data-list.thumbnail-mode { margin-right: -2%; margin-left: -2%; }
    .thumbnail-mode li { float: left; margin-right: 2%; margin-left: 2%; }
}
@media(max-width:415px) {
    .sys-photo-gallery .blockHeader .btns-block .btn { width: 100%; max-width: 100%; margin-bottom: 15px; }
    .sys-photo-gallery .blockHeader .btns-block .uploader { width: 100%; max-width: 100%; }
    .sys-photo-gallery .flexbox-container.justify-between { display: block; }
}