html,body {
    width:100%;
    height:100%;
}

.viewerContainer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.pdfViewer {
    position: relative;
    top: 0;
    left: 0;
    padding: 10px 8px;
}

.pdfViewer .canvasWrapper {
    width: 100%;
    overflow: hidden;
}

.pdfViewer .page {
    width: 100%;
    margin: 0px auto 8px auto;
    position: relative;
    overflow: visible;
    -webkit-box-shadow: darkgrey 0px 2px 4px 1px;
    -moz-box-shadow: darkgrey 0px 2px 4px 1px;
    box-shadow: #888 0px 2px 4px 1px;
    background-color: white;
    box-sizing: border-box;
}

.pdfViewer .page .box-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.pdfViewer .page .canvasWrapper {
    position: relative;
    z-index: 2;
}

.pdfViewer .page img {
    width: 100%;
    height: 100%;
    margin: 0;
    display: block;
}

.pageNum {
    padding: 0px 7px;
    height: 26px;
    position: absolute;
    top: 20px;
    left: 15px;
    z-index: 997;
    border-radius: 8px;
    display: none;
}

.pageNum-bg,
.pageNum-num {
    width: 100%;
    height: 100%;
    line-height: 26px;
    text-align: center;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #fff;
    border-radius: 8px;
    font-size: 16px;
}

.pageNum-bg {
    background: rgba(0, 0, 0, 0.5);
}

.pageNum-num {
    position: relative;
}

.pageNum span {
    color: #fff;
    font-size: 16px;
}
.loadingBar {
    position: absolute;
    width: 100%;
    z-index: 99;
    background: #fff !important;
    height: 4px;
    top: 0px;
    left: 0px;
}

.loadingBar .progress {
    background: #fff !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
    transition: width 200ms;
}

.loadingBar .progress .glimmer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: calc(100% + 150px);
    background: #7bcf34;
}
.backTop {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    position: absolute;
    bottom: 90px;
    right: 15px;
    font-size: 18px;
    z-index: 99;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsSAAALEgHS3X78AAAA+klEQVRYw+2WUQ2DMBCG2TIBSJiESkACEpCAg83BcLBJmIQ5gClgDpiDby9tciGkoaUtZOESXuhdv7+X/pdm2dYC6IgX7Zh3THy+w9oN/rMASqBcE26iSA1XwCAEDIBKBc8F/KE/gB7IU8BbDXyJf2Z2tFFFAE8N6iRIi/jotXssuGn1FzhPrCu9BtCEhlcCrix5hbiYVSh46bKpELvcniO71Q51zWJ7ju3mUe9vzym7eR7Az57CbohTXBzAt9GknG9PoLY8KK4z6htLfeXTTXMZAfoZuWYWKC+YZWMAQuWZSP0k2wXsAnYB2xNwci1wGTKhO/COlLtu/ABVfTFsxwwYRgAAAABJRU5ErkJggg==) no-repeat center;
    background-size: 50% 50%;
    display: none;
}

.loadEffect {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    z-index: 99;
    background: url(data:image/gif;base64,[encoded data, 5196 characters]) no-repeat center;
    background-size:30% 30%;
}