.boxs {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.box.landscape, .photobook-content.mode-view .wrapper-book-preview.album .thumb-carousel-wrapper .box.landscape {
  background-image: url("/wp-content/themes/photovault/assets/images/photobook/landscape_bg.png");
}

.box.portrait, .photobook-content.mode-view .wrapper-book-preview.album .thumb-carousel-wrapper .box.portrait {
  background-image: url("/wp-content/themes/photovault/assets/images/photobook/portrait_bg.png");
}

.box.square, .photobook-content.mode-view .wrapper-book-preview.album .thumb-carousel-wrapper .box.square {
  background-image: url("/wp-content/themes/photovault/assets/images/photobook/square_bg.png");
}

.box:not(.text-decor) {
  /* background-color: #E69DB8; */
  box-sizing: border-box;
  background-size: cover;
  background-position: center center;
  box-shadow: 1px 1px 5px #a6a0a0;
}
.photobook-content.mode-view .box .layer-drop {
  display: none;
}

.photobook-content.mode-view .wrapper-book-preview .box {
  background-image: unset;
  box-shadow: unset;
}

.box.text-decor {
  background-color: transparent;
}

#flip-book .page-wrapper, #flip-book .page-wrapper * {
 touch-action: auto;
 overscroll-behavior: contain
}

.box .layer-drop {
  font-size: 1rem;
  font-weight: 500;
  display: flex;
  justify-items: center;
  align-items: center;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.5);
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #909090;
}

.box .layer-drop p {
  margin-bottom: 0;
  color: #909090;
  transition:
    transform 0.1s ease,
    opacity 0.1s ease;
  transform: scale(1);
  display: inline-block;
}

.box .box-overlay i.fa-dropbox {
  position: absolute;
  font-size: 24px;
  color: #eb6cba;
  opacity: 0;
  transform: scale(0);
  transition:
    transform 0.1s ease,
    opacity 0.1s ease;
  pointer-events: none;
}

