.c-media {
  border: 1px solid var(--si-color-medium-gray);
}
.c-media.has-transcript, .c-media.has-media-info {
  position: relative;
  padding-block-end: 12px;
}
@media (min-width: 768px) {
  .c-media.has-transcript, .c-media.has-media-info {
    padding-block-end: 20px;
  }
}
.c-media figure {
  width: 100%;
}
.c-media figcaption {
  padding-block: 20px;
  padding-inline: 20px;
}
@media (min-width: 768px) {
  .c-media.has-transcript figcaption {
    padding-inline-end: 250px;
  }
}
.c-media div.able-captions-below {
  bottom: 0 !important;
}
.c-media .wrapper--able-outer .able-controller,
.c-media .wrapper--able-outer:not(.audio) .able-controller {
  position: relative !important;
  background: #fff !important;
}
.c-media .able-controller {
  min-height: 2em;
  padding-block: 12px;
  padding-inline: 12px;
}
@media (min-width: 768px) {
  .c-media .able-controller {
    padding-inline: 20px;
  }
  .c-media .able-controller .able-left-controls, .c-media .able-controller .able-right-controls {
    gap: 20px;
  }
}
.c-media .able-controller,
.c-media .able-control-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #fff;
}
.c-media iframe {
  width: 100%;
}
.c-media .able-left-controls, .c-media .able-right-controls {
  gap: 12px;
}
.c-media .able-white-controls, .c-media .able-white-controls div[role=button], .c-media .able-black-controls label {
  color: var(--si-color-black) !important;
}
.c-media .able-controller div[role=button] {
  min-width: 0 !important;
}
.c-media .able-seekbar-head {
  background-color: var(--si-color-black);
}
.c-media .able-status-bar {
  color: var(--si-color-black) !important;
}
.c-media .able-white-controls, .c-media .able-white-controls div[role=button], .c-media .able-black-controls label {
  color: var(--si-color-black) !important;
}