:root{
  --pinmark : rgba(247, 4, 4, 0.4);
  --selected-color:rgb(255, 173, 42);
  --menubar-color:rgb(143, 81, 0);
  --n:rgba(233, 233, 233, 0.7);
  --appbackground:rgba(255, 235, 164);
  --doc-height:100vh;
  --textsize:2em;
  --track-bg: #fffdf6;
  --progress-bg: #fef1a6;
  --thumb-bg: #d27700;
  --hyperlink:#f99008;
  --hit : rgb(255, 0, 0);  
}

body{
  overflow:hidden;
  font-family:"Tahoma","San-Serif" , "Microsoft Yahei UI Light";
  margin: 0;
  padding:0;
  height: 100vh; /* fallback for Js load */
  height: var(--doc-height);
  min-height: 100vh;
}


.popup { position:absolute;top:0;left:0;width:100%;height:100%;
  background:var(--appbackground);overflow:hidden;z-index: 99}
.sidepaiji {position:absolute;overflow:hidden;top:0;height:100%}
.tabs {--webkit-user-select: none;overflow:hidden  ; font-size:var(--textsize);
  user-select: none;background:var(--menubar-color);color:gold}


.app {background-color: rgb(243, 208, 160); } /* splitpane divider need this */

.closepopup {cursor:pointer;z-index:999;font-size:1.5em;position:absolute;right:0;top:0;color:black;font-weight: bold;}

select {font-size:2em}
.selected {background: rgb(255, 173, 42);border-radius: 0.25em;color:white}
.selectedsearchable {background: rgb(255, 173, 42);color:white;cursor: pointer;user-select: none;}
.tab-content {
  position: absolute;
  height:92vh;
  width:100%;
  /* height:100%; */
    /* width:30vw; */
    /* !important; */
  opacity: 0;
  pointer-events: none;
  /* overflow:hidden; */
  overflow-y:auto;
}

.subtab-content {
  position: absolute;
  height:100%;
  width:100%;
  opacity: 0;
  pointer-events: none;
  /* overflow:hidden; */
  overflow-y:none;
}
.subtab-content.visible {/* can't use visibility due to a weird painting bug in Chrome */
  opacity: 1;
  pointer-events: all;
  position:relative
}

.tab-content.visible {/* can't use visibility due to a weird painting bug in Chrome */
  opacity: 1;
  pointer-events: all;
  position:relative
}

.bodytext {font-size:var(--textsize)}

.book {font-size:var(--textsize);cursor:pointer}
.refer {text-decoration: underline;}
.clickable {cursor:pointer;}

.author {border:gray solid 1px ;border-radius: 0.25em;}
.selecteditem {background:rgb(255, 173, 42)}
.hr {height: 1px ;background:black}


.tocitem{margin-left: 0.5em;cursor: pointer;}
.endmarker {width:100%;text-align: center;height: 3em;}
.sourcetext{font-weight: bold;color:brown}

.activeline {background:rgb(255, 173, 42)}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.puncs {z-index:8;position:absolute;user-select: none;overflow:hidden;pointer-events: none;user-select: none;}
.punc {z-index:8;position:absolute;color:rgba(255, 14, 1,0.8);font-family: bolder;animation: fadeIn 1s}
.transcript {z-index:8;position:absolute;user-select: none;overflow:hidden;pointer-events: none;user-select: none;}


.strip {background:rgba(212, 194, 0, 0.4)}








.subtitle{
  font-size:1em;
}

.pagenumber {position:absolute ; bottom:0.5em;font-size: 2em;left:0.5em;z-index: 99;color:brown;pointer-events: none;}
.playbtn {cursor:pointer; position:absolute ; bottom:0.5em; right:0.1em;font-size: 4em;z-index: 99;color:brown;opacity: 0.7;}
.favoritebtn {cursor:pointer; position:absolute ; top:0px;font-size: 3em;right:0.1em;z-index: 99;color:brown;opacity: 0.7;}
.favoriteitem {cursor:pointer;padding-right:0.3em;padding-left:0.3em}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}


.remainrollback {
  animation: blinker 2s linear infinite;
  position:absolute;font-size: 200%;z-index: 99;color:red
}

