/*! PhotoSwipe main CSS by Dmytro Semenov | photoswipe.com */

._pswp {
  --_pswp-bg: #000;
  --_pswp-placeholder-bg: rgba(79, 79, 79, 0);

  --_pswp-root-z-index: 99999999999;

  --_pswp-preloader-color: rgba(79, 79, 79, 0.4);
  --_pswp-preloader-color-secondary: rgba(255, 255, 255, 0.9);

  /* defined via js:
    --_pswp-transition-duration: 333ms; */

  --_pswp-icon-color: rgba(255, 255, 255, 0.5);
  --_pswp-icon-color-secondary: rgba(255, 255, 255, 0.5);
  --_pswp-icon-stroke-color: rgba(255, 255, 255, 0.5);
  --_pswp-icon-stroke-width: 2px;

  --_pswp-error-text-color: var(--_pswp-icon-color);
}

/*
      Styles for basic PhotoSwipe (_pswp) functionality (sliding area, open/close transitions)
  */

._pswp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--_pswp-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);
}

/* Prevents focus outline on the root element,
    (it may be focused initially) */
._pswp:focus {
  outline: 0;
}

._pswp * {
  box-sizing: border-box;
}

._pswp img {
  max-width: none;
}

._pswp--open {
  display: block;
}

._pswp,
._pswp__bg {
  transform: translateZ(0);
  will-change: opacity;
}

._pswp__bg {
  opacity: 0.005;
  background: var(--_pswp-bg);
  display: block !important;
}

._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;
}

._pswp--click-to-zoom._pswp--zoom-allowed ._pswp__img {
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

._pswp--click-to-zoom._pswp--zoomed-in ._pswp__img {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

._pswp--click-to-zoom._pswp--zoomed-in ._pswp__img:active {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/* :active to override grabbing cursor */
._pswp--no-mouse-drag._pswp--zoomed-in ._pswp__img,
._pswp--no-mouse-drag._pswp--zoomed-in ._pswp__img:active,
._pswp__img {
  cursor: -webkit-zoom-out;
  cursor: -moz-zoom-out;
  cursor: zoom-out;
}

/* Prevent selection and tap highlights */
._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 for fade transition */
  z-index: 1;
  overflow: hidden;
}

._pswp__hidden {
  display: none !important;
}

/* Allow to click through _pswp__content element, but not its children */
._pswp__content {
  pointer-events: none;
}
._pswp__content > * {
  pointer-events: auto;
}

/*
  
    PhotoSwipe UI
  
  */

/*
      Error message appears when image is not loaded
      (JS option errorMsg controls markup)
  */
._pswp__error-msg-container {
  display: grid;
}
._pswp__error-msg {
  margin: auto;
  font-size: 1em;
  line-height: 1;
  color: var(--_pswp-error-text-color);
}

/*
  class _pswp__hide-on-close is applied to elements that
  should hide (for example fade out) when PhotoSwipe is closed
  and show (for example fade in) when PhotoSwipe is opened
   */
._pswp ._pswp__hide-on-close {
  opacity: 0.005;
  will-change: opacity;
  transition: opacity var(--_pswp-transition-duration)
    cubic-bezier(0.4, 0, 0.22, 1);
  z-index: 10; /* always overlap slide content */
  pointer-events: none; /* hidden elements should not be clickable */
}

/* class _pswp--ui-visible is added when opening or closing transition starts */
._pswp--ui-visible ._pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
}

/* <button> styles, including css reset */
._pswp__button {
  position: relative;
  top: 0;
  right: 0;
  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__button svg,
._pswp__icn {
  fill: var(--_pswp-icon-color);
  color: var(--_pswp-icon-color-secondary);
}

._pswp__button svg,
._pswp__icn {
  position: absolute;
  top: 14px;
  left: 9px;
  width: 24px;
  height: 24px;
  overflow: hidden;
  pointer-events: none;
}

._pswp__icn-shadow {
  stroke: var(--_pswp-icon-stroke-color);
  stroke-width: var(--_pswp-icon-stroke-width);
  fill: none;
}

._pswp__button svg:focus,
._pswp__icn:focus {
  outline: 0;
}

/*
      div element that matches size of large image,
      large image loads on top of it,
      used when msrc is not provided
  */
div._pswp__img--placeholder,
._pswp__img--with-bg {
  background: var(--_pswp-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;

  /* allow events to pass through top bar itself */
  pointer-events: none !important;
}
._pswp__top-bar > * {
  pointer-events: auto;
  /* this makes transition significantly more smooth,
       even though inner elements are not animated */
  will-change: opacity;
}

/*
  
    Close button
  
  */
._pswp__button--close {
  margin-right: 6px;
}

/*
  
    Arrow buttons
  
  */
._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 svg {
  top: 50%;
  margin-top: -30px;
  width: 40px;
  height: 40px;
  background: none;
  border-radius: 0;
}

._pswp--one-slide ._pswp__button--arrow {
  display: none;
}

/* hide arrows on touch screens */
._pswp--touch ._pswp__button--arrow {
  visibility: hidden;
}

/* show arrows only after mouse was used */
._pswp--has_mouse ._pswp__button--arrow {
  visibility: visible;
}

._pswp__button--arrow--prev {
  right: auto;
  left: 0px;
}

._pswp__button--arrow--next {
  right: 0px;
}
._pswp__button--arrow--prev svg {
  left: auto;
  right: 14px;
  /* flip horizontally */
  transform: scale(-1, 1);
}

/* Zoom button */
._pswp__button--zoom {
  display: none;
}

._pswp--zoom-allowed ._pswp__button--zoom {
  display: block;
}

/* "+" => "-" */
._pswp--zoomed-in ._pswp__zoom-icn-bar-v {
  display: none;
}

/* Loading indicator */
._pswp__preloader {
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 60px;
  margin-right: auto;
}

._pswp__preloader svg {
  opacity: 0;
  transition: opacity 0.2s linear;
  animation: _pswp-clockwise 600ms linear infinite;
}

._pswp__preloader--active svg {
  opacity: 0.85;
}

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

/*
  
    "1 of 10" counter
  
  */
._pswp__counter {
  height: 30px;
  margin-top: 15px;
  margin-inline-start: 20px;
  font-size: 14px;
  line-height: 30px;
  color: var(--_pswp-icon-color);
  text-shadow: 1px 1px 3px var(--_pswp-icon-color-secondary);
  opacity: 0.85;
}

._pswp--one-slide ._pswp__counter {
  display: none;
}