/* ---------------------------------------------- Adjust the following definitions to your needs ---------------------------------------------------------------------- */
body {
  overflow:hidden;
}
#wrapperMz3 {
  margin-top: 0.5em;
  margin-bottom: 1.5em;
  position:relative;
}

#thumbWrapperContainer {
  position:absolute;
  padding-top:1em;
  padding-bottom: 0.5em;
  bottom:0;
}

#pageNbrLeft, #pageNbrTotal {
  bottom: 0.5em;
  position: absolute;
  left: 0.1em;
  z-index: 10;
  height: unset;
  display: block;
  width: 3em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  color: #e0e0e0;
  background-color: rgba(0, 0, 0, 0);
}

#pgNbrInput {
  width:  inherit;
  border: none;
  background-color: inherit;
  font-size: 1em;
  color: #f0f0f0;
  padding-left:4px;
}

#mz3Logo {
  bottom: 0.5em;
  position: absolute;
  right: 0.1em;
  z-index: 10;
  height: unset;
}

#mz3CustomLogo {
  position:absolute;
  z-index:100;
}

#wrapperBurgerMenuList {
  display:none;	/* default is 'hide menu after start/reset */
}

/* keep some distance between a possibly leading language symbol and this first link symbol at any position */
.nbLink.firstLeft, .nbLink.firstCenter, .nbLink.firstRight{
  padding-left: 20px;
}

/* Same for the rightmost link symbol: keep distance before a potentially following language symbol */
.nbLink.lastLeft, .nbLink.lastCenter, .nbLink.lastRight {
  padding-right: 20px;
}
/* if the first left link symbol is the overall first symbol (i.e. no lang symnbol o the left)
  do use a smaller padding than in case of following a language symbol
 */
.nbLink.linkSymbolIsFirstLeft {
  padding-left:8px;
}
.nbLink.linkSymbolIsLastRight {
  padding-right:0;
}

/* add a small gap to the right of each link symbol (social icon or text) */
div.social {
  padding-right:8px;
}

.nbLink span.social {
  color:whitesmoke;
}

#burgerMenu {
  top: 0;
  right: 0em;
  position:absolute;
  z-index:200;
}
img.imgBurgerMenu {
  width: 3em;
  height: 3em;
}

#wrapperBurgerMenuList {
  position: absolute;
  top:0;
  z-index:  200;
  right: 3em;
  background-color: rgba(0,0,0,.5);
  padding:0.2em 0.6em;
}

#burgerMenuList li {
  cursor: pointer;
  padding-top:  0.4em;
  text-decoration:none;
}

ul#burgerMenuList.burger-menu-list {
  padding-inline-start:0;
  list-style-type: none;
}

ul#burgerMenuLanguageList li {
  min-width:48px;
  cursor: pointer;
  padding-top:  0.4em;
  text-decoration:none;
}

#burgerMenuList a {
  color:#cccccc;
  font-size: 0.8em;
  font-weight: 400;
  text-decoration: none;
}

#wrapperBurgerMenuLanguageList {
  width: auto;
  position: absolute;
  top: 2em;
  z-index: 200;
  right: 0;
  background-color: rgba(0,0,0,.5);
  font-size: 1.6em;
}

span.is-inactive-language {
  cursor: pointer;
  color:#f0f0f0;
  opacity: 0.6;
  margin-block-start: 0.4em;
  margin-block-end: 0;
}

span.is-active-language {
  cursor: pointer;
  color: #ffffff;
  opacity: 1;
}

ul#burgerMenuLanguageList {
  padding-inline-start:0;
  padding-left:0;
  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
}

/* the height of topContainer must be known before all dependent sizes including the book size cn be determined
  It is important, that the navbar height does not change when the content is added, so topContainer must be sufficiently high!
 */
#topContainer {
  height:auto;
  overflow: visible;
}

#wrapperNbAll {
  display:inline-block;
  height:inherit;
  width:100%;
  font-size:2em;
}

#wrapperNbAll a {
  text-decoration:none;
  cursor:pointer;
  z-index: 100;
}

