.fm-frame-container {
    position: fixed;
    z-index: 45;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    backdrop-filter: blur(2px);
}

.fm-frame-container .fm-frame-content {
    background-color: #fff;
    width: 100%;
    height: 100%;
    border: 0;
    top: 0;
    right: 0;
}

.fm-frame-container .fm-frame-content,
.fm-frame-container .fm-frame-loading {
    display: block;
    left: 0;
    top: 100px;
    position: absolute;
    border: 2px solid #33404D;
}

.fm-frame-container .fm-frame-loading {
    margin: 10px;
}

.fm-frame-container .fm-frame-close {
    display: block;
    position: absolute;
    top: 60px;
    right: 25px;
    z-index: 1000;
}

.fm-frame-container .fm-frame-close span.glyphicon {
    vertical-align: text-top;
}

:root {
    --gallery-gap: 1.5em;
    --gallery-items-per-row: 1;
}

.filemanager-fileGallery {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filemanager-fileGallery__files {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gallery-gap);
}

.filemanager-fileGallery__buttons {
    margin-top: 1rem;
}

/*
 * Width of each item = Wi
 * Container width = Wc
 * Gap between items = g
 * Items per row in the gallery = n
 * Total space coverd by gaps = G
 * Available space for items per row = Wa
 *
 * G = g * (n - 1)
 * Wa = Wc - G
 * Wi = Wa / n
 */
.filemanager-fileGallery-gallery__item {
    flex: 0 0 calc(
        (100% - (var(--gallery-gap) * (var(--gallery-items-per-row) - 1))) /
        var(--gallery-items-per-row)
    );

    img {
        border-radius: var(--gallery-item-border-radius);
        aspect-ratio: 3 / 2;
        object-fit: cover;
    }
}

@media only screen and (width >= 1024px) {
    .filemanager-fileGallery__files {
        --gallery-items-per-row: 4;
    }
}

@media only screen and (768px < width < 1024px) {
    .filemanager-fileGallery__files {
        --gallery-items-per-row: 3;
    }
}

@media only screen and (540px < width < 768px) {
    .filemanager-fileGallery__files {
        --gallery-items-per-row: 2;
    }
}

/* Gallery styles */
:root {
    --gallery-item-border-radius: 0.4em;
}

.filemanager-fileGallery__files {
    figure {
        margin: 0;
        position: relative;

        a {
            position: absolute;
            bottom: -2px;
            right: -3px;
            width: 26px;
            height: 26px;
            border-radius: 13px;
            text-align: center;
            cursor: pointer
        }
    }

    figcaption {
        margin-top: 0.5rem;
        font-size: 11px;
        padding-right: 25px;
    }

    img {
        border-radius: var(--gallery-item-border-radius);
    }
}