.main {

  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

  font-size: 14px;

  position: relative;

  height: 100%;

  color: #777;

}

.main * {

  box-sizing: border-box;

}

.main .hidden, .main .cmd.hidden {

  display: none;

}

.main .fade {

  opacity: 1;

  visibility: visible;

  transition: opacity .15s ease-in;

}

.main .hidden.fade {

  display: block;

  pointer-events: none;

  visibility: hidden;

  opacity: 0;

  transition: opacity .15s ease-out, visibility .15s step-end;

}

.main input {

  outline: none;

}



ul, li {

  font-size: 0;

}

li a, li .cmd {

  font-size: 14px;

}



a, .cmd {

  color: #777;

  text-decoration: none;

  cursor: pointer;

  transition: color .15s ease-in;

}

a:hover, .cmd:hover {

  color: #000;

  transition: color .15s ease-out;

}

a:active, .cmd:active {

  text-shadow: 0 0 1px rgba(0,0,0,0.5);

}

a.active, .cmd.active {

  color: #000;

}

a.disabled, .cmd.disabled {

  pointer-events: none;

  opacity: .7;

}



.hbtn a, .hbtn .cmd {

  font-size: 52px;

  color: #ccc;

}

.hbtn a:hover, .hbtn .cmd:hover {

  text-shadow: 0 0 2px #fff;

}

.hbtn a:active, .hbtn .cmd:active {

  font-size: 50px;

}

.hbtn .active {

  color: #ddd;

}

.hbtn .disabled {

  color: #888;

  display: none;

}



.view {

  height: calc(100% - 40px);

  background: no-repeat 50%;

  background-size:cover;

}



@keyframes loader {

  0% { transform: scale(1.2) }

  100% { transform: scale(1) }

}

.loader-box {

  position: absolute;

  left: calc(50% - 25px);

  top: calc(50% - 25px);

  width: 50px;

  height: 50px;

  transform-origin: center;

  overflow: hidden;

  background: rgba(0, 0, 0, 0);

}

.loader {

  width: 100%;

  height: 100%;

  position: relative;

  transform: translateZ(0) scale(0.5);

  backface-visibility: hidden;

  transform-origin: 0 0;

}

.loader div {

  position: absolute;

  width: 35px;

  height: 35px;

  top: 10px;

  left: 10px;

  background: #353535;

  animation: loader 1s cubic-bezier(0,0.5,0.5,1) infinite;

  animation-delay: -0.3s;

  box-sizing: content-box;

}

.loader div:nth-child(2) {

  top: 10px;

  left: 55px;

  background: #666666;

  animation-delay: -0.2s;

}

.loader div:nth-child(3) {

  top: 55px;

  left: 10px;

  background: #9b9b9b;

  animation-delay: 0s;

}

.loader div:nth-child(4) {

  top: 55px;

  left: 55px;

  background: #d4d4d4;

  animation-delay: -0.1s;

}