.flex-wrapper {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

img {
  vertical-align: middle;
}
span.lang {
  margin:0;
}

div.flex-wrapper span.text.is_active_language {
  color:whitesmoke;
  font-size:60%;
}

div.flex-wrapper span.text.is_inactive_language {
  color:dimgrey;
  font-size:50%;
}

/* define the height of the social icons for the navbar */
.width-auto{
  width: auto;
}

.height-auto{
  height: auto;
}

div.flex-wrapper.social.nb{
  color: whitesmoke;
  padding-left: 0;
  padding-right: 3px;
}
div.flex-wrapper.first-social.nb{
  padding-left: 16px;
  padding-right: 3px;
}
div.flex-wrapper.last-social.nb{
  padding-left: 0;
  padding-right: 16px;
}

/* language symbols and text */
div.flex-wrapper .lang.nb {
  color: whitesmoke;
  padding-left: 4px;
  padding-right: 4px;
}
img.lang.nb.is_active_language {
  opacity: 1;
}
img.lang.nb.is_inactive_language {
  opacity: 0.5;
}

.nbLink.center.first-social {

}

div.flex-wrapper img.lang.bm {
  color: whitesmoke;
  padding-left: 0;
  padding-right: 0;
  width: 36px;
  height: auto;
}
img.lang.bm.is_active_language {
  opacity: 1;
}
img.lang.bm.is_inactive_language {
  opacity: 0.6;
}
div.flex-wrapper span.social.bm{
  color: whitesmoke;
  padding-left: 3px;
  padding-right: 3px;
  font-size: 24px;
}
div.flex-wrapper img.social.bm {
  color: whitesmoke;
  padding-left: 3px;
  padding-right: 3px;
  height: 36px;
  width: auto;
}

div.nb.wrapperInlineBlock {
  display:inline-block;
  height:inherit;
  vertical-align: top;
}

div.bm.wrapperInlineBlock {
  display:inline-block;
  height:inherit;
  vertical-align: top;
}

.nbSpacer {
  width: 0;
  height: 0.1em;
  display: inline-block;
}


/* to shift the navigation bar out of sight (i.e. hide it), height must be set 0to show the navigation bar at start-up, height should be set to auto */

#wrapperNbLeft {
  float:left;
  z-index: 10;
  text-align: left;
  height: inherit;
  padding-right: 2em;
  padding-left: 0;
  display: inline-block;
  vertical-align: top;
}


#wrapperNbCenter {
  z-index: 10;
  height: inherit;
  padding: 0 1em;
  display: inline-block;
  vertical-align: top;
}

#wrapperNbRight {
  float:right;
  z-index: 10;
  text-align: right;
  height: inherit;
  padding-left: 2em;
  padding-right: 0;
  display: inline-block;
  vertical-align: top;
}

/**** End Navbar ****/


/* -------------------------------------------------------------------------------------------------------------------- */
#slider-container {
  pointer-events: none;
}


#zoom-container {
  overflow: visible !important;
}


/* --------------------------------------------------------------------------------------------------------------------- */
#megazine {
  margin-top:0.5em;
  margin-bottom: 0.5em;
  z-index: 4;
  clear: both;
}


.rightTopContainer {
  position: absolute;
  top: 0;
  right: 0;
  height: auto;
  width: auto;
}

.leftTopContainer {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
}

/* to hide the toggle bar move it up by e.g. 100 px in setting margin-Top: -100px */
.toggleNavbar {
  position: relative;
  margin-top: -10em;
  width: auto;
  height: auto;
  margin-bottom: 0.5em;
}

.pageFlipLeft {
  position: absolute;
  z-index: 100;
  height: auto;
  width: 2em;
  left: 0;
  top:0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  background-color: rgba(0, 0, 0, 0);
}

.pageFlipRight {
  position: absolute;
  z-index: 300; /* make sure the flip button is on top of the language icons */
  height: auto;
  width: 2em;
  top:0;
  right:0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  background-color: rgba(0, 0, 0, 0);
}

.pageFlipLeft img:hover {
  cursor: pointer;
}

.pageFlipRight img:hover {
  cursor: pointer;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
  -moz-appearance:textfield; /* Firefox */
}

.pageNbrTotal p {
  font-size: 0.7em;
  text-align: left;
  color: #a0a0a0;
  padding-left: 4px;
}

.pageNbrRight {
  position: absolute;
  display: block;
  z-index: 10;
  bottom: 2em;
  height: 1.5em;
  width: 3em;  right:0.1em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  line-height: 0;
  font-size: 1em;
  color: #f0f0f0;
  background-color: rgba(0, 0, 0, 0);
}

/* in case of a custom logo, move the page number up so it does not overlap */
.pageNbrRight {
  bottom: 80px;
}

.mz3-anchor {
  cursor:pointer;
}

.mz3-url {
  cursor:pointer;
}

.mz3mail {
  cursor:pointer;
}

.mz3-default {
  cursor:pointer;
}