.pswp { --psxxl-bg: #000; --psxxl-placeholder-bg: #222; --psxxl-root-z-index: 100000; --psxxl-preloader-color: rgba(79, 79, 79, 0.4); --psxxl-preloader-color-secondary: rgba(255, 255, 255, 0.9); --psxxl-icon-color: #fff; --psxxl-icon-color-secondary: #4f4f4f; --psxxl-icon-stroke-color: #4f4f4f; --psxxl-icon-stroke-width: 2px; --psxxl-error-text-color: var(--psxxl-icon-color); } .pswp { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: var(--psxxl-root-z-index); display: none; touch-action: none; outline: 0; opacity: 0.003; contain: layout style size; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .pswp:focus { outline: 0; } .pswp * { box-sizing: border-box; } .pswp img { max-width: none; } .psxxl--open { display: block; } .pswp, .pswp__bg { transform: translateZ(0); will-change: opacity; } .pswp__bg { opacity: 0.005; background: var(--psxxl-bg); } .pswp, .pswp__scroll-wrap { overflow: hidden; } .pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__content, .pswp__img, .pswp__zoom-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .pswp__img, .pswp__zoom-wrap { width: auto; height: auto; } .psxxl--click-to-zoom.psxxl--zoom-allowed .pswp__img { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } .psxxl--click-to-zoom.psxxl--zoomed-in .pswp__img { cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .psxxl--click-to-zoom.psxxl--zoomed-in .pswp__img:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .psxxl--no-mouse-drag.psxxl--zoomed-in .pswp__img, .psxxl--no-mouse-drag.psxxl--zoomed-in .pswp__img:active, .pswp__img { cursor: -webkit-zoom-out; cursor: -moz-zoom-out; cursor: zoom-out; } .pswp__container, .pswp__img, .pswp__button, .pswp__counter { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .pswp__item { z-index: 1; overflow: hidden; } .pswp__hidden { display: none !important; } .pswp__content { pointer-events: none; } .pswp__content > * { pointer-events: auto; } .pswp__error-msg-container { display: grid; } .pswp__error-msg { margin: auto; font-size: 1em; line-height: 1; color: var(--psxxl-error-text-color); } .pswp .pswp__hide-on-close { opacity: 0.005; will-change: opacity; transition: opacity var(--psxxl-transition-duration) cubic-bezier(0.4, 0, 0.22, 1); z-index: 10;  pointer-events: none;  } .psxxl--ui-visible .pswp__hide-on-close { opacity: 1; pointer-events: auto; } .pswp__button { position: relative; display: block; width: 50px; height: 60px; padding: 0; margin: 0; overflow: hidden; cursor: pointer; background: none; border: 0; box-shadow: none; opacity: 0.85; -webkit-appearance: none; -webkit-touch-callout: none; } .pswp__button:hover, .pswp__button:active, .pswp__button:focus { transition: none; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; } .pswp__button:disabled { opacity: 0.3; cursor: auto; } .pswp__icn { fill: var(--psxxl-icon-color); color: var(--psxxl-icon-color-secondary); } .pswp__icn { position: absolute; top: 14px; left: 9px; width: 32px; height: 32px; overflow: hidden; pointer-events: none; } .pswp__icn-shadow { stroke: var(--psxxl-icon-stroke-color); stroke-width: var(--psxxl-icon-stroke-width); fill: none; } .pswp__icn:focus { outline: 0; } div.pswp__img--placeholder, .pswp__img--with-bg { background: var(--psxxl-placeholder-bg); } .pswp__top-bar { position: absolute; left: 0; top: 0; width: 100%; height: 60px; display: flex; flex-direction: row; justify-content: flex-end; z-index: 10; pointer-events: none !important; } .pswp__top-bar > * { pointer-events: auto; will-change: opacity; } .pswp__button--close { margin-right: 6px; } .pswp__button--arrow { position: absolute; top: 0; width: 75px; height: 100px; top: 50%; margin-top: -50px; } .pswp__button--arrow:disabled { display: none; cursor: default; } .pswp__button--arrow .pswp__icn { top: 50%; margin-top: -30px; width: 60px; height: 60px; background: none; border-radius: 0; } .psxxl--one-slide .pswp__button--arrow { display: none; } .psxxl--touch .pswp__button--arrow { visibility: hidden; } .psxxl--has_mouse .pswp__button--arrow { visibility: visible; } .pswp__button--arrow--prev { right: auto; left: 0px; } .pswp__button--arrow--next { right: 0px; } .pswp__button--arrow--next .pswp__icn { left: auto; right: 14px; transform: scale(-1, 1); } .pswp__button--zoom { display: none; } .psxxl--zoom-allowed .pswp__button--zoom { display: block; } .psxxl--zoomed-in .pswp__zoom-icn-bar-v { display: none; } .pswp__preloader { position: relative; overflow: hidden; width: 50px; height: 60px; margin-right: auto; } .pswp__preloader .pswp__icn { opacity: 0; transition: opacity 0.2s linear; animation: psxxl-clockwise 600ms linear infinite; } .pswp__preloader--active .pswp__icn { opacity: 0.85; } @keyframes psxxl-clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pswp__counter { height: 30px; margin: 15px 0 0 20px; font-size: 14px; line-height: 30px; color: var(--psxxl-icon-color); text-shadow: 1px 1px 3px var(--psxxl-icon-color-secondary); opacity: 0.85; } .psxxl--one-slide .pswp__counter { display: none; }