@import url("fontAwesome/4.7.0/css/fontawesome.min.css");

*,
*::before,
*::after {
  box-sizing: border-box;
}
html{height:100%;width:100%;}
body{height:100%;width:100%;margin:0;padding:0;background: rgb(81, 85, 88);}
#view-osd{height:100%;width:100%;position:relative;}
#view-osd .pager{position:absolute;top:0;left:0;}
.viewer-auto-play #view-osd .pager{top:5px;}
#view-osd #open-sea-dragon{width:100%;height:100%;}

#view-osd .fa-angle-left,#view-osd .fa-angle-right{cursor:pointer;text-align:center}
#view-osd .fa-angle-left{position:absolute;top:50%;left:0;z-index:9999;}
#view-osd .fa-angle-right{position:absolute;top:50%;right:0;z-index:9999;}


#toolbarDiv{background:#FFF;z-index:9999;top:40px;left:10px;bottom:auto;right:auto;overflow:hidden;}
#toolbarDiv ul,#toolbarDiv ul li{list-style-type:none;margin:0;padding:0;}
#toolbarDiv a{font-size:14px;color:rgba(50, 50, 50, 0.75);padding:12px;display:block!important;text-align:center}
#toolbarDiv a:hover{color:#343b43;}

.pager input {
	border-radius:0;
	background-color: rgba(0, 0, 0, 0.4);
	z-index:9999;
	padding: 0 !important;
    position: absolute !important;
    line-height:14px !important;
    border:none!important;
    font-size:14px !important;
    font-family:'Open Sans', 'Helvetica Neue', Arial, sans-serif !important;
    /* font-weight:bold !important; */
    text-align:center !important;
    /* color:rgba(255, 255, 255, 0.72) !important; */
    height:26px !important;
    top:0!Important;
    left:0!important;
    border:2px solid rgba(128,128,128,.5);
    margin:0px;
    color:rgb(238, 238, 238);
    width:79px;
    text-align:center;
}

.pager input:focus {
    /* outline: 0 !important; */
    outline: 2px solid #88888885;
}


/**/
body .flipbook-preloader-2{display:none}
body.loading .flipbook-preloader-2{display:block}
body.loading .openseadragon-canvas{display:none!important}

/*
.is-loaded .flipbook-preloader-2{display:none!important}
*/

.osd-toolbar{position:fixed!important;bottom:0;left:0;z-index:9998;}
.osd-toolbar .fake{display:none;background:rgba(255,255,255,.4);position:absolute;top:0;left:0;height:100%;width:100%;z-index:9999;cursor:pointer;}

.osd-toolbar .li-play #btn-play{}
.osd-toolbar .li-pause{display:none}
.viewer-auto-play .autoplay-bar{display:block}
.viewer-auto-play .li-pause{display:block!important}
.viewer-auto-play .li-play{display:none!important}
.viewer-auto-play .navigator{display:none!important}
.viewer-auto-play .osd-toolbar{display:none!important}


.autoplay-bar{display:none}
.viewer-auto-play .osd-toolbar .fake{display:block}
.viewer-auto-play .autoplay-bar{display:block;height:5px;background:rgba(255,255,255,.4);width:100%;position:fixed;top:0;left:0;z-index:99999;}



.flipbook-page-preloader {
    width: auto !important;
    height:  auto !important;
}

.flipbook-page-preloader-image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/** preloader*/
.cssload-container {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    position: absolute;
    z-index: 0!important;
    pointer-events: none;
}

.cssload-speeding-wheel {
    width: 24px;
    height: 24px;
    /* margin: 0 auto; */
    border: 3px solid rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    border-left-color: rgba(255, 255, 255, 0.2);
    border-right-color: rgba(255, 255, 255, 0.2);
    animation: cssload-spin 575ms infinite linear;
    -o-animation: cssload-spin 575ms infinite linear;
    -ms-animation: cssload-spin 575ms infinite linear;
    -webkit-animation: cssload-spin 575ms infinite linear;
    -moz-animation: cssload-spin 575ms infinite linear;
    top: 45%;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    margin-top: -15px;
    z-index: 3;
}

