body {
  height: 100%;
  background-color: #f0f0f0;
  font-family: arial;
  padding: 0;
  margin: 0;
}
body.dark {
  background-color: #212121;
}
.pdf {
  background: #fff;
  border-image: url(shadow.png) 9 9 repeat;
}
.pager {
  height: 50px;
  text-align: center;
  padding-top: 10px;
}
.pager .pager-content {
  background-color: #888888;
  border-radius: 3px;
  display: inline-block;
  padding: 0 5px;
  height: 36px;
  width: 760px;
  margin: auto;
}
.dark .mode,
.dark .zoomIn,
.dark .zoomOut {
/*  float: right; */
}
.page {
  /*display: none;*/
}
.dark .pager .pager-content {
  background-color: #212121;
}
span.pageContainer{
    display: none;
}
.zoom,
.zoomPercent {
  /*display: none;*/
}
.pager a {
  display: inline-block;
  cursor: pointer;
  padding: 0 5px;
  font-weight: bold;
}
.pager .separator {
  width: 10px;
  display: inline-block;
}
.loading:before {
  content: " ";
  display: block;
  width: 100%;
  height: 120px;
  background: url(loading-icon.gif) no-repeat center 10px;
  position: absolute;
  margin: auto;
}
.turnAudio,
.next,
.prev,
.fullscreen,
.playpause {
  position: relative;
  top: 6px;
  cursor: pointer;
}
canvas {
    display: block;
    margin: 0 auto 10px auto;
    background: #fff;
}
#reader {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: absolute;
    top: 60px;
    right: 0;
    bottom: 0;
    left: 0;
    outline: none;
    text-align: center;
}
::selection {
  background: transparent;
}
.note {
  position: absolute;
  border-image: url(shadow.png) 9 9 repeat;
  background-clip: content-box;
  padding: 5px;
  opacity: 0.8;
}
.close {
  text-align: right;
  font-weight: bold;
  color: #f00;
  text-shadow: 1px 1px #000;
  cursor: pointer;
}
.note:hover {
  opacity: 1.0;
}
.pager {
  color: #eee;
  font-size: 14px;
}
.pager input,
.pager select {
  padding: 3px 6px;
  margin: 4px 0 4px 0;
  border: 1px solid #eee;
  font-size: 12px;
  line-height: 14px;
  outline-style: none;
  background: #fff;
  color: #000;
  width: 50px;
  margin-top: 6px;
  border-radius: 3px;
  height: 22px;
}
#audioSelect {
  width: 200px;
}
.edit-note textarea {
  min-width: 100px;
  min-height: 20px;
}
#audio {
  display: hidden;
}
.doublePage > div {
  display: inline-block;
}
.removeNote {
  float: right;
  background: url('delete.png');
  width: 16px;
  height: 16px;
}
#loader2 {
  background: url(loading-icon.gif);
  width: 24px;
  height: 24px;
  top: 5px;
  position: relative;
  display: inline-block;
}
.playpause, .colour, .notes, .fullscreen, .turnaudio, .prev, .next, .mode, .zoomIn, .zoomOut {
  height: 21px;
  top: 5px;
  position: relative;
  cursor: pointer;
}
.playpause {
  width: 0px;
}
.play {
  background: url(play.png);
}
.pause {
  background: url(pause.png);
}
.notes {
  width: 12px;
}
.notes-enabled {
  background: url(notes.png);
}
.notes-disabled:hover {
  background: url(notes.png);
}
.notes-disabled {
  background: url(notes-disabled.png);
}
.colour {
  background: url(colour.png);
  width: 12px;
}
.fullscreen {
  background: url(fullscreen.png);
  width: 14px;
}
.turnaudio {
  width: 8px;
  background: url(audio.png);
}
.mode {
  width: 23px;
}
.zoomIn, .zoomOut {
  width: 14px;
}
.prev, .next {
  width: 1px;
}
.prev {
  background: url(left.png);
}
.next {
  background: url(right.png);
}
.zoomIn {
  background: url(zoomIn.png);
}
.zoomOut {
  background: url(zoomOut.png);
}

.mode1 {
  background: url(mode2.png);
}
.mode2 {
  background: url(mode1.png);
}
.left {
  float: left;
}
.right {
  float: right;
}
.center {
  display: inline-block;
}

.cta__btn {
  float: right;
  margin-top: 3px;
  margin-left: 10px;
  text-decoration: none;
}
.btn {
  display: inline-block;
  padding: 5px 15px !important;
  border: 2px solid #00a78e;
  border-radius: 25px;
  font-family: "Montserrat",sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
  background-color: #00a78e;
  white-space: nowrap;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn::after {
  content: "";
  width: 7px;
  height: 7px;
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  margin-left: 4px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.btn:hover {
  border-color: #393939;
  background-color: #393939;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.btn:hover:after {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
  top: -3px;
  left: 10px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}