.hq-read-aloud-player {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  vertical-align: middle;
  white-space: nowrap;
}

.hq-read-toggle {
  width: 20px;
  height: 24px;
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  border: 0;
  color: #078572;
  background: transparent;
  line-height: 1;
  text-align: center;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
  vertical-align: middle;
}

.hq-read-toggle i {
  font-size: 17px !important;
  line-height: 1 !important;
}
.hq-read-toggle .fa-volume-up:before {
  font-family: FontAwesome !important;
  content: "\f028";
}

.hq-read-toggle .fa-pause:before {
  font-family: FontAwesome !important;
  content: "\f04c";
}

.hq-read-toggle:hover,
.hq-read-toggle:focus {
  color: #056f60;
  background: transparent;
  outline: none;
}

.hq-read-rate-select,
.hq-read-voice {
  height: 24px;
  border: 1px solid #ddd;
  color: #444;
  background: #fff;
  font-size: 13px;
  padding: 0 3px;
}

.hq-read-rate-select {
  width: 58px;
}

.hq-read-voice {
  max-width: 165px;
}

@media (max-width: 768px) {
  .hq-read-aloud-player {
    flex-wrap: wrap;
    white-space: normal;
  }

  .hq-read-voice {
    max-width: 150px;
  }
}