.idletime {
  animation: blinker 5s linear infinite;
  position:absolute; bottom:2em;font-size: 100%;right:1em;z-index: 99;color:black
}



.bracket {
  font-size:80%;color:brown;
}

.welcome {font-size:150%}

.qrcode{
    width:100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction:column
}
@keyframes paijiblinker {
  50% {    opacity: 0.65;  }
}
@keyframes sidepaijiblinker {
  0% {    opacity: 0;  }
  100% {    opacity: 1;  } 
}

@keyframes favorblinker {
  50% { opacity: 0;  }
}

.blinkfavorbtn {
  animation: favorblinker 1s linear infinite;
}
.paiji {
  pointer-events: none;
  animation: paijiblinker 8s linear infinite;
  position:absolute; 
  height: 100%;
  width: 100%;
  top:0;left:0;z-index: 999;
}
.sidepaiji{
  pointer-events: none;
  animation: sidepaijiblinker 5s 
}
 
.paijitextcontainer{width:100%;justify-content: center;display:flex;padding-top:70vh}
.paijitext{
  pointer-events: none;
  font-size:1.5em;
  color:yellow;
  z-index: 1999;
}
.sponsor {user-select:none;pointer-events:none;font-size:2.5em;font-weight: bold; 
  line-height: 1.1em;
  position:absolute; color:yellow; width:1em; padding-top: 1em}
.sidesponsor {
  font-size:5.5vh;
  width:1em;
  float:right;
  padding-right:0.5em;
  line-height: 100%;
  padding-top:0.5em;
}
.sidesponsortext{
  font-size:3.8vh;
  width:1em;
  position:absolute;
  padding-left:0.5em;
  line-height: 100%;
  padding-top:55vh;
} 
.sidesponsortext2{
  font-size:3.5vh;
  width:1em;
  position:absolute;
  padding-left:2em;
  line-height: 100%;
  padding-top:60vh;
} 
.dictgroup {background:#ffb85b}


a {color:var(--hyperlink)}
.hyperlink {color:var(--hyperlink)}

.parallelfolio {font-size:90% ; padding-left:0.1em;padding-right:0.1em;border-radius: 5px;border:#d27700 1px dotted}

.nav {width:100%;text-align: center; user-select: none;}
.navbutton {cursor:pointer;font-size:1.2em}
.diminput {color:silver}
.dimmed {color:gray}

.hitbtn {padding-left:0.2em;padding-right:0.5em;color:red;cursor:pointer;user-select: none}
.scopebtn {padding-left:0.3em;cursor:pointer;user-select: none;}

.hit {color:red}
.oddline{background:#fbf4cc}
.excerptseq {padding-left:0.3em}

.gotop {z-index:999;position:fixed;right:1em;top:1em;color:var(--menubar-color)}
.goactiveline {z-index:999;position:fixed;right:1em;color:var(--selected-color)}
.uncache {color:gray}
.bankaccount {color:brown;font-weight: bold;}
.hof {color:brown;font-weight: bold;font-size:1.5em}
.downloading {z-index:1000;display:flex;height: 100vh;width:100vw}
.logotitle{font-size:125%; color:brown}
.needupdate{
  animation: favorblinker 2s linear infinite;
}
.notification {position:absolute;
  animation: favorblinker 2s linear infinite;
  top:10vh;left:5vw;height:1.2em;background:#d27700;
  z-index:1999;width:90vw;font-size:2em}

.deceased {border:1px solid black}

.delete {color:red}
.statebutton{text-decoration: underline; user-select: none; cursor:pointer;fill:var(--button-selected);padding-right:0.2em}
.statebutton.disabled {cursor:auto;fill:none;stroke:var(--button-unselected) }
.statebutton.unselected {color:gray}
.statebutton.disabled:hover {fill:none; stroke: var(--button-unselected)}
.hl0{color:var(--hit)}
.hl1{color:rgb(255, 86, 86)}
.hl2{color:rgb(238, 105, 255)}
.hl2{color:rgb(90, 181, 255)}
.ck{font-size:80%}
.excerptseq {padding-left:0.3em;padding-right:0.3em;font-size:90%;color:gray}