/* Custom presentation matching the supplied reference screenshot. */
html, body {
  background: #000;
}

#tmpContainer,
.tmpContainer {
  background-image: url("../files/mobile-ext/backGroundImgURL.jpg") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Hide FlipBuilder UI bars so only the book remains visible. */
.fbTopBar,
.pbTopBar,
.fbToolBar,
.pbToolBar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Keep the book visually centered with a clean white page surface. */
.sideContent,
.right-side,
.left-side,
.center-side,
.flip-side {
  background-color: #fff;
}


/* Fullscreen book: remove outer bars, margins and black letterboxing. */
html, body {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

body {
  position: fixed !important;
  inset: 0 !important;
}

#mainContainer,
#flipbookContainer,
.flipbook-container,
.flipbook,
#app,
#content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: transparent !important;
}

/* Remove common FlipBuilder stage/viewport letterboxing. */
.fp-viewport,
.fp-stage,
.fp-book,
.bookContainer,
#bookContainer,
#viewerContainer {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
}

/* Hide remaining UI/branding elements. */
.fbTopBar,
.pbTopBar,
.fbToolBar,
.pbToolBar,
.topBar,
.bottomBar,
.toolbar,
#toolbar,
#topToolbar,
#bottomToolbar,
.logo,
.brand,
[class*="flipbuilder"],
[id*="flipbuilder"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Let the viewer use the entire available viewport. */
canvas,
iframe {
  max-width: 100vw !important;
  max-height: 100vh !important;
}