#lang-chapter {
  flex:5;
  padding: 0 0px;
  background-color: var(--contentBG);
  font-size: var(--chFontSize);
}

#playbox {
  position:fixed;
  background:var(--offContentBG);
  padding:5px;
  text-align:center;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:9;
}




.secret {
  position:fixed;
  z-index:-1;
  opacity:0;
}

#playbox button {
  color: var(--fontColor);
  background: none;
  border: none;

}
button.play-nav {
  /* position: absolute;
  top:0;
  bottom:0; */
  height: var(--playBoxHeight);
  font-size: var(--playBoxButtonFontSize);
  width: var(--playBoxHeight);
}

button.pointer {
  cursor: pointer;
}

#play-next {
  right:0;
}
#play-prev {
  left:0;
}

body.sleep #playbox button.play-nav {
  color: var(--navScrollColor);
  border-color: var(--navScrollColor);
  border-style: solid;
  opacity: 55%;
}


#big-box {
  display:flex;
}
body.vertical #big-box {
  z-index:-1;
  flex-direction: column;
}
body.sleep #big-box {
  z-index:-1
}

body.sleep #play-prev{
  position:fixed;
  top:0;
  height: 50%;
  left: 0;
  width:30%;
  border-width: 2px 2px 1px 2px;
}
body.sleep #play-next {
  position:fixed;
  top:0;
  height: 50%;
  left:30%;
  width:70%;
  border-width: 2px 2px 1px 2px;
}
body.sleep .play-nav-primary {
  position:fixed;
  bottom:0;
  height: 50%;
  left:0;
  width:100%;
  border-width: 1px 2px 2px 2px;
}

.play-button:disabled, .pause-button:disabled {
  display: none;
}
#playbox .stop-button:disabled{
  color: var(--titleColor)
}
#play-nav {
  --playNavHeight: 14px;
  position:absolute;
  background: var(--navBarColor);
  cursor: pointer;
}
#play-nav-indicator {
  position:absolute;
  display:none;
  font-size: 30px;
  color: var(--navScrollColor);
}
#play-nav-scroll {
  position: absolute;
  background: var(--navScrollColor);
  pointer-events: none;
  opacity:.66;
}
#play-nav-speaker {
  position: absolute;
  /* background: var(--speakerColor); */
  /* color: white; */
  display: None;
  pointer-events: none;
  z-index:11;
  /* border-radius: 50%;
  box-shadow: 0px 0px 2px var(--offContentBG);
  width:24px;
  height:24px; */
  font-size: 20px;
  padding: 0;
}
#play-nav-speaker i {
  text-shadow: 0px 0px 5px var(--offContentBG);
  color: var(--speakerColor);
}

#playbox>div.popout-option-main, #playbox>button {
  padding: 5px;
}

.popout-option-main {
  position: relative;
}
.popout-option-inner>div {
  margin: 5px;
  background: var(--contentBG);
  border: 1px solid var(--offContentBG);
  padding: 7px;
  text-align: left;
}
.popout-option-inner {
  display:none;
  position: absolute;
  z-index: 15;
  min-width: 100px;
  width: 150px;
  line-height: 24px;
}
.popout-option-inner label {
  color: var(--titleColor);
  font-style: italic;
  vertical-align: bottom;
}
#playbox .popout-option-inner input[type=range] {
  width: 100%;
}
#playbox .popout-option-inner button {
  background: var(--selectionHover)
}
.popout-option-inner label span, .popout-option-inner label i{
  color: var(--fontColor);
  font-style: normal;
}
.popout-option-main:hover .popout-option-inner {
  display: block
}

body.horizontal{
  padding-bottom:130px;
}

body.vertical {
  padding-right: 100px;
}


body.sleep{
  padding-right: 50;
  padding-bottom:var(--playBoxHeight);
  padding-top: var(--playBoxHeight);
}

body.horizontal #playbox {
  bottom: 0px;
  height: var(--playBoxHeight);
  left:0;
  right:0px;
}
body.vertical #playbox{
  bottom: 0px;
  top:0;
  width: var(--playBoxHeight);
  right:0px;
  flex-direction: column;
}
body.sleep #playbox {
  bottom: 0px;
  top:0;
  width: 0px;
  right:0px;
  flex-direction: column;
}
#small-box {
  display: flex;
}
body.horizontal #small-box {
  flex-direction: row;
}
body.vertical #small-box {
  flex-direction: column;
}
body.sleep #small-box {
  flex-direction: column;
    position: fixed;
    /* top: 50%; */
    padding-top: -50%;
    /* height: 50%; */
    right: 12px;
    align-items: center;
    background: black;
    border: 2px solid white;
}

body.horizontal #play-nav {
  top:-5px;
  height: var(--playNavHeight);
  left:0px;
  right:0px;
}
body.vertical #play-nav{
  left:-5px;
  width: var(--playNavHeight);
  top:0px;
  bottom:0px;
}
body.sleep #play-nav {
  width: var(--playNavHeight);
  top:0px;
  bottom:0px;
}

body.horizontal #play-nav-scroll {
  top:0px;
  height: var(--playNavHeight);
  left:0px;
  width:0%;
}
body.vertical #play-nav-scroll{
  top:0px;
  width: var(--playNavHeight);
  left:0px;
  height:0%;
}
body.sleep #play-nav-scroll {
  top:0px;
  width: var(--playNavHeight);
  left:0px;
  height:0%;
}

body.horizontal #play-nav-speaker {
  top: -5px;
  left:0;
  margin-left: -20px;
}
body.vertical #play-nav-speaker{
  top: 0;
  left:-5px;
  margin-top: -20px;
}
body.sleep #play-nav-speaker {
  top: 0;
  left:-5px;
  margin-top: -20px;
}

