@gray4: #a09f9e;
@gray7: #ebebed;
@gray8: #f5f6f7;
@pw: #fff;

.time-and-pause {
  height: 32px;
  background: @gray8;
  border-bottom: 1px solid @gray7;
  padding-top: 4px;
  padding-left: 15px;
}

.time,
.play,
.pause {
  display: inline-block;
}
/* time indicator */
.time {
  border-radius: 3px 3px 3px 3px;
  background-color: @gray4;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
  width: 100px;
  padding: 3px 4px 4px;
  letter-spacing: 3.5px;
  margin-left: 6px;
}

.play,
.pause {
    width: 80px;
}
/* play-pause button */
.play {
  cursor: pointer;
}
.play .fa-play {
  font-size: 10px;
  margin-right: 7px;
  color: @pw;
  box-shadow: none;
}

.pause {
  cursor: pointer;
}
.pause .fa-pause {
  font-size: 10px;
  margin-right: 7px;
  color: @gray4;
  box-shadow: none;
}