body {
	margin: 0px;
}

#djvuContainer {
	width: 88%;
	height: 100%;
	text-align: center;
	float: right;
}

.toolbar {
    position: absolute;
    width: 88%;
    background: #2e2e2e;
    z-index: 1;
}

.toolbarHidden {
    top: -400px;
	transform: translate(0, -100%);
	-webkit-transform: translate(0, -100%);
	-ms-transform: translate(0, -100%);
	transition: transform 1s;
	-webkit-transition: transform 1s;
}

.toolbarSquareButton {
	float: left;
	width: 45px;
    height: 39px;
    border: 0;
    background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
    cursor: pointer;
}

.scrollbar {
	position: absolute;
	border-radius: 6px;
	opacity: 0.6;
	box-shadow: inset 0 0 0 1px black, inset 0 0 0 2px white, inset 0 0 0 10px #BBB;
	transition: opacity 0.3s;
    z-index: 1;
}

.scrollbarHidden {
	opacity: 0;
	transition: opacity 0.6s;
}

.scrollbarVertical {
	right: 0px;
	border-right: 1px solid transparent;
	width: 13px;
}

.scrollbarHorizontal {
	bottom: 0px;
	border-bottom: 1px solid transparent;
	height: 13px;
}


.content {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 88%;
    float:right;
}

.content2 {
	overflow: hidden;
	position: absolute;
	height: 100%;
	width: 78%;
}

.textLayer {
    overflow: hidden;
    position: absolute;
    height: 100%;
    width: 88%;
}
.textPage {
	position: relative;
	margin-top: 100vh;
	margin-bottom: 100vh;
}
.textPage div {
	position: absolute;
	width: 100%;
}
.textPage span {
	position: absolute;

	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);

	font-family: sans-serif;
	color: #000;
	color: rgba(0, 0, 0, 0);
	white-space: nowrap;
	z-index: 1;
	/* border: 1px solid red; /* for easy debug */
}

.buttonZoomIn {
	background-image: url("img/zoom-in.png");
}

.buttonZoomOut {
	background-image: url("img/zoom-out.png");
}

.buttonPagePrev {
	background-image: url("img/page-prev.png");
}

.buttonPageNext {
	background-image: url("img/page-next.png");
}

.buttonMaximize{
	background-image: url("img/maximize.png");
}

.hideThumbnails{
	background-image: url("img/thumbnails_hide.png");
}

.showThumbnails{
	background-image: url("img/thumbnails_show.png");
}

.buttonDownload{
	background-image: url("img/download.png");
}

.toolbarItem {
	margin-left: 28%;
    border-left: 1px solid #525252;
    border-right: 1px solid #525252;
}

@media screen and (max-width: 400px) {
   .toolbarItem {
      margin-left: 17% !important;
      margin-right: 2% !important;
   }
}

@media only screen and (max-width: 936px) {
.toolbarItem {
       margin-left: 25%;
       margin-right: 20%;
   }
}


.comboBox {
	float: left;
	position: relative;
	width: 150px;
    overflow: hidden;
    background-image: url("img/arrow.png");
    background-repeat: no-repeat;
    background-color: #656565;
    background-position: right;
}

.comboBoxSelection {
	width: 150px;
    height: 39px;
    background: transparent;
    border: 0;
    color: white;
    font-weight: 500;
    text-align: left;
   	padding-left: 10px !important;
    -webkit-appearance: none;
}

.comboBoxSelection option {
    -webkit-appearance: none;
    color: black;
}

.comboBoxText {
    width: 120px !important;
    border: none !important;
    padding: 0;
    outline: none;
    position: absolute;
    top: 12px;
    left: 8px;
    background: #656565;
    color: white !important;
    background-color: #656565 !important;
}


.statusImage {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 125px;
    height: 128px;
    z-index: 10;
    background-image: url("img/status.png");
    background-repeat: no-repeat;
    z-index: 1;
}

.statusImageWithoutThumbnails {
    position: absolute;
    left: 55%;
    top: 40%;
    width: 125px;
    height: 128px;
    z-index: 10;
    background-image: url("img/status.png");
    background-repeat: no-repeat;
}

.loadingThumbnail {
	position: absolute;
    left: 45%;
    width: 30px;
    height: 30px;
    margin: -75px 0 0 0;
    z-index: 10;
    background-image: url("img/thumbnail-loader.gif");
    background-repeat: no-repeat;
}

.wrap {
	width: 100%;
	overflow:hidden;
}

.fleft {
    float:left;
    width: 12%;
    background: #F3F2F2;
    border-right: 1px solid black;
    position:absolute;
    height:100%;
    overflow: auto;
}

.canvasThumbnails {
	margin-top: 10px;
	margin-bottom: 10px;
	width: 100%;
	background-image: url("img/blank.jpg");
}

.labelThumbnail {
    font-size: medium;
    background: #BBBBBB;
    width: 30%;
    align-items: center;
    right: 50%;
    left: 50%;
    text-align: center;
    margin: auto;
    border-radius: 10px;
}

.container-fluid{
    padding-right: 0px !important;
    padding-left: 0px !important;
    width: 100%;
    margin-left: 0;
    margin-bottom: -15px;
}

#djvuPanel{
    width: 100%;
    padding-right: 0;
}


#canvasDjvu {
    height: 100% !important;
    width: 100% !important;
}

.progressbar-text {
  font-weight: 500;
  font-size: smaller;
  color: white;
  background: transparent;
  text-align: left;
  padding-left: 10px !important;
 -webkit-appearance: none;
}