.wdViewerRoot {
    background-color: #656565;
    overflow: auto;
    position:relative;
}
.wdViewerView {
    /*position: absolute;*/
    left:0px;
    top:0px;
    /*background-color: white;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*left:50%;*/
    /*transform: translateY(-50%) translateX(-50%);*/
}
.wdViewerEffe {
    position: absolute;
    left:0px;
    top:0px;
    /*top: 50%;*/
    /*left:50%;*/
    /*transform: translateY(-50%) translateX(-50%);*/
}
.wdViewerObjs {
    position: absolute;
    left:0px;
    top:0px;
}
.contDiv {
    position: absolute;
    display: inline-block;
    /*top: 50%;*/
    /*left:50%;*/

    /*transform: translateY(-50%) translateX(-50%);*/
}
.leftSide {
    background-color:rgba(0,0,0,0.65);
    position: absolute;
    left:-400px;
    top:0px;
    /*width: 170px;*/
    height:100%;
    opacity: 0;
    transition: all .75s ease;
}
.leftSide.show { left:0px; opacity: 1; }
.leftSideOver {
    position: absolute;
    left:0px;
    top:0px;
    width:4px;
    height:100%;
}
.leftSideOver:hover {
    background-color:rgba(0,50,200,0.5);
}
.presTitleDiv {
    position:absolute;

    left:4px;
    top:4px;
    width:350px;
    height:40px;

    background-color: #00a0da;

    text-align: center;
    font-size:20px;
    color:white;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;

    /*padding-top: 10px;*/
    display: table;
    box-shadow: 4px 4px 0px 0px rgba(0,0,0,0.3);
}
.presTitleLab {
    display: table-cell;
    font-weight: bold;
    vertical-align: middle;
}
.videoTitle {
    position:absolute;
    left:50%;
    top:0px;
    height:40px;
    width:400px;
    margin-left:-200px;
    background-color:rgba(0,0,0,0.6);
    color:white;
    font-size:28px;
    text-align: center;
    line-height: 40px;
    border-radius: 0px 0px 10px 10px;
    border-left:1px solid white;
    border-bottom:1px solid white;
    border-right:1px solid white;
}
.videoEndDiv {
    position: absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    opacity: 0;
    transition: all .75s ease;
}
.videoEndDiv.ended {
    background-color: rgba(0,0,0,0.6);
    opacity: 1;
}
.curPageLab {
    width:100%;
    text-align: center;
    margin:8px;
    height:20px;
    font-size:16px;
    font-weight: bold;
    color:#D0D0D0;
}
.thumbDiv {
    width: 87%;
    height:100%;
    overflow-x:hidden;
    overflow-y:scroll;
    border:1px solid #353535;
    background-color: rgba(255,255,255,0.25);
    border-radius: 6px;
    padding-top:6px;
    padding-bottom: 6px;
    margin-left: 10px;
}
.thumbDiv::-webkit-scrollbar { width: 12px; }
.thumbDiv::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    border-radius: 10px;
}
.thumbDiv::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);*/
    background-color: rgba(255,255,255,0.3);
}
.thumbDiv::-webkit-scrollbar-thumb:hover {
    background-color: #0b58a2;
}

.pgThumb {
    border:1px solid #404040;
    /*height: 102px;*/
    /*height: 120px;*/
    /*width: 113px;*/
    margin-bottom: 4px;
    margin-left:10px;
    background-color: #808080;
    text-align: center;
    position: relative;
    /*display: table;*/
}
.pgThumb.selected {
    border:1px solid red;
}

.thumbCan {
    display: table-cell;
    width:auto;
    height:100%;
}
.thumbPageLab {
    display: table-cell;
    font-size:40px;
    font-weight: bold;
    vertical-align: middle;
}
.curPageDiv {
    position: absolute;
    width:100%;
    height:100%;
    left:0px;
    top:0px;
    text-align: center;
    display: table;
    color:rgba(0,0,0,0);
}
.curPageDiv:hover {
    background-color: rgba(0,50,255,0.2);
    color:#303030;
}
.curPageDiv.show {
    background-color: rgba(180, 1, 144, 0.2);
    color:#303030;
}

.pgOver {
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
    background-color: rgba(114, 114, 114, 0.3);
    z-index: 9999999;
    text-align: center;
    display: table;
}
.pgOverLab {
    display: table-cell;
    /*font-weight: bold;*/
    color:rgba(112, 112, 112, 0.8);
    vertical-align: middle;
    text-shadow: 6px 6px 5px rgba(128, 128, 128, 0.8);
}

