body.epube-index {
   .display-flex {
      display: flex;
       flex-wrap: wrap;
   }

   .separate-search {
      padding : 8px;
   }

   .row {
      > div {
         padding-top : 10px;
      }

      .thumbnail {
         height : 200px;
         width : 140px;
         margin-bottom : 0;
      }

      @media(max-width: 641px) {
         .col-xxs-6 {
            width: 50%;
         }
      }

      .thumbnail img {
         width : 100%;
         height : 100%;
         background-size : cover;
         background-position : center;
         background-repeat: no-repeat;
      }

      .thumbnail.read img {
         opacity : 0.5;
         filter : grayscale(100%);
      }
   }

   .epube-app-filler {
      height : 60px;
      display : none;
   }

   .in_progress {
      font-style : italic;
   }

   .caption div {
      overflow : hidden;
      text-overflow: ellipsis;
      white-space : nowrap;
   }

   ::selection {
      background : #007d71;
      color : white;
   }

   ::-webkit-scrollbar {
      width: 4px;
   }

   ::-webkit-scrollbar-thumb {
      background-color: #007d71;
   }

   ::-webkit-scrollbar-track {
      background-color: #eee;
   }

}

body.epube-reader {

   .loading {
      position : absolute;
      color : #999;
      top : 0px;
      left : 0px;
      height : 100%;
      width : 100%;
      z-index : 32;
      text-align : center;
      background : white;
      padding : 16px;
      font-size : 18px;
      display : table;
   }

   .loading > div {
      display : table-cell;
      vertical-align : middle;
   }

   .notice {
      width : 120px;
      padding-left : 5px;
   }

   .header {
      top : 5px;
      left : 0px;
      width : 100%;
      height : 24px;
   }

   .footer {
      bottom : 5px;
      left : 0px;
      width : 100%;
      height : 24px;
   }

   .header, .footer {
      position : absolute;
      font-size : 13px;
      display : flex;
      padding-left : 10px;
      padding-right : 10px;
      color : #999;
      align-items : center;
   }

   .header .title, .footer .chapter_wrapper {
      overflow : hidden;
      text-overflow: ellipsis;
      white-space : nowrap;
   }

   .header .title {
      margin-left : 10px;
      flex-grow : 2;
      text-align : center;
      font-weight : bold;
   }

   .footer .chapter_wrapper {
      padding-right : 10px;
      cursor : pointer;
   }

   .footer .spacer {
      flex-grow : 2;
      position : relative;
      height : 12px;
   }

   .footer .spacer .toc-bar-entry {
      position : absolute;
      background: #999;
      top: 0;
      bottom : 0;
      width : 1px;
   }

   .footer .spacer .toc-bar-entry.current-position {
      background : #C33;
   }

   .footer .location {
      cursor : pointer;
      text-align : right;
   }

   @media (max-width: 539px) {
      .spacer > .toc-bar-entry {
         display : none;
      }

      .footer {
         width : 100%;

         .chapter_wrapper,
         .location {
            min-width : 30%;
            max-width : 70%;
         }
      }
   }

   @media (min-width: 540px) {
      .footer {
         .chapter_wrapper,
         .location {
            min-width : 25%;
            max-width : 30%;
         }
      }
   }

   /*@media (min-width: 800px) {
      .footer {
         .chapter_wrapper,
         .location {
            min-width : 20%;
            max-width : 30%;
         }
      }
   }*/

   .toolbar {
      text-align : right;
      display : flex;
      flex-direction : row;
   }

   .toolbar > * {
      cursor : pointer;
      margin : 0 4px;
      padding : 0 2px;
   }

   .toolbar > *:last-child {
      margin-right : 0;
   }

   #reader {
      position : absolute;
      top : 32px;
      bottom : 32px;
      left : 32px;
      right : 32px;
   }

   #left, #right {
      position : absolute;
      top : 48px;
      bottom : 48px;
      width : 0px;
      z-index : 10;
   }

   #left {
      left : 0px;
   }

   #right {
      right : 0px;
   }

   @media (max-width: 576px) {
      #reader {
         left : 24px;
         right : 24px;
      }
   }

   .chapter {
      cursor : pointer;
   }

   .toc_list, .search_results, .dict_result {
      max-height : 300px;
      height : auto;
      overflow : auto;
   }

   .dict_result h1,
   .dict_result h2,
   .dict_result h3 {
      font-size : 14px;
      margin-top : 0;
   }

   .dict_result h2 {
      font-weight : bold;
   }

   .toc_list b.pull-right,
   .search_results b.pull-right {
      margin-right : 8px;
      margin-left : 16px;
   }

   .toc_sublist {
      margin-left : 16px;
   }

   ::-webkit-scrollbar {
      width: 4px;
   }

   ::-webkit-scrollbar-thumb {
      background-color: rgba(0,0,0,0.2);
   }

   ::-webkit-scrollbar-track {
      background-color:rgba(0,0,0,0.1);
   }
}

body.is-epube-app.epube-reader {
   .header .toolbar,
   .header a {
      display : none;
   }
}

@import "themes.less";