.training-panel {
  border-radius: 5px;
  background: #efefef;
  position: relative;
  min-height: 320px;
  padding: 10px;
  margin: 10px 0;
}
.training-panel .training-panel-feedback .training-panel-cover {
  text-align: center;
  background: #efefef;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  padding: 15px;
}
.training-panel .training-panel-feedback .training-panel-cover[show=yes] {
  display: block;
}
.training-panel .training-panel-feedback .training-panel-cover .training-icon {
  margin: 25px auto 5px;
  width: 100px;
  height: 100px;
  position: relative;
}
.training-panel .training-panel-feedback .training-panel-cover .training-icon img {
  position: absolute;
  left: 0;
  top: 0;
}
.training-panel .training-panel-feedback .training-panel-cover .training-title-1 {
  font-size: 1.15em;
  line-height: 1.8em;
  font-weight: bold;
}
.training-panel .training-panel-feedback .training-panel-cover .training-title-2 {
  font-size: 1.05em;
  line-height: 1.8em;
  color: #777;
}
.training-panel .training-panel-feedback .training-panel-cover .training-title-3 {
  font-size: 1em;
  line-height: 1.8em;
  color: #777;
}
.training-panel .training-panel-feedback .training-panel-cover .training-comment {
  font-size: 0.95em;
  line-height: 1em;
  color: #777;
}
.training-panel .training-panel-feedback .training-panel-cover .training-button {
  cursor: pointer;
  margin: 10px;
  border: none;
  padding: 6px 12px;
  text-align: center;
  border-radius: 3px;
  font-size: 1.2em;
  background: #5bc0de;
  color: #fff;
}
.training-panel .training-panel-feedback .training-panel-cover .training-button.training-button-default {
  background: #333;
  color: #fff;
}
.training-panel .training-panel-strip .field-value {
  font-size: 1.4em;
}
.training-panel .training-panel-strip .field-description {
  font-size: 0.8em;
  text-transform: uppercase;
  color: #777;
}
.training-panel .training-panel-strip button {
  user-select: none;
  border: none;
  padding: 6px 12px;
  text-align: center;
  border-radius: 3px;
  margin-top: 8px;
  background: #333;
  color: #eee;
}
.training-panel .training-panel-strip button:disabled {
  opacity: 0.4;
  cursor: default;
}
.training-panel .training-panel-strip button:hover:enabled {
  background: #111;
  color: #fff;
}
.training-panel .training-panel-body {
  margin-top: 10px;
  min-height: 250px;
  border-radius: 5px;
  text-align: center;
  background: rgba(0, 0, 0, 0.05);
}
.training-panel .training-panel-body .intervals-singing-question {
  padding-top: 15px;
  font-size: 18px;
  height: 44px;
  line-height: 24px;
  color: #666;
}
.training-panel .training-panel-body .intervals-singing-question .interval-singing-interval {
  color: #111;
}
.training-panel .training-panel-body .intervals-singing-question .interval-singing-root {
  cursor: pointer;
}
.training-panel .training-panel-body .intervals-singing-question .interval-singing-root:hover {
  color: #444;
}
.training-panel .training-panel-body .intervals-singing-question .interval-singing-root[state=playing] {
  color: #111;
  text-shadow: 0 0 6px #ccc;
}
.training-panel .training-panel-body .intervals-singing-answer {
  margin-top: 10px;
  font-size: 18px;
  height: 64px;
  line-height: 24px;
}
.training-panel .training-panel-body .intervals-singing-answer[feedback=none] {
  font-size: 15px;
  color: #777;
}
.training-panel .training-panel-body .intervals-singing-answer[feedback=correct] {
  color: #69AF73;
}
.training-panel .training-panel-body .intervals-singing-answer[feedback=wrong] {
  color: #D94E49;
}
.training-panel .training-panel-body .training-listen-btn {
  user-select: none;
  outline: none;
  height: 60px;
  width: 120px;
  font-size: 40px;
  text-align: center;
  border: none;
  transition: all 0.2s ease;
  background: #ccc;
  color: #888;
  padding: 0 15px;
  cursor: pointer;
  display: inline-block;
  border-radius: 4px;
}
.training-panel .training-panel-body .training-listen-btn i {
  width: 40px;
  text-align: left;
}
.training-panel .training-panel-body .training-listen-btn:hover {
  background: #aaa;
  color: #111;
}
.training-panel .training-panel-body .training-listen-btn[state=playing] {
  text-shadow: 0 0 6px #fff, 0 0 14px #fff;
}
.training-panel .training-panel-body .training-select-btn {
  user-select: none;
  outline: none;
  text-align: center;
  border: none;
  font-size: 14px;
  font-weight: normal;
  transition: all 0.2s ease;
  padding: 6px 12px;
  cursor: pointer;
  margin: 3px;
  display: inline-block;
  border-radius: 3px;
  background: #333;
  color: #ccc;
}
.training-panel .training-panel-body .training-select-btn:hover[feedback=none] {
  background: #111;
  color: #fff;
}
.training-panel .training-panel-body .training-select-btn[feedback=correct] {
  background: #69AF73;
  color: #bbeac1;
}
.training-panel .training-panel-body .training-select-btn[feedback=wrong] {
  background: #D94E49;
  color: #f29693;
}
.training-panel .training-panel-body .training-select-btn[feedback=reveal] {
  animation: blink-correct-btn 1s;
}
.training-panel .training-panel-body .training-select-btn:disabled {
  background: #888;
  color: #ccc;
}
.training-panel .training-panel-body .training-vocal-range-selection {
  font-size: 12px;
  color: #777;
  margin-top: 10px;
}
.training-panel .training-panel-body .training-vocal-range-selection span {
  user-select: none;
  cursor: pointer;
  color: #999;
}
.training-panel .training-panel-body .training-vocal-range-selection span[active=yes] {
  color: #111;
}
.training-panel .training-panel-body .rhythm-question {
  position: relative;
}
.training-panel .training-panel-body .rhythm-question[rhythm-question=reading] {
  height: 250px;
  margin-bottom: 10px;
}
.training-panel .training-panel-body .rhythm-question[rhythm-question=listening] {
  height: 200px;
  margin-bottom: 10px;
}
.training-panel .training-panel-body .rhythm-question .life-ring-btn {
  display: none;
}
.training-panel .training-panel-body .rhythm-question .rhythm-input-feedback {
  border-radius: 5px;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  cursor: pointer;
  transition: all 0.1s ease;
}
.training-panel .training-panel-body .rhythm-question .rhythm-input-feedback .rhythm-led {
  color: #999;
  position: absolute;
  right: 15px;
  top: 15px;
  font-size: 36px;
  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
  opacity: 0;
}
.training-panel .training-panel-body .rhythm-question .rhythm-input-feedback:hover {
  background: rgba(0, 0, 0, 0.04);
}
.training-panel .training-panel-body .rhythm-question .rhythm-input-feedback[state=on] .rhythm-led {
  color: #5bc0de;
  opacity: 1;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm {
  display: inline-block;
  height: 135px;
  overflow: hidden;
  position: relative;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm .sheet-rhythm-notation {
  margin: 0;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm .sheet-rhythm-notation[show=no] {
  display: none;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm .sheet-rhythm-notation path.abcjs-v1 {
  fill: transparent !important;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm .sheet-rhythm-notation path.abcjs-bar {
  fill: #666;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm .sheet-rhythm-notation path.abcjs-staff {
  fill: none;
}
.training-panel .training-panel-body .rhythm-question .sheet-rhythm .sheet-rhythm-notation path.abcjs-staff:nth-child(3) {
  fill: #666;
}
.training-panel .training-panel-body .rhythm-question .rhythm-instructions {
  text-align: center;
  width: 100%;
  height: 30px;
  padding-top: 12px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-instructions span {
  display: none;
  color: #222;
  font-size: 14px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-instructions span[wrong] {
  color: #DC504A;
}
.training-panel .training-panel-body .rhythm-question .rhythm-instructions span[correct] {
  color: #69AF73;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox {
  width: 400px;
  margin: 10px auto;
  position: relative;
  font-size: 0;
  text-align: left;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox [target], .training-panel .training-panel-body .rhythm-question .rhythm-beatbox [hit] {
  top: 0;
  width: 10px;
  margin-left: -5px;
  position: absolute;
  font-size: 8px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox [target][state=wrong], .training-panel .training-panel-body .rhythm-question .rhythm-beatbox [hit][state=wrong] {
  color: #DC504A;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox [target][state=correct], .training-panel .training-panel-body .rhythm-question .rhythm-beatbox [hit][state=correct] {
  color: #69AF73;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox[rhythm-reading-view] [target] {
  top: 5px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox[rhythm-reading-view] [hit] {
  top: -5px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .bar {
  box-shadow: 0 0 0 1px #444;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beat {
  height: 34px;
  width: 30px;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 0 1px 0 #000;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beat[state=low] {
  background: #7bb4c4 !important;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beat[state=high] {
  background: #28a1c5 !important;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-line {
  position: relative;
  height: 34px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-line .rhythm-beatbox-label {
  position: absolute;
  top: 0;
  width: 100px;
  font-size: 12px;
  line-height: 34px;
  color: #ccc;
  background: #555;
  box-shadow: 0 0 0 1px #333;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-line .rhythm-beatbox-beats {
  margin-left: 100px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-line .rhythm-beatbox-content {
  position: relative;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-line .rhythm-beatbox-icon {
  margin: -3px 0 0 3px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-intro .rhythm-beat, .training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-wait .rhythm-beat {
  background: #aaa;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-original .rhythm-beat {
  background: #ccc;
}
.training-panel .training-panel-body .rhythm-question .rhythm-beatbox .rhythm-beatbox-yours .rhythm-beat {
  background: #ccc;
}
.training-panel .training-panel-body .rhythm-question .rhythm-listen-btns {
  text-align: center;
  margin: 15px auto;
}
.training-panel .training-panel-body .rhythm-question .rhythm-listen-btns button {
  user-select: none;
  outline: none;
  line-height: 26px;
  text-align: center;
  border: none;
  font-size: 14px;
  color: #999;
  background: #ddd;
  font-weight: normal;
  padding: 0 8px;
  cursor: pointer;
  display: inline-block;
  margin-right: 6px;
}
.training-panel .training-panel-body .rhythm-question .rhythm-listen-btns button[active=yes] {
  cursor: pointer;
  color: #333;
  background: #eee;
}
.training-panel .training-panel-body .rhythm-question .rhythm-listen-btns button[active=yes]:hover {
  color: #111;
  background: #f5f5f5;
}
.training-panel .training-panel-body .rhythm-start-btn {
  padding: 10px;
}
.training-panel .training-panel-body .rhythm-start-btn button {
  user-select: none;
  border: none;
  padding: 6px 12px;
  text-align: center;
  border-radius: 3px;
  margin-top: 8px;
  background: #333;
  color: #eee;
}
.training-panel .training-panel-body .rhythm-start-btn button:disabled {
  opacity: 0.4;
  cursor: default;
}
.training-panel .training-panel-body .rhythm-start-btn button:hover:enabled {
  background: #111;
  color: #fff;
}
.training-panel .training-panel-body .melody-question {
  position: relative;
  height: 176px;
  margin-bottom: 10px;
}
.training-panel .training-panel-body .melody-question .melody-instructions {
  text-align: center;
  width: 100%;
  height: 30px;
  padding-top: 12px;
}
.training-panel .training-panel-body .melody-question .melody-instructions span {
  display: none;
  color: #222;
  font-size: 14px;
}
.training-panel .training-panel-body .melody-question .melody-instructions span[wrong] {
  color: #DC504A;
}
.training-panel .training-panel-body .melody-question .melody-instructions span[correct] {
  color: #69AF73;
}
.training-panel .training-panel-body .melody-question .melody-beatbox {
  width: 360px;
  margin: 10px auto;
  position: relative;
  font-size: 0;
  text-align: left;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beat {
  height: 34px;
  width: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  display: inline-block;
  transition: all 0.2s ease-in-out;
  box-shadow: inset 0 0 1px 0 #000;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beat sup {
  font-size: 14px;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beat[state=click] {
  background: #5bc0de !important;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beat[feedback=wrong] {
  background: #D94E49 !important;
  color: #fff;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beat[feedback=correct] {
  background: #69AF73 !important;
  color: #fff;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-line {
  position: relative;
  height: 34px;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-line .melody-beatbox-label {
  position: absolute;
  top: 0;
  width: 82px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 34px;
  color: #ccc;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 1px 0 #000;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-line .melody-beatbox-beats {
  margin-left: 82px;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-line .melody-beatbox-content {
  position: relative;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-line .melody-beatbox-icon {
  margin: -3px 0 0 3px;
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-intro .melody-beat, .training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-wait .melody-beat {
  background: rgba(0, 0, 0, 0.2);
}
.training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-original .melody-beat, .training-panel .training-panel-body .melody-question .melody-beatbox .melody-beatbox-yours .melody-beat {
  background: rgba(0, 0, 0, 0.1);
}
.training-panel .training-panel-body .melody-start-btn button {
  user-select: none;
  border: none;
  padding: 6px 12px;
  text-align: center;
  border-radius: 3px;
  margin-top: 8px;
  background: #333;
  color: #eee;
}
.training-panel .training-panel-body .melody-start-btn button:disabled {
  opacity: 0.4;
  cursor: default;
}
.training-panel .training-panel-body .melody-start-btn button:hover:enabled {
  background: #111;
  color: #fff;
}
.training-panel .training-panel-body .noter {
  font-size: 0;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  background: #eee;
  text-align: left;
}
.training-panel .training-panel-body .noter [noter-sing] {
  background: rgba(0, 0, 0, 0.2);
  transition: 0.1s;
}
.training-panel .training-panel-body .noter [noter-sing][state=click] {
  background: rgba(0, 0, 0, 0.4);
}
.training-panel .training-panel-body .noter [noter-sign] {
  display: inline-block;
  height: 100%;
}
.training-panel .training-panel-body .noter [noter-sign][state=correct] svg > g[id^=note-], .training-panel .training-panel-body .noter [noter-sign][state=correct] svg > g[id^=rest-] {
  fill: #69AF73;
}
.training-panel .training-panel-body .noter [noter-sign][state=wrong] svg > g[id^=note-], .training-panel .training-panel-body .noter [noter-sign][state=wrong] svg > g[id^=rest-] {
  fill: #D94E49;
}
.training-panel .training-panel-body .noter [noter-sign][state=transparent] svg {
  opacity: 0.2 !important;
}
.training-panel .training-panel-body .noter [noter-sign][state=hidden] svg {
  opacity: 0 !important;
}
.training-panel .training-panel-body .noter [noter-sign] svg {
  height: 100%;
}
.training-panel .training-panel-body .noter [noter-sign] svg > g {
  opacity: 0;
}
.training-panel .training-panel-body .noter [noter-sign] svg > g#lines {
  opacity: 0.6;
}
.training-panel .training-panel-body .noter[show-result=yes] [noter-sign] {
  display: inline-block;
  height: 100%;
}
.training-panel .training-panel-body .noter[show-result=yes] [noter-sign][result=correct] svg {
  opacity: 1 !important;
}
.training-panel .training-panel-body .noter[show-result=yes] [noter-sign][result=correct] svg > g[id^=note-], .training-panel .training-panel-body .noter[show-result=yes] [noter-sign][result=correct] svg > g[id^=rest-] {
  fill: #69AF73;
}
.training-panel .training-panel-body .noter[show-result=yes] [noter-sign][result=wrong] svg {
  opacity: 1 !important;
}
.training-panel .training-panel-body .noter[show-result=yes] [noter-sign][result=wrong] svg > g[id^=note-], .training-panel .training-panel-body .noter[show-result=yes] [noter-sign][result=wrong] svg > g[id^=rest-] {
  fill: #D94E49;
}

.training-form .field-panel {
  margin-bottom: 20px;
}
.training-form .field-panel .field-label {
  font-size: 1em;
  line-height: 2em;
}
.training-form .field-panel .field-comment {
  font-size: 0.85em;
  color: #999;
  opacity: 0;
}
.training-form .field-panel .field-comment[show=yes] {
  opacity: 1;
}
.training-form .field-panel .field-filter-btns {
  background: #f5f5f5;
  color: #666;
  border-radius: 3px;
  display: inline-block;
  padding: 0 10px;
  margin-top: 8px;
  box-shadow: 0 0 0 1px #ccc;
}
.training-form .field-panel .field-filter-btns button {
  user-select: none;
  outline: none;
  display: inline-block;
  padding: 1px 4px;
  cursor: pointer;
  background: none;
  border: none;
  vertical-align: middle;
  transition: all 0.2s ease;
  font-size: 13px;
}
.training-form .field-panel .field-filter-btns button:hover {
  color: #111;
  background: #ccc;
}
.training-form .field-panel .radio-panel button, .training-form .field-panel .checkbox-panel button {
  user-select: none;
  outline: none;
  display: inline-block;
  padding: 3px 5px;
  cursor: pointer;
  background: #eee;
  color: #333;
  border: none;
  vertical-align: middle;
  transition: all 0.2s ease;
  margin-bottom: 2px;
  font-size: 13px;
  line-height: 16px;
  min-width: 24px;
  text-align: center;
  box-shadow: inset 0 0 1px #000;
}
.training-form .field-panel .radio-panel button:hover, .training-form .field-panel .checkbox-panel button:hover {
  background: #ddd;
  color: #111;
}
.training-form .field-panel .radio-panel button[active=yes], .training-form .field-panel .checkbox-panel button[active=yes] {
  background: #444;
  color: #fff;
}
.training-form .field-panel .radio-panel button.image-btn, .training-form .field-panel .checkbox-panel button.image-btn {
  width: 80px;
  margin: 2px;
  background: transparent;
  box-shadow: none;
  color: #777;
  border-radius: 5px;
}
.training-form .field-panel .radio-panel button.image-btn img, .training-form .field-panel .checkbox-panel button.image-btn img {
  width: 100%;
  opacity: 0.7;
}
.training-form .field-panel .radio-panel button.image-btn .img-subtitle, .training-form .field-panel .checkbox-panel button.image-btn .img-subtitle {
  font-size: 12px;
}
.training-form .field-panel .radio-panel button.image-btn:hover, .training-form .field-panel .checkbox-panel button.image-btn:hover {
  color: #111;
  background: #eee;
}
.training-form .field-panel .radio-panel button.image-btn:hover img, .training-form .field-panel .checkbox-panel button.image-btn:hover img {
  opacity: 1;
}
.training-form .field-panel .radio-panel button.image-btn[active=yes], .training-form .field-panel .checkbox-panel button.image-btn[active=yes] {
  background: #5bc0de;
  color: #111;
}
.training-form .field-panel .radio-panel button.image-btn[active=yes] img, .training-form .field-panel .checkbox-panel button.image-btn[active=yes] img {
  opacity: 1;
}
.training-form .field-panel input[type=range] {
  overflow: hidden;
  width: 300px;
  height: 16px;
  background-color: #ccc;
  -webkit-appearance: none;
  /** FF*/
  /* IE*/
}
.training-form .field-panel input[type=range]::-webkit-slider-runnable-track {
  height: 16px;
  -webkit-appearance: none;
  color: #777;
  margin-top: -1px;
}
.training-form .field-panel input[type=range]::-webkit-slider-thumb {
  width: 16px;
  -webkit-appearance: none;
  height: 16px;
  cursor: ew-resize;
  background: #333;
  box-shadow: -300px 0 0 300px #888;
}
.training-form .field-panel input[type=range]::-moz-range-progress {
  background-color: #888;
}
.training-form .field-panel input[type=range]::-moz-range-track {
  background-color: #ccc;
}
.training-form .field-panel input[type=range]::-ms-fill-lower {
  background-color: #888;
}
.training-form .field-panel input[type=range]::-ms-fill-upper {
  background-color: #ccc;
}

@keyframes blink-correct-btn {
  0% {
    background: #69AF73;
  }
  25% {
    background: #222;
  }
  50% {
    background: #69AF73;
  }
  100% {
    background: #222;
  }
}

/*# sourceMappingURL=style.css.map */