.flipbook-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.71);
  z-index: 2147483646 !important;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease-out,
    visibility 0.3s ease-out;
}

.flipbook-overlay-visible {
  opacity: 1;
  visibility: visible;
}

.flipbook-hidden {
  display: none !important;
}

.flipbook-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  text-shadow: none;
  border-radius: 4px;
  background: #ffffff;
}

.flipbook-wrapper-transparent {
  width: 100%;
  height: 100%;
  background: none;
}

.flipbook-main-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  direction: ltr !important;
  scrollbar-color: rgba(130, 130, 130, 0.5) transparent;
  scrollbar-width: thin;
}

.flipbook-bookLayer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  touch-action: pan-y;

  cursor: grab;

  user-select: none;
  -webkit-user-select: none;
}

.flipbook-bookLayer.flipbook-zoomed-in {
  touch-action: none;
}

/* iOS bypasses parent's touch-action: none for elements with
   user-select: text (PDF textLayer / page htmlContent), letting
   pull-to-refresh / page scroll / page pinch-zoom through. Force
   touch-action: none directly on descendants. Long-press text
   selection still works — touch-action only suppresses pan/zoom
   gestures, not tap/long-press. */
.flipbook-bookLayer.flipbook-zoomed-in * {
  touch-action: none;
}

.flipbook-page-html {
  user-select: text;
  -webkit-user-select: text;
}

.flipbook-zoomLayer-inside {
  display: block;
  position: relative;
  background-size: contain;
  text-align: center;
}

.flipbook-zoomLayer-inside .flipbook-carousel-page {
  float: left;
}

.flipbook-book {
  display: block;
  position: relative;
}

.flipbook-page {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateZ(0px);
  will-change: transform;
  transform-style: preserve-3d;
}

.flipbook-page3 {
  position: absolute;
  background: #eee;
  transform-origin: 0 50%;
}

.flipbook-page3-shadow {
  filter: drop-shadow(0 15px 20px rgba(0, 0, 0, 0.25));
}

.flipbook-page3-html {
  position: absolute;
  height: 1000px;
  transform-origin: 0 0;
  top: 0;
  left: 0;
}

.flipbook-page3-inner {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
}

.flipbook-page3-inner-back {
  transform: scaleX(-1);
}

.flipbook-page3-bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.flipbook-page3-bg img {
  height: 100% !important;
}

.flipbook-page3 img {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  height: 100%;
  margin: auto;
  position: absolute;
  transform-origin: 0 0;
  float: left;
  user-select: none;
  pointer-events: none;
  max-width: unset;
  width: unset;
  backface-visibility: unset;
}

.flipbook-page3 canvas {
  width: 100%;
  height: 100%;
}

.flipbook-page3::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: var(--flipbook-page-shadow-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;

  opacity: var(--page3-shadow-opacity, 0);
  z-index: 1;
  pointer-events: none;
}

.flipbook-page3-front {
  transform-origin: 0 50%;
}

.flipbook-page3-back {
  transform-origin: 0% 50%;
}

.flipbook-page3-back .flipbook-page3-inner {
  transform: rotateY(180deg);
}

.flipbook-book3 {
  display: block;
  position: relative;
}

.flipbook-book-webgl {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.flipbook-book-shadow {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.12),
    0 16px 40px rgba(0, 0, 0, 0.08);
}

.flipbook-center-container3 {
  position: relative;
  /* will-change: transform; */
  border: none;
}

.flipbook-page-htmlContent {
  transform-origin: 0 0;
  z-index: 50;
  position: absolute;
}

.flipbook-page-html video,
.flipbook-page-html iframe {
  max-width: initial;
}

.flipbook-book canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flipbook-page img {
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.flipbook-left-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 50% !important;
  left: 0;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background-clip: padding-box;
}

.flipbook-right-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 50% !important;
  right: 0;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background-clip: padding-box;
}

.flipbook-first-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 50%;
  left: 0;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background-clip: padding-box;
}

.flipbook-last-arrow {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 50%;
  right: 0;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background-clip: padding-box;
}

.flipbook-currentPageHolder {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  user-select: none;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  width: max-content;
  padding: 2px;
  min-height: 40px;
  cursor: text;
}

.flipbook-currentPageHolder form {
  display: flex;
  top: 0;
  margin: 0;
}

.flipbook-currentPageHolder input {
  user-select: none;
}

.flipbook-currentPageNumber {
  border-radius: 15px !important;
  padding: 0 12px 0 4px !important;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px;
  line-height: initial;
}

.flipbook-currentPageInput {
  line-height: 14px !important;
  background: none !important;
  border: none !important;
  font-size: 14px !important;
  max-width: initial !important;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
  text-align: right !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 0 0 12px !important;
}

.flipbook-currentPageInput:focus {
  outline: 2px solid #88888885;
}

.flipbook-progress {
  width: 100%;
  height: 5px;
  position: relative;
  margin: 0px 5px;
  background: var(--flipbook-color);
  opacity: 0.5;
}

.flipbook-color-transparent {
  color: transparent !important;
}

.flipbook-browser-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.flipbook-browser-fullscreen .flipbook-bookLayer {
  touch-action: none;
}

.flipbook-menuBottom {
  position: absolute;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  overflow: visible;
  flex-wrap: wrap;
}

.flipbook-menu-btn-wrapper {
  display: inline-block;
  position: relative;
  overflow: visible;
}

.flipbook-tools .flipbook-menu-btn-wrapper {
  pointer-events: auto;
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible;
  cursor: pointer;
  padding-right: 16px;
  /* min-width: 130px; */
  width: max-content !important;
}

.flipbook-share .flipbook-menu-btn-wrapper {
  pointer-events: auto;
  display: inline-block;
  align-items: center;
  position: relative;
  overflow: visible;
  cursor: pointer;
  padding: 16px;
}

.flipbook-menuBottom .flipbook-has-tooltip::before {
  bottom: calc(100% + 5px);
}

.flipbook-menuTop .flipbook-has-tooltip::before {
  top: calc(100% + 5px);
}

.flipbook-page-item-has-tooltip:hover {
  z-index: 1;
}

.flipbook-page-item-has-tooltip:hover::before {
  visibility: visible;
  opacity: 1;
}

.flipbook-tooltip-left::before {
  left: -20px;
  transform: translateX(-100%) translateY(-50%);
  top: 50%;
}

.flipbook-tooltip-right::before {
  left: calc(100% + 20px);
  transform: translateY(-50%);
  top: 50%;
}

.flipbook-tooltip-top::before {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 20px);
}

.flipbook-tooltip-bottom::before {
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 20px);
}

.flipbook-tooltip-topLeft::before {
  left: -20px;
  transform: translateX(-100%);
  bottom: calc(100% + 20px);
}

.flipbook-tooltip-topRight::before {
  right: -20px;
  bottom: calc(100% + 20px);
}

.flipbook-tooltip-bottomLeft::before {
  left: -20px;
  transform: translateX(-100%);
  top: calc(100% + 20px);
}

.flipbook-tooltip-bottomRight::before {
  right: -20px;
  top: calc(100% + 20px);
}

.flipbook-page-item-has-tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  visibility: hidden;
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 32px;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1.4;
  text-transform: none;
  width: max-content;
  max-width: 600px;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.flipbook-has-tooltip * {
  pointer-events: none;
}

.flipbook-tooltip-element {
  position: absolute;
  z-index: 100;
  /* background: #222;
    color: #fff; */
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  display: none;
  opacity: 0;
  transition: opacity 0.15s;
  width: max-content;
  white-space: nowrap;
}

/* .flipbook-tooltip-element::after {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%);
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #222;
    bottom: -12px;
    transition: border-color 0.15s;
}

.flipbook-tooltip-element.below::after {
    border-top-color: transparent;
    border-bottom-color: #222;
    top: -12px;
    bottom: auto;
} */

