#preview {
    width: 720px;
    height: 570px;
    margin-bottom: 20px;
    position: relative;
    background-color: black;
}

#preview canvas, .canvasOverlay, .canvasOverlayNoBg, .canvasEmptyOverLay {
    position: absolute;
    transition-property:  none;
}

#preview canvas {
    top: calc(50% - 15px);
    transform:  translateY(-50%);
}

#canvas {
    background-color: rgb(88, 88, 88);
}

#pdfLock {
    display: none;
}

.canvasOverlay {
    width: 100%;
    height: 100%;
    opacity: .2;
    background: white;
    z-index: 1;
}

.canvasOverlayNoBg {
    width: 100%;
    height: 100%;
    opacity: .8;
    z-index: 1;
}

.canvasEmptyOverLay {
    width: 100%;
    height: 100%;
    background: transparent;
    opacity: 1;
    z-index: 2;
}

#lockIcon {
    position: relative;
    width: 75px;
    height: 75px;
    margin: auto;
    margin-bottom: 25px;
    top: calc(50% - 37px);
    background-image: url("/RESOURCES/IMAGES/icons/lock-4e422f4b873ade0ac1d2e3f9d376ddf3.png");
}

#fountainG {
    position: relative;
    width: 120px;
    height: 14px;
    margin: auto;
    margin-bottom: 25px;
    top: 50%;
}

#pageNumber {
    display: inline-block;
    position: relative;
    color: white;
    font-size: medium;
    margin: 5px;
}

#pageNumberEmpty {
    display: inline-block;
    position: relative;
    color: white;
    font-size: medium;
    margin: 5px;
    top: -4px;
    width: 47px;
}

#canvasControl {
    background-color: rgb(76, 76, 76);
    height: 30px;
    position: absolute;
    bottom: 0;
    width: 100%;
}
#canvasControl button {
    padding: 0 5px;
    margin: 5px;
    height: 20px;
    width: 20px;
    background-color: rgb(76, 76, 76);
    border: 0;
    cursor: pointer;
}
#preview:-moz-full-screen canvas {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
#preview:-moz-full-screen #canvasControl {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0px);
    bottom: 0;
    top: 0 !important;
}

#preview:-ms-fullscreen canvas {
    position: absolute;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#preview:-ms-fullscreen  #canvasControl {
    position: absolute;
    left: 60%;
    transform: translate(-50%, 0px);
    top: 0 !important;
}

:-webkit-full-screen #canvasControl {
    top: 0 !important;
}

div#rightSection {
    bottom: 0;
    display: inline-block;
    position: absolute;
    right: 0;
}

div#middleSection {
    margin: 0 auto;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 230px;
}

div#middleSectionInner {
    display: table-cell;
}

div#middleSectionInner > * {
    vertical-align: middle;
}

button#fullscreenButton {
    background-image: url("/RESOURCES/IMAGES/icons/pdf/icon_fullscreen-c83c21a50eb996cbd8847d2b7bd3774d.png");
}

button#exitFullscreenButton {
    background-image: url("/RESOURCES/IMAGES/icons/pdf/icon_exitfullscreen-7771bed81f20f5efa1d2dbf99c7a59a1.png");
}

button#beginPreviewButton {
    background-image: url("/RESOURCES/IMAGES/icons/pdf/icon_arrow_left_skip-bd06f3a54344ff6c2b0a65b9b30a6bba.png");
}

button#leftPreviewButton {
    background-image: url("/RESOURCES/IMAGES/icons/pdf/icon_arrow_left-093a53703e1d0f0464c8713c8f0569f4.png");
}

button#rightPreviewButton {
    background-image: url("/RESOURCES/IMAGES/icons/pdf/icon_arrow_right-2990bab61204d4d75001285bd11dff09.png");
}

button#endPreviewButton {
    background-image: url("/RESOURCES/IMAGES/icons/pdf/icon_arrow_right_skip-046f689acf616f0032a8e013597d9556.png");
}