/* v1.2 by phploaded */

/* Base ctr styling */
.mbox-ctr {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
inset:0;
z-index:1000;
}

/*.mbox-blur{filter:blur(5px);}*/

.mbox-bg{
position: fixed;
inset:0;
background-color: rgba(0, 0, 0, 0.4);
background-image: url(svg/stripes.svg);
background-size:8px 8px;
}

/* Lightbox container */
.mbox-lightbox {
display: block;
position: absolute;
inset: 0;
--mbox-transition-duration: 280ms;
}

/* Header section */
.mbox-header {
 z-index: 30;
}

.mbox-count {
position:fixed;
left:0;
top:0;
padding:10px;
color:#fff;
font:32px arial, serif;
text-shadow: 0 0 3px #000;
 z-index: 35;
}

.mbox-actions {
position:fixed;
right:0;
top:0;
 z-index: 35;
}

.mbox-loading{
 width: 96px;
 height: 96px;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 3;
}

.mbox-loading:before{
 border: 8px solid rgba(197, 197, 197, 0.75);
 border-radius: 50%;
 border-top: 8px solid #3498db;
 width: inherit;
 height: inherit;
 animation: mbox-loader 1s linear infinite;
 box-shadow: 0 0 2px #000 inset,0 0 2px #000;
 display:block;
 content:' ';
}

.mbox-loading.is-hidden{
 display:none;
}

.mbox-preload{
opacity:0.01;
position:absolute;
top: 0;
left: 0;
right: 260px
}

.mbox-preload-prev, .mbox-preload-next, .mbox-preload-current{
width:1px;
height:1px;
float:left;
}

/* Content area */
.mbox-content {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
inset: 0;
overflow: hidden;
touch-action: none;
user-select: none;
-webkit-user-select: none;
overscroll-behavior: contain;
cursor: grab;
 z-index: 1;
}

.mbox-stage {
position: absolute;
inset: 0;
overflow: visible;
}

.mbox-zoom-indicator{
 position: absolute;
 left: 50%;
 top: 18px;
 transform: translateX(-50%);
 min-width: 72px;
 padding: 8px 12px;
 border-radius: 999px;
 background: rgba(0, 0, 0, 0.62);
 color: #fff;
 font: 600 14px/1 Arial, sans-serif;
 text-align: center;
 letter-spacing: 0.04em;
 opacity: 0;
 pointer-events: none;
 transition: opacity 180ms ease;
 z-index: 32;
 text-shadow: 0 0 2px rgba(0, 0, 0, 0.55);
}

.mbox-zoom-indicator.is-visible{
 opacity: 1;
}

.mbox-stage.is-dragging .mbox-slide,
.mbox-stage.is-dragging .mbox-slide-media,
.mbox-lightbox.is-gesture-active .mbox-slide,
.mbox-lightbox.is-gesture-active .mbox-slide-media {
transition: none !important;
}

.mbox-slide {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
 overflow: hidden;
transform: translate3d(0, 0, 0);
opacity: 1;
transition: transform var(--mbox-transition-duration) ease, opacity var(--mbox-transition-duration) ease;
will-change: transform, opacity;
}

.mbox-slide-media{
 position: relative;
 width: 100%;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 transform-origin: center center;
  transition: transform var(--mbox-transition-duration) ease, opacity var(--mbox-transition-duration) ease;
  will-change: transform, opacity;
}

.mbox-slide.is-side .mbox-slide-media{
 filter: brightness(0.92);
}

.mbox-lightbox.is-panning .mbox-content,
.mbox-lightbox.is-gesture-active .mbox-content{
 cursor: grabbing;
}

.mbox-slide.is-enter-next {
transform: translate3d(100%, 0, 0);
}

.mbox-slide.is-enter-prev {
transform: translate3d(-100%, 0, 0);
}

.mbox-slide.is-active {
transform: translate3d(0, 0, 0);
}

.mbox-slide.is-exit-next {
transform: translate3d(-100%, 0, 0);
opacity: 0.45;
}

.mbox-slide.is-exit-prev {
transform: translate3d(100%, 0, 0);
opacity: 0.45;
}

.mbox-main-img {
 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
 object-position: center center;
 display: block;
 border: 0;
 transition: transform var(--mbox-transition-duration) ease;
 pointer-events: none;
 -webkit-user-drag: none;
}

.mbox-slide.is-current.is-preview-active .mbox-main-img{
 width: 100%;
 height: 100%;
 max-width: none;
 max-height: none;
 object-fit: contain;
}

