﻿
#panzoom {
    background: #333;
    text-align: center;
    border: solid 3px;
    width: 100%;
    height: 350px;
    overflow: auto;
    cursor: grab;
}

.pdfViewerParent {
    width: 100%;
}

#pdf-viewer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    overflow: auto;
}

.pdf-page-canvas {
    display: block;
    margin: 5px auto;
    border: 1px solid rgba(0, 0, 0, 0.2);
}




.navv {
    position: fixed;
    padding: 0.25vw;
    right: 0;
    /*top: 5vw;*/
    display: flex;
    flex-flow: column;
    font-size: 0;
    font-family: Open Sans, sans-serif;
    touch-action: none;
}

    .navv > input {
        display: none;
    }

    .navv > .toggle {
        margin-left: auto;
        fill: hsl(210, 35%, 35%);
        width: 5vw;
        height: 5vw;
        background-color: hsla(0, 0%, 100%, 0.85);
        border-radius: 0.5vw;
    }

    .navv > ul {
        display: flex;
        width: auto;
        flex-flow: row wrap;
        justify-content: space-around;
        align-items: center;
        max-width: 23vw;
        list-style: none;
        padding: 0.25vw;
        background-color: hsla(0, 0%, 100%, 0.85);
        border-radius: 0.5vw 0 0.5vw 0.5vw;
    }

        .navv > ul > li {
            font-size: 12px;
            line-height: 1;
            text-align: center;
            flex: auto;
            width: 4.5vw;
            max-width: 4.5vw;
            height: 43px;
            padding: 2px;
            border-radius: 0.5vw;
            color: hsl(210, 35%, 35%);
            fill: hsl(210, 35%, 35%);
            cursor: pointer;
        }

            .navv > ul > li > svg {
                height: 3.5vw;
            }

            .navv > ul > li:hover {
                background-color: hsla(0, 0%, 0%, 0.8);
                fill: hsl(210, 35%, 70%);
                color: hsl(210, 35%, 70%);
            }

input#start ~ ul {
    display: none;
}

input#start:checked ~ ul {
    display: flex;
}

input#start:checked ~ .toggle {
    border-radius: 0.5vw 0.5vw 0vw 0vw;
}

    input#start:checked ~ .toggle > svg {
        transform: scale(0.25);
        stroke: hsl(210, 35%, 35%);
        stroke-width: 5;
    }
