/*! By André Rinas, www.andrerinas.de, Documentation, www.simplelightbox.com, Available for use under the MIT License, Version 2.14.3 */
body.hidden-scroll {overflow:hidden}

.sl-overlay {position:fixed; left:0; right:0; top:0; bottom:0; background:black; z-index:1035}
.sl-wrapper {position:fixed; display:grid; left:0; right:0; top:0; bottom:0; font-size:1rem; line-height:1; color:white; z-index:1040}
.sl-wrapper *            {box-sizing:border-box; grid-area:1/1}
.sl-wrapper button       {padding:0; border:0; background:transparent; color:inherit; font-family:Arial, monospace; font-size:1rem; line-height:1; cursor:pointer}
.sl-wrapper button:hover {opacity:0.7}
.sl-wrapper .sl-spinner  {place-self:center; width:40px; height:40px; border:5px solid #333; border-radius:40px; opacity:0; animation:pulsate 1s ease-out infinite; z-index:1}
.sl-wrapper .sl-close    {place-self:start end; height:44px; width:44px; font-size:48px; z-index:3}
.sl-wrapper .sl-next     {place-self:center end; width:48px; font-size:48px; z-index:3}
.sl-wrapper .sl-prev     {place-self:center start; width:48px; font-size:48px; z-index:3}
.sl-wrapper .sl-counter  {place-self:start start; display:flex; align-items:center; padding:0 10px; height:44px; color:gray; z-index:3}
.sl-wrapper .sl-download {place-self:end end; padding:13px 5px; text-align:center; z-index:3}
.sl-wrapper .sl-download a {color:inherit}

.sl-wrapper .sl-image     {display:grid; max-height:100svh; grid-template-rows:44px 1fr 44px; grid-template-columns:1fr; touch-action:none; z-index:2}
.sl-wrapper .sl-image img {grid-area:2/1; place-self:center; max-height:calc(100svh - 88px); width:100%; object-fit:contain; border:0; animation:fadeOpacity 0.5s ease-out; z-index:1}
.sl-wrapper .sl-image:has(>.sl-caption.pos-outside) img {grid-area:2/1; max-height:calc(100svh - 88px)}
.sl-wrapper .sl-image:not(>.sl-caption.pos-outside) img {grid-area:1/1/span 3/1; max-height:100svh}
.sl-wrapper .sl-image .sl-caption         {grid-area:3/1; place-self:center; padding:5px 13px; border-radius:1rem; background:rgba(0, 0, 0, 0.3); animation:fadeOpacity 0.5s ease-out; z-index:2}
.sl-wrapper .sl-image .sl-caption.pos-top {grid-area:1/1}

.sl-scrollbar-measure {position:absolute; top:-9999px; width:50px; height:50px; overflow:scroll}
.sl-transition {transition:transform ease 200ms}

.sl-wrapper .sl-spinner:not(.active)           {display:none; opacity:0}
.sl-wrapper .sl-next:not(.active)              {display:none; opacity:0}
.sl-wrapper .sl-prev:not(.active)              {display:none; opacity:0}
.sl-wrapper .sl-download(.active)              {display:none; opacity:0}
.sl-wrapper .sl-image img:not(.active)         {display:none; opacity:0}
.sl-wrapper .sl-image .sl-caption:not(.active) {display:none; opacity:0}

@media (max-height:30em) {
    .sl-wrapper .sl-image img {grid-area:1/1/span 3/1 !important; max-height:100svh !important}
    .sl-wrapper .sl-image .sl-caption {place-self:center}
    }
@media (max-width:55em) {
    .sl-wrapper button.sl-next {text-align:right; padding:0 3px}
    .sl-wrapper button.sl-prev {text-align:left; padding:0 3px}
    }

@keyframes pulsate {
    0%   {transform:scale(0.1); opacity:0}
    50%  {opacity:1}
    100% {transform:scale(1.2); opacity:0}
    }
@keyframes fadeOpacity {
    0% {opacity:0}
    100% {opacity:1}
    }