.flipbook-menu-right .flipbook-has-tooltip:last-child::before {
  left: 100%;
  transform: translateX(-100%);
}

.flipbook-menu-left .flipbook-has-tooltip:first-child::before {
  left: 0%;
  transform: translateX(0%);
}

.flipbook-has-tooltip:hover::before,
.flipbook-has-tooltip.flipbook-copied::before {
  visibility: visible;
  opacity: 1;
}

.flipbook-has-tooltip.disabled:hover::before {
  visibility: hidden;
  opacity: 0;
}

.flipbook-menu-fixed {
  left: 0;
  right: 0;
}

.flipbook-menu-fixed .flipbook-menu {
  align-items: center;
}

@media only screen and (max-width: 768px) {
  .flipbook-menu-fixed .flipbook-menu {
    justify-content: space-around;
    width: -webkit-fill-available;
  }
}

.flipbook-menu-center {
  justify-content: center;
  align-items: center;
}

.flipbook-menu-right {
  justify-content: flex-end;
  align-self: center;
  flex: 1;
  display: flex;
}

.flipbook-menu-left {
  justify-content: flex-start;
  align-self: center;
  flex: 1;
  display: flex;
}

.flipbook-menu-floating {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  left: 50%;
  transform: translate(-50%, 0);
  min-width: fit-content;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  padding: 0 8px;
}

/* Grouped floating pill — multiple floating buttons share one pill container */
.flipbook-menu-grouped {
  gap: 2px;
  padding: 2px;
  align-items: center;
  transition: background 0.15s ease;
}

.flipbook-menu-grouped .flipbook-menu-btn {
  padding: 11px;
  transition: background 0.15s ease;
}

/* Keep comfortable tap targets on narrow/touch viewports */
.flipbook-compact .flipbook-menu-grouped .flipbook-menu-btn {
  padding: 14px;
}

/* Compact mode — hide non-essential toolbar buttons when the flipbook is narrow.
   Hidden buttons stay accessible via the tools menu (flipbook-compact-only clones).
   Selectors use .flipbook-menu-btn-wrapper for specificity so they override the
   `.flipbook-tools .flipbook-menu-btn-wrapper { display: flex }` rule above. */
.flipbook-menu-btn-wrapper.flipbook-compact-only {
  display: none;
}
.flipbook-compact .flipbook-menu-btn-wrapper.flipbook-compact-only {
  display: flex;
}
.flipbook-compact .flipbook-menu-btn-wrapper[data-name="btnSearch"]:not(.flipbook-compact-only),
.flipbook-compact .flipbook-menu-btn-wrapper[data-name="btnBookmark"]:not(.flipbook-compact-only),
.flipbook-compact .flipbook-menu-btn-wrapper[data-name="btnToc"]:not(.flipbook-compact-only),
.flipbook-compact .flipbook-menu-btn-wrapper[data-name="btnThumbs"]:not(.flipbook-compact-only),
.flipbook-compact .flipbook-menu-btn-wrapper[data-name="btnAutoplay"]:not(.flipbook-compact-only),
.flipbook-compact .flipbook-menu-btn-wrapper[data-name="btnShare"]:not(.flipbook-compact-only) {
  display: none;
}

/* Compact mode — shrink tools dropdown so it fits inside short flipbooks.
   !important needed because addCSS() sets padding/size inline on each button. */
.flipbook-compact .flipbook-submenu .flipbook-menu-btn-wrapper {
  padding: 12px 20px 12px 16px !important;
  margin: 0 !important;
  font-size: 15px;
}
.flipbook-compact .flipbook-submenu .flipbook-menu-btn-wrapper svg {
  width: 20px !important;
  height: 20px !important;
  margin-right: 14px !important;
}

/* Compact mode — keep bottom/top menu rows on a single line (prevents the
   2-line wrap on narrow screens, e.g. layout 7). Overflow stays visible so
   submenus (tools dropdown) can render above the bar. */
.flipbook-compact .flipbook-menuBottom,
.flipbook-compact .flipbook-menuTop {
  flex-wrap: nowrap;
}

/* Compact mode — hide a floating pill entirely when every button inside it
   is one of the compact-hidden buttons (pill would otherwise show as a small
   empty circle from its background/padding). Uses :has() so the pill is only
   shown when it still contains at least one visible button. */
.flipbook-compact
  .flipbook-menu-grouped:not(
    :has(
      > .flipbook-menu-btn-wrapper:not([data-name='btnSearch']):not(
          [data-name='btnBookmark']
        ):not([data-name='btnToc']):not([data-name='btnThumbs']):not(
          [data-name='btnAutoplay']
        ):not([data-name='btnShare'])
    )
  ) {
  display: none;
}

.flipbook-menuTop {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  overflow: visible;
}

.flipbook-menu {
  position: relative;
  text-align: center;
  display: flex;
}

.flipbook-menu svg,
.flipbook-nav svg {
  box-sizing: content-box;
}

.flipbook-page-caption-btn {
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.9);
  fill: black;
  display: flex;
  justify-content: center;
  border-radius: 999px;
  bottom: 50px;
  right: 50px;
  position: absolute;
  cursor: pointer;
  box-sizing: content-box;
  transform: scale(2);
}

.htmlContent > .flipbook-page-caption-btn:hover + .flipbook-page-caption {
  opacity: 1;
}

.flipbook-page-caption {
  opacity: 0;
  position: absolute;
  bottom: 120px;
  max-width: calc(100% - 288px);
  width: max-content;
  padding: 24px;
  border-radius: 12px;
  right: 120px;
  background-color: rgba(255, 255, 255, 0.9);
  color: black;
  font-size: 24px;
  transition: opacity 0.3s;
}

/* Reveal an element only on hover — for use inside page htmlContent. */
.htmlContent .flipbook-show-on-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.htmlContent .flipbook-show-on-hover:hover {
  opacity: 1;
}

.flipbook-menu-btn {
  user-select: none;
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
  background: none;
  transition: all 0.1s ease-out;
  pointer-events: auto;
  box-sizing: content-box;
}

.flipbook-submenu .flipbook-menu-btn {
  justify-content: left;
}
.flipbook-submenu .flipbook-menu-btn svg {
  margin-right: 10px;
}

.flipbook-nav .disabled,
.flipbook-menu .disabled {
  opacity: 0.2;
  cursor: inherit;
  /* pointer-events: none; */
}

.flipbook-icon-reverse {
  transform: scaleX(-1);
  transform-origin: center;
}

.flipbook-menu .flipbook-findbar {
  pointer-events: auto;
  margin-top: 10px;
}

.flipbook-menu .flipbook-findbar input {
  width: 140px;
  margin-left: 0;
}

.flipbook-side-menu {
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.12);
  clip-path: inset(0 -20px 0 0);
}

.flipbook-side-menu.flipbook-side-menu-right {
  transform: translateX(100%);
  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.12);
  clip-path: inset(0 0 0 -20px);
}

.flipbook-side-menu.flipbook-side-menu-visible {
  transform: translateX(0);
}

.flipbook-side-menu.flipbook-thumbs-grid {
  transform: none !important;
  clip-path: none;
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.25s ease !important;
}

.flipbook-side-menu.flipbook-thumbs-grid.flipbook-side-menu-visible {
  opacity: 1;
}

.flipbook-thumbHolder {
  bottom: 0;
  position: absolute;
  top: 0;
  z-index: 9;
  min-width: 170px;
  /* max-width: 50%; */
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
}

.flipbook-thumbsWrapper {
  bottom: 0;
  left: 0;
  top: 90px;
  overflow: auto;
  width: 100%;
  height: 100%;
}

