.flipbook-viewer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  padding: 1rem;
  z-index: 10000;
  isolation: isolate;
  overflow: hidden;
  overscroll-behavior: contain;
  display: flex;
  flex-flow: column;
  gap: 1rem;
  align-items: center;
}
@media only screen and (min-width: 200px) and (max-width: 719px) {
  .flipbook-viewer-overlay {
    flex-flow: column-reverse;
  }
}
.flipbook-viewer-overlay .flipbook-loader {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  color: white;
  z-index: 10;
  display: flex;
  flex-flow: column;
  align-items: center;
  text-align: center;
}
.flipbook-viewer-overlay .flipbook-loader .error-icon {
  font-size: 3rem;
}
.flipbook-viewer-overlay .flipbook-controls {
  display: flex;
  width: 100%;
  font-size: 2rem;
  color: white;
  gap: 0.5rem;
  flex-flow: row;
  justify-content: flex-end;
  align-items: center;
}
.flipbook-viewer-overlay .flipbook-controls i {
  cursor: pointer;
}
.flipbook-viewer-overlay .flipbook-viewer {
  --transition-speed: 0.5s;
  flex: 1 auto;
  width: 100%;
  position: relative;
  overflow: hidden;
  touch-action: none;
  scroll-behavior: smooth;
  /* Paper flip effect */
}
.flipbook-viewer-overlay .flipbook-viewer .point {
  --index: 0;
  --x: 0;
  --y: 0;
  position: absolute;
  z-index: calc(50 - var(--index));
  left: var(--x);
  top: var(--y);
  width: calc(6px + var(--index) * 2px);
  height: calc(6px + var(--index) * 2px);
  translate: -50% -50%;
  border-radius: 50%;
  background-color: var(--color);
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook {
  --scale: 1;
  --overscale: 1;
  --actualscale: calc(var(--scale) * var(--overscale));
  --width: 100px;
  --parentWidth: 100px;
  --height: 100px;
  --parentHeight: 100px;
  --scrollLeft: 0px;
  --scrollTop: 0px;
  margin: auto;
  /*--actualWidth: calc(var(--width) * var(--scale));
            --actualHeight: calc(var(--height) * var(--scale));

            --widthDiff: calc(var(--parentWidth) - var(--actualWidth));
            --heightDiff: calc(var(--parentHeight) - var(--actualHeight));

            margin-inline: calc(var(--widthDiff) / (4 * var(--scale)));
            margin-block: calc(var(--heightDiff) / (4 * var(--scale)));*/
  position: absolute;
  transition: left var(--transition-speed), top var(--transition-speed), width var(--transition-speed), height var(--transition-speed);
  top: calc(50% - var(--scrollTop));
  left: calc(50% - var(--scrollLeft));
  transform: translateX(-50%) translateY(-50%);
  transform-origin: center center;
  width: calc(var(--scale) * var(--width));
  height: calc(var(--scale) * var(--height));
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook.dragging,
.flipbook-viewer-overlay .flipbook-viewer .flipbook.pinching,
.flipbook-viewer-overlay .flipbook-viewer .flipbook.panning {
  transition: none;
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook.dragging .flipbook-paper,
.flipbook-viewer-overlay .flipbook-viewer .flipbook.pinching .flipbook-paper,
.flipbook-viewer-overlay .flipbook-viewer .flipbook.panning .flipbook-paper {
  transition: none;
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook.frontcover .flipbook-paper {
  translate: -50% -50%;
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook.backcover .flipbook-paper {
  translate: calc(-50% + (100% * var(--scale))) -50%;
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook-paper {
  transition: scale var(--transition-speed), width var(--transition-speed), height var(--transition-speed), translate var(--transition-speed) ease;
  scale: var(--scale);
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc((1 - var(--scale)) * -50%) -50%;
  perspective: calc(1500px / var(--scale));
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook.single.left .flipbook-paper {
  transform: translateX(50%) translateY(-50%) scale(--scale);
}
.flipbook-viewer-overlay .flipbook-viewer .flipbook.single.right .flipbook-paper {
  transform: translateX(-50%) translateY(-50%) scale(--scale);
}
.flipbook-viewer-overlay .flipbook-viewer .front,
.flipbook-viewer-overlay .flipbook-viewer .back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform-origin: left;
  transition: transform var(--transition-speed);
}
.flipbook-viewer-overlay .flipbook-viewer .front {
  z-index: 1;
  backface-visibility: hidden;
}
.flipbook-viewer-overlay .flipbook-viewer .back {
  z-index: 0;
}
.flipbook-viewer-overlay .flipbook-viewer .front-content,
.flipbook-viewer-overlay .flipbook-viewer .back-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flipbook-viewer-overlay .flipbook-viewer .back-content {
  transform: rotateY(180deg);
}
.flipbook-viewer-overlay .flipbook-viewer .flipped .front,
.flipbook-viewer-overlay .flipbook-viewer .flipped .back {
  transform: rotateY(-180deg);
}
.flipbook-viewer-overlay .flipbook-viewport {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: none;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  gap: 0;
}
body:has(.flipbook-viewer-overlay) {
  overflow: hidden;
}