html, body {
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    bottom: 0%;
    width: 100%;
    height: 100%;
    z-index: 1054;
    max-height: 100%;
    margin: 0px;
    top: 0;
     background: #000000;
}
  .data-id {
    padding: 0 7px;
    border: 1px solid;
    margin: 0px 1px;
    background: #cde8f9;
  }
#xy img{
   z-index: 20;
  max-height: 100%;
  width: 100%;

}
.container, .book-content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container{
  width: 100%;
  height: 100vh;
 
  overflow: hidden;
}
.book-content{
  width: 100%;
  height: 90%;
  position: relative;
  transition: 1s;

}
#book{
  position: absolute !important;
  width: 100% !important;
    
 /* transition: 1s;
  transform-style: preserve-3d;*/
  transform-origin: left;

}
#next{
    z-index: 1054;
    text-decoration: none;
    font-size: 1.4em;
    color: #f4f4f4;
    border: 1px solid;
    padding: 1px 6px;
    margin: 0px;
    background: #6fac4591;
     z-index: 1054;
}
#prev{
    color: #f4f4f4;
    border: 1px solid;
    padding: 0px 6px;
    margin: 0px;
    font-size: 1.4em;
    background: #6fac45;
    z-index: 1054;
    text-decoration: none;
    z-index: 10;
}
#prv{
  position: relative;
  right: -23px;
  z-index: 1053;
  text-decoration: none;
margin-top: -25px;
}
#nxt{
  position: relative;
  right: 23px;
  z-index: 1054;
margin-top: -49px;
}

#thumb_img img{
  height: 55px !important;
    width: 55px;
    z-index: 1054;
    cursor: pointer;
}
#thumb_img{
    height: 100%;
    overflow-x: scroll;
    width: 176px;
    background-color: transparent !important;
    position: absolute;
    z-index: 1054;
}
  

#magazine{
  overflow: initial !important;
}
#img-frame{

    padding: 12px;
}

.footer{
    width: 100%;
    height: 39px;
    position: absolute;
    top: 0;
    z-index: 10;
    
}
#mdiv {
  width: 25px;
  height: 25px;
  position: absolute;
    right: 6px;
  background-color: #b9cbd7;
  border: 1px solid black;
      left: 137px;
      z-index: 1054;
}

.mdiv {
  height: 25px;
  width: 2px;
  margin-left: 12px;
  background-color: black;
  transform: rotate(45deg);
  cursor: pointer;
}

.md {
  height: 25px;
  width: 2px;
  background-color: black;
  transform: rotate(90deg);
  z-index: 2;
}
.micro-img{ 
    position: absolute;
    right: 10%;
    left: 0;
    margin: auto;
    text-align: center;
}
#pagecount{
     position: absolute;
    right: 64px;
    margin: 4px 1px;
    border: 1px solid;
}
#thumbicon{
    z-index: 1053;
    position: absolute;
    cursor: pointer;
    right: 22px;
    margin: auto;
    background-color: #cde8f9;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-thumb {
    background: #ffffff29;
}
span.even.data-id {
      margin-left: 28px;
}
.even1{
    position: relative;
    left: 59px;
     width: 60px;
}
@media only screen and (max-width: 992px) {
.book-content{
  margin-bottom: 54px;
}
}
@media only screen and (max-width: 500px) {
 #xy{
       height: auto !important;
      
    }
#nxt {
       right: 3px;
}
#prv{
    right: -3px;
margin-top: -42px;
}
.book-content{
      position: initial;
    perspective: inherit;
    vertical-align: middle;
        margin-bottom: 0;
}
  .turn-page-wrapper{
      max-height: 650px !important;
    height: 467px !important;
}
div#thumb_img {
    width: 100%;      
}
#magazine .turn-page{
  position: absolute !important;  
}
 .data-id {
    padding: 0 7px;
    border: 1px solid;
    margin: 0px 17px;
    background: #cde8f9;
    position: relative;
  }
.img-frame{
  z-index: 5;
}
#mdiv{
    left: 30px !important;
    margin: 18px 3px;
    left: unset;
    position: fixed;
}
#thumb_img img {
    height: 71px !important;
    width: 82px;
    padding: 4px 19px;
    z-index: 1054;
}
span.even.data-id {
    margin-left: 82px;
}
.even1 {
    left: 125px;

}
#book{
      height: 467px !important;
      width: 98% !important;
}
}