body{

    margin:0;

    background:#555;

    overflow:hidden;

}

#viewer{

    width:100vw;

    height:100vh;

    display:flex;

    flex-direction:column;

}

#toolbar{

    height:58px;

    background:#1a1f5b;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 14px;

    color:#fff;
	    z-index: 1;

}

.toolbar-left,
.toolbar-center,
.toolbar-right{

    display:flex;

    align-items:center;

}

.toolbar-center{

    flex:1;

    justify-content:center;

    font-size:15px;

    font-weight:500;

}

.toolbar-right{

    gap:8px;

}

#toolbar button{

width: 34px;
    height: 34px;
    border: none;
    border-radius: 4px;
    background: #ffffff;
    color: #1a1f5b;
    cursor: pointer;
    transition: .2s;

}

#toolbar button:hover{

   background: #ff0000;
    COLOR: WHITE;

}

#zoomValue{

    width:50px;

    text-align:center;

    font-size:14px;

}

#footer{

    height:50px;

    background:#1d1d1d;

}

#bookContainer{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    padding:0 50px;

}

#flipbook{

    display:none;

 transform-origin:center center;

transition:transform .20s ease;
cursor:grab;

user-select:none;

will-change:transform;

}

.page{

    background:#fff;

    overflow:hidden;

}

.page-content{

    width:100%;

    height:100%;

}

.page-image{

    width:100%;

    height:100%;

    background-repeat:no-repeat;

    background-position:center center;

    background-size:contain;

}

#prevPage,
#nextPage{

    position:absolute;

    width:48px;

    height:48px;

    border-radius:50%;

    border:none;

    background:rgba(0,0,0,.45);

    color:#fff;

    cursor:pointer;

    z-index:9999;

}

#prevPage{

    left:15px;

}

#nextPage{

    right:15px;

}


#footer{

    height:50px;

    background:#1d1d1d;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    color:#fff;

    font-size:14px;

}

#footer button{

    width:36px;

    height:36px;

    border:none;

    border-radius:4px;

    background:#2f2f2f;

    color:#fff;

    cursor:pointer;

    transition:.2s;

}

#footer button:hover{

    background:#4a4a4a;

}

#footer span{

    display:flex;

    align-items:center;

    gap:8px;

}

#pageNumber{

    width:60px;

    height:32px;

    border:1px solid #555;

    border-radius:4px;

    background:#2f2f2f;

    color:#fff;

    text-align:center;

    font-size:14px;

    outline:none;

}

#pageNumber:focus{

    border-color:#2196f3;

}