.flipbook-thumbHolder .flipbook-thumbsWrapper {
  padding: 10px 10px 12px;
  box-sizing: border-box;
}

.flipbook-thumbs-grid .flipbook-thumbsWrapper {
  padding: 0.5rem;
}

.flipbook-thumbsScroller {
  margin: 0;
  position: relative;
  text-align: center;
  display: grid;
  justify-content: center;
}

.flipbook-thumbs-grid {
  max-width: initial;
}

.flipbook-thumbs-grid .flipbook-thumbsWrapper {
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  height: max-content;
  text-align: center;
}

@media (max-width: 450px) {
  .flipbook-thumbs-grid .flipbook-thumbsWrapper {
    padding: 0.5rem;
  }
}

.flipbook-thumbs-grid .flipbook-thumbsScroller {
  display: inline-grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, var(--flipbook-thumbs-spread-width));
  justify-content: center;
  justify-items: center;
  max-width: 100%;
  gap: 20px;
}
.flipbook-thumbs-grid {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px);
  width: 100%;
  color: white;
}

.flipbook-thumbs-grid .flipbook-menu-title,
.flipbook-thumbs-grid .flipbook-btn-close svg {
  color: white !important;
  fill: white !important;
}

.flipbook-thumbs-grid .flipbook-menu-header {
  display: none;
}

.flipbook-thumbs-grid-close {
  display: none;
}

.flipbook-thumbs-grid .flipbook-thumbs-grid-close {
  display: flex;
  justify-content: end;
  align-items: center;
  top: 12px;
  right: 12px;
  position: sticky;
  z-index: 1;
  background: rgba(0, 0, 0, 0.333);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  width: fit-content;
  margin-left: auto;
}

/* Minimize button in grid overlay */
.flipbook-thumbs-grid-minimize {
  display: none;
}

.flipbook-thumbs-grid .flipbook-thumbs-grid-minimize,
.flipbook-thumbs-grid .flipbook-thumbs-grid-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 14px;
  opacity: 1;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.flipbook-thumbs-grid .flipbook-thumbs-grid-minimize:hover,
.flipbook-thumbs-grid .flipbook-thumbs-grid-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.flipbook-thumbs-grid .flipbook-thumbs-grid-minimize svg {
  width: 18px;
  height: 18px;
  fill: #fff !important;
  color: #fff !important;
  stroke: #fff;
}

.flipbook-thumbs-grid .flipbook-thumbs-grid-close-btn svg {
  width: 18px;
  height: 18px;
  fill: #fff !important;
  color: #fff !important;
  stroke: #fff;
}

/* Bottom thumbnail strip */
.flipbook-thumb-strip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  height: 92px;
  max-width: calc(100% - 16px);
  width: max-content;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
  border-radius: 8px;
  z-index: 9;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.flipbook-thumb-strip.flipbook-thumb-strip-visible {
  opacity: 1;
  pointer-events: auto;
}

.flipbook-thumb-strip-buttons {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  z-index: 1;
  background: rgba(0, 0, 0, 0.333);
  backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 12px rgba(0, 0, 0, 0.35);
}

.flipbook-thumb-strip-maximize,
.flipbook-thumb-strip-close {
  cursor: pointer;
  padding: 11px;
  opacity: 1;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.flipbook-thumb-strip-maximize:hover,
.flipbook-thumb-strip-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

.flipbook-thumb-strip-maximize svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  color: #fff;
  stroke: #fff;
}

.flipbook-thumb-strip-close svg {
  width: 18px;
  height: 18px;
  fill: #fff;
  color: #fff;
  stroke: #fff;
}

.flipbook-thumb-strip-scroller {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 2px 4px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.flipbook-thumb-strip-rtl .flipbook-thumb-strip-scroller {
  direction: rtl;
}

.flipbook-thumb-strip-rtl .flipbook-thumb-strip-spread {
  direction: rtl;
}

.flipbook-thumb-strip-scroller::-webkit-scrollbar {
  height: 4px;
}

.flipbook-thumb-strip-scroller::-webkit-scrollbar-track {
  background: transparent;
}

.flipbook-thumb-strip-scroller::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.flipbook-thumb-strip-scroller::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.flipbook-thumb-strip-spread {
  flex-shrink: 0;
  height: 100%;
  display: flex;
  scroll-margin-inline: 40px;
  transition: transform 0.15s ease;
  transform-origin: center center;
}


.flipbook-thumb-strip-thumb {
  flex-shrink: 0;
  height: 100%;
  width: auto;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

.flipbook-thumb-strip-spread:hover .flipbook-thumb-strip-thumb {
  opacity: 1;
}

.flipbook-thumb-strip-thumb.flipbook-thumb-strip-active {
  opacity: 1;
}

.flipbook-thumb-strip-spread.flipbook-thumb-strip-spread-active {
  box-shadow: 0 0 0 2px var(--flipbook-accent-color);
}

.flipbook-thumb-strip-thumb img,
.flipbook-thumb-strip-thumb canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.flipbook-thumb {
  margin: 15px 10px 10px;
  cursor: pointer;
  position: relative;
  display: inline-block;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  scroll-margin-top: 20px;
  overflow: hidden;
}

.flipbook-thumb.flipbook-thumb-active {
  box-shadow: 0 0 0 4px var(--flipbook-accent-color);
}

.flipbook-thumb-spread {
  display: inline-block;
  /* margin: 0 10px; */
}

.flipbook-thumb-spread .flipbook-thumb {
  margin: 10px 0;
}

.flipbook-thumb-spread .flipbook-thumb-left .flipbook-thumb-num {
  left: 2px;
  right: unset;
}

.flipbook-thumb img,
.flipbook-thumb canvas {
  /* opacity: 1; */
  filter: brightness(0.98);
}

.flipbook-thumb:hover img,
.flipbook-thumb:hover canvas,
.flipbook-thumb.flipbook-thumb-active img,
.flipbook-thumb.flipbook-thumb-active canvas {
  /* opacity: 0.8; */
  filter: brightness(1);
}

.flipbook-thumb:hover .flipbook-thumb-num {
  background: rgba(0, 0, 0, 0.8);
}

.flipbook-thumb-active .flipbook-thumb-num {
  background: rgba(0, 0, 0, 1);
  transition: 0.2s all;
}

.flipbook-search {
  /* padding: 16px;
    position: relative;
    min-width: 240px; */
  min-width: 240px;
  padding: 10px 10px 12px; /* same vibe as ToC padding */
  box-sizing: border-box;
}

.flipbook-search-clear {
  position: absolute;
  top: 7px;
  right: 15px;
}

.flipbook-search-match {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}

.flipbook-search-match-title {
  height: 20px;
}

.flipbook-search-match-text {
  text-align: left;
}

.flipbook-search-match {
  width: 100%;
  max-width: 220px;
  margin: 2px 0;
  padding: 8px 8px;
  border-radius: 6px;
  text-decoration: none;
  box-sizing: border-box;
}

.flipbook-search-match:hover {
  background-color: rgba(128, 128, 128, 0.18);
  text-decoration: none;
}

.flipbook-search-match:active {
  background-color: rgba(128, 128, 128, 0.26);
}

.flipbook-search-match-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: auto;
  line-height: 1.25;
}

.flipbook-search-match-title span {
  float: none !important;
}

.flipbook-search-match.is-active,
.flipbook-search-match.active,
.flipbook-search-match.flipbook-thumb-active {
  background-color: rgba(128, 128, 128, 0.22);
  font-weight: 600;
}

@media (max-width: 480px) {
  .flipbook-search-match {
    width: 100% !important;
    max-width: 250px;
  }
}

.flipbook-thumb-num {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 14px;
  user-select: none;
  font-weight: 600;
  position: absolute;
  bottom: 2px;
  right: 2px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.6);
  color: white !important;
  padding: 4px 6px;
  display: inline-block;
  z-index: 1;
}