body.horizontal #play-nav-indicator {
  bottom: 100%;
  left:0;
  margin-left: -15px;
  transform: rotate(90deg);
}
body.vertical #play-nav-indicator{
  top: 0;
  right: 100%;
  margin-top: -15px;
}
body.sleep #play-nav-indicator {
  top: 0;
  right: 100%;
  margin-top: -15px;
}

body.horizontal .popout-option-inner {
  bottom: 100%;
  left: -50%;
}
body.vertical .popout-option-inner{
  right: 100%;
  top: -50%;
}
body.sleep .popout-option-inner {
  right: 100%;
  top: -50%;
}

.title {
  margin:0;
  color:var(--titleColor);
  font-size: 1em;
}
rt.def{
  font-style: italic;
  font-size:var(--defFontSize);
  margin-top:1em;
}
body:not(.show-def) span.block>ruby {
  display: contents;
}
ruby>rb {
  padding: 0px 3px;
}

/* .divided span:not(:first-child)>ruby:before {
  content: '';
  border-right: 1px solid grey;
  opacity: .3;
  width: 2px;
  float: left;
  height: 1.1em;
  margin-left: -3px;
} */
rt {
  opacity: .7;
  text-align: center;
}

body.show-def rt.def{
  display: ruby-text;
}
body.show-pinyin rt:not(.def){
  display: ruby-text;
}

@-moz-document url-prefix() {
  body.show-pinyin rt:not(.def) {
    display: ruby-text;
  }
  body.show-def rt.def{
    display: ruby-text;
  }

}
body.show-trans span.trans{
  display: block;
}
body:not(.show-trans) span.trans{
  display: None;
}

.hidden {
  opacity: 0 !important;
  height: 0px;
  display: none;
}
span.block {
  white-space:normal;
  word-break:break-all;
  display:inline;
}

span.block:not(.active):hover {
  background: var(--selectionHover);
  cursor: pointer;
}

span.trans{
  font-size:var(--transFontSize);
  opacity: .7;
}

::selection {
  background: var(--selectionLight);
}

p::selection {
  background: var(--selectionLight);
}


p.speaking::after, p.has_speaking::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:7px;
  width:7px;
  background:var(--speakerColor);
  z-index:0;
}

p {
  position:relative;
  padding: 0 15px 0 35px;
  text-size-adjust: none;
}

#lang p[pid]:not(.active):hover::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0px;
  width:7px;
  background: var(--selectionHover);
  z-index:1;
}

p.active::before, span.active::before {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0px;
  width:7px;
  background: var(--selectionLight);
  z-index:1;
}
span.active {
  border-bottom: 1px solid var(--selectionLight);
}

#modalbg {
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: var(--offContentBG);

  opacity: 0.9;
  z-index:-1;
}
#modal {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  padding-top: 50px;
  min-height: 300px;
  align-items: flex-start;
  justify-content: center;
}
#modal-content {
  margin: 0 auto;
  background: #eee;
  color: black;
  padding: 10px;
  font-size: var(--defFontSize);
  height:200px;
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
}
#voice-options select {
  width: 100%;
}
.online {
  font-weight: bold;
}


#play-nav:hover #play-nav-hover{
  opacity:1;
}
#play-nav-hover{
  position:absolute;

  background: var(--navScrollColor);
  z-index:10;
  opacity:0;
}

body.horizontal #play-nav-hover {
  top:0;
  left:0;
  bottom:0;
}
body.vertical #play-nav-hover{
  left:0;
  top:0;
  right:0;
}
body.sleep #play-nav-hover {
  left:0;
  top:0;
  right:0;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: none; /* WebKit */
    -webkit-transform: translate(9px,9px) rotate(-90deg);
    transform-origin: 0% 0%;
    width: 100px;
    height: 8px;
    padding: 0 5px;
    vertical-align: bottom;
    background: var(--fontColor); /* Grey background */
    border: 1px solid var(--titleColor);
    border-radius:4px;
}


input[type=range][orient=vertical]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid var(--titleColor);
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: var(--selectionLight);
  margin-top: 0px;
}

input[type=range]:focus {
  outline: none;
}

#copy-search {
  position: absolute;
  left: 0;
  padding: 0;
  bottom: -33px;
  z-index:8;
  position: inline;
  pointer-events: none;
}
#copy-search button {
  display: block;
  background: var(--selectionLight);
  font-size:20px;
  width:30px;
  height:30px;
  color: var(--fontColor);
  border:none;
  border-radius: 0px;
  pointer-events: all;
}
#copy-search button:hover {
  background: var(--selectionHover);
  border:none;
}

#playbox button.toggle-on {
  background: var(--selectionLight);
  color: var(--fontColor);
}
#settings-voice {
  position: relative;
}
#settings-voice:hover::before {

  font-family: 'Material Icons';
  position:absolute;
}

body.horizontal #settings-voice:hover::before {
  bottom: 100%;
  content: 'expand_less';
}
body.vertical #settings-voice:hover::before{
  right: 100%;
  content: 'keyboard_arrow_left';
}
body.sleep #settings-voice:hover::before {
  right: 100%;
  content: 'keyboard_arrow_left';
}

.trans button {
  border: none;
  background: transparent;
  color: var(--selectionLight);
  font-size: var(--transFontSize);
  text-decoration: 2px underline solid var(--selectionLight);
  font-style: italic;
}

#auto-translate-btn.enabled {
  color: var(--navScrollColor);
}
#translation-cache-btn {
  color: var(--selectionLight);
  cursor:pointer;
}