.mbox-slide.has-preview:not(.is-current) .mbox-loading{
 display:none;
}

.mbox-lightbox.mbox-zoomfit .mbox-slide.is-current .mbox-main-img.mbox-fit-scanning {
 will-change: object-position;
}

.mbox-lightbox.mbox-slideshow-active.mbox-zoomfit .mbox-slide.is-current .mbox-main-img.mbox-fit-scanning {
 will-change: object-position;
}

/* Footer section */
.mbox-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  z-index: 30;
}

.mbox-icons {

}

.mbox-title{
color: #fff;
  font: 18px arial, sans-serif;
padding:10px;
  margin: 0;
  text-align: center;
  width:100%;
  text-shadow:0 0 2px #000, 0 0 5px #000;
  box-sizing:border-box;
}

.mbox-title:empty{display:none;}

.mbox-info-ctr{
font: 12px verdana;
color: #000;
}

.mbox-info{
padding:10px;
background-color:rgba(255, 255, 255, 0.7);
display:none;
box-sizing:border-box;
}

.mbox-descr:focus .mbox-info{
display:block !important;
}

.mbox-descr {
width: 500px;
position:fixed;
bottom:5px;
right:20px;
}

.mbox-footer .mbox-icons {
display: flex;
gap: 10px;
}

/* Navigation buttons */
.mbox-controls{}

.mbox-prev, .mbox-next{
display:block;
background-image:url('svg/cursor-prev.png');
width:50px;
position:fixed;
left:0;
height:50px;
background-position:center center;
background-repeat:no-repeat;
cursor:pointer;
border-radius:50px;
padding:10px;
opacity:0.7;
top:45%;
 z-index:35;
}

.mbox-next{
right:0;
background-image:url('svg/cursor-next.png');
left:unset;
}

/* progress bar */
.mbox-progress-out{
position:fixed;
bottom:0;
left:0;
right:0;
height:5px;
background-color:rgba(0, 0, 0, 0.6);
display:none;
}

.mbox-progress{
height:inherit;
background-color:gold;
width:0%;
transition: width 1s;
}

/* Fullscreen, Rotate, Slideshow, Crop buttons */
.mbox-actions{
cursor: pointer;
position: fixed;
top: 0;
right: 0;
background-color:rgba(0,0,0,0.6);
margin:0;
padding:0;
 z-index:35;
opacity:0.5;
}

.mbox-actions:hover{
opacity:1 !important;
}

.mbox-actions:after{
clear:both;
}

.mbox-actions > li{
float: left;
cursor: pointer;
list-style: none;
border-left: 1px solid #999;
border-bottom: 1px solid #999;
padding:10px;
}

.mbox-actions > li:after{
width: 29px;
height: 29px;
content:' ';
display:block;
}

.mbox-close:after{
background-image:url("svg/close.svg");
}

.mbox-play:after{
background-image:url("svg/play.svg");
}

.mbox-rotate:after{
background-image:url("svg/rotate.svg");
}

.mbox-pause:after{
background-image:url("svg/pause.svg") !important;
}

.mbox-fullscreen:after{
background-image:url("svg/fullscreen.svg");
}

.mbox-screenfit:after{
background-image:url("svg/expand.svg");
}

.mbox-zoomfit .mbox-screenfit:after{
background-image:url("svg/shrink.svg") !important;
}

.mbox-zoomfit .mbox-slide.is-current .mbox-main-img{
 width: 100%;
 height: 100%;
 max-width: none;
 max-height: none;
 object-fit: cover;
}

.mbox-restore:after{
background-image:url("svg/restore.svg") !important;
}

.mbox-xtag-toggle:after{
background-image:url("svg/tag.svg");
}

.mbox-xtag-gear:after{
background-image:url("svg/settings.svg");
}

/* Utility classes */
.hidden {
display: none;
}

.flex-center {
display: flex;
justify-content: center;
align-items: center;
}

@keyframes mbox-loader {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 500px) {
.mbox-count{
font-size:22px;
padding:12px;
}

.mbox-actions > li{
padding:8px;
}

.mbox-actions > li:after{
width:24px;
height:24px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}

.mbox-prev, .mbox-next{
width:42px;
height:42px;
padding:6px;
top:50%;
transform:translateY(-50%);
background-size:20px 20px;
}

.mbox-descr{
width: auto;
box-sizing: border-box;
left: 5px;
right: 5px;
bottom: 5px;
}
}