.flipbook-thumb img {
  display: inline-block;
}

.flipbook-tocHolder {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 280px;
  z-index: 9;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  box-sizing: border-box;
}

.flipbook-tocHolder .flipbook-menu-header {
  position: relative;
  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 14px 12px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
  box-sizing: border-box;
}

.flipbook-tocHolder .flipbook-menu-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-weight: 600;
  line-height: 1.2;
}

.flipbook-tocHolder .flipbook-btn-close {
  z-index: 2;
}

.flipbook-tocHolder .flipbook-toc {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;

  position: relative;
  margin: 0;
  padding: 10px 10px 12px;
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
}

.flipbook-tocHolder .flipbook-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flipbook-tocHolder .flipbook-toc ul ul {
  margin: 0;
  padding-left: 18px;
}

.flipbook-tocHolder .flipbook-toc li {
  margin: 0;
  padding: 0;
}

.flipbook-tocHolder .flipbook-toc .toc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
  padding: 8px 8px;
  margin: 2px 0;

  border-radius: 6px;
  cursor: pointer;

  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25;

  user-select: none;
}

.flipbook-tocHolder .flipbook-toc .toc-item:hover {
  background-color: rgba(128, 128, 128, 0.18);
}

.flipbook-tocHolder .flipbook-toc .toc-item:active {
  background-color: rgba(128, 128, 128, 0.26);
}

.flipbook-tocHolder .flipbook-toc .title-container {
  display: flex;
  align-items: center;
  gap: 8px;

  flex: 1 1 auto;
  min-width: 0;
}

.flipbook-tocHolder .flipbook-toc .expand-icon,
.flipbook-tocHolder .flipbook-toc .spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 16px;
  height: 16px;

  flex: 0 0 16px;
}

.flipbook-tocHolder .flipbook-toc .spacer {
  visibility: hidden;
}

.flipbook-tocHolder .flipbook-toc .expand-icon svg {
  width: 14px;
  height: 14px;
  transition: transform 0.18s ease-in-out;
}
.flipbook-tocHolder .flipbook-toc .expand-icon.expanded svg {
  transform: rotate(90deg);
}

.flipbook-tocHolder .flipbook-toc .title-container .title {
  flex: 1 1 auto;
  min-width: 0;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flipbook-tocHolder .flipbook-toc .page-number {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.8;
  white-space: nowrap;
}

.flipbook-tocHolder .flipbook-toc .toc-item.is-active {
  background-color: rgba(128, 128, 128, 0.22);
  font-weight: 600;
}

.flipbook-tocHolder .flipbook-toc {
  scrollbar-width: thin;
  scrollbar-color: rgba(130, 130, 130, 0.55) transparent;
}
.flipbook-tocHolder .flipbook-toc::-webkit-scrollbar {
  width: 10px;
}
.flipbook-tocHolder .flipbook-toc::-webkit-scrollbar-thumb {
  background: rgba(130, 130, 130, 0.45);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.flipbook-tocHolder .flipbook-toc::-webkit-scrollbar-thumb:hover {
  background: rgba(130, 130, 130, 0.65);
  border: 2px solid transparent;
  background-clip: content-box;
}

@media (max-width: 480px) {
  .flipbook-tocHolder {
    left: 0;
    right: 0;
    width: 100% !important;
    max-width: 100%;
  }
  .flipbook-tocHolder .flipbook-toc .toc-item {
    padding: 10px 10px;
  }
  .flipbook-tocHolder .flipbook-toc .title-container .title {
    font-size: 15px;
  }
}

.flipbook-search .flipbook-findbar {
  pointer-events: auto;
  margin: 0;
}

.flipbook-search .flipbook-findbar #findbarInputContainer {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.flipbook-search .flipbook-findbar input.toolbarField {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 40px 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  background: var(--flipbook-bg);
  color: var(--flipbook-color);
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.flipbook-search .flipbook-findbar input.toolbarField::placeholder {
  color: rgba(128, 128, 128, 0.85);
}

.flipbook-search .flipbook-findbar input.toolbarField:focus {
  border-color: rgba(128, 128, 128, 0.6);
  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.18);
}

.flipbook-search .flipbook-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: transparent;
  transition:
    background 0.12s ease,
    opacity 0.12s ease;
}

.flipbook-search .flipbook-search-clear:hover {
  background: rgba(128, 128, 128, 0.18);
}

.flipbook-search .flipbook-search-clear .flipbook-icon {
  width: 14px;
  height: 14px;
}

.flipbook-search .flipbook-search-clear.flipbook-hidden {
  display: none !important;
}

