.booklet {
   position: fixed;
   height: 100%;
   width: 50%;
   left: 25%;
   top: 0;
}

.booklet--modal {
   height: 80%;
   top: 10%;
}

.booklet--w9936 {
   height: 99%;
   width: 36%;
   left: 32%;
   top: 0;
}

.booklet__title {
   background: #b60d61;
   border: 1px solid #8f084c;
   color: white;
   font-size: 18px;
   padding: 4px 12px;

   height: 36px; /* ~5.9% para booklet.height 80% e.g. (768 * 0.8) * 0.059 = 36.2 */
}

.booklet__title > p {
   margin-block: 0;
}

.booklet__title__closebtn {
   color: white;
   cursor: pointer;
   font-size: 30px;
   position: absolute;

   top: -3px;
   right: 12px;
}

.booklet__title__enlargebtn {
   color: white;
   cursor: pointer;
   font-size: 30px;
   position: absolute;

   top: -3px;
   right: 44px;
}

.booklet__body {
   /* padding: 0 16px; */
   background: #ffbbddeb;
   background: #ffffff;
   border-top: 0;
   border: 1px solid #8f084c;
   overflow-x: hidden; /* Hide horizontal scrollbar */
   overflow-y: hidden; /* Hide vertical scrollbar */
   height: 97%; /* 100% - 6% (36px) */
}

.booklet__body--hscrollbar {
   overflow-y: scroll; /* Add vertical scrollbar */
}
 
.booklet__body__img-center-full {
   display: block; /* <-- default display: inline */
   height: auto;
   width: 100%;
}

.booklet__body__image-center-height {
   display: block; /* <-- default display: inline */
   height: 100%;
   margin-left: auto;
   margin-right: auto;
}

.booklet__body__videocell {
   width: 100%;
}

@media only screen and (min-width: 415px) {
   .booklet__body__videocell {
      height: 100%;
   }
}

@media only screen and (max-width: 912px) {
   .booklet {
      height: 100%;
      top: 0;
      width: 100%;
      left: 0;
   }
   .booklet__title__enlargebtn {
      visibility:hidden;
   }
}