/* The Modal (background) */
.modal {
        display: none; /* Hidden by default */
        z-index: 2; /* Sit on top of page header */
        top: 500px; /* under the header */
        width: 650px; 
        height:100%; 
        padding-top: 5px;
        position:absolute; 
        left:50%;
        margin-left:-325px;   /* negative half of width above */
        margin-top:-325px;   /* negative half of height above */
    
} 

@media only screen and (max-width: 768px) {
    .modal {
        top: 23%; /* under the header */  
        width: 95%; /* Full width (almost) */
        height: 80%; /* Full height (almost) */
        left:1%;
        margin-left:0px;   
        margin-top:0px;
    }
}

/* Modal Content/Box */
.modal-content {
    display:none;
    background-color: #62c6f2;
    margin: auto; 
    padding: 5px;
    border: 1px solid #00f;
    border-radius:20px;
    width: 95%; 
    height: 80%;
}

@media only screen and (max-width: 768px) {
    .modal-content {
        height: 95%;
    }
}

/* The Close Button */
.close {
    color: #ffffff;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#canvas_pdf_container {
    width: 95%;
    height: 95%;
    border: solid 1px;
    border-radius: 0;
    overflow: auto;
    margin: auto;
    background: #333;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    #canvas_pdf_container {
        height: 85%;
    }
}

#go_previous {
    background: #0000ff;
    width:30px;
    padding:0;
    text-align: center;
    border: solid 1px;
}

#go_previous:hover {
    background: #62c6f2;
    color:#0000ff;
}

#current_page {
    display:none;
}

#go_next {
    background: #0000ff;
    width:30px;
    padding:0;
    text-align: center;
    border: solid 1px;
}

#go_next:hover {
    background: #62c6f2;
    color:#0000ff;
}

#zoom_in {
    background: #0000ff;
    width:20px;
    padding:0;
    text-align: center;
    border: solid 1px;
}

#zoom_in:hover {
    background: #62c6f2;
    color:#0000ff;
}

#zoom_out {
    background: #0000ff;
    width:20px;
    padding:0;
    text-align: center;
    border: solid 1px;
}

#zoom_out:hover {
    background: #62c6f2;
    color:#0000ff;
}

#my_pdf_controls {
    border: solid 1px;
}

#navigation_controls {
    float:left;
    padding-left:20%;
}

#zoom_controls {
    float:right;
    padding-right:20%;
}

#modalImage {
    margin: auto;
    display: block;
    width: 80%;
    padding-top:10px;
}