.invisible {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.transition {
  transition: all 0.3s ease-out;
}

.flipbook-share-email {
  background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' focusable='false' data-prefix='fas' data-icon='at' class='svg-inline--fa fa-at fa-w-16' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='currentColor' d='M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z'%3E%3C/path%3E%3C/svg%3E");
}

.flipbook-icon {
  font-style: normal;
  font-weight: normal;
  height: 100%;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  bottom: 0;
  text-align: center;
  display: flex;
  box-sizing: content-box !important;
  justify-self: left;
}

.flipbook-icon path {
  box-sizing: content-box !important;
}

.flipbook-btn-close {
  height: 36px;
  width: 36px;
  position: absolute;
  top: 4px;
  right: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.flipbook-sub-menu .flipbook-btn-close {
  border-radius: 2px;
}

.flipbook-btn-close:hover {
  background: rgba(128, 128, 128, 0.15);
}

.flipbook-center-btn-expand {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #0000006c;
  width: 24px;
  height: 24px;
  padding: 10px;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
}

.flipbook-center-btn-expand svg {
  fill: white;
  stroke: white;
  color: white;
  width: 18px;
  height: 18px;
}

.flipbook-center-btn-expand:hover {
  background: #000000bb;
}

.flipbook-btn-close .flipbook-icon {
  width: 16px;
}

.flipbook-font {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

.flipbook-fullscreen {
  /* Prevent text scaling on pinch */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* Allow horizontal and vertical scrolling, block pinch zoom */
  touch-action: pan-x pan-y;
  /* Prevent scroll-based zoom or pull-to-refresh */
  overscroll-behavior: none;
}

.flipbook-btn {
  user-select: none;
  cursor: pointer;
  width: 220px;
  line-height: 40px;
  text-align: center;
  margin: 4px auto;
  border: none;
  background: none;
  border-radius: 2px;
  transition: background 0.15s ease;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.flipbook-btn:hover {
  background: rgba(128, 128, 128, 0.12);
}

.flipbook-border {
  border: 1px solid rgba(128, 128, 128, 0.4);
}

.flipbook-border:not(:has(.flipbook-menu-btn)) {
  border: none;
}

.flipbook-sub-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999;
  animation: flipbook-fade-in 0.15s ease-out;
}

@keyframes flipbook-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes flipbook-scale-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.flipbook-sub-menu-center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.flipbook-menu-header {
  position: relative;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.02em;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}

.flipbook-menu-title {
  pointer-events: none;
  user-select: none;
}

.flipbook-sub-menu-content {
  display: inline-block;
  margin-top: -20px;
  min-width: 260px;
  padding: 0 0 8px;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  animation: flipbook-scale-in 0.2s ease-out;
}

.flipbook-carousel-slide {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  position: absolute;
  overflow: hidden;
}

.flipbook-carousel-slide .slide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* .flipbook-carousel-slide .slide-inner {
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.12),
        0 16px 40px rgba(0, 0, 0, 0.08);
} */

.flipbook-carousel-page {
  display: inline-block;
  background: #f1f1f1;
  position: relative;
}

.flipbook-scroll-spacer {
  position: relative;
}

.flipbook-scroll-content {
  position: absolute;
  top: 0;
  left: 0;
}

/* In scroll mode the bookLayer itself doesn't scroll — the inner viewport
   does. Block native page-level pinch-zoom on touches that fall on the
   bookLayer area outside the viewport (e.g. between buttons) so iOS
   Safari doesn't zoom the host page. */
.flipbook-bookLayer.flipbook-mode-scroll {
  touch-action: none;
}

.flipbook-bookLayer.flipbook-mode-scroll .flipbook-scroll-viewport {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  cursor: grab;
}

/* In scroll mode the viewport handles pan natively. The general
   .flipbook-zoomed-in * rule (above) sets touch-action: none on every
   descendant of bookLayer — correct for book3/panzoom modes that drive
   pan in JS, but in scroll mode it kills native pan on the touched page.
   iOS bypasses parent touch-action over user-select: text, so the bug
   appears on raster bg areas while pan still works over text (the
   "sometimes" symptom). Re-enable pan on viewport descendants — higher
   specificity (3 classes + *) than the general rule (2 classes + *). */
.flipbook-bookLayer.flipbook-mode-scroll .flipbook-scroll-viewport * {
  touch-action: pan-x pan-y;
}


/* PanZoom's inner scroll container. Lives inside bookLayer, holds
   the spacer + book. Arrow buttons / overlays appended to bookLayer
   are siblings — they don't scroll when this becomes overflow:auto.
   Mirrors BookScroll's bookLayer/viewport split. */
.flipbook-pan-viewport {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

/* PanZoom toggles flipbook-pan-scroll on the viewport when scaled
   content overflows (zoomed beyond fit). Used purely as a hook for
   the touch-action: none rule below — the actual pan is GPU-composited
   transform on book, not native overflow:auto scroll. */

/* At fit zoom (no scroll-mode active), viewport descendants allow
   pan-x pan-y for normal touch-pan / native scroll. */
.flipbook-bookLayer.flipbook-mode-3d .flipbook-pan-viewport,
.flipbook-bookLayer.flipbook-mode-3d .flipbook-pan-viewport * {
  touch-action: pan-x pan-y;
}

/* In scroll-mode (zoomed in), touch-action: none on viewport
   descendants. iOS' native pan engine axis-locks vertical at
   touch-start when the touched element has user-select:text
   (.flipbook-page-html for PDF text), regardless of touch-action:
   pan-x pan-y. Setting touch-action: none disables native pan
   entirely; PanZoom drives scrollLeft/Top via JS pointer events
   instead, with custom momentum on release.
   touch-action: none still allows tap and long-press, so text
   selection works (long-press → iOS selection handles), and links
   / buttons remain clickable. Selector matches the parent rule's
   specificity (3 classes) so it cleanly overrides. */
.flipbook-bookLayer.flipbook-mode-3d .flipbook-pan-viewport.flipbook-pan-scroll,
.flipbook-bookLayer.flipbook-mode-3d .flipbook-pan-viewport.flipbook-pan-scroll * {
  touch-action: none;
}

.flipbook-bookLayer.flipbook-mode-scroll .flipbook-scroll-viewport.flipbook-grabbing {
  cursor: grabbing;
}

.flipbook-scroll-page {
  display: block;
  background: #f1f1f1;
  position: relative;

  /* box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.08),
        0 8px 20px rgba(0, 0, 0, 0.12),
        0 16px 40px rgba(0, 0, 0, 0.08); */
}

.flipbook-carousel-page-inner,
.flipbook-scroll-page-inner {
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
  margin: 0;
  padding: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.flipbook-carousel-page-inner canvas,
.flipbook-scroll-page-inner {
  width: 100%;
  height: 100%;
}

.flipbook-carousel-page img,
.flipbook-scroll-page img {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  position: absolute;
  pointer-events: none;
  user-select: none;
  max-width: 200%;
}

.flipbook-carousel-page .page-carousel-img,
.flipbook-scroll-page .page-scroll-img {
  height: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.flipbook-overflow-hidden::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */

.flipbook-overflow-hidden {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
  overflow: hidden;

  /* Prevent text scaling on pinch */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* Allow horizontal and vertical scrolling, block pinch zoom */
  touch-action: pan-x pan-y;
  /* Prevent scroll-based zoom or pull-to-refresh */
  overscroll-behavior: none;

  height: 100%;
  margin: 0;
  padding: 0;
  /* Prevent default scrolling from affecting toolbar */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

/*share*/

.flipbook-share .social.bottom,
.flipbook-share .social.top {
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
}

.flipbook-share {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flipbook-share [class*="entypo-"]:before {
  font-family: entypo, sans-serif;
}

.flipbook-share label {
  font-size: 16px;
  cursor: pointer;
  margin: 0;
  padding: 5px 10px;
  border-radius: 5px;
  background: #a29baa;
  color: #333;
  transition: all 0.3s ease;
}

.flipbook-share label:hover {
  opacity: 0.8;
}

.flipbook-share label span {
  text-transform: uppercase;
  font-size: 0.9em;
  font-family: Lato, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  padding-left: 6px;
}

.flipbook-share ul {
  position: relative;
  left: 0;
  right: 0;
  height: 46px;
  color: #fff;
  margin: auto;
  padding: 0;
  list-style: none;
}

.flipbook-share ul li {
  font-size: 16px;
  cursor: pointer;
  width: 40px;
  margin: 0;
  padding: 9px 0;
  text-align: center;
  float: left;
  height: 22px;
  position: relative;
  z-index: 2;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flipbook-page-preloader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2147483647;
  pointer-events: none;
}

.flipbook-page-preloader .cssload-speeding-wheel {
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 6px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 6px),
    #000 calc(100% - 6px)
  );
}

.flipbook-page-preloader-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/** preloader*/
.cssload-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2147483647;
  pointer-events: none;
}

@keyframes cssload-spin {
  to {
    transform: rotate(360deg);
  }
}

.cssload-speeding-wheel {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(140, 140, 140, 0) 0%,
    rgba(140, 140, 140, 0.5) 10%,
    rgba(140, 140, 140, 0.85) 40%,
    rgba(180, 180, 180, 0.95) 70%,
    rgba(220, 220, 220, 1) 90%,
    rgba(255, 255, 255, 0) 100%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 3px)
  );
  animation: cssload-spin 0.8s linear infinite;
}

.flipbook-loading-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.3);
}

/**new preloader end*/

.flipbook-loading-text {
  position: absolute;
  top: 45%;
  margin-top: 20px;
  width: 100%;
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
  font-size: 14px;
  color: #aaa !important;
}

.flipbook-loading-bg {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  top: 45%;
  left: 50%;
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.2);
  margin: -20px;
  display: none;
}

.flipbook-fillPreloader {
  position: fixed;
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  pointer-events: none;
}

.flipbook-fillPreloader img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.1s ease-out;
}

.thumb-btn-close {
  right: 0;
  margin: 3px;
  border-radius: 2px;
  position: absolute;
  cursor: pointer;
  padding: 4px 6px;
  z-index: 1;
}

.flipbook-noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.flipbook-btn-active {
  background: rgba(128, 128, 128, 0.5);
}

.flipbook-move {
  cursor: move;
  /* fallback if move cursor is unsupported */
  /* cursor: -webkit-grab; */
  cursor: grab;
}

.flipbook-page-item {
  bottom: auto;
  right: auto;
  position: absolute;
  transition: all 0.2s ease-out;
  z-index: 0;
}

.flipbook-page-item iframe {
  width: 100%;
  height: 100%;
}

.textLayer mark {
  background: #ff0;
  color: transparent !important;
  padding: 0;
}

.textLayer .mark-blue {
  background: blue;
}

