#epub-reader-frame{
  display: inline-block;
  height: 100%;
  position: relative;
  
  width: 100%;
  overflow: auto;

  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
}

#about-dialog div{
  text-align: center;
}

.icon-annotations{
  /*
  display:none;
  See the annotations / highlighter plugin setup in EpubReader.js (PLUGINS_LOADED event)
  */
}

html#simpleViewer .icon-library{
  display:none;
}

.about-message{
  margin: 20px 0px;
}

#about-dialog .version{
  margin-top: 10px;
  font-weight: bold;
}

#about-dialog .version-details, #about-dialog .build-date{
  font-size: 0.8em;
}

#about-dialog .local-changes-alert{
  color: red;
}

#readium-toc-body{
  display: none;
  overflow: auto;
  background: #f3f3f3;
  border-right: solid 2px rgba(0,0,0,.15);
}

#readium-toc-body button.close{
  margin-right: 20px;
  margin-top: 5px;
  opacity: .8;
}

/*
#readium-toc-body *[dir=rtl]{
direction: rtl;
}
*/

#readium-toc-body ol{
  list-style-type: none;
  margin-top: 10px;
  padding-left: 20px;
}

.toc-visible #readium-toc-body{
  display: inline-block;
  width: 30%;
}

.toc-visible #reading-area{
  left: 30%;
}

.navbar
{
    z-index: 888;
}

/* toolbar */
.navbar .btn-group > .btn{
  border: none;
  border-radius: 0px;
  user-select:none;
  -webkit-user-select: none;
}

.navbar .btn-group > .btn:hover, .navbar .btn-group > .btn:active, .navbar .btn-group > .btn:focus{
  box-shadow: none;
}

.navbar .btn {
  color : #ddd;
  font-size: 16px;
  width: 48px;
  height: 36px;
  background: no-repeat center center;
    background-color: #4d4d4d;
}

.navbar
{
  background: #4d4d4d;
  box-shadow: 0px 1px 5px #333;
  border-radius: 0px;
  min-height: 36px;
  margin-bottom: 0px;
  visibility: hidden;
}

.navbar-right
{
    overflow: visible;
    height: 0.4em;
    margin-right: 0 !important;
    
    min-height: 36px;
    background-color: #4d4d4d;
}

.book-title-header{
  position: absolute;
  top: 0px;
  width: 100%;
  text-align: center;
  color: #999;
  font-weight: normal;
  font-size: 1.0em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  margin: 15px 0px 0px 0px;
  z-index: -1;
  font-family: serif;
}

html[data-theme=night-theme] .book-title-header,
html[data-theme=night-theme] body,
html[data-theme=night-theme] #readium-toc-body
{
    background-color: #333333;
    color: white;
}

html[data-theme=night-theme] .modal
{
    color: black;
}

/*.icon-show-hide, .icon-show-hide:active{
  display: none;
}*/
/*.icon-annotations, .icon-annotations:active{
  background-image: url('../images/glyphicons_150_edit.png');
}
.icon-full-screen, .icon-full-screen:active{
  background-image: url('../images/glyphicons_215_resize_full.png');
}*/


/*.icon-settings, .icon-settings:active{
  background-image: url('../images/glyphicons_136_cogwheel.png');
}*/

.navbar .icon-logo, .navbar .icon-logo:active{
  background-image: url('../images/readium_logo.png');
  width: 130px; 
  background-size: auto 28px !important;
}

.icon-scale-down{
  text-align: right;
}

.clickable{
  user-select:none;
  -webkit-user-select: none;
  cursor: pointer;
}
.offscreen-text{
  display:none;
}



.page-switch-overlay-icon {

  overflow: hidden;
  display: block;
  position: absolute;

  top: 20%;
  bottom: 20%;

  opacity: 0.3;
  
  z-index: 99 !important;
  
  border: none !important;
  
  padding: 0;
  margin: 0;
  padding-top: 0.2em;
  padding-bottom: 0.44em;

  font-size: 40px;

  background-color: rgba(255,255,255,0.5);
    color: black;
}

html[data-theme=night-theme] .page-switch-overlay-icon {
  background-color: rgba(0,0,0,0.4);
    color: white;
}

.page-switch-overlay-icon > span
{
    padding: 0;
    margin: 0;
    
vertical-align: middle;
}

#left-page-btn {

  left: 0;
  border-top-right-radius: 0.3em;
  border-bottom-right-radius: 0.3em;
  visibility: hidden;
}

/* #left-page-btn:focus, */
#left-page-btn:hover
{
  opacity: 1.0;
  color: white;
  background-color: rgba(0,0,0,0.2);
}

