:root {
  --button-color: #7E7367;
  --button-color-hover: #464039;
  --button-color-active: #38332E;
  --button-color-disabled: #D8D4CF;
  --button-color-disabled-background: #F8F7F7;
  --button-color-secondary-background: #D8D4CF; }

.article-audio {
  border-radius: 8px; }
  .article-audio.article-audio--playing .article-audio__title,
  .article-audio.article-audio--playing .plyr__time--current,
  .article-audio.article-audio--playing .plyr__time--duration {
    color: #fff; }
  .article-audio__title {
    color: #464039;
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24.48px; }
  .article-audio .plyr__time--current, .article-audio .plyr__time--duration {
    color: #464039; }
  .article-audio .plyr button.plyr__controls__item {
    margin-right: 16px; }
  .article-audio .plyr .plyr__controls {
    padding: 0; }
  .article-audio__button--loading {
    animation-name: ckw;
    animation-duration: 1.5s;
    animation-iteration-count: infinite; }

@keyframes ckw {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

:root {
  --plyr-control-icon-size: 16px;
  --plyr-control-spacing: 20px;
  --plyr-control-radius: 50%;
  --plyr-audio-progress-buffered-background: #fff;
  --plyr-audio-control-color: #fff;
  --plyr-range-thumb-height: 0px;
  --plyr-range-thumb-active-shadow-width: 0px;
  --plyr-range-track-height: 6px;
  --plyr-font-family: $font-ubuntu;
  --plyr-font-size-base: 14px;
  --plyr-font-size-small: 14px;
  --plyr-font-size-large: 14px; }

[data-pet-world="Dog"] .article-audio, body[data-color-site="dogColor"] .article-audio {
  background-color: #F9F2EC; }
  [data-pet-world="Dog"] .article-audio .plyr__controls, body[data-color-site="dogColor"] .article-audio .plyr__controls {
    background-color: #F9F2EC; }
  [data-pet-world="Dog"] .article-audio.article-audio--playing, body[data-color-site="dogColor"] .article-audio.article-audio--playing {
    background-color: #936031; }
    [data-pet-world="Dog"] .article-audio.article-audio--playing .plyr__controls, body[data-color-site="dogColor"] .article-audio.article-audio--playing .plyr__controls {
      background-color: #936031; }
    [data-pet-world="Dog"] .article-audio.article-audio--playing .plyr__controls__item:not(.plyr__time), body[data-color-site="dogColor"] .article-audio.article-audio--playing .plyr__controls__item:not(.plyr__time) {
      background-color: #4C321A; }
  [data-pet-world="Dog"] .article-audio .plyr__controls__item:not(.plyr__time), body[data-color-site="dogColor"] .article-audio .plyr__controls__item:not(.plyr__time) {
    background-color: #936031; }
  [data-pet-world="Dog"] .article-audio .plyr--full-ui input[type=range], body[data-color-site="dogColor"] .article-audio .plyr--full-ui input[type=range] {
    color: #6B4624; }

[data-pet-world="Cat"] .article-audio, body[data-color-site="catColor"] .article-audio {
  background-color: #F0F6EE; }
  [data-pet-world="Cat"] .article-audio .plyr__controls, body[data-color-site="catColor"] .article-audio .plyr__controls {
    background-color: #F0F6EE; }
  [data-pet-world="Cat"] .article-audio.article-audio--playing, body[data-color-site="catColor"] .article-audio.article-audio--playing {
    background-color: #4A773C; }
    [data-pet-world="Cat"] .article-audio.article-audio--playing .plyr__controls, body[data-color-site="catColor"] .article-audio.article-audio--playing .plyr__controls {
      background-color: #4A773C; }
    [data-pet-world="Cat"] .article-audio.article-audio--playing .plyr__controls__item:not(.plyr__time), body[data-color-site="catColor"] .article-audio.article-audio--playing .plyr__controls__item:not(.plyr__time) {
      background-color: #2A4422; }
  [data-pet-world="Cat"] .article-audio .plyr__controls__item:not(.plyr__time), body[data-color-site="catColor"] .article-audio .plyr__controls__item:not(.plyr__time) {
    background-color: #4A773C; }
  [data-pet-world="Cat"] .article-audio .plyr--full-ui input[type=range], body[data-color-site="catColor"] .article-audio .plyr--full-ui input[type=range] {
    color: #37582D; }

/*# sourceMappingURL=articleAudio.css.map*/