.jes-player {
  border: 1px solid #ccc;
  -ms-user-select: none;
  /* IE 10+ */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none; }
  .jes-player .jp-header {
    background-color: #3f51b5;
    height: 30px;
    padding: 8px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center; }
    .jes-player .jp-header img {
      height: 100%;
      width: auto; }
    .jes-player .jp-header span {
      font-size: 20px;
      margin-left: 10px;
      color: #f0f0f0; }
  .jes-player .jp-track-list {
    max-height: 260px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid #ccc; }
    .jes-player .jp-track-list ul li {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      cursor: pointer;
      border-bottom: 1px solid #ccc; }
      .jes-player .jp-track-list ul li:last-child {
        border: none; }
      .jes-player .jp-track-list ul li:hover {
        background-color: #eceeff; }
      .jes-player .jp-track-list ul li.playing {
        font-weight: bold; }
      .jes-player .jp-track-list ul li .jp-track-num {
        text-align: left;
        flex-basis: 3em;
        padding-left: 1em; }
      .jes-player .jp-track-list ul li .jp-track-title {
        text-align: left;
        flex-grow: 1; }
      .jes-player .jp-track-list ul li .jp-track-len {
        flex-basis: 10em;
        text-align: right;
        padding-right: 1em; }
  .jes-player .jp-now-play .jp-now-info {
    height: 40px;
    box-sizing: border-box; }
    .jes-player .jp-now-play .jp-now-info p {
      height: 50%;
      display: flex;
      align-items: center;
      padding-left: 20px; }
    .jes-player .jp-now-play .jp-now-info .jp-play-album {
      font-size: smaller; }
  .jes-player .jp-now-play .jp-wavesurfer {
    position: relative;
    height: 60px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box; }
  .jes-player .jp-now-play .jp-time {
    height: 40px;
    display: flex;
    justify-content: space-between; }
    .jes-player .jp-now-play .jp-time span {
      padding: 0 4px; }
  .jes-player .jp-now-play .jp-operator {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3f51b5;
    color: white; }
    .jes-player .jp-now-play .jp-operator button {
      width: 48px;
      height: 48px;
      border-radius: 6px;
      background-color: transparent; }
      .jes-player .jp-now-play .jp-operator button:hover {
        background-color: rgba(158, 158, 158, 0.2); }
      .jes-player .jp-now-play .jp-operator button:active {
        background-color: rgba(158, 158, 158, 0.1); }
    .jes-player .jp-now-play .jp-operator i {
      padding: 0 8px;
      font-size: 32px;
      cursor: pointer;
      color: white; }