@font-face {
  font-family: 'icomoon';
  src: url('icons/fonts/icomoon.eot?jvr85o');
  src: url('icons/fonts/icomoon.eot?jvr85o#iefix') format('embedded-opentype'),
    url('icons/fonts/icomoon.ttf?jvr85o') format('truetype'),
    url('icons/fonts/icomoon.woff?jvr85o') format('woff'),
    url('icons/fonts/icomoon.svg?jvr85o#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^='icon-'],
[class*=' icon-'] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: '\ea1c';
}
.icon-pause:before {
  content: '\ea1d';
}
.icon-volume-medium:before {
  content: '\ea27';
}

.waving-container {
  position: relative;
  height: 100px; }
  .waving-container .control-container {
    height: 40px;
    width: 100%;
    position: absolute;
    bottom: 0; }
  .waving-container.no-controls {
    height: 70px; }
    .waving-container.no-controls canvas {
      width: 100%;
      left: 0;
      top: 0;
      bottom: 0; }
  .waving-container.no-canvas {
    height: 40px; }

.waving-canvas {
  width: calc(100% - 165px);
  height: 70px;
  position: absolute;
  left: 60px;
  bottom: 22px; }

.waving-player__progress-bar {
  width: calc(100% - 160px);
  height: 20px;
  left: 50px;
  top: 10px;
  position: relative; }
  .waving-player__progress-bar .progress-line {
    width: calc(100% - 15px / 2 + 5px);
    height: 5px;
    top: 7.5px;
    left: 7.5px;
    background: #c4c4c4;
    position: absolute;
    cursor: pointer; }
  .waving-player__progress-bar .progress-line--played {
    background: #e74c3c;
    height: 100%;
    width: 0%;
    cursor: pointer;
    position: absolute;
    top: 0; }
  .waving-player__progress-bar .thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 2.5px;
    left: 8px;
    cursor: pointer;
    z-index: 2; }

.waving-player__start-stop-button {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 0;
  border-radius: 50%;
  background: #e74c3c;
  text-align: center; }
  .waving-player__start-stop-button .icon {
    width: 100%;
    height: 100%;
    line-height: 40px;
    cursor: pointer;
    color: white;
    font-size: 15px !important;
    position: absolute;
    top: 0; }

.waving-player__volume-bar {
  width: 100px;
  height: 20px;
  right: 0;
  top: 10px;
  position: absolute; }
  .waving-player__volume-bar .volume-line {
    width: calc(100% - 15px / 2 + 5px);
    height: 5px;
    top: 7.5px;
    left: 7.5px;
    background: #c4c4c4;
    position: absolute;
    cursor: pointer; }
  .waving-player__volume-bar .volume-line--selected {
    background: #e74c3c;
    height: 100%;
    width: 0%;
    cursor: pointer;
    position: absolute;
    top: 0; }
  .waving-player__volume-bar .thumb {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
    position: absolute;
    top: 2.5px;
    left: 8px;
    cursor: pointer;
    z-index: 2; }