:host {
  display: block;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  cursor: pointer;
  padding: 22px 13px;
  border-bottom: 1px solid #ececec;
  width: 100%;
}
:host .standalone .chapter-description .chapter-name {
  font-size: 20px;
}

:host(:hover) {
  position: relative;
  top: -1px;
  margin-left: -13px;
  margin-right: -13px;
  padding: 23px 26px 21px;
  overflow: hidden;
  background: #f9f9f9;
  border-radius: 4px;
  border-bottom: 1px solid #f9f9f9;
}
:host(:hover) .chapter-header {
  color: #1a1a1f;
  --staytuned-waves-color: #646468;
  --staytuned-play-button-color: var(--staytuned-main-color, #216fd4);
  font-weight: 400;
}
:host(:hover) .chapter-header path {
  fill: #646468;
}
:host(:hover) .chapter-header circle {
  stroke: #646468;
}
:host(:hover) .chapter-name {
  font-weight: 800;
}
:host(:hover) .chapter-description {
  color: #656769;
}

.chapter-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 10px;
  white-space: nowrap;
  font-weight: 300;
  font-size: 14px;
  line-height: 1;
  height: 20px;
  color: #646468;
  --staytuned-play-button-color: #646468;
}
.chapter--current .chapter-header {
  color: var(--staytuned-main-color, #216fd4) !important;
}
.chapter-header path {
  fill: #646468;
}
.chapter--current .chapter-header path {
  fill: var(--staytuned-main-color, #216fd4) !important;
}

.chapter-start-time {
  margin-right: 20px;
}

.chapter-duration {
  margin-left: 7px;
}

.chapter-name {
  color: #1a1a1f;
  font-size: 16px;
}
.chapter--current .chapter-name {
  color: var(--staytuned-main-color, #216fd4);
  font-weight: 700;
}

.chapter-description {
  margin-bottom: 3px;
  color: #656769;
  font-size: 16px;
}
.chapter-description .chapter-description__text {
  margin-top: 10px;
}
.chapter-description__text {
  line-height: 24px;
  font-weight: 300;
}
.chapter-description--shrunk .chapter-description__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.chapter-description__more-cta {
  cursor: pointer;
  padding-top: 4px;
  font-size: 15px;
  color: var(--staytuned-main-color, #216fd4);
}

.chapter-indicators__play-button, .chapter-indicators__playing-icon, .chapter-indicators__loading-icon {
  display: none;
  transform: scale(0.9);
}

.chapter-indicators__play-button {
  width: 12px;
  height: 14px;
  padding-top: 2px;
  padding-right: 9px;
  display: inline-block;
}

.chapter-indicators__playing-icon {
  padding-right: 5px;
}

.chapter-indicators__loading-icon {
  padding-right: 3px;
  transform: translateY(3px);
}
.chapter-indicators__loading-icon svg {
  animation: spin 1s linear infinite;
}
.chapter-indicators__loading-icon svg circle {
  stroke: var(--staytuned-main-color, #216fd4);
}

.chapter--current .chapter-indicators__play-button {
  display: none;
}
.chapter--current .chapter-indicators__playing-icon {
  display: inline-block;
}
.chapter--current .chapter-indicators__loading-icon {
  display: none;
}

.chapter--hover .chapter-indicators__play-button {
  display: inline-block;
}
.chapter--hover .chapter-indicators__playing-icon {
  display: none;
}
.chapter--hover .chapter-indicators__loading-icon {
  display: none;
}

.chapter--loading .chapter-indicators__play-button {
  display: none;
}
.chapter--loading .chapter-indicators__playing-icon {
  display: none;
}
.chapter--loading .chapter-indicators__loading-icon {
  display: inline-block;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
:host(.dark-theme) {
  --staytuned-main-color: #fff;
  --staytuned-play-button-color: #fff;
  --staytuned-waves-color: #fff;
  border-bottom: 1px solid rgba(186, 186, 186, 0.1) !important;
}
:host(.dark-theme) .chapter-header, :host(.dark-theme) .chapter-description, :host(.dark-theme) .chapter-name {
  color: #ececec;
}
:host(.dark-theme) .chapter-header {
  --staytuned-play-button-color: #fff;
}
:host(.dark-theme) .chapter-header path {
  fill: #fff;
}

:host(.dark-theme:hover) {
  background: rgba(186, 186, 186, 0.1);
}