.textLayer .mark-red {
  background: red;
}

.textLayer .mark-green {
  background: green;
}

/* 
.flipbook-textLayer {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    opacity: var(--flipbook-link-opacity);
    line-height: 1;
    color: #000;
    pointer-events: none;
}

.flipbook-textLayer br {
    user-select: none;
}

.flipbook-page-htmlContent * {
    max-width: initial;
}

.flipbook-page-htmlContent .pageClickArea {
    position: absolute;
    width: 5%;
    height: 100%;
    top: 0;
    cursor: pointer;
    draggable: none;
}

.pageClickAreaLeft {
    left: 0;
}

.pageClickAreaRight {
    right: 0;
}

.textLayer mark {
    background: #ff0;
    color: transparent;
}

.textLayer .mark-blue {
    background: blue;
}

.textLayer .mark-red {
    background: red;
}

.textLayer .mark-green {
    background: green;
}

.textLayer > span {
    color: transparent !important;
    position: absolute;
    white-space: pre;
    cursor: text;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0 0;
}

.textLayer > span::selection {
    color: transparent !important;
}

.textLayer > div {
    color: transparent !important;
    position: absolute;
    white-space: pre;
    cursor: text;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0 0;
}

.textLayer .highlight {
    margin: -1px;
    padding: 1px;
    background-color: rgb(180, 0, 170);
    border-radius: 4px;
}

.textLayer .highlight.begin {
    border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
    border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
    border-radius: 0;
}

.textLayer .highlight.selected {
    background-color: rgb(0, 100, 0);
}

.textLayer ::selection {
    background: rgb(0, 0, 255);
}

.textLayer ::-moz-selection {
    background: rgb(0, 0, 255);
}

.textLayer .endOfContent {
    background: initial;
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    right: 0;
    bottom: 0;
    z-index: -1;
    cursor: default;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
}

.textLayer .endOfContent.active {
    top: 0;
}

.flipbook-disable-text-selection {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.annotationLayer section {
    position: absolute;
    padding: 0;
    margin: 0;
    background: none;
} */

.flipbook-page-html .pageClickArea {
  position: absolute;
  width: 50px;
  height: 50px;
  bottom: 0;
  cursor: pointer;
  z-index: 20;
}

.pageClickAreaLeft {
  left: 0;
}

.pageClickAreaRight {
  /* right: 0; */
}

.annotationLayer .linkAnnotation > a,
.annotationLayer .buttonWidgetAnnotation.pushButton > a,
.flipbook-page-item-link {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--flipbook-link-color);
  animation-duration: 2000ms;
  animation-delay: 500ms;
  animation-name: flashLinks;
  opacity: var(--flipbook-link-opacity);
}

.flipbook-page-auto-link {
  background: var(--flipbook-link-color);
  color: transparent !important;
  animation-duration: 2000ms;
  animation-delay: 500ms;
  animation-name: flashLinks;
  pointer-events: auto;
}

.flipbook-page-auto-link-hover {
  background: var(--flipbook-link-color-hover) !important;
  color: transparent !important;
}

@keyframes flashLinks {
  0% {
    background: var(--flipbook-link-color);
  }

  20% {
    background: var(--flipbook-link-color-hover);
  }

  100% {
    background: var(--flipbook-link-color);
  }
}

.flipbook-has-buttons {
  animation-name: flashLinksButtons;
  animation-duration: 2000ms;
  animation-delay: 500ms;
}

@keyframes flashLinksButtons {
  0% {
    background: transparent;
  }

  20% {
    background: rgba(255, 255, 0, 0.3);
  }

  100% {
    background: transparent;
  }
}

.flipbook-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  top: 300px;
  left: 300px;
  color: white;
  padding: 6px 12px;
  font-size: 13px;
  line-height: 13px;
  font-weight: normal;
  white-space: nowrap;
  text-align: center;
  -webkit-transition: opacity 0.2s ease-in;
  transition: opacity 0.2s ease-in;
  z-index: 10000;
}

.flipbook-submenu {
  position: absolute;
  right: 0;
  width: max-content;
  text-wrap: nowrap;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden !important;
  animation: flipbook-scale-in 0.15s ease-out;
}

.flipbook-submenu .flipbook-menu-btn {
  justify-content: left;
  padding: 4px 12px;
  transition: background 0.15s ease;
  font-size: 13px;
}

.flipbook-submenu .flipbook-menu-btn:hover {
  background: rgba(128, 128, 128, 0.12);
}

.flipbook-menuTop .flipbook-submenu {
  top: calc(100% + 5px);
}

.flipbook-menuBottom .flipbook-submenu {
  bottom: calc(100% + 5px);
}

.flipbook-menuTop * {
  box-sizing: content-box !important;
}

.flipbook-menuBottom * {
  box-sizing: content-box !important;
}

.flipbook-add-note-rect {
  position: absolute;
  pointer-events: none;
}

.add-note-btn {
  pointer-events: auto;
}

.flipbook-add-note-rect .add-note-btn {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0.25em;
  color: white;
  padding: 0.3em 1em;
  text-shadow: 0 1px 0 #000;
  font-weight: normal;
  white-space: nowrap;
  text-align: center;
  z-index: 10000;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  pointer-events: auto;
  cursor: pointer;
  position: absolute;
  opacity: 0;
}

.flipbook-add-note-rect.hover .add-note-btn {
  opacity: 1;
  pointer-events: auto;
}

.skin-color-bg {
  background: var(--flipbook-bg);
}
.skin-color {
  color: var(--flipbook-color);
  fill: var(--flipbook-color);
}

.flipbook-progress-bar {
  position: absolute;
  top: 4px;
  left: 12px;
  right: 12px;
  height: var(--pb-height, 4px);
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
  box-sizing: content-box;
  padding: 4px 0;
  z-index: 4;
}

.flipbook-progress-bar .progress-track {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  height: var(--pb-height, 4px);
  background: var(--flipbook-color);
  opacity: 0.15;
  border-radius: calc(var(--pb-height, 4px) / 2);
  z-index: 1;
}
.flipbook-progress-bar .progress-filled {
  position: absolute;
  top: 4px;
  left: 0;
  height: var(--pb-height, 4px);
  background: var(--flipbook-color);
  opacity: 1;
  border-radius: calc(var(--pb-height, 4px) / 2);
  z-index: 2;
  width: 0%;
}
.flipbook-progress-bar .progress-thumb {
  position: absolute;
  top: calc(4px + var(--pb-height, 4px) / 2);
  left: 0%;
  width: 12px;
  height: 12px;
  background: var(--flipbook-color);
  border: none;
  border-radius: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s ease;
}
.flipbook-progress-bar .progress-track,
.flipbook-progress-bar .progress-filled {
  transition: transform 0.15s ease;
  transform-origin: center center;
}
.flipbook-progress-bar:hover .progress-track {
  transform: scaleY(1.8);
  opacity: 0.25;
}
.flipbook-progress-bar:hover .progress-filled {
  transform: scaleY(1.8);
  opacity: 1;
}
.flipbook-progress-bar:hover .progress-thumb {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.3);
}
.flipbook-progress-bar .progress-thumb:focus {
  opacity: 1;
  outline: none;
}
.flipbook-progress-bar:focus {
  outline: none;
}