.loading-progress {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.loading-progress .progress {

  background-color: #fff;

  width: 50px;

  height: 50px;

  margin: 0 auto;

  border-radius: 25px;

  padding: 5px;

  box-shadow: 0px 0px 3px rgba(200,200,200,0.5);

  margin-bottom: 10px;

  position: relative;

}

.loading-progress .loader-box {

  transform: scale(.7);

}

/* .loading-progress .progress::after {

  content: ' ';

  display: block;

  width: 100%;

  height: 100%;

  background-size: contain;

  background-image: url('../images/dark-loader.gif');

} */

.loading-progress .caption {

  background-color: #fff;

  border: 1px solid #ddd;

  padding: 7px 10px;

  border-radius: 5px;

  font-style: italic;

}



.page-loading {

  width: 50px;

  height: 50px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;

  /* background-color: #fff;

  border-radius: 25px;

  box-shadow: 0px 0px 3px rgba(200,200,200,0.5); */

}

/* .page-loading::after {

  content: ' ';

  display: block;

  width: 100%;

  height: 100%;

  background-size: contain;

  background-image: url('../images/page-dark-loader.gif');

} */



.user-message {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.user-message .text {

  border: 1px solid transparent;

  padding: 7px 10px;

  border-radius: 5px;

}

.user-message .error {

  color: #842029;

  background-color: #f8d7da;

  border-color: #f5c2c7;

}



.pending-play {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 1;

}



.ctrls .prev, .ctrls .next {

  position: absolute;

  top: 50%;

  transform: translate(0, -50%);

}

.ctrls .prev {

  left: 20px;

}

.ctrls .next {

  right: 20px;

}



.toolbar {

  position: absolute;

  bottom: 0px;

  width: 100%;

  background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);

  background-repeat: repeat-x;

  padding: 3px;

  background-color: #f8f8f8;

  text-align: center;

  box-shadow: 0px 0px 5px rgba(200,200,200,0.75);

}

.toolbar ul, .toolbar li {

  list-style: none;

  margin: 0;

  padding: 0;

}



.buttons {

  display: inline-block;

}

.buttons>li {

  display: inline-flex;

}

.buttons>li>a, .buttons>li>.cmd {

  padding: 10px;

}

.buttons>li>a.active, .buttons>li>.cmd.active {

  background-color: #fff;

}

.buttons .active-hidden, .buttons .active-visible {

  width: 12px;

}

.buttons .active-hidden, .buttons .active .active-visible {

  display: inline-block;

}

.buttons .active-visible, .buttons .active .active-hidden {

  display: none;

}



.dropdown, .dropup {

  position: relative;

}

.dropdown .caret {

  display: inline-block;

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;

  border-top: 5px solid #777;

}

.dropup .caret {

  display: inline-block;

  border-left: 5px solid transparent;

  border-right: 5px solid transparent;

  border-bottom: 5px solid #777;

}



.dropdown .v-menu {

  top: 100%;

}

.dropup .v-menu {

  bottom: 100%;

}

.v-menu {

  position: absolute;

  border: 1px solid #ddd;

  background-color: #fff;

  z-index: 10;

  min-width: 160px;

  right: 0;

  text-align: left;

  box-shadow: 3px 3px 3px rgba(200,200,200,0.5);

}

.v-menu li .cmd {

  display: block;

  color: #000;

  padding: 5px 10px;

  transition: background-color .1s ease-in;

}

.v-menu li .cmd .fa {

  color: #555;

}

.v-menu .divider {

  height: 1px;

  background-color: #ddd;

}

.v-menu .cmd:hover {

  background-color: #f0f0f0;

  transition: background-color .1s ease-out;

}

.v-menu .active, .v-menu .cmd:active {

  background-color: #e8e8e8;

}



.pages {

  padding: 0 10px;

  display: inline-block;

}

.pages .number, .pages .amount {

  width: 40px;

  padding: 3px 0;

  text-align: center;

  border: 0;

  color: #000;

  background-color: rgba(232,232,232,.6);

  border-radius: 0;

  margin: 0;

  transition: background-color .15s ease-in-out;

}

.pages .number {

  border-top-left-radius: 3px;

  border-bottom-left-radius: 3px;

  width: 41px;

  border-right: 1px solid #e0e0e0;

  background-color: rgba(232,232,232,.6);

}

.pages .number:focus {

  background-color: #e0e0e0;

}

.pages .amount {

  border-top-right-radius: 3px;

  border-bottom-right-radius: 3px;

}



.float-wnd {

  position: absolute;

  border-radius: 4px 4px 0 0;

  z-index: 1;



  background-color: #fff;

  box-shadow: 3px 3px 3px rgba(200,200,200,0.5);

}

.float-wnd .head {

  border-radius: 4px 4px 0 0;

  cursor: move;



  background-color: #f8f8f8;

  background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%);

  background-repeat: repeat-x;

  padding: 7px 10px;

  border: 1px solid #ddd;

  border-bottom: none;

  color: #000;

  font-weight: bold;

}

.float-wnd .head .close {

  top: 5px;

  right: 8px;

  position: absolute;

}

.float-wnd .body {

  border: 1px solid #ddd;

  border-top: none;

}



.share {

  top: 50%;

  left: 50%;

  width: 300px;

  transform: translate(-50%, -50%);

}

.shareview {

  padding: 10px;

}

.share .link {

  padding: 5px;

  font-size: 12px;

  border: 1px solid #ddd;

  border-radius: 2px;

  margin-bottom: 5px;

  word-break: break-all;

}

.share .btns {

  text-align: center;

}

.share .btn {

  display: inline-flex;

  padding: 10px;

}



.toc {

  top: 30px;

  left: 30px;

  width: 300px;

}



