body {
    background-color: rgb(81, 85, 88);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  ._df_book.df-container {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    min-width: 100vw !important;
    margin: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    position: fixed !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
  }

  /* Force all flipbook elements to fill viewport */
  ._df_book {
    width: 100% !important;
    height: 100% !important;
  }

  .flipbook-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  ._df_book.df-container.df-floating.df-controls-bottom {
    bottom: 0 !important;
  }

  /* Ensure controls are at the very bottom */
  ._df_book .df-ui-wrapper.df-ui-controls,
  .df-ui-wrapper.df-ui-controls {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 5px !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    transform: none !important;
    margin: 0 !important;
  }

  .df-container.df-xs .df-ui-controls .df-ui-btn.df-ui-page {
    /* display: block !important;
    background-color: blue !important ; */
  }


  @media screen and (max-width: 480px) {
    .df-ui-wrapper.df-ui-controls {
      /* padding: 5px 3px !important;
      min-height: 45px !important; */
    }

    .df-ui-wrapper.df-ui-controls .df-ui-btn {
      /* margin: 0 1px !important;
      padding: 6px !important;
      min-width: 35px !important;
      height: 35px !important;
      font-size: 12px !important; */
    }
  }

  /* Responsive container adjustments */
  @media screen and (max-width: 768px) {
    body {
      background-color: rgb(81, 85, 88) !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
    }

    .flipbook-container {
      padding: 0 !important;
      margin: 0 !important;
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
    }

    ._df_book.df-container {
      width: 100vw !important;
      height: 100vh !important;
      height: 100dvh !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
    }

     /* SHOW ARROW WHEN MOBILE */
    .df-container.df-xs .df-ui-controls .df-ui-btn.df-ui-page {
      display: block !important;

    }

    /* CENTER NAVIGATOR ARROW MOBILE */
    .df-container>.df-ui-next, .df-container>.df-ui-prev {
      transform: translateY(-120%) !important;
    }

    /* center loading in MOBILE */
    .df-container:before,
    .df-container:after {
       top: 45% !important;
    }


    /* Force all child elements to use the same background - but only for container, not content */
    .df-ui-wrapper:not(.df-ui-controls) {
      background-color: transparent !important;
    }
  }
  /* Mobile responsive adjustments */
  @media screen and (max-width: 768px) {
    .df-ui-wrapper.df-ui-controls {
      padding: 10px 5px calc(10px + env(safe-area-inset-bottom, 0)) 5px !important;
      min-height: 50px !important;
      position: fixed !important;
      bottom: 0 !important;
    }

    .df-ui-wrapper.df-ui-controls .df-ui-btn {
      margin: 0 3px !important;
      padding: 10px !important;
      touch-action: manipulation !important;
    }

    .flipbook-container {
      padding: 0 !important;
      margin: 0 !important;
    }

    ._df_book.df-container {
      padding-bottom: calc(70px + env(safe-area-inset-bottom, 0)) !important;
      height: 100vh !important;
      height: 100dvh !important;
    }

    /* Ensure controls don't interfere with content */
    ._df_book.df-container .df-ui-wrapper:not(.df-ui-controls):not(.df-ui-prev):not(.df-ui-next) {
      bottom: calc(60px + env(safe-area-inset-bottom, 0)) !important;
    }
  }
.df-container > .df-ui-btn.df-ui-next::before,
.df-container > .df-ui-btn.df-ui-prev::before {
  color: #ffffff !important;
  font-size: 40px !important;
  font-weight: bold !important;
  opacity: 2 !important;
}

.df-container>.df-ui-next,.df-container>.df-ui-prev {
  opacity: 1 !important;
}

.df-ui-wrapper.df-ui-controls .df-ui-btn:hover {
  color: inherit !important;
}

.df-container>.df-ui-next:hover,.df-container>.df-ui-prev:hover {
    opacity: 3 !important;
}

/* Reset styles for arrows inside the controls wrapper */
.df-ui-wrapper.df-ui-controls .df-ui-btn.df-ui-next::before,
.df-ui-wrapper.df-ui-controls .df-ui-btn.df-ui-prev::before {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Hide the text span */
.df-ui-btn.df-ui-next span,
.df-ui-btn.df-ui-prev span {
  display: none !important;
}