html {
  background-color: rgb(144, 255, 144);
  background-image: url("../image/background.png")
}
footer {
  text-align: center;
}
html.volatile-bg {
  background-color: lightgray;
  background-image: none;
}
.comment {
  border: 1px black solid;
  margin: 4px 0px;
  padding: 2px;
  border-radius: 6px;
  background: palegreen;
}
.comment-text {
  margin-left: 2em;
}
.user-text, .comment-text {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;  
}
.comment > .myicon {
  margin-right: 2px;
}
.comment > .floor {
  margin-right: 10px;
}
div.field {
  display: inline-block;
  margin-right: 15px;
}
.myicon {
  height: 16px;
  width: 16px;
  vertical-align: middle;
}
.need-width {
  display: inline-block;
  min-width: 50px;
}
textarea {
  width: 100%;
  height: 60px;
  max-width: 600px;
}
canvas.visualizer {
  width: 100%;
  height: 60px;
  background-color: black;
}
canvas.marker {
  width: 100%;
  height: 20px;
  background-color: black;
}
p.visualizer {
  margin-left: 10px;
  margin-right: 10px;
}
.clip:first-child {
  border-top: 1px solid black;
}
.clip {
  border-bottom: 1px solid black;
  padding: 5px;
}
.clip.editing{
  background: cyan;
}
.segment-name {
  width: 90px;
}