.song-lists {
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10vh;
}
.song-lists p {
  display: inline;
  background: #393a3f;
  padding: 5px 20px;
  margin: 0;
  border-radius: 5px;
  margin-right: 20px;
  margin-bottom: 10px;
}
.music-title {
  letter-spacing: -2px;
}
.music-title span {
  font-size: 20px;
  margin-left: 10px;
  color: #979797;
}

.player {
  margin-left: auto;
  padding-right: 20px;
  padding-bottom: 10px;
}

.react-monaco-editor-container {
  height: 80%;
}

.warning {
  color: #ffae00;
}

.title-zone {
  display: flex;
}
.title-zone .control-zone {
  display: flex;
  margin-top: auto;
  margin-bottom: auto;
}
.title-zone .control-zone > * {
  margin-right: 10px;
}
.title-zone .control-zone > *:last-child {
  margin-right: unset;
}
.button {
  background: #8b9197;
  color: #fff;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 16px;
  display: flex;
  cursor: pointer;
}
.button span {
  margin: auto;
}
.button svg {
  width: 20px;
  height: 20px;
  margin: auto;
}
.button:hover {
  background: #71787e;
}
.button:active {
  background: #656b71;
}
.button.primary {
  background: #0945eb;
}
.button.primary:hover {
  background: #0737ba;
}
.button.primary:active {
  background: #062fa1;
}
.editor {
  margin-bottom: 3vh;
  display: none;
}
.editor.show {
  display: flex;
}

.text-editor {
  width: 100%;
}
.text-editor .button-group {
  display: flex;
  margin-top: 20px;
}
.text-editor .button-group .button {
  margin: auto;
  margin-left: 20px;
}
.text-editor .button-group .button:first-child {
  margin-left: 0px;
}

.interactive-editor {
  flex: 2;
  max-height: 75vh;
  overflow: auto;
  margin-right: 30px;
}
.interactive-editor .line {
  display: flex;
  margin-bottom: 3px;
}
.interactive-editor .line[data-passed=true] .word:not(.add) {
  opacity: 0.6;
}
.interactive-editor .line-number {
  width: 60px;
  display: flex;
  cursor: pointer;
  color: #5f98be;
}
.interactive-editor .line-number span {
  margin: auto;
}
.interactive-editor .words {
  display: flex;
}
.interactive-editor .words .word {
  padding: 8px 10px;
  border-radius: 8px;
  background: #242424;
  font-size: 16px;
  min-height: 24px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-right: 3px;
  z-index: 10;
}
.interactive-editor .words .word[data-passed=true] {
  opacity: 0.6;
}
.interactive-editor .words .word[data-space=true] {
  margin-right: 9px;
}
.interactive-editor .words .word[data-type="1"] {
  color: #22ca54;
}
.interactive-editor .words .word[data-type="2"] {
  color: #97b1bb;
}
.interactive-editor .words .word[data-type="3"] {
  color: #186be7;
}
.interactive-editor .words .word[data-active=true] {
  color: white;
  text-shadow: 0px 0px 6px #3885dd;
}
.interactive-editor .words .word[data-active=true][data-type="0"] {
  color: #6f7e8b;
  text-shadow: 0px 0px 6px black;
}
.interactive-editor .words .word .space {
  opacity: 0.4;
}
.interactive-editor .words .word .bracket {
  color: #e08763;
}
.interactive-editor .words .word.selected {
  background: #364349;
  border: 1px solid #5f747e;
}
.interactive-editor .words .word.add {
  background: transparent;
  display: none;
  margin-left: -9px;
  z-index: 9;
}
.interactive-editor.mode-add .words .word:not(.add):hover + .word.add {
  display: block;
}
.interactive-editor.mode-add .words .word.add {
  background: transparent;
  display: none;
  margin-left: -9px;
  z-index: 9;
}
.interactive-editor.mode-add .words .word.add[data-index="0"] {
  margin-left: unset;
  margin-right: -9px;
}
.interactive-editor.mode-add .words .word.add[data-index="0"].add {
  margin-left: -9px;
  margin-right: unset;
}
.interactive-editor.mode-add .words .word.add.line, .interactive-editor.mode-add .words .word.add.upLine {
  display: block;
}
.interactive-editor.mode-add .words .word.add.upLine:hover + .word.add {
  display: block;
}
.interactive-editor.mode-add .words .word.add.show, .interactive-editor.mode-add .words .word.add:hover {
  display: block;
}
.interactive-editor.mode-add .words .word.add:hover {
  background: #252525;
}

.interactive-properties {
  flex: 1;
}
.interactive-properties .item {
  margin-bottom: 10px;
  display: flex;
}
.interactive-properties .item .button {
  margin-left: 30px;
}
.interactive-properties input[type=number],
.interactive-properties input[type=text] {
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #1a60e2;
  color: #fff;
  padding: 5px 20px;
}
.interactive-properties label {
  margin-left: 10px;
}
.interactive-properties .radiobox {
  display: flex;
}
.interactive-properties .radiobox .radio {
  padding: 5px 20px;
}
.interactive-properties .lyrics {
  color: #fff;
}
.interactive-properties .call {
  color: #22ca54;
}
.interactive-properties .comment {
  color: #97b1bb;
}
.interactive-properties .calllyrics {
  color: #186be7;
}
.select {
  background: #8b9197;
  border-radius: 16px;
  padding: 10px 20px;
  font-size: 14px;
}
.metadata-editor {
  width: 100%;
}
.metadata-editor .full-drop {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 13.3px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  font-size: 23px;
}
.metadata-editor .full-drop.show {
  visibility: visible;
  opacity: 1;
}
.metadata-editor .full-drop > * {
  margin: auto;
}
.metadata-editor input[type=number],
.metadata-editor input[type=text] {
  background: transparent;
  border: 0px;
  border-bottom: 1px solid #1a60e2;
  color: #fff;
  padding: 5px 20px;
}
.metadata-editor .section {
  margin-bottom: 40px;
}
.metadata-editor .section .item {
  margin-bottom: 20px;
}
.done-tab {
  max-width: 600px;
  margin: auto;
}
.done-tab a {
  color: #0066ff;
  text-decoration: none;
  transition: 0.3s color cubic-bezier(0.19, 1, 0.22, 1);
}
.done-tab a:hover {
  color: #0052cc;
}
.done-tab .button-group {
  display: flex;
}
.done-tab .button-group > .button {
  margin: auto;
}
.tab-container {
  position: absolute;
  top: 20px;
  margin-left: 2.5%;
  width: 95%;
}

.tab > .title {
  letter-spacing: -1px;
}
html,
body {
  font-family: "Noto Sans CJK KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #0f0e13;
  color: #fff;
}