.mxgallery-wrapper, .mxgallery-loader {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 100001;
    display:none;
}
.mxgallery-loader {
    background: rgba(0,0,0,0.6);
    z-index:100000;
}
.mxgallery-img {
    position: relative;
    width: 100%;
    height: 75%;
    padding: 1%;
    display:flex;
    align-items: center;
    justify-content: center;
}
.mxgallery-gallery {
    height: 20%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.mxgallery-gallery .thumbnail {
    width:100px;
    border:3px solid transparent;
    margin:0 5px;
    cursor:pointer;
    transition: all 200ms linear;
}
.mxgallery-gallery .thumbnail.active, .mxgallery-gallery .thumbnail:hover {
    border-color:var(--brand);
}
.mxgallery-gallery .thumbnail img {
    width:100%;
}
.mxgallery-img img {
    max-width:100%;
    max-height:100%;
}

.mxgallery-img span.private-img,
.mxgallery-img span.public-img {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px 10px 5px;
}
.mxgallery-img span.private-img i {
    color: rgba(255, 0, 0, 0.5);
    font-size: 30px;
}
.mxgallery-img span.public-img i {
    color: rgba(50, 205, 50, 0.5);
    font-size: 30px;
}
.mxgallery-img .mxgallery-img-inside {
    position:relative;
}
.mxgallery-close {
    position:absolute;
    border-radius:100%;
    top:-15px;
    right: -15px;
    width:30px;
    height:30px;
    background:#000;
    line-height: 30px;
    text-align: center;
    border:2px solid #fff;
    cursor:pointer;
    z-index:100;
}
.mxgallery-close i {
    color:#fff;
    line-height: 26px;
    font-size: 1.3rem;
    width: 13px;
    z-index:100;
}
.mxgallery-right, .mxgallery-left {
    position: absolute;
    height: 100%;
    right: 0;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    transition: background-color 200ms linear;
}
.mxgallery-right:hover, .mxgallery-left:hover {
    background-color:rgba(0,0,0,0.5);
}
.mxgallery-right:hover i, .mxgallery-left:hover i {
    color: rgba(255,255,255,1);
}
.mxgallery-left {
    right:auto;
    left:0;
}
.mxgallery-right i, .mxgallery-left i {
    color: rgba(255,255,255,0.3);
    font-size: 50px;
    transition: color 200ms linear;
}
.mxgallery-titles {
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    color: #fff;
    flex-flow:row-reverse;
}
.mxgallery-titles p {
    margin:0;
    flex: 1;
    padding: 5px 10px;
    line-height: 30px;
    text-align:left;
}
.mxgallery-titles p:last-child {
    flex:4;
}
.mxgallery-titles p:first-child {
    text-align: right;
}