@charset "utf-8";
/* CSS Document */

body{

    margin: 0px;

    font-family:sans-serif;

    text-align:center;

    overflow: hidden;

}

.viewerApp {

    width: 100%;
    height: 100%;
    background: #f5f5f5;

}

.viewer{
    width:100%;
    height:90vh;

    overflow:auto;

    background:#f5f5f5;
}

#canvasContainer{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:0px;

    min-width:100%;
    min-height:100%;

    padding:20px;

    box-sizing:border-box;
}

.hidden {
    display: none !important; 
}

#canvasContainer:active{

    cursor:grabbing;

}

canvas{

    border:1px solid #ccc;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

    max-width:100%;

}

.toolbar{

    box-sizing: border-box;

    width: 100%;
    height: 10vh;

    padding-top: 20px;

    background:#f5f5f5;



}

#pageInput{

    width: 5ch;

    text-align: center;

    padding: 4px;

    font-size: 15px;
}


button{

    padding:10px 20px;

    margin:5px;

}


#viewerApp{

    background:#f5f5f5;

    width:100%;

    height:100%;

}

#viewerApp:fullscreen {


    background:#f5f5f5;

}

#viewerApp:-webkit-full-screen{

    background:#f5f5f5;

}



@media(max-width:768px){

.toolbar{

display:flex;
flex-wrap:wrap;
justify-content:center;

}

button{

width:90px;

}


}