.mouthjs-playbutton.loading,
.mouthjs-playbutton.loading:after {
  border-radius: 50%;
}
.mouthjs-playbutton.loading {
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border: 0.5em solid rgba(246,69,100, 0.2);
  border-left: 0.5em solid #f64564;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.mouthjs-mutebutton {
  float: left;
  margin-right: 10px;
  cursor: pointer;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 34px;
  height: 30px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA8CAYAAADfYhweAAAB8UlEQVR4AezbJdQXURAF8D/u7g0aJDzP4O5uEemQqFiEhks/kKEiM7vMPNzdC+7uPgd3+d6950zf+ytr8yr/Usad03q9vJhLpkdfzMk+qexVyTXsMpFczpLJs7fDJruyg+idim7ssvU9RBjXh9lA9NlXtmHXVeT65EOIOFUeYtyBA7XZdA6Z3gjF8wThHTqUTI+GwnmC9N1RdGLTTaFoniC8a1dTTrqETR6FkvmBjHv2rAanYha7XArl8gR5+TBFrntCqTxB+u/Z3oFcN4QyOYFEiD0NyGUBm9wLRfIDefbsWTVymfZiLoQCVQuk/x5pzbusy9emj5f92LUMF161QHqZErse+ukC/zNIfLkKzwkA+fAJEiAu1wAS8sfKAQQgAAEIQAACEIAABCAAAQhAAAIQgAAEIAABCEAAAhCA4M/dKYCEsOsygIQM2bu3GbmcAEjI8MOHG7HpIjJRdj39DXO76oH8RAak1I5N15HrU4CE9DHpySYFQD7YNWMrp7LpeYB8sI3ILvPZ5B5AQnhX0Z5d1gPkg7AXzCa7AfKZnXeAfHgqwnXxh9uOOECUtCObbgTIB+mVZAiZHAFIyIyUanGS2WR6AyAf7tebrPz06Uy9W8k1fV27ksmWCMIuWyu5p/cOHUUuz7cRiLeCCmF62w8AIn7GGyuuej4AAAAASUVORK5CYII=);
}

.mouthjs-mutebutton.muted {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAAA8CAYAAADfYhweAAAC1ElEQVR4AWIYTCD08TFOx9PHqwDt2zWQVk8MAPCTvwuuFW4VXjKbc9xdShwq6HEoocOlx50W2bzvNou7e4O7w+MWfRMsOPu9zUya8/xmLpM1ZfBYRZ4qspmCnLQGkB6oSJ9TRsevE4zenTqIQhu1AdLbXyDwJHyUGoii/ZnaQLhIET7lEMnMeoh+Bw/+AQYnKoM3efGpA4Gd2NU1TF506kCKd0YtwOAWXmzqQGD37ipgcQ4Y/dgVl1qQfnGcDzYaBaQv8wJTB+KGKUW4lxeWOpDSveUNFOFKWaHy9BBi77+K9Aww+r4rILUgcRznKtLDKvIiKyJ7QEr36lqw27T6VBZRpgQIM4KC/AQpMKiA8PBXF+ArCF9cJeaEAMInyABC+noAScSviBBAAog8JQvITrt21fycmifHcV6htY2yDsRhgNEEhPsdihSjgKIlrnfCrvJ23oNwjNdfJ0F5jfH6exiKvyAcg6NIMDiKXyACDI4iweAoXoK4Yl3R7nMSFI7xga+/U7SzvIOXIJ+D4o46PgfDWxAhistbUgzvQeQoYgz/QeQoQgz/QeQoAgz/QfhZ8ad6hssCE/XO5rWMaM6QDm/+g8gxJCj+g0gxBCj+g4gxBCjeg0jHcddApWO+tyCfuzb5nLWPlyBup8utTuVzhhDFZIZ6+y/jluoORYIhQrHReO+bKkfhGAIUhuExCEfhGGIUh8EDDJ72DYSjcAwRyuuewQMI54VzmUR02bevqiJ9MoAkovuRI/+DwVnKaATCM4K8k9Ugnxtl1tYFg8sU4bMAkogio9uD0VEAYXfNXMcGgxcCCLuNCKSnu9uIASQRsDuqD6RXBBAWQBGA0XsCyAfuvAcQfkBNOJvfdgwPiCw2B4ObAwiLAqu7KKOPBpBEjLD2d7B6gnt7F0D4/XqjF77/dSbey0lrFBO2VkZvYzd7tuekPQp3Yi9Fem1FbnRNOOcHx3P7dVDRpiv7qwAAAABJRU5ErkJggg==);
}

.mouthjs-volumebar {
  border-radius: 5px;
  overflow: hidden;
  background: #d8d8d8;
  cursor: pointer;
  position: relative;
  width: 200px;
  height: 20px;
  top: 5px;
}

.mouthjs-volumebar-indicator {
  border-radius: 5px;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #35cac5;
}

.mouthjs-volumebar-indicator.muted {
  opacity: 0.5;
}

#PlayImg,
.mouthjs-playbutton.paused #PauseImg {
  display: none!important;
}

#PauseImg,
.mouthjs-playbutton.paused #PlayImg {
  display: flex!important;
}

.mouthjs-playbutton.paused .pause {
  display: none;
}
.mouthjs-playbutton.playing .play {
  display: none;
}

.mouthjs-block-notice-modal {
  align-items: center;
  background: rgba(0, 0, 0, 0.75);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0 !important;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  z-index: 10000;
}

.mouthjs-block-notice-modal.visible {
  pointer-events: all;
  opacity: 1 !important;
}

.mouthjs-block-notice-modal-panel {
  background: #ffffff;
  height: 600px;
  max-height: 90%;
  max-width: 90%;
  overflow-y: auto;
  padding: 20px;
  width: 400px;
}