.flipbook-note-display {
  width: 230px;
  height: 125px;
  position: absolute;
  background-color: #fafafa;
  -webkit-box-shadow: 0 2px 10px 0 rgb(27 47 73 / 30%);
  box-shadow: 0 2px 10px 0 rgb(27 47 73 / 30%);
  border-radius: 5px;
  pointer-events: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.flipbook-note-display .note-content {
  height: 76px;
  position: absolute;
  width: 210px;
  margin: 11px 15px 5px 15px;
  overflow: hidden;
}

.flipbook-note-display .note-article {
  font-family: inherit;
  resize: none;
  font-size: 14px;
  width: 200px;
  height: 76px;
  position: absolute;
  left: 0;
  top: 0;
  border-width: 1px;
  border-style: solid;
  padding: 0;
  color: rgb(89, 97, 104);
  border-color: transparent;
  background-color: transparent;
  outline: none !important;
}

.flipbook-note-display .note-article:focus {
  box-shadow: none;
}

.flipbook-note-display .note-delete-button .svg-icon {
  width: 22px;
  height: 22px;
  fill: #a6aaad;
}

.flipbook-note-display .note-button {
  float: right;
  font-size: 22px;
  line-height: 22px;
  height: 22px;
  color: #8d8d8d;
  cursor: pointer;
  text-align: center;
  margin: 5px 11px;
}

.flipbook-note-display .note-footer {
  height: 37px;
  width: 100%;
  margin: 0;
  bottom: 0;
  position: absolute;
}

.flipbook-page-note {
  pointer-events: auto;
  cursor: pointer;
}

.annotationLayer .linkAnnotation > a:hover,
.annotationLayer .buttonWidgetAnnotation.pushButton > a:hover,
.flipbook-page-item-link:hover {
  background: var(--flipbook-link-color-hover) !important;
  color: transparent !important;
}

.flipbook-page-auto-link:hover {
  background: var(--flipbook-link-color-hover) !important;
  color: transparent !important;
}

.flipbook-note-display {
  opacity: 1;
}

.flipbook-spotlight-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0, 0.88);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10002;
}

.flipbook-spotlight-overlay img {
  max-width: 80%;
  max-height: 80%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.flipbook-spotlight-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  z-index: 1;
}

.flipbook-spotlight-close-button:hover {
  opacity: 0.7;
}

.flipbook-spotlight-caption-container {
  color: white;
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
  padding: 15px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  margin-top: 10px;
}

.flipbook-spotlight-title {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}

.flipbook-spotlight-description {
  font-size: 14px;
  font-weight: normal;
}

.flipbook-preview-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  z-index: 10003;
}

.flipbook-preview-modal {
  position: relative;
  background: var(--flipbook-bg, #fff);
  color: var(--flipbook-color, #222);
  width: 100%;
  max-width: 420px;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  padding: 28px 28px 24px;
  box-sizing: border-box;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
}

.flipbook-preview-modal-content {
  font-size: 15px;
  line-height: 1.6;
}

.flipbook-preview-modal-content a {
  color: #1a73e8;
}

.flipbook-preview-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flipbook-preview-modal-close:hover {
  opacity: 1;
}

.flipbook-locked-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
}

.flipbook-locked-overlay a,
.flipbook-locked-overlay button {
  pointer-events: auto;
}

.flipbook-locked-default {
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 18px;
  border-radius: 6px;
}

.flipbook-preview-modal-default {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.flipbook-page-html {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  cursor: zoom-in;
}

.flipbook-page-html .htmlContent {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 4;
  pointer-events: none;
}

.flipbook-page-html-only .htmlContent {
  pointer-events: auto;
}

/* Inner shadow at spine edge to match WebGL lightMap */
.flipbook-page-html-only::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6.25%;
  z-index: 10;
  pointer-events: none;
}

/* Right page: spine at left edge — specularF #d7d7d7 -> #CCC (slight highlight) */
.R .flipbook-page-html-only::after,
.RInner .flipbook-page-html-only::after {
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,0.05), rgba(255,255,255,0));
}

/* Left page: spine at right edge */
.L .flipbook-page-html-only::after,
.LInner .flipbook-page-html-only::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.06), rgba(0,0,0,0));
}

.C .flipbook-page-html-only::after,
.CInner .flipbook-page-html-only::after {
  display: none;
}

.flipbook-page-html-only .htmlContent :is(p, h1, h2, h3, h4, h5, h6, span, li, td, th, dt, dd, label, blockquote, figcaption) {
  cursor: text;
}

.flipbook-page-html-only .htmlContent :is(a, button, input, select, textarea, [onclick]) {
  cursor: pointer;
}

.flipbook-page-html.zoomed {
  cursor: zoom-out;
}

.flipbook-page-html.mousedown {
  cursor: grab;
}

.flipbook-page-html .htmlContent * {
  pointer-events: auto;
}

.flipbook-page3-inner[data-visible="false"] .htmlContent * {
  pointer-events: none !important;
}

.flipbook-page-html .textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  opacity: 0.25;
  line-height: 1;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
  font-weight: initial;
  user-select: none;
}

.flipbook-page-html .textLayer :is(span, br) {
  color: transparent !important;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.flipbook-page-html .textLayer * {
  user-select: text;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
* the problem doesn't show up in "text" reference tests. */
.flipbook-page-html .textLayer span.markedContent {
  top: 0;
  height: 0;
}

.flipbook-page-html .textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.flipbook-page-html .textLayer .highlight.appended {
  position: initial;
}

.flipbook-page-html .textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.flipbook-page-html .textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.flipbook-page-html .textLayer .highlight.middle {
  border-radius: 0;
}

.flipbook-page-html .textLayer .highlight.selected {
  background-color: var(--highlight-selected-bg-color);
}

.flipbook-page-html .textLayer ::-moz-selection {
  background: blue;
  background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
}

.flipbook-page-html .textLayer ::selection {
  background: blue;
  background: AccentColor; /* stylelint-disable-line declaration-block-no-duplicate-properties */
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.flipbook-page-html .textLayer br::-moz-selection {
  background: transparent;
}
.flipbook-page-html .textLayer br::selection {
  background: transparent;
}

.flipbook-page-html .textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.flipbook-page-html .textLayer .endOfContent.active {
  top: 0;
}

:root {
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
    --hcm-highligh-filter: invert(100%);
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer
    .buttonWidgetAnnotation:is(.checkBox, .radioButton)
    input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    -webkit-backdrop-filter: var(--hcm-highligh-filter);
    backdrop-filter: var(--hcm-highligh-filter);
  }

  .annotationLayer .linkAnnotation > a:hover {
    opacity: 0 !important;
    background: none !important;
    box-shadow: none;
  }

  .annotationLayer .popupAnnotation .popup {
    outline: calc(1.5px * var(--scale-factor)) solid CanvasText !important;
    background-color: ButtonFace !important;
    color: ButtonText !important;
  }

  .annotationLayer .highlightArea:hover::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: var(--hcm-highligh-filter);
    backdrop-filter: var(--hcm-highligh-filter);
    content: "";
    pointer-events: none;
  }

  .annotationLayer .popupAnnotation.focused .popup {
    outline: calc(3px * var(--scale-factor)) solid Highlight !important;
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation="90"] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation="180"] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation="270"] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: var(--link-outline);
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer
  :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder)
  > a:hover {
  /* opacity: 0.2;
    background-color: rgba(255, 255, 0, 1);
    box-shadow: 0 2px 10px rgba(255, 255, 0, 1); */
}

.annotationLayer .linkAnnotation.hasBorder:hover {
  background-color: rgba(255, 255, 0, 0.2);
}