/* html[data-theme=night-theme] #left-page-btn:focus, */
html[data-theme=night-theme] #left-page-btn:hover
{
  color: black;
  background-color: rgba(255,255,255,0.2);
}

#right-page-btn {

  right: 0;
  border-top-left-radius: 0.3em;
  border-bottom-left-radius: 0.3em;
  visibility: hidden;
}

/* #right-page-btn:focus, */
#right-page-btn:hover
{
  opacity: 1.0;
  color: white;
  background-color: rgba(0,0,0,0.2);
}
/* html[data-theme=night-theme] #right-page-btn:focus, */
html[data-theme=night-theme] #right-page-btn:hover
{
  color: black;
  background-color: rgba(255,255,255,0.2);
}

#app-container {
    overflow: hidden;
}

#reading-area {
    text-align: center;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 38px;

    overflow: hidden;
}

/* show outline on reading-area when iframe gets focus */
.contentFocus {
    /* box-shadow: 0px 0px 5px #6fb5f1 !important; */
    
    outline: #6fb5f1 dotted 1px !important;
    
    outline-offset: -3px;
}
 
#epub-reader-container {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    
    overflow: hidden;
}

/* embedded mode styles */
.embedded .navbar .btn-group > .btn.icon-full-screen, .embedded .navbar .btn-group > .btn.icon-toc{
  display:inline-block;
  opacity: 1;
}

.hide-ui .navbar{
  -webkit-transition: all .2s ease-out;
  opacity:0;
}

.hide-ui #left-page-btn, 
.hide-ui #right-page-btn,
.embedded .toc-visible #left-page-btn, 
.embedded .toc-visible #right-page-btn{
  -webkit-transition: opacity .2s ease-out;
  opacity: 0;
}

.hide-ui #left-page-btn:hover, 
.hide-ui #right-page-btn:hover{
   -webkit-transition: opacity .2s ease-out;
  opacity: 1;
}

.embedded .navbar .btn-group > .btn.icon-full-screen{
  float: right;
}

/*
.embedded .navbar .btn-group > .btn, .embedded .navbar .btn-group > .btn:hover, .embedded .navbar .btn-group > .btn:active, .embedded .navbar .btn-group > .btn:focus{
  background-color: rgba(0,0,0,0.2);
}
*/

.embedded .navbar{
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0px;
  padding: 2px 5px 2px 5px;
  width: 100%;
  min-height:0px;
  border-radius: 0px;
}

/*.embedded .navbar.user-displayed{
  background-color: rgba(0,0,0,0.8);
}

.embedded .navbar.user-displayed .btn-group > .btn {
  display: block;
  background-color: transparent;
}*/

.embedded #app-container #reading-area{
  top: 10px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}
.embedded #reflowable-content-frame{
  margin: 20px;
}
.embedded .navbar .btn {
  width: 24px;
  height: 24px;
  display: none;
}
.embedded .navbar .btn-group > .btn{
  border-radius: 4px !important;
}
/*.embedded .icon-show-hide, .embedded .icon-show-hide:active{
  background-image: url('../images/white-more.png');
  background-size: 16px 4px;
  display: block;
}*/

/*.embedded .navbar.user-displayed .btn-group .icon-show-hide{
  background-image: url('../images/white-remove.png');
  background-size: 16px 16px;
}*/

.embedded .icon-full-screen, .embedded .icon-full-screen:active{
  background-image: url('../images/white-resize-full.png');
  background-size: 16px 16px;
}

.embedded .icon-full-screen:-webkit-full-screen-document{
  background-image: url('../images/white-resize-small.png');
}
.embedded .icon-full-screen:-moz-full-screen{
  background-image: url('../images/white-resize-small.png');
}
.embedded .icon-full-screen:fullscreen{
  background-image: url('../images/white-resize-small.png');
}

/*.embedded .icon-settings, .embedded .icon-settings:active{
  background-image: url('../images/white-cogwheel.png');
  background-size: 16px 16px;
}*/

.embedded .navbar .btn-group > .btn{
  display:none;
}

.embedded .icon-toc, .embedded .icon-toc:active{
  background-image: url('../images/white-list.png');
  background-size: 16px 16px;
}
.embedded #readium-toc-body{
  top: -100%;
  -webkit-transition: top .3s ease-out;
  -moz-transition: -moz-transform .3s ease-out;
  -o-transition: -o-transform .3s ease-out;
  transition: transform .3s ease-out;
  display: block;
  position: absolute;
  z-index: 2;
  width: 100%;
  background-color: rgba(0,0,0,.7);
  color: white;
  
}
.embedded .toc-visible #readium-toc-body{
  top: 0%;
  -webkit-transition: top .3s ease-out;
  /*-moz-transition: -moz-transform .3s ease-out, background-color .3s step-end, color .3s step-end, z-index .3s step-end, position .3s step-end;
  -o-transition: -o-transform .3s ease-out, background-color .3s step-end, color .3s step-end, z-index .3s step-end, position .3s step-end;
  transition: transform .3s ease-out, background-color .3s step-end, color .3s step-end, z-index .3s step-end, position .3s step-end;*/
  
}

