/* Local recovery layer for the Readymag preview snapshot. */

html,
body {
  background: #44ffa9 !important;
}

.mag .mag-pages-container,
.mag .mag-pages-container .container,
.mag .mag-pages-container .container .page,
.content-scroll-wrapper {
  width: 100vw !important;
}

.content-bounds {
  width: 100vw !important;
  background: #000;
}

.above-pages-container {
  left: 0 !important;
  top: 0 !important;
  height: 130px !important;
  position: fixed !important;
  width: 1024px !important;
  z-index: 10000 !important;
  pointer-events: none;
  transform-origin: 0 0;
}

.above-pages-container a {
  pointer-events: auto;
}

.above-pages-container [data-id="621d28533b713f003208a0fe"],
.above-pages-container [data-id="621d28533b713f003208a0ff"] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: none !important;
}

.above-pages-container [data-id="621d28533b713f003208a0fe"] img,
.above-pages-container [data-id="621d28533b713f003208a0ff"] svg {
  display: block;
  height: 100%;
  width: 100%;
}

.above-pages-container .above-all-fade,
.above-pages-container .above-all-fade.fade-in {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  transition: none !important;
}

.above-pages-container [data-id="621d28533b713f003208a0ff"] svg path:first-of-type {
  fill: #44ffa9 !important;
  opacity: 1 !important;
}

.page-content-container {
  transform-origin: 0 0;
}

.content-scroll-wrapper {
  scrollbar-width: none;
}

.content-scroll-wrapper::-webkit-scrollbar {
  width: 0;
  height: 0;
}

[aria-label="Preview toolbar"],
[aria-label="Device switch"],
.css-vdvkb8,
.css-struhn {
  display: none !important;
}

.animation-container.invisible {
  visibility: visible !important;
  opacity: 0 !important;
  transition: opacity 0.65s ease;
}

.animation-container.invisible * {
  visibility: visible !important;
}

.animation-container.rm-in {
  visibility: visible !important;
}

.animation-container.rm-scroll-controlled {
  opacity: var(--rm-scroll-opacity, 1) !important;
}

.animation-container[style*="opacity: 0"].rm-in:not(.rm-scroll-controlled) {
  opacity: 1 !important;
}

.animation-container[style*="opacity: 0.3"].rm-in:not(.rm-scroll-controlled) {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .animation-container.invisible {
    transition: none;
  }
}