.mod-player {
  width: 100%;
}

.mod-player .mod-controls {
  display: flex;
}

.mod-player .mod-controls button {
  width: 30px;
}

.mod-player .mod-controls input {
  flex-grow: 1;
}

.mod-player .mod-patterns {
  width: 100%;
}

.mod-player .mod-instruments {
  font-family: monospace;
}

.xm-player {
  display: block;
  width: 100%;
  margin-right: 10px;
}

.xm-player .xm-info > div {
  display: block;
  width: 100%;
  margin-top: 5px;
}

.xm-player .xm-info .label, .xm-player .xm-info .value {
  width: 49%;
  display: inline-block;
}

.xm-player .xm-info .value {
  float: right;
  text-align: right;
}

.xm-player > .xm-controls > div {
  display: inline-block;
  width: 49%;
}

.xm-player > .xm-controls button {
  height: 25px;
  width: 30px;
}

.xm-player .xm-controls .xm-status {
  float: right;
  text-align: right;
  font-family: monospace;
}

.xm-player .xm-patterns .xm-pattern-display {
  width: 100%;
  background-color: black;
  border: 1px solid gray;
  height: 200px;
}