.btnSpan {height:40px; width:40px; display:block; position:relative;}
.btnSpan.first{height:34px; width:34px; border:2px solid white; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}
.btnSpan.first:before{content:''; height:0; width:0; display:block; border:10px transparent solid; border-left-width:0; border-right-color:white; position:absolute; top:8px; left:16px;}
.btnSpan.first:after{content:''; height:20px; width:4px; display:block; background:white; position:absolute; top:8px; left:10px;}
.btnSpan.first:hover{background:#00c4ff; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}

.btnSpan.prev{height:34px; width:34px; border:2px solid white; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}
.btnSpan.prev:before{content:''; height:0; width:0; display:block; border:10px transparent solid; border-left-width:0; border-right-color:white; position:absolute; top:8px; left:11px;}
.btnSpan.prev:hover{background:#00c4ff; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}

.btnSpan.next{height:34px; width:34px; border:2px solid white; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}
.btnSpan.next:before{content:''; height:0; width:0; display:block; border:10px transparent solid; border-right-width:0; border-left-color:white; position:absolute; top:8px; left:14px;}
.btnSpan.next:hover{background:#00c4ff; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}

.btnSpan.last{height:34px; width:34px; border:2px solid white; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}
.btnSpan.last:before{content:''; height:0; width:0; display:block; border:10px transparent solid; border-right-width:0; border-left-color:white; position:absolute; top:8px; left:10px;}
.btnSpan.last:after{content:''; height:20px; width:4px; display:block; background:white; position:absolute; top:8px; left:22px;}
.btnSpan.last:hover{background:#00c4ff; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;}

.btnSpan {height:24px; width:24px; display:block; position:relative;}
.btnSpan.video{background:#333; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px;vertical-align: middle;margin:4px;}
.btnSpan.video:before{content:''; height:0; width:0; display:block; border:8px transparent solid; border-right-width:0; border-left-color:#fff; position:absolute; top:3px; left:9px;}

.topSide {
    text-align: -webkit-right;
    background-color:rgba(0, 0, 0, 0.76);
    position: absolute;
    left:0px;
    top:-40px;
    width:100%;
    height:35px;
    opacity: 1;
    transition: all .75s ease;
}
.topSide.show { top:0px; opacity: 1; }
.topSideOver {
    position: absolute;
    left:0px;
    top:0px;
    height:4px;
    width:100%;
}
.topSideOver:hover {
    background-color:rgba(0,50,200,0.5);
}

.mainLab {
    text-align: center;
    font-size:20px;
    color: hsl(0,0%,95%);
    font-family: "Century Gothic", "arial";
    /*font-weight: bold;*/
}
.toolbarDiv2 {
    text-align: right;
    font-size:20px;
    margin-right: 20px;
}
.toolbarDiv1 {
    text-align: center;
    font-size:20px;

}
.toolbarButton,
.secondaryToolbarButton,
.overlayButton {
    border: 0 none;
    background: none;
    /*width: 32px;*/
    height: 23px;
    width:5%;
}

.toolbarButton > span {
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}


.toolbarButton,
.dropdownToolbarButton,
.secondaryToolbarButton,
.overlayButton {
    vertical-align: middle;
    /*min-width: 16px;*/
    padding: 2px 6px 0;
    border: 1px solid transparent;
    border-radius: 2px;
    color: hsla(0,0%,100%,.8);
    font-size: 12px;
    line-height: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Opera does not support user-select, use <... unselectable="on"> instead */
    cursor: default;
    -webkit-transition-property: background-color, border-color, box-shadow;
    -webkit-transition-duration: 150ms;
    -webkit-transition-timing-function: ease;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease;
}

.toolbarButton[disabled],
.secondaryToolbarButton[disabled],
.overlayButton[disabled] {
    opacity: .5;
}

.splitToolbarButton.toggled .toolbarButton {
    margin: 0;
}

.toolbarButton:hover,
.toolbarButton:focus,
.dropdownToolbarButton,
.overlayButton,
.secondaryToolbarButton:hover,
.secondaryToolbarButton:focus {
    background-color: hsla(0,0%,0%,.12);
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
    background-clip: padding-box;
    border: 1px solid hsla(0,0%,0%,.35);
    border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
    box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
    0 0 1px hsla(0,0%,100%,.15) inset,
    0 1px 0 hsla(0,0%,100%,.05);
}

.toolbarButton:hover:active,
.overlayButton:hover:active,
.dropdownToolbarButton:hover:active,
.secondaryToolbarButton:hover:active {
    background-color: hsla(0,0%,0%,.2);
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
    border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.4) hsla(0,0%,0%,.45);
    box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
    0 0 1px hsla(0,0%,0%,.2) inset,
    0 1px 0 hsla(0,0%,100%,.05);
    -webkit-transition-property: background-color, border-color, box-shadow;
    -webkit-transition-duration: 10ms;
    -webkit-transition-timing-function: linear;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 10ms;
    transition-timing-function: linear;
}

.toolbarButton.toggled,
.splitToolbarButton.toggled > .toolbarButton.toggled,
.secondaryToolbarButton.toggled {
    background-color: hsla(0,0%,0%,.3);
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
    border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.45) hsla(0,0%,0%,.5);
    box-shadow: 0 1px 1px hsla(0,0%,0%,.1) inset,
    0 0 1px hsla(0,0%,0%,.2) inset,
    0 1px 0 hsla(0,0%,100%,.05);
    -webkit-transition-property: background-color, border-color, box-shadow;
    -webkit-transition-duration: 10ms;
    -webkit-transition-timing-function: linear;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 10ms;
    transition-timing-function: linear;
}

.toolbarButton.toggled:hover:active,
.splitToolbarButton.toggled > .toolbarButton.toggled:hover:active,
.secondaryToolbarButton.toggled:hover:active {
    background-color: hsla(0,0%,0%,.4);
    border-color: hsla(0,0%,0%,.4) hsla(0,0%,0%,.5) hsla(0,0%,0%,.55);
    box-shadow: 0 1px 1px hsla(0,0%,0%,.2) inset,
    0 0 1px hsla(0,0%,0%,.3) inset,
    0 1px 0 hsla(0,0%,100%,.05);
}

.splitToolbarButton:hover > .toolbarButton,
.splitToolbarButton:focus > .toolbarButton,
.splitToolbarButton.toggled > .toolbarButton,
.toolbarButton.textButton {
    background-color: hsla(0,0%,0%,.12);
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,100%,0));
    background-clip: padding-box;
    border: 1px solid hsla(0,0%,0%,.35);
    border-color: hsla(0,0%,0%,.32) hsla(0,0%,0%,.38) hsla(0,0%,0%,.42);
    box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
    0 0 1px hsla(0,0%,100%,.15) inset,
    0 1px 0 hsla(0,0%,100%,.05);
    -webkit-transition-property: background-color, border-color, box-shadow;
    -webkit-transition-duration: 150ms;
    -webkit-transition-timing-function: ease;
    transition-property: background-color, border-color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease;

}
.splitToolbarButton > .toolbarButton:hover,
.splitToolbarButton > .toolbarButton:focus,
.dropdownToolbarButton:hover,
.overlayButton:hover,
.overlayButton:focus,
.toolbarButton.textButton:hover,
.toolbarButton.textButton:focus {
    background-color: hsla(0,0%,0%,.2);
    box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
    0 0 1px hsla(0,0%,100%,.15) inset,
    0 0 1px hsla(0,0%,0%,.05);
    z-index: 199;
}
.splitToolbarButton > .toolbarButton {
    position: relative;
}
.toolbarButton.zoomOut::before {
    content: url(imgs/toolbarButton-zoomOut.png);
}
.splitToolbarButtonSeparator {
    padding: 8px 0;
    width: 1px;
    background-color: hsla(0,0%,0%,.5);
    z-index: 99;
    box-shadow: 0 0 0 1px hsla(0,0%,100%,.08);
    display: inline-block;
    margin: 5px 0;
}
.toolbarButton.zoomIn::before {
    content: url(imgs/toolbarButton-zoomIn.png);
}

.toolbarButton.presentationMode::before,
.secondaryToolbarButton.presentationMode::before {
    content: url(imgs/toolbarButton-presentationMode.png);
}

.toolbarButton.scanner::before,
.secondaryToolbarButton.scanner::before {
    content: url(imgs/toolbarButton-print.png);
}
.toolbarButton.save::before,
.secondaryToolbarButton.save::before {
    content: url(imgs/save.png);
}
.toolbarButton.hide::before,
.secondaryToolbarButton.hide::before {
    content: url(imgs/toolbarButton-hideToolbar.png);
}
.toolbarButton.openFile::before,
.secondaryToolbarButton.openFile::before {
    content: url(imgs/toolbarButton-openFile.png);
}

.toolbarButton.download::before,
.secondaryToolbarButton.download::before {
    content: url(imgs/toolbarButton-download.png);
}

.dropdownToolbarButton {
    /*width: 120px;*/
    max-width: 200px;
    padding: 0;
    overflow: hidden;
    width:70%;
    /*background: url(imgs/toolbarButton-menuArrows.png) no-repeat;*/
}
html[dir='ltr'] .dropdownToolbarButton {
    background-position: 95%;
}
html[dir='rtl'] .dropdownToolbarButton {
    background-position: 5%;
}
.dropdownToolbarButton > select {
    min-width: 140px;
    font-size: 12px;
    color: hsl(0,0%,95%);
    margin: 0;
    padding: 3px 2px 2px;
    border: none;
    background: rgba(0,0,0,0); /* Opera does not support 'transparent' <select> background */
}

.dropdownToolbarButton > option {
    background: hsl(0,0%,24%);
}

.btnShowDiv {
    width: 32px;
    height: 30px;
    margin-right: 22px;
    background-color: rgba(0, 0, 0, 0.76);
}
.btnShow::before {
    content: url(imgs/toolbarButton-showToolbar.png);
}
.btnShow {
    border-radius: 2px;
    border: 0 none;
    background: none;
    width: 32px;
    height: 27px;
    margin-top: 3px;
}

.imageloader {
    /*border: 5px solid #f3f3f3;*/
    /*border-top: 5px solid rgba(85,85,85,0.8);*/

    /*width: 20px;*/
    /*height: 20px;*/
    min-width: 15px;
    min-height: 15px;
    border-radius: 50%;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*-------------------------------------------------- COMPONENT CSS -------------------------------------------------- */

input[type="date"]::-webkit-inner-spin-button {
    height: 100%;
}