@keyframes cssload-spin {
    100% {
        transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes cssload-spin {
    100% {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes cssload-spin {
    100% {
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes cssload-spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes cssload-spin {
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}



/*
=========
LIST-GRID
=========
*/
.list-grid{display:flex;flex-wrap:wrap;padding:20px}
.list-grid .grid-item{margin:0 0 20px 20px;border:1px solid #DDD;cursor:pointer;overflow:hidden;padding:5px;}
.list-grid .grid-item .filename{font-size:10px;text-align:center}
.list-grid .grid-item .pg{font-size:10px;text-align:center}
.list-grid .grid-item.active{background:#F0F0F0} 

.list-grid .grid-item .image-wrapper{height:100px;width:100px;display:flex;align-items:center;justify-content:center;margin:0 auto}

/* XL */
@media only screen and (min-width: 1200px) {
	.list-grid .grid-item{width:calc((100% - 80px) / 5);}
	.list-grid .grid-item:nth-child(5n + 1){margin-left:0;}
}

/* LG */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .list-grid .grid-item{width:calc((100% - 80px) / 5);}
  .list-grid .grid-item:nth-child(5n + 1){margin-left:0;}
}


/* MD */
@media only screen and (min-width: 768px) and (max-width: 991px) {
   	.list-grid .grid-item{width:calc((100% - 40px) / 3);}
	.list-grid .grid-item:nth-child(3n + 1){margin-left:0;}
}


/* SM */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .list-grid .grid-item{width:calc((100% - 40px) / 2);}
	.list-grid .grid-item:nth-child(2n + 1){margin-left:0;}
}

/* XS */
@media only screen and (min-width: 0) and (max-width: 575px) {
    .list-grid .grid-item{width:100%;}
}

/**/
.list-book{display:flex;flex-wrap:wrap;justify-content:space-around;}
.list-book .book-pages{margin:0 0 10px 10px;width:calc((100% - 40px) / 5)}
.list-book .book-pages .faces{display:flex;width:100%;}
.list-book .book-pages .faces.faces-1{justify-content:center;}
.list-book .book-pages .book-page{position:relative;cursor:pointer;}
.list-book .book-pages .book-page .pageNum{position:absolute;bottom:0;left:0;width:100%;text-align:center}
.list-book .book-pages .book-page .pageNum span{background:rgba(0,0,0,.8);display:inline-block;margin:0 auto;font-size:11px;color:#FFF;padding:1px 5px}
.list-book .book-pages .faces{width:100%;justify-content:center}

/* XL */
@media only screen and (min-width: 1200px) {
	.list-book .book-pages{width:calc((100% - 40px) / 5)}
	.list-book .book-pages:nth-child(5n + 1){margin-left:0}

}

/* MD */
@media only screen and (min-width: 768px) and (max-width: 991px) {
   	.list-book .book-pages{width:calc((100% - 20px) / 3)}
	.list-book .book-pages:nth-child(3n + 1){margin-left:0}
}


/* SM */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .list-book .book-pages{width:calc((100% - 10px) / 2)}
	.list-book .book-pages:nth-child(2n + 1){margin-left:0}
}

/* XS */
@media only screen and (min-width: 0) and (max-width: 575px) {
    .list-book .book-pages{width:100%;}
}

  /* Modal backdrop */
    .modal-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 999;
      overflow-y: auto;
    }

    .modal-backdrop.show {
      display: block;
    }

    /* Modal wrapper: not centered, scrolls naturally */
    .modal-wrapper {
      display: block;
      min-height: 100%;
      padding: 2rem;
      box-sizing: border-box;
    }

    /* Modal box */
    .modal {
      background: white;
      border-radius: 8px;
      width: 90%;
      max-width: 1140px;
      margin: 2rem auto;
      box-shadow: 0 0 20px rgba(0,0,0,0.2);
      animation: fadeIn 0.3s ease-out;
      display: flex;
      flex-direction: column;
    }

    .modal-header, .modal-footer {
      padding: 1rem;
      border-bottom: 1px solid #dee2e6;
    }

    .modal-footer {
      border-top: 1px solid #dee2e6;
      border-bottom: none;
      text-align: right;
    }

    .modal-body {
      padding: 1rem;
    }

    .modal-header {
      font-size: 1.25rem;
      font-weight: bold;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .modal-header button {
      background: none;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

body {overflow: hidden}
a,
a:link,
a:visited {
  text-decoration: none;
  color: rgba(50, 50, 50, 0.75);
}
a:hover {
  text-decoration: none;
  color: #343b43;
}
.loading .ocr-outer-container {
  display: none !important
}
#open-sea-dragon {
  overflow: hidden
}

/*
====
GRID
====
*/
#grid {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background: #FFF;
}

/*
======
SLIDER
======
*/
#slider{position:fixed;width:100%;left:0;z-index:998;background:rgba(0, 0, 0, 0.4);transition: all .2s linear}
#slider.centered .swiper-wrapper {justify-content: center; /* 👈 Center the whole group */}
#slider .slider-inner{position:relative;}
#slider .btn-close{cursor:pointer;font-size:14px;border:0 none!important;position:absolute;top:-30px;right:30px;width:30px;height:30px;background:#FFF;}
#slider.open{bottom:0;}
#slider.close{bottom:-152px;}
#slider.open .btn-close .fa-chevron-down{display:block}
#slider.open .btn-close .fa-chevron-up{display:none}
#slider.close .btn-close .fa-chevron-down{display:none}
#slider.close.btn-close .fa-chevron-up{display:block}

#slider .swiper-slide{width:150px!important;padding:10px;}
#slider .swiper-slide figure{padding:0;margin:0;}
#slider .swiper-slide figure img{aspect-ratio: 1 / 1;height:130px;width:100%;object-fit:contain;object-position:center center;}
#slider .swiper-slide{position:relative;}
#slider .swiper-slide a:before{content:"";background:rgba(0, 0, 0, 0.4);position:absolute;top:0;right:0;bottom:0;left:0}
#slider .swiper-slide.active a:before{background:transparent}
#slider .swiper-button-next,
#slider .swiper-button-prev{color:#FFF;background:black;}
#slider .swiper-button-prev{left:0}
#slider .swiper-button-next{right:0}
#slider .swiper-button-next:after,
#slider .swiper-button-prev:after{font-size:14px;color:#FFF}