html {
  margin: 0;
  padding: 0;
}

body {
  padding: 1em;
}
.adunit{
    width: 100%;
    margin: 0 auto;
}
.seq-ui {
  background: #2d4059;
  color: #111;
  font-family: monospace;
  /**
   * Pad
  **/
  /**
   * Metering
  **/
  /**
   * Mute control
  **/
  /**
   * Seq
  **/
}
.seq-ui * {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}
.seq-ui a {
  cursor: pointer;
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}
.seq-ui a:hover {
  color: #fff;
}
.seq-ui section {
  margin: 1em;
  padding: 1em;
}
.seq-ui #wrap {
  padding: 1em;
}
.seq-ui h3 {
  color: #00ff00;
}
.seq-ui button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
}
.seq-ui button:focus {
  outline: none;
  border-color: #99ccaa;
  -webkit-animation: focused 0.5s ease;
          animation: focused 0.5s ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}
@-webkit-keyframes focused {
  to {
    border-color: #336655;
  }
}
@keyframes focused {
  to {
    border-color: #336655;
  }
}
.seq-ui .control {
  margin: 3px;
  display: inline-block;
  vertical-align: middle;
}
.seq-ui .pad {
  background: #222;
  background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.6));
  width: 40px;
  height: 40px;
  border: 2px solid #333;
  border-radius: 5px;
  color: #888;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}
.seq-ui .pad:hover {
  background-color: #530;
  border-color: #ff9900;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}
.seq-ui .pad.active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  color: #fff;
  transform: translateY(2px);
}
.seq-ui .meter {
  width: 40px;
  height: 6px;
  background: #111;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}
.seq-ui .meter.vertical {
  transform: rotate(-90deg);
}
.seq-ui .meter span {
  display: block;
  background: #22ff55;
  height: 100%;
  opacity: 1;
  box-shadow: 0 0 10px #22ff55;
  transform-origin: 0 50%;
}
.seq-ui .meter span.max {
  background: #ff2255;
  box-shadow: 0 0 10px #ff2255;
}
.seq-ui .meter span.anim {
  -webkit-animation: equalize 1s linear;
          animation: equalize 1s linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.seq-ui .meter span.fade {
  transition: transform 0.3s linear;
}
.seq-ui .metronome {
  width: 40px;
  height: 20px;
  background: #111;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  font-size: 0;
}
.seq-ui .metronome span {
  display: inline-block;
  margin: 0;
  height: 100%;
  width: 25%;
}
.seq-ui .metronome span.active {
  box-shadow: 0 0 10px #2255ff;
  background: #2255ff;
}
.seq-ui .mute {
  width: 15px;
  height: 15px;
  background: #111;
  border-radius: 50%;
  border: 1px solid #222;
  box-shadow: inset 0 0 10px #111, 0 0 2px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease;
}
.seq-ui .mute:hover {
  border-color: #ff9900;
}
.seq-ui .mute.active {
  background: radial-gradient(#00ff00, transparent 100%);
  box-shadow: inset 0 0 10px #111, 0 0 2px #00ff00;
}
.seq-ui .seq-row {
  font-size: 0;
  cursor: pointer;
  white-space: nowrap;
}
.seq-ui .seq-row.inline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1em;
}
.seq-ui .seq-row span {
  display: inline-block;
  margin: 1px;
  width: 15px;
  height: 30px;
  background: #181818 linear-gradient(#282828, transparent);
  border: 2px solid #222;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.seq-ui .seq-row span.seq-step-measure {
  background: #222 linear-gradient(#333, transparent);
}
.seq-ui .seq-row span.seq-note {
  background: #444 linear-gradient(#7c8, transparent);
  border-color: #565;
}
.seq-ui .seq-row span.seq-note.seq-playhead {
  transform: translateY(2px);
}
.seq-ui .seq-row span.seq-playhead {
  border-color: #2255ff;
  box-shadow: 0 0 30px #2255ff;
}
.seq-ui .seq-row span:hover {
  border-color: #ff9900;
}
.seq-ui .channel {
  display: inline-block;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid #111;
  padding: 5px 10px;
  background: linear-gradient(#222, rgba(0, 0, 0, 0.4));
}
@-webkit-keyframes equalize {
  0% {
    transform: scaleX(0.2);
  }
  25% {
    transform: scaleX(0.7);
  }
  35% {
    transform: scaleX(0);
  }
  40% {
    transform: scaleX(0.6);
  }
  50% {
    transform: scaleX(0.1);
  }
  55% {
    transform: scaleX(0.9);
  }
  60% {
    transform: scaleX(0.3);
  }
  75% {
    transform: scaleX(0.8);
  }
  80% {
    transform: scaleX(0.4);
  }
  90% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(0.2);
  }
}
@keyframes equalize {
  0% {
    transform: scaleX(0.2);
  }
  25% {
    transform: scaleX(0.7);
  }
  35% {
    transform: scaleX(0);
  }
  40% {
    transform: scaleX(0.6);
  }
  50% {
    transform: scaleX(0.1);
  }
  55% {
    transform: scaleX(0.9);
  }
  60% {
    transform: scaleX(0.3);
  }
  75% {
    transform: scaleX(0.8);
  }
  80% {
    transform: scaleX(0.4);
  }
  90% {
    transform: scaleX(0.9);
  }
  100% {
    transform: scaleX(0.2);
  }
}
.seq-ui .transport button {
  background: #222;
  background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.6));
  width: 70px;
  height: 70px;
  border: 2px solid #333;
  border-radius: 5px;
  color: #888;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}
.seq-ui .transport button:hover {
  background-color: #530;
  border-color: #ff9900;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
  color: #fff;
}
.seq-ui .transport button.active {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
  color: #fff;
  transform: translateY(2px);
}
.seq-ui .transport button.transport-play {
  color: #22ff55;
}
.seq-ui .transport-tempo {
  width: 60px;
  height: 60px;
  background: #222;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  padding: 2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #111;
  color: #22ff55;
  text-shadow: 0 0 10px #22ff55;
  text-align: center;
}