/* blue-theme */

body.blue-theme {
  background-color: #E8EAF6;
}

.blue-theme header {
  background: #3f51b5;
  color: #E8EAF6;
}

.blue-theme #playbackRateButton,
.blue-theme #playPauseButton {
  color: #fff;
  background: #7986CB;
}

.blue-theme ul#playbackRateDropdown {
  background: #7986CB;
  border: 2px solid #7986cb;
}

.blue-theme nav#menu {
  background: #c5cae9;
}

.blue-theme .bar1,
.blue-theme .bar2,
.blue-theme .bar3 {
  background-color: #E8EAF6;
}

.blue-theme.initialized span[data-begin].speaking,
.blue-theme.initialized p.word.speaking {
  background-color: #FFEB3B;
  box-shadow: 0px 0px 6px #FFEB3B, 0px 3px 6px #00000020;
}

.blue-theme div.nextPrevPageButton {
  background: #3f51b5;
  color: #fff;
}

.blue-theme #playbackRateDropdown li:hover {
  background: #9FA8DA;
}

/* black-theme */

body.black-theme {
  background-color: #000;
  color: #e9e9e9;
}

.black-theme header {
  background: #222;
  color: #e9e9e9;
}

.black-theme #playbackRateButton,
.black-theme #playPauseButton {
  color: #ffffff;
  background: #00695c;
}

.black-theme ul#playbackRateDropdown {
  background: #00695c;
  border: 2px solid #00695c;
}

.black-theme #playbackRateDropdown li:hover {
  background: #26A69A;
}

.black-theme nav#menu {
  background: #111;
}

.black-theme .bar1,
.black-theme .bar2,
.black-theme .bar3 {
  background-color: #e9e9e9;
}

.black-theme .menu-section-title {
  color: #d0d0d0;
}

.black-theme .menu li a {
  color: #a9a9a9;
}

.black-theme .menu-section-list a:hover, h3.menu-title-link:hover {
    background-color: rgb(200 255 255 / 10%);
}

.black-theme h3.menu-title-link:hover {
  box-shadow: 0 0 0 8px rgb(50 90 90 / 10%);
}

.black-theme.initialized span[data-begin].speaking,
.black-theme.initialized p.word.speaking {
  background-color: #FFEB3B;
  box-shadow: 0px 0px 6px #5d5400, 0px 3px 6px #8c8c8c70;
  color: #000;
}

.black-theme div.nextPrevPageButton {
  background: #00695C;
  color: #fff;
  box-shadow: 0 3px 6px rgb(100 100 100 / 0.16), 0 3px 6px rgb(100 100 100 / 23%);
}

.black-theme div.nextPrevPageButton:hover {
  box-shadow: 0 10px 20px rgba(100, 100, 100, 0.19), 0 6px 6px rgba(100, 100, 100, 0.23);
}

.black-theme .loading img {
  filter: invert(1);
}