.box .box-content {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.photobook-embed .box .box-content{
   cursor:default;
}

.photobook-embed .logo{
   width: 50px;
   margin-left: 10px;
}

.box .box-content-text {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

.box .box-content .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.box .content .image-info {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  gap: 10px;
}

.content .image-info i {
  font-size: 25px;
  font-weight: 700;
  opacity: 0.6;
  cursor: pointer;
}

.content #ptb-loading {
  position: absolute;
  font-size: 25px;
}

.content .rotate-image-btn {
  position: absolute;
  top: 5px;
  width: 25px;
  height: 25px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.2s, background 0.2s;
}

.photobook-content.mode-view .rotate-image-btn {
  display: none;
}

.content .rotate-image-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

.content .rotate-image-btn.left {
  right: 50%;
}

.content .rotate-image-btn.right {
  left: 50%;
}

.box .box-content .data-info {
  font-size: 24px;
}

.photobook-content.mode-view .box-content .data-info {
  display: none;
}
.page.p1 .page-content::before,.page.last1 .page-content::after{
    background: linear-gradient(90deg, rgba(51, 51, 51, 0) 39.85%, rgba(51, 51, 51, .097) 49.51%, rgba(51, 51, 51, .2) 51.64%, rgba(0, 0, 0, .102) 53.24%, rgba(51, 51, 51, 0) 56.04%), linear-gradient(90deg, rgba(51, 51, 51, 0) 22.4%, rgba(51, 51, 51, .25) 48.96%, rgba(51, 51, 51, 0) 75%);
    content: "";
    opacity: .4;
    position: absolute;
    width: 12.5%;
    height: 100%;
    top: 0;
}
.page.p1 .page-content::before{
  left: 0;
}
.page.last1 .page-content::after{
  right: 0;
}
.page.active .page-content {
  border: 1px solid #0d99ff;
}

.photobook-content.mode-view .page.active .page-content {
  border: none;
}

.page-content {
  position: relative;
  z-index: 1;
}

.page-content .box {
  box-sizing: border-box;
}

.page-content .box .cancel-icon {
  width: 15px;
  height: 15px;
  position: absolute;
  top: 2px;
  right: 2px;
  border-radius: 50%;
}

.page-content .box .add-icon {
  width: 25px;
  height: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page.even .page-content .cancel-layout {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  right: 2px;
  cursor: pointer;
}

.page.odd .page-content .cancel-layout {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 2px;
  cursor: pointer;
}

.page .page-content .cancel-layout.single {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
}
.book-preview-content{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.book-preview-content-inner {
  position: relative;
  display: block;
}
.book-preview-content-footer{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 100%;
  position: relative;
}
.book-preview-content-footer .page-number{
  font-size: 1rem;
  font-weight: 500;
  color: #909090;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fake-layer{
  position: absolute;
}
.aspect {
  padding-bottom: 80%;
  position: relative;
  width: 100%;
}
.aspect-inner {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.sj-book {
  height: 100%;
  transition: margin-left 0.25s ease-out;
  width: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.sj-book .shadow {
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
}

.sj-book .page {
  height: 100%;
  width: 100%;
  background-color: white;
}
.sj-book .page.p1,
.sj-book .page.last1 {
  background: unset;
  background-color: red;
}

.sj-book .page-number {
  color: #999;
  width: 100%;
  bottom: 20px;
  position: absolute;
  display: block;
  text-align: center;
  line-height: 30px;
  font-size: 11px;
}

.sj-book .page-content {
  width: 100%;
  height: 100%;
}

.sj-book .even {
  background-image: url(../../turnjs/pics/gradient-page-left.jpg);
  background-position: right top;
  background-repeat: repeat-y;
}

.sj-book .odd {
  background-image: url(../../turnjs/pics/gradient-page-right.jpg);
  background-position: left top;
  background-repeat: repeat-y;
}

.sj-book .depth {
  background-image: url(../../turnjs/pics/pages-depth.png);
  position: absolute;
  top: 7px;
  width: 16px;
  height: 590px;
}

.sj-book .front-side .depth {
  left: 4px;
  background-position: 0 0;
}

.sj-book .back-side .depth {
  right: 4px;
  background-position: right 0;
}

/*photobook-2*/

.flip-book .shadow {
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3);
}

.flip-book .page {
  height: 100%;
  width: 100%;
  background-color: white;
}

.flip-book .page-number {
  color: #000000;
  width: 100%;
  bottom: 20px;
  position: absolute;
  display: block;
  text-align: center;
  line-height: 30px;
  font-size: 11px;
  z-index: 1;
}

.flip-book .page-content {
  width: 100%;
  height: 100%;
}

.flip-book .even {
  background-image: url(../../turnjs/pics/gradient-page-left.jpg);
  background-position: right top;
  background-repeat: repeat-y;
}

.flip-book .odd {
  background-image: url(../../turnjs/pics/gradient-page-right.jpg);
  background-position: left top;
  background-repeat: repeat-y;
}

.flip-book .depth {
  background-image: url(../../turnjs/pics/pages-depth.png);
  position: absolute;
  top: 7px;
  width: 16px;
  height: 590px;
}

.flip-book .front-side .depth {
  left: 4px;
  background-position: 0 0;
}

.flip-book .back-side .depth {
  right: 4px;
  background-position: right 0;
}

@media (max-width: 1024px) {
  .box .box-content .data-info {
    font-size: 14px;
  }
  .box .box-content .add-icon {
    font-size: 20px !important;
  }
  .flip-book .page-number {
    bottom: 15px;
    font-size: 9px;
  }

  .search-container .tag-input-container .tag-input {
    line-height: 20px;
    font-size: 14px;
  }
  .image-picker .tabs {
    margin-bottom: 10px;
  }

  .filter-container .dropdown-toggle {
    font-size: 14px !important;
  }

  .filter-container .dropdown-item {
    font-size: 14px !important;
  }
}