._turn_book {
    color: #444;
    font-family: FiraSans-Regular, sans-serif;
    outline: 0;
    background-image: url(../../assets/bg.png);
    height: auto;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

._df_book-bg-dark {
    background-image: none;
    background: #000;
}

.turn-book-wrapper {
    padding: 35px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.turn-book {
    width: 100%;
    height: 100%;
}

.turn-book .page a {
    display: block;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.turn-book .page a:hover {
    background: rgba(0, 120, 220, 0.3) !important;
}

.turn-book .page a.highlight {
    animation: highlightEffect 2s ease-out forwards;
}

@keyframes highlightEffect {
    0% {
        background: rgba(0, 150, 255, 0.3);
    }
    95% {
        background: rgba(0, 150, 255, 0.3);
    }
    100% {
        background: rgba(0, 150, 255, 0);
    }
}

.turn-book.has-transition {
    transition: margin-left 1.5s, margin-right 1.5s;
}

.turn-book img {
    width: 100%;
    height: 100%;
}

.turn-book-prev, .turn-book-next {
    position: absolute !important;
    bottom: -12px;
    transform: translateY(-50%) !important;
    padding: 15px 25px ;
    background: transparent;
    outline: none;
    border: none;
}

.turn-book-prev.disabled, .turn-book-next.disabled {
    opacity: 0.2;
}

.turn-book-prev {
    left: calc(50% - 100px);
    transform: translateY(-50%) rotate(180deg) !important;
}

.turn-book-next {
    right: calc(50% - 100px);
}

.turn-book-prev:hover:after, .turn-book-next:hover:after {
    transform: scale(1.1);
}

.turn-book-prev:after, .turn-book-next:after {
    content: "";
    background: url("data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"20px\"><path id=\"Vector\" d=\"M9.99967 3.33331L8.82467 4.50831L13.4747 9.16665H3.33301V10.8333H13.4747L8.82467 15.4916L9.99967 16.6666L16.6663 9.99998L9.99967 3.33331Z\" fill=\"%23ffffff\"/></g></svg>");
    background-size: 20px;
    background-position: 0 0;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.turn-book-wrapper.loading {
    height: 600px;
}

.turn-book-wrapper.loading div {
    opacity: 0;
}

.turn-book-preloader {
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
    opacity: 1 !important;
}

.turn-book-preloader span {
    margin-left: 15px;
}
.turn-book-preloader .spinner-border {
    opacity: 1 !important;
    position: absolute;
    left: -30px;
    top: -6px;
}

.turn-book-fullscreen {
    position: absolute !important;
    left: 3px;
    top: 45px;
    padding: 15px;
    background: transparent;
    outline: none;
    border: none;
}

.turn-book-fullscreen:after {
    content: "";
    background: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 0 32 32" id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path color="%23fff" d="M4 12 L4 4 12 4 M20 4 L28 4 28 12 M4 20 L4 28 12 28 M28 20 L28 28 20 28" /></svg>');
    background-size: 24px;
    background-position: -2px -2px;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.turn-book-fullscreen.active:after {
    background: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 0 32 32" id="i-fullscreen-exit" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path color="%23fff" d="M4 12 L12 12 12 4 M20 4 L20 12 28 12 M4 20 L12 20 12 28 M28 20 L20 20 20 28" /></svg>');
    background-size: 24px;
    background-position: -2px -2px;
    background-repeat: repeat-x;
}

.turn-book-fullscreen:hover:after {
    transform: scale(1.1);
}

.turn-book-zoom-in {
    position: absolute !important;
    left: 3px;
    top: 100px;
    padding: 15px;
    background: transparent;
    outline: none;
    border: none;
}
.turn-book-zoom-in:after {
    content: "";
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Property 1=add"><path id="Vector" d="M15.8334 10.8334H10.8334V15.8334H9.16675V10.8334H4.16675V9.16669H9.16675V4.16669H10.8334V9.16669H15.8334V10.8334Z" fill="%23fff"/></g></svg>');
    background-size: 20px;
    background-position: 0 0;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.turn-book-zoom-out {
    position: absolute !important;
    left: 3px;
    top: 135px;
    padding: 15px;
    background: transparent;
    outline: none;
    border: none;
}

.turn-book-zoom-out:after {
    content: "";
    background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="Property 1=add"><path id="Vector" d="M15.8334 10.8334H4.16675V9.16669H15.8334V10.8334Z" fill="%23fff"/></g></svg>');
    background-size: 20px;
    background-position: 0 0;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.turn-book-zoom-in.disabled, .turn-book-zoom-out.disabled {
    opacity: 0.2;
}

.turn-book-zoom-in:hover:after, .turn-book-zoom-out:hover:after {
    transform: scale(1.1);
}

.turn-page-counter {
    color: #fff;
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%) !important;
    bottom: 5px;
}

.turn-page-counter .turn-total-pages {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
}

.turn-page-counter .turn-page-input {
    border-radius: 0.2rem;
    height: 22px;
    width: 48px;
    line-height: 1;
    box-shadow: none;
    appearance: none;
    border: none;
    text-align: center;
    margin-bottom: 2px;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 3px rgba(0, 0, 0, 0.8));
    -moz-appearance: textfield;
}

.turn-page-counter .turn-page-input::-webkit-inner-spin-button,
.turn-page-counter .turn-page-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.turn-book-menu {
    position: absolute !important;
    left: 3px;
    top: 10px;
    padding: 15px;
    background: transparent;
    outline: none;
    border: none;
}

.turn-book-menu:after {
    content: "";
    background: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="%23fff" d="M0.844 6.050c-0.256-0.256-0.381-0.581-0.381-0.975s0.125-0.719 0.381-0.975 0.581-0.381 0.975-0.381h28.512c0.394 0 0.719 0.125 0.975 0.381s0.381 0.581 0.381 0.975-0.125 0.719-0.381 0.975-0.581 0.381-0.975 0.381h-28.512c-0.394 0-0.719-0.125-0.975-0.381zM31.306 14.963c0.256 0.256 0.381 0.581 0.381 0.975s-0.125 0.719-0.381 0.975-0.581 0.381-0.975 0.381h-28.512c-0.394 0-0.719-0.125-0.975-0.381s-0.381-0.581-0.381-0.975 0.125-0.719 0.381-0.975 0.581-0.381 0.975-0.381h28.512c0.394 0 0.719 0.125 0.975 0.381zM31.306 25.819c0.256 0.256 0.381 0.581 0.381 0.975s-0.125 0.719-0.381 0.975-0.581 0.381-0.975 0.381h-28.512c-0.394 0-0.719-0.125-0.975-0.381s-0.381-0.581-0.381-0.975 0.125-0.719 0.381-0.975 0.581-0.381 0.975-0.381h28.512c0.394 0 0.719 0.131 0.975 0.381z"></path></svg>');
    background-size: 20px;
    background-position: 0 0;
    background-repeat: repeat-x;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 6px rgba(0, 0, 0, 1));
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.turn-book-menu:hover:after {
    transform: scale(1.1);
}

.turn-book-menu.open:after {
    background: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="-0.5 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 21.32L21 3.32001" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M3 3.32001L21 21.32" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-size: 20px;
    background-position: 0 0;
    background-repeat: repeat-x;
}

.turn-thumbnails-panel {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 20px;
    z-index: 2;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.turn-thumbnails-panel .turn-thumbnail {
    position: relative;
    width: 100%;
    margin: 10px;
    padding: 10px;
    cursor: pointer;
    min-height: 155px;
    background-color: rgba(0, 0, 0, 0.5);
}

.turn-thumbnails-panel .turn-thumbnail.active {
    padding: 9px;
    border: 1px solid #fff;
}

.turn-thumbnails-panel .turn-thumbnail.active span {
    bottom: 10px;
}

.turn-thumbnails-panel img {
    width: 100%;
}

.turn-thumbnails-panel span {
    color: #000;
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%) !important;
    bottom: 11px;
    z-index: 2;
    background-color: rgba(238, 238, 238, .85);
    padding: 5px;
}

._turn_book.turn-thumbnails-panel-active {
    padding-left: 150px;
}

._turn_book.turn-thumbnails-panel-active .turn-thumbnails-panel {
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

._turn_book.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    z-index: 9999;
    border-radius: 0;
}

.turn-placeholder {
    background: #fff;
}

.turn-placeholder:after {
    content: "Loading page...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

@media (max-width: 991.88px) {
    .turn-book-wrapper {
        padding: 24px 24px 50px 24px;
    }

    .turn-book-wrapper.loading {
        height: 300px;
    }

    ._turn_book {
        background: #f0f0f0;
        border-radius: 0.75rem;
    }

    .turn-book-menu, .turn-book-zoom-in, .turn-book-zoom-out {
        display: none;
    }

    .turn-book-fullscreen {
        right: 24px;
        bottom: 12px;
        left: auto;
        top: auto;
    }

    .turn-page-counter {
        bottom: 12px;
    }
    .turn-book-prev, .turn-book-next {
        bottom: -5px;
    }

    .turn-book-fullscreen:after {
        background: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 0 32 32" id="i-fullscreen" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 12 L4 4 12 4 M20 4 L28 4 28 12 M4 20 L4 28 12 28 M28 20 L28 28 20 28" /></svg>');
        filter: none;
        background-size: 24px;
        background-position: -2px -2px;
        background-repeat: repeat-x;
    }

    .turn-book-fullscreen.active:after {
        background: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 0 32 32" id="i-fullscreen-exit" xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M4 12 L12 12 12 4 M20 4 L20 12 28 12 M4 20 L12 20 12 28 M28 20 L20 20 20 28" /></svg>');
        background-size: 24px;
        background-position: -2px -2px;
        background-repeat: repeat-x;
    }

    .turn-book-fullscreen:hover:after {
        filter: none;
    }

    .turn-book-prev:after, .turn-book-next:after {
        background: url("data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><g id=\"20px\"><path id=\"Vector\" d=\"M9.99967 3.33331L8.82467 4.50831L13.4747 9.16665H3.33301V10.8333H13.4747L8.82467 15.4916L9.99967 16.6666L16.6663 9.99998L9.99967 3.33331Z\" fill=\"%23000000\"/></g></svg>");
        background-size: 20px;
        background-position: 0 0;
        background-repeat: repeat-x;
        filter: none;
    }

    .turn-book-prev:hover:after, .turn-book-next:hover:after {
        filter: none;
    }

    ._turn_book.turn-thumbnails-panel-active {
        padding-left: 0;
    }

    ._turn_book.turn-thumbnails-panel-active .turn-thumbnails-panel {
        transform: translateX(-100%);
    }

    .turn-book-preloader, .turn-page-counter .turn-total-pages, .turn-page-counter .turn-page-input {
        color: #212529;
        filter: none;
    }
}