/* file:pico_common.css */
body {
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

#app-loader {
  background-color: white;
  text-align: center;
  padding: 0.5em;
  font-size: 0.7em;
  color: gray;
}

#app-title-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: #fff0f0;
}

#app-title-bar .app-title-bar-r {
  text-align: right;
  padding: 4px;
}
#app-title-bar .app-title-bar-l {
  padding: 4px;
}
#app-title-bar .app-title-bar-l a {
  text-decoration: none;
}

#app-title-bar-home {
  font-size: 1em;
}
#app-title-bar button {
  font-size: 1em;
}

/* design-skin */
#skin-type-selector {
  font-size: 0.8em;
  line-height: 2em;
  padding-left: 1.8em;
}

#skin-type-selector label {
  padding: 8px;
  margin: 8px;
}

#skin-type-selector input[type=radio] {
  padding: 8px;
  margin: 4px;
}

.skin-type {
  border-bottom: 1px solid silver;
  padding-left: 1em;
}

.picodialog-window {
  font-size: 0.9em;
  line-height: 1.5em;
  color: black;
  background-color: #f0f0f0;
}
.picodialog-window h3 {
  padding: 6px;
}
.picodialog-close-button {
  margin: 0;
  padding: 4px 8px 4px 8px;
  font-size: 1em;
  background-color: #4090f0;
  text-align: right;
}
.picodialog-content {
  margin: 1em;
  padding: 0;
  font-size: 0.9em;
  line-height: 1.5em;
}
/* tool */
.tool {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted silver;
}

#app-title {
  padding: 0;
  margin: 0;
}

#splash-window {
  padding: 0.5em;
  margin: 1em;
  background-color: rgb(255, 255, 255, 0.9);
  border-right: 2px solid gray;
  border-bottom: 2px solid gray;}

#splash-window-body {
  font-size: 0.9em;
  line-height: 1.2em;
}

#picosakura-player h1 {
  color: gray;
  background-color: #fff0f0;
  padding: 0.2em;
  margin: 0em;
  font-size: 1.0em;
  text-align: center;
}

#picosakura-player {
  padding: 0;
}

#player-outer {
  margin: 0;
  padding: 0;
}

#player {
  text-align: left;
  margin: 4px;
  padding: 2px;
}

#player button {
  border-radius: 4px;
  border: 1px solid silver;
  padding: 8px;
  background-color: #f0f0f0;
}

#picosakura-player .play-button {
  width: 6em;
  font-size: 1em;
  background-color: #4090f0;
  color: white;
}

#picosakura-player .stop-button {
  width: 3em;
  font-size: 1em;
}

#picosakura-player .piano-button {
  width: 3em;
  font-size: 1em;
}

#picosakura-player .piano-button-x3 {
  width: 8em;
  font-size: 0.7em;
}

#piano-canvas {
  margin: 0px;
  padding: 0px;
  height: 100px;
}

#piano-outer .piano-parts {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px;
}

#picosakura-player #txt-outer {
  text-align: left;
  margin: 0 4px 0 8px;

}

#picosakura-player .player-synth-selector {
  background-color: #fcfcfc;
}

/* player-tools-toggle */
#player-tools-toggle {
  background-color: rgba(255, 230, 230, 0.8);
  padding: 6px;
  font-size: 0.8em;
}
#player-tools-toggleMenu {
  display: none;
}
#player-tools-toggleMenu:checked + .player-tools {
  display: block;
}
.player-tools {
  display: none;
}
#player-tools {
  background-color: rgba(255, 230, 230, 0.5);
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 1em;
}

/* player-files-toggle */
#player-files-toggle {
  background-color: rgba(255, 230, 230, 0.8);
  padding: 6px;
  font-size: 0.8em;
}
#player-files-toggleMenu {
  display: none;
}
#player-files-toggleMenu:checked + .player-files {
  display: block;
}
.player-files {
  display: none;
}
#player-files {
  background-color: rgba(255, 230, 230, 0.5);
  padding-top: 4px;
  padding-bottom: 4px;
}
#player-files p {
  font-size: 0.8em;
}
#player-files button {
  font-size: 1em;
  width: 3em;
  margin-left: 2px;
}

/* footer */
#picosakura-footer {
  border-top: solid 1px silver;
  text-align: center;
  font-size: 0.8em;
  color: gray;
  margin: 0.2em;
  padding-top: 1em;
  padding-bottom: 1em;
}

#msg {
  color: gray;
  font-size: 0.8em;
  margin: 0.8em 0.5em 0.8em 0.5em;
  background-color: #fff0f0;
}

.error {
  color: red;
  text-decoration: underline;
  font-weight: normal;
}

.error:hover {
  font-weight: bold;
  ;
}

/* textarea */
#picosakura-player #txt {
  font-size: 16px;
  /* iOS zoom */
  background-color: white;
  tab-size: 4;
  padding: 4px;
  width: calc(100% - 4px);
  box-sizing: border-box;
  padding: 8px;
  font-family: monospace;
}

#status_bar {
  width: 100%;
  text-align: right;
  font-size: 0.8em;
  color: gray;
  margin-right: 8px;
  margin-top: 2px;
  margin-bottom: 6px;
}

#status_bar .box {
  border: 1px silver solid;
  padding: 2px;
  margin-right: 2px;
  background-color: #fcfcfc;
}

#descript {
  border: dashed 2px silver;
  margin: 0px 8px 8px 8px;
  padding: 0px 8px 8px 8px;
  background-color: rgba(255, 255, 255, 0.95);
}

#descript h2 {
  font-size: 0.8em;
}

#descript h3 {
  font-size: 1.0em;
  border-bottom: 1px solid silver;
}

#descript p {
  padding-left: 2em;
  font-size: 0.8em;
}

#descript-close {
  font-size: 1em;
  border-radius: 0px;
  border: 1px solid silver;
}

#descript-title {
  display: grid;
  grid-template-columns: 1fr auto;
  /* 左側に1フラクションの幅を割り当て、右側に自動の幅を割り当てる */
  align-items: center;
  /* background-color: rgba(255, 230, 230, 0.8); */
}

#descript-title h2 {
  padding-left: 0.3em;
}

#descript-open {
  text-align: right;
  font-size: 1em;
  border-radius: 0px;
  margin: 0px 4px 4px 4px;
}

#descript-open .open-button {
  border: 1px solid silver;
  background-color: #fff0f0;
  border-radius: 0px;
  padding: 8px;
}

#voice-list-mml {
  background-color: #f0f0f0;
}

#voice-list h3 {
  font-size: 1.0em;
  border-bottom: 1px solid silver;
}

#voice-select {
  width: 99%;
}

#command-select {
  width: 99%;
}

.insertButtons {
  display: flex;
  padding-bottom: 4px;
  margin-left: 1.5em;
  align-items: center;
  padding: 4px;
}

.insertButtons button {
  line-height: 1.8em;
  height: 2.2em;
  padding: 0.1em;
  font-size: 0.8em;
  border-radius: 0;
  border: 1px solid silver;
}

.insertButtons select {
  line-height: 1.8em;
  height: 2.2em;
  font-size: 0.8em;
  border-radius: 0;
}

.footer-link {
  background-color: rgba(255, 255, 255, 0.8);
}