.annotationLayer .hasBorder {
  background-size: 100% 100%;
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer
  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
  input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer
  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
  input[disabled] {
  background: none;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer
  .buttonWidgetAnnotation:is(.checkBox, .radioButton)
  input:hover {
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid var(--input-focus-border-color);
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: "";
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
* Letter spacing is placed on the right side of each character. Hence, the
* letter spacing of the last character may be placed outside the visible
* area, causing horizontal scrolling. We avoid this by extending the width
* when the element has focus and revert this when it loses focus.
*/
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .popupAnnotation {
  position: absolute;
  font-size: calc(9px * var(--scale-factor));
  pointer-events: none;
  width: max-content;
  max-width: 45%;
  height: auto;
}

.annotationLayer .popup {
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--scale-factor));
  outline: 1.5px solid rgb(255, 255, 74);
  padding: calc(6px * var(--scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popupAnnotation.focused .popup {
  outline-width: 3px;
}

.annotationLayer .popup * {
  font-size: calc(9px * var(--scale-factor));
}

.annotationLayer .popup > .header {
  display: inline-block;
}

.annotationLayer .popup > .header h1 {
  display: inline;
}

.annotationLayer .popup > .header .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--scale-factor));
  width: -moz-fit-content;
  width: fit-content;
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--scale-factor));
  padding-top: calc(2px * var(--scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--scale-factor));
}

.annotationLayer .popupTriggerArea {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}

.annotationLayer svg.quadrilateralsContainer {
  contain: strict;
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

/* print.js https://github.com/crabbly/Print.js/releases/tag/v1.5.0 */
.printModal {
  font-family: sans-serif;
  display: flex;
  text-align: center;
  font-weight: 300;
  font-size: 30px;
  left: 0;
  top: 0;
  position: absolute;
  color: #045fb4;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.9);
}

.printClose {
  position: absolute;
  right: 10px;
  top: 10px;
}

.printClose:before {
  content: "\00D7";
  font-family:
    Helvetica Neue,
    sans-serif;
  font-weight: 100;
  line-height: 1px;
  padding-top: 0.5em;
  display: block;
  font-size: 2em;
  text-indent: 1px;
  overflow: hidden;
  height: 1.25em;
  width: 1.25em;
  text-align: center;
  cursor: pointer;
}

.printSpinner {
  margin-top: 3px;
  margin-left: -40px;
  position: absolute;
  display: inline-block;
  width: 25px;
  height: 25px;
  border: 2px solid #045fb4;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.printSpinner:after,
.printSpinner:before {
  left: -2px;
  top: -2px;
  display: none;
  position: absolute;
  content: "";
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
}

.printSpinner,
.printSpinner:after,
.printSpinner:before {
  display: inline-block;
  border-color: #045fb4 transparent transparent;
  animation-duration: 1.2s;
}

.printSpinner:before {
  transform: rotate(120deg);
}

.printSpinner:after {
  transform: rotate(240deg);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

/* ── Product Hotspot ── */

.flipbook-hotspot:not(.flipbook-page-item-link) {
  cursor: pointer;
  opacity: 1 !important;
  background: transparent !important;
  animation: none !important;
}

.flipbook-hotspot:not(.flipbook-page-item-link):hover {
  background: transparent !important;
}

.flipbook-hotspot-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--hotspot-dot-size, 18px);
  height: var(--hotspot-dot-size, 18px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--hotspot-dot-color, #2C6ECB);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}

.flipbook-hotspot-dot::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--hotspot-dot-color, #2C6ECB);
  opacity: 0.4;
  animation: hotspotPulse 2s ease-out infinite;
}

@keyframes hotspotPulse {
  0% {
    width: 100%;
    height: 100%;
    opacity: 0.4;
  }
  100% {
    width: 280%;
    height: 280%;
    opacity: 0;
  }
}

.flipbook-hotspot-tooltip {
  position: absolute;
  z-index: 100;
  width: 220px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease, scale 0.22s ease;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #111;
  scale: 0.96;
  transform-origin: center;
}

.flipbook-hotspot-tooltip.visible {
  scale: 1;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Simple text tooltip */
.flipbook-hotspot-tooltip-text {
  border-radius: 3px;
  width: auto !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.flipbook-hotspot-tooltip-text .flipbook-hotspot-tooltip-body {
  padding: 7px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: #111;
  white-space: nowrap;
}

/* Rich card tooltip */
.flipbook-hotspot-tooltip-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  background: #fafafa;
}

.flipbook-hotspot-tooltip-card .flipbook-hotspot-tooltip-body {
  padding: 14px 14px 14px;
}

.flipbook-hotspot-tooltip-title {
  font-size: 13px;
  font-weight: 500;
  color: #111;
  line-height: 1.4;
  letter-spacing: -0.005em;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flipbook-hotspot-tooltip-description {
  font-size: 12px;
  font-weight: 400;
  color: #555;
  line-height: 1.45;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.flipbook-hotspot-tooltip-variant-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  color: #111;
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  margin: 0 0 8px;
  cursor: pointer;
}

.flipbook-hotspot-tooltip-variant-select:focus {
  outline: 2px solid #2c6ecb;
  outline-offset: 1px;
}

.flipbook-hotspot-tooltip-price {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
}

.flipbook-hotspot-tooltip-price .compare-price {
  font-size: 12px;
  font-weight: 400;
  color: #b0b0b0;
  text-decoration: line-through;
  margin-left: 6px;
}

.flipbook-hotspot-tooltip-qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 10px;
  border: 1px solid #ececec;
  border-radius: 3px;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.flipbook-hotspot-tooltip-qty-btn {
  width: 32px;
  height: 30px;
  border: none;
  background: #fafafa;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  -webkit-user-select: none;
  user-select: none;
}

.flipbook-hotspot-tooltip-qty-btn:hover {
  background: #f0f0f0;
}

.flipbook-hotspot-tooltip-qty-btn:active {
  background: #e8e8e8;
}

.flipbook-hotspot-tooltip-qty-value {
  flex: 1;
  min-width: 36px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #111;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  line-height: 30px;
}

.flipbook-hotspot-tooltip-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flipbook-hotspot-tooltip-btn {
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.1s ease;
  line-height: 1.2;
  white-space: nowrap;
}

.flipbook-hotspot-tooltip-btn:active {
  transform: scale(0.98);
}

.flipbook-hotspot-tooltip-btn-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}

.flipbook-hotspot-tooltip-btn-primary:hover {
  background: #000;
  border-color: #000;
}

.flipbook-hotspot-tooltip-btn-secondary {
  background: #fff;
  color: #111;
  border-color: #111;
}

.flipbook-hotspot-tooltip-btn-secondary:hover {
  background: #111;
  color: #fff;
}

/* Free plan branding watermark */
@keyframes r3dFadeIn {
  from { opacity: 0; }
  to { opacity: 0.8; }
}

.r3d-wm {
  display: inline-block;
  position: absolute;
  right: 12px;
  bottom: 12px;
  opacity: 0;
  pointer-events: auto;
  z-index: 999;
  animation: r3dFadeIn 0.6s ease forwards, r3dWmFlash 2000ms 500ms ease forwards;
}

@keyframes r3dWmFlash {
  0%   { filter: drop-shadow(0 0 0 transparent); }
  20%  { filter: drop-shadow(0 0 12px rgba(255, 255, 255, 1)); }
  100% { filter: drop-shadow(0 0 0 transparent); }
}

.r3d-wm img {
  height: 65px;
  width: auto;
}

.r3d-wm-light img {
  filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.7)) drop-shadow(-1px -1px 1px rgba(255, 255, 255, 0.5));
}

.r3d-wm-dark img {
  filter: drop-shadow(1px 1px 1px rgba(255, 255, 255, 0.5)) drop-shadow(-1px -1px 1px rgba(0, 0, 0, 0.3));
}

/* Keyboard focus indicator. :focus-visible matches keyboard focus only,
   so mouse clicks and taps stay outline-free. */
.flipbook-menu-btn:focus-visible,
.flipbook-left-arrow:focus-visible,
.flipbook-right-arrow:focus-visible,
.flipbook-first-arrow:focus-visible,
.flipbook-last-arrow:focus-visible {
  outline: 2px solid var(--flipbook-accent-color, #4285f4);
  outline-offset: 2px;
}