.h-menu {

  list-style: none;

  margin: 0;

  padding: 10px;

}

.h-menu>li {

  display: inline-flex;

}

.h-menu>li>a, .h-menu>li>.cmd {

  padding-right: 10px;

}



.tocview {

  max-height: calc(100vh - 175px);

  overflow-y: auto;

  overflow-x: hidden;

  margin-bottom: 10px;

}

.tocview a {

  color: #000;

}

.tocview::-webkit-scrollbar {

  width: 7px;

  height: 7px;

}

.tocview::-webkit-scrollbar-button {

  width: 0;

  height: 0;

}

.tocview::-webkit-scrollbar-thumb {

  background: #ccc;

  border-radius: 2px;

}

.tocview::-webkit-scrollbar-thumb:hover {

  background: #ddd;

}

.tocview::-webkit-scrollbar-thumb:active {

  background: #bbb;

}

.tocview::-webkit-scrollbar-track {

  background: #eee;

  border-left: 2px solid #fff;

  border-right: 2px solid #fff;

}



.bookmarks {

  padding: 0 10px;

  overflow: hidden;

}

.bookmarks ul, .bookmarks li {

  list-style: none;

  padding: 0;

  margin: 0;

}

.bookmarks .area {

  position: relative;

  transition: background-color .1s ease-in;

}

.bookmarks .area:hover {

  background-color: #f0f0f0;

  transition: background-color .1s ease-out;

}

.bookmarks .area:active {

  background-color: #e8e8e8;

}

.bookmarks .cmd {

  display: block;

  padding: 3px 0;

}

.bookmarks .level-0 .cmd {

  padding-left: 15px;

}

.bookmarks .level-0 .togle {

  left: 0px;

}

.bookmarks .level-1 .cmd {

  padding-left: 30px;

}

.bookmarks .level-1 .togle {

  left: 15px;

}

.bookmarks .level-2 .cmd {

  padding-left: 45px;

}

.bookmarks .level-2 .togle {

  left: 30px;

}

.bookmarks .level-3 .cmd {

  padding-left: 60px;

}

.bookmarks .level-3 .togle {

  left: 45px;

}

.bookmarks .level-4 .cmd {

  padding-left: 75px;

}

.bookmarks .level-4 .togle {

  left: 60px;

}

.bookmarks .cmd.togle {

  width: 13px;

  height: 20px;

  position: absolute;

  padding: 3px 4px;;

  top: 1px;

}

.bookmarks .togle::before {

  content: ' ';

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  border: 0px solid #f5f5f5;

  transition: border 0.2s;

}

.bookmarks .togle:active::before {

  border: 9px solid #f5f5f5;

  transition: border 0.05s;

}

.bookmarks .togle i {

  transform: rotateZ(0deg);

  transition: transform 0.2s;

}

.bookmarks .togle.minimized i {

  transform: rotateZ(90deg);

  transition: transform 0.2s;

}



.thumbnails {

  text-align: center;

}

.thumbnails .thumbnail {

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}

.thumbnails .loading {

  position: relative;

}

.thumbnails .loading::after {

  content: ' ';

  position: absolute;

  width: 40px;

  height: 40px;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  background-size: contain;

  background-image: url('../images/dark-loader.gif');

}

.thumbnails .item {

  display: inline-block;

  width: 130px;

  padding: 5px;

  transition: background-color .1s ease-in;

}

.thumbnails .item:hover {

  background-color: #f0f0f0;

  transition: background-color .1s ease-out;

}

.thumbnails .item:active {

  background-color: #e8e8e8;

}

.thumbnails .heading {

  margin-top: 3px;

  overflow: hidden;

}



.search {

  padding: 0 10px;

}

.search .results {

  margin-bottom: 10px;

}

.search .result {

  padding: 5px 10px;

  cursor: pointer;

  font-size: 12px;

  border-bottom: dashed 1px #ddd;

  transition: background-color .1s ease-in;

}

.search .result:last-child {

  border-bottom: none;

}

.search .result:hover {

  background-color: #f0f0f0;

  transition: background-color .1s ease-out;

}

.search .result:active {

  background-color: #e8e8e8;

}

.search .result>a>div {

  overflow: hidden;

}

.search .query {

  padding: 10px;

}

.search .query input {

  width: 100%;

  color: #000;

}

.search .status {

  text-align: center;

  font-size: 12px;

}