.embedded .toc-visible #reading-area{
  left: 0%;
}

.embedded #readium-toc-body a{
  color: white;
}

.embedded .toc-visible button.close{
  color: transparent;
  text-shadow: none;
  position: fixed;
  width: 16px;
  background: url('../images/white-chevron-up.png') no-repeat;
  background-size: 16px 11px;
  left: 9px;
  top: 5px;
}

/*.embedded .navbar-left{
  float: left!important;
}*/
.embedded .navbar-right{
  float: none!important;
  clear: left;
  width: 100%;
}
.embedded .btn-group{
  display: block;
}

.embedded #annotations-highlight{
  display:none;
}

/* CHANGES DONE FOR ACCESSIBILITY*/

/* button,
input[type="radio"] + label,
input[type="range"],
input[type="text"]
{
    outline: 0 !important;
} */

input[type="text"]
{
    -webkit-appearance: none !important;
}

body.keyboard button:focus,
body.keyboard input[type="radio"]:focus + label,
body.keyboard input[type="range"]:focus
{
    box-shadow: 0px 0px 5px #6fb5f1 !important;
    outline: #6fb5f1 dotted 1px !important;
}
body.keyboard input[type="text"]:focus
{
    background: #fff;
    box-shadow: 0px 0px 5px #6fb5f1 !important;
    outline: #6fb5f1 dotted 1px !important;
}

body.keyboard #app-navbar button:focus,
body.keyboard #app-navbar input[type="radio"]:focus + label,
body.keyboard #app-navbar input[type="range"]:focus
{
    box-shadow: 0px 0px 5px #6fb5f1 !important;
    outline: #6fb5f1 dotted 1px !important;
}
body.keyboard #app-navbar input[type="text"]:focus
{
    background: #fff;
    box-shadow: 0px 0px 5px #6fb5f1 !important;
    outline: #6fb5f1 dotted 1px !important;
}

input[type="range"]
{
    display: inline-block;
    padding: 0;
}

/*
#scroll-default-radio ~ label,
#scroll-doc-radio ~ label,
#scroll-continuous-radio ~ label,
#spread-default-radio ~ label,
#single-page-radio ~ label,
#double-page-radio ~ label
*/
.underlinedLabel
{
    border-bottom: 2px solid transparent;
}

/*
#scroll-default-radio:checked ~ label,
#scroll-doc-radio:checked ~ label,
#scroll-continuous-radio:checked ~ label,
#spread-default-radio:checked ~ label,
#single-page-radio:checked ~ label,
#double-page-radio:checked ~ label
*/
input:checked ~ .underlinedLabel
{
    border-bottom: 2px solid #333333;
}

ul.nav-tabs li button
{
    padding: 0.7em !important;
    margin: 0.2em !important;
    margin-bottom: 0 !important;
    
    font-weight: bold !important;
    font-size: 110% !important;
    
    background:none !important;
    
    border:0 !important;
    border: 1px solid transparent !important;
    border-bottom: 2px solid transparent !important;
    
    color: #888888 !important;
}

ul.nav-tabs li.active button
{
    border: 1px solid silver !important;
    border-bottom: 2px solid white !important;
    border-radius: 0.5em !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    
    color: black !important;
}

ul.nav-tabs li:not(.active) button:hover
{
    background: #dddddd !important;
    color: #003366 !important;

    border-radius: 0.5em !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

@media (max-width:768px){
  .navbar .btn-group > .btn.icon-full-screen
  {
    display:none;
  }
  #epub-reader-frame
  {
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
  }
  .page-switch-overlay-icon
  {
      font-size: 30px;
  }
}

.zoom-wrapper{
  /* display: inline-block; */
  display: none;
  float: left;
  padding: 6px 12px;
}

.zoom-wrapper input{
  border: none;
  width: 3em;
  text-align: right;
}
.zoom-wrapper input[disabled]{
  background-color: #4d4d4d;
  color: #ddd;
}

.zoom-wrapper a{
  color: #ddd;
}

#zoom-menu .glyphicon-ok{
  display: none;
}

#zoom-menu .active-zoom .glyphicon-ok{
  display: inline-block;
}