.queens-play-audio .playAudio[data-v-941b93b8] {
  display: flex;
  position: relative;
  height: 31px;
  overflow: hidden;
}
.queens-play-audio .playAudio .play-btn[data-v-941b93b8] {
  width: 31px;
  height: 31px;
  background-color: rgba(77, 141, 255, 0.07);
  border-radius: 31px;
  text-align: center;
}
.queens-play-audio .playAudio img[data-v-941b93b8] {
  display: inline-block;
  width: 35%;
  margin-top: 50%;
  margin-left: 50%;
  transform: translate(-65%, -50%);
}
.queens-play-audio .playAudio .duration[data-v-941b93b8] {
  position: relative;
  margin: 0 10px 0 16px;
  flex: 1;
  height: 30px;
}
.queens-play-audio .playAudio .duration[data-v-941b93b8]:after {
  position: absolute;
  top: 13px;
  content: '';
  overflow: hidden;
  width: 100%;
  height: 4px;
  background-color: rgba(77, 141, 255, 0.08);
}
.queens-play-audio .playAudio .duration-bar[data-v-941b93b8] {
  position: absolute;
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
}
.queens-play-audio .playAudio .duration-bar[data-v-941b93b8]:after {
  position: absolute;
  top: 13px;
  content: '';
  overflow: hidden;
  width: 100%;
  height: 4px;
  background-color: #4d8dff;
}
.queens-play-audio .playAudio .duration-toggle[data-v-941b93b8] {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: #FFFFFF;
  border: 2px solid #4D8DFF;
  border-radius: 50%;
}
.queens-play-audio .playAudio .duration.animation .duration-bar[data-v-941b93b8] {
  transition: width 0.15s linear;
}
.queens-play-audio .playAudio .duration.animation .duration-toggle[data-v-941b93b8] {
  transition: left 0.15s linear;
}