.playlist {
  margin: 2em 0; }
  .playlist .playlist-time-scale {
    height: 30px; }
  .playlist .playlist-tracks {
    background: rgba(0, 0, 0, 0.37); }
  .playlist .channel {
    background: white; }
  .playlist .channel-progress {
    background: darkorange; }
  .playlist .cursor {
    background: rgba(0, 0, 0, 0.7); }
  .playlist .wp-fade {
    background-color: rgba(255, 255, 255, 0.5); }
  .playlist .state-cursor,
  .playlist .state-select {
    cursor: text; }
  .playlist .state-fadein {
    cursor: w-resize; }
  .playlist .state-fadeout {
    cursor: e-resize; }
  .playlist .state-shift {
    cursor: ew-resize; }
  .playlist .selection.point {
    background: white; }
  .playlist .selection.segment {
    background: rgba(255,255,255,.5); }
  .playlist .channel-wrapper.silent .channel {
    opacity: 0.2; }
  .playlist .channel-wrapper .channel {
    opacity: 0.5; }
  .playlist .controls {

    text-align: center; }
    .playlist .controls header {
      overflow: hidden;
      color: white;
      background-color: rgba(132, 116, 116, 0.3);
      margin-bottom: 1em;
      height: 20px; }
    .playlist .controls label {
      margin: 1em auto;
      width: 100%;
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transform: translate(0, 0); }
    .playlist .controls label:before {
      content: "\f027";
      color: white;
      font-size: 18px;
      padding-right: 5px;
      -moz-osx-font-smoothing: grayscale; }
    .playlist .controls label:after {
      content: "\f028";
      color: white;
      font-size: 18px;
      padding-left: 5px; }
    .playlist .controls input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      width: 75%; }
    .playlist .controls input[type=range]::-webkit-slider-runnable-track {
      height: 8px;
      background: #ddd;
      border: none;
      border-radius: 3px;
      padding: 1px; }
    .playlist .controls input[type=range]::-moz-range-track {
      height: 8px;
      background: #ddd;
      border: none;
      border-radius: 3px;
      padding: 1px; }
    .playlist .controls input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: goldenrod;
      margin-top: -5px;
      cursor: ew-resize; }
    .playlist .controls input[type=range]::-moz-range-thumb {
      border: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: goldenrod;
      margin-top: -5px;
      cursor: ew-resize; }
    .playlist .controls input[type=range]:focus {
      outline: none; }
    .playlist .controls input[type=range]:focus::-webkit-slider-runnable-track {
      background: #ccc; }
    .playlist .controls input[type=range]:focus::-moz-range-track {
      background: #ccc; }
  .playlist .annotations .annotations-boxes {
    text-align: center; }
  .playlist .annotations .annotation-box {
    border: 2px dashed grey;
    padding: 0 10px; }
    .playlist .annotations .annotation-box .resize-handle {
      background: grey;
      opacity: 0.3;
      cursor: ew-resize; }
    .playlist .annotations .annotation-box .id {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      height: 100%; }
  .playlist .annotations .annotation {
    padding: 1em; }
  .playlist .annotations .annotations-text {
    font-size: 19px;
    font-weight: 300;
    margin-top: 1em;
    height: 160px;
    overflow-x: hidden;
    overflow-y: auto; }
  .playlist .annotations .current {
    background-color: #EBF4F6; }

.playlist .vocals {
  background-color: #c0dce0; }
  .playlist .vocals header {
    background-color: green; }

.track-drop {
  border: 2px dashed blue;
  height: 100px;
  width: 200px;
  margin: 1em 0; }
  .track-drop::before {
    content: "Drop audio file(s) here!"; }
  .track-drop.drag-enter {
    border: 2px solid orange; }
