:root {
  --able-white: #fff;
  --able-black: #000;
  --able-transparent-gray: #00000077;
  --able-medium-light-gray: #a8a8a8;
  --able-light-gray: #dadada;
  --able-very-light-gray: #eee;
  --able-off-white: #fdfdfd;
  --able-dark-gray: #262626;
  --able-medium-dark-gray: #333;
  --able-medium-dark-gray2: #464646;
  --able-medium-gray: #666;
  --able-bright-yellow: #ff6;
  --able-light-yellow: #ffc;
  --able-bright-orange: #f90;
  --able-light-orange: #ffbb37;
  --able-bright-green: #8ab839;
  --able-light-pink: #fee
}

.able-chapters-div,
.able-modal-dialog,
.able-modal-overlay,
.able-playlist,
.able-search-results,
.able-transcript-area,
.able-wrapper {
  --able-base-control-size: 24px;
  --able-color: var(--able-white);
  --able-control-background: var(--able-black);
  --able-control-color: var(--able-white);
  --able-big-play-background: var(--able-transparent-gray);
  --able-alert-button-color: var(--able-black);
  --able-seekbar-border: var(--able-medium-light-gray);
  --able-seekbar-background: var(--able-black);
  --able-seekbar-loaded: var(--able-medium-gray);
  --able-seekbar-played: var(--able-light-gray);
  --able-seekbar-head: var(--able-off-white);
  --able-control-label-color: var(--able-white);
  --able-controller-background: var(--able-medium-dark-gray2);
  --able-separator-color: var(--able-medium-light-gray);
  --able-volume-background: var(--able-black);
  --able-volume-outline: var(--able-medium-gray);
  --able-statusbar-color: var(--able-light-gray);
  --able-statusbar-background: var(--able-black);
  --able-default-caption-color: var(--able-white);
  --able-default-caption-background: var(--able-black);
  --able-default-description-color: var(--able-bright-yellow);
  --able-default-description-background: var(--able-dark-gray);
  --able-description-border: var(--able-medium-gray);
  --able-now-playing-color: var(--able-white);
  --able-now-playing-background: var(--able-black);
  --able-modal-color: var(--able-black);
  --able-modal-background: var(--able-off-white);
  --able-modal-overlay: var(--able-transparent-gray);
  --able-modal-border: 3px solid var(--able-light-gray);
  --able-drag-outline: var(--able-bright-orange);
  --able-sign-background: var(--able-white);
  --able-sign-border: var(--able-black);
  --able-resizable-color: var(--able-medium-gray);
  --able-chapter-background: transparent;
  --able-chapter-color: var(--able-black);
  --able-current-chapter-background: var(--able-black);
  --able-current-chapter-color: var(--able-white);
  --able-focus-outline: var(--able-light-orange);
  --able-hover-outline: var(--able-bright-green);
  --able-tooltip-border: var(--able-dark-gray);
  --able-tooltip-color: var(--able-medium-dark-gray);
  --able-tooltip-background: var(--able-very-light-gray);
  --able-alert-background: var(--able-light-yellow);
  --able-menu-border: var(--able-dark-gray);
  --able-menu-background: var(--able-black);
  --able-menu-outline: var(--able-medium-gray);
  --able-menu-color: var(--able-white);
  --able-menu-focus-background: var(--able-very-light-gray);
  --able-menu-focus-color: var(--able-black);
  --able-transcript-background: var(--able-white);
  --able-cue-audio-description-background: var(--able-light-pink);
  --able-cue-audio-description-color: var(--able-dark-gray);
  --able-cue-highlighted-background: var(--able-black);
  --able-cue-highlighted-color: var(--able-white);
  --able-cue-interacting-background: var(--able-light-yellow);
  --able-cue-interacting-color: var(--able-black);
  --able-playlist-item-background: var(--able-off-white);
  --able-playlist-item-color: var(--able-black);
  --able-playlist-item-button-color: var(--able-black);
  --able-search-results-button-background: var(--able-white);
  --able-search-results-button-color: var(--able-black);
  --able-playlist-current-background: var(--able-white);
  --able-playlist-current-border: var(--able-dark-gray);
  --able-playlist-current-outline: var(--able-medium-dark-gray);
  --able-playlist-current-active-color: var(--able-black);
  --able-playlist-current-active-background: var(--able-white);
  --able-search-term-background: var(--able-light-yellow);
  --able-search-term-color: var(--able-black)
}

.able-black-controls {
  --able-control-background: #fff !important;
  --able-control-color: #000 !important
}

.able-chapters-div,
.able-modal-dialog,
.able-playlist,
.able-search-results,
.able-transcript-area,
.able-wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
}

.able-chapters-div,
.able-chapters-div *,
.able-playlist,
.able-playlist *,
.able-wrapper,
.able-wrapper * {
  box-sizing: border-box
}

.able-wrapper {
  position: relative;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
  height: auto;
  text-align: start
}

.able {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  z-index: 5000;
  display: grid
}

.able-player-transcript .able-window-toolbar input,
.able-wrapper .able input {
  margin: 0;
  padding: 2px 4px
}

.able-control-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 9px 8px;
  gap: 4px
}

.able-pipe {
  position: relative;
  top: -2px;
  color: var(--able-separator-color);
  margin: 0 6px
}

.able .able-vidcap-container {
  left: 0;
  margin: 0;
  position: relative;
  top: 0
}

.able .able-audcap-container {
  position: relative;
  margin: 0;
  padding: .5rem;
  min-height: 3.2rem
}

.able-clipped,
.able-offscreen,
.able-screenreader-alert,
.able-transcript .able-hidden {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important
}

.able-media-container audio {
  display: none !important
}

.able-controller {
  position: relative;
  background-color: var(--able-controller-background);
  padding: 0 4px
}

.able-audio .able-controller {
  padding-top: 8px
}

.able-skin-legacy .able-controller {
  padding: 0
}

.able-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto !important
}

.able .able-vidcap-container {
  overflow: visible
}

.able .able-vidcap-container video {
  max-width: 100%;
  display: block
}

.able-media-container iframe,
.able-sign-window iframe {
  max-width: 100% !important;
  display: block !important
}

.able-wrapper .able button.able-big-play-button {
  position: absolute;
  color: var(--able-control-color);
  background-color: var(--able-big-play-background);
  border: none;
  outline: 0;
  left: 0;
  top: 0;
  padding: 0;
  z-index: 6500;
  opacity: .75;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  width: 100%;
  height: 100%
}

.able-wrapper .able button.able-big-play-button:focus,
.able-wrapper .able button.able-big-play-button:hover {
  opacity: 100
}

.able-big-play-button svg {
  background-color: var(--able-control-background);
  padding: 1rem;
  width: 8rem;
  height: 8rem;
  max-width: 140px;
  max-height: 140px;
  border-radius: 8px
}

.able-big-play-button:focus svg,
.able-big-play-button:hover svg {
  outline: 3px solid
}

.able-left-controls,
.able-right-controls {
  overflow: visible;
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap
}

.able-skin-legacy .able-left-controls,
.able-skin-legacy .able-right-controls {
  width: fit-content
}

.able-controller,
.able-controller button,
.able-controller div[role=button] {
  color: var(--able-control-color)
}

.able-controller .able-alert button {
  color: var(--able-alert-button-color) !important
}

.able-controller .able-seekbar {
  border: 1px solid var(--able-seekbar-border)
}

.able-controller div[role=button] {
  background: 0 0;
  position: relative;
  padding: 2px;
  min-width: var(--able-base-control-size);
  min-height: var(--able-base-control-size);
  width: 1rem;
  height: 1rem;
  border: none;
  overflow: visible !important;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 6600;
  border-radius: 3px
}

.able-controller div.able-button-handler-play[role=button] {
  padding: 4px
}

.able-controller .buttonOff {
  opacity: .5
}

.able-seekbar-wrapper {
  display: block;
  width: 100%;
  padding: 6px 12px
}

.able-skin-legacy .able-seekbar-wrapper {
  padding: 0
}

.able-seekbar {
  display: flex;
  align-items: center;
  position: relative;
  height: .5rem;
  border: 1px solid;
  background-color: var(--able-seekbar-background);
  z-index: 6500
}

.able-seekbar-loaded {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: var(--able-seekbar-loaded);
  z-index: 5100
}

.able-seekbar-played {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: var(--able-seekbar-played);
  z-index: 5200
}

.able-seekbar-head {
  display: inline-block;
  position: relative;
  left: 0;
  background-color: var(--able-seekbar-head);
  min-width: var(--able-base-control-size);
  min-height: var(--able-base-control-size);
  width: .875rem;
  height: .875rem;
  border-radius: 100%;
  z-index: 5500
}

.able-volume-slider {
  height: 120px;
  background-color: var(--able-volume-background);
  outline: 1px solid var(--able-volume-outline);
  margin: 0;
  padding: 8px;
  position: absolute;
  right: 0;
  display: block;
  z-index: 9100
}

.able-volume-help {
  display: none
}

.able-volume-slider input[type=range] {
  appearance: slider-vertical;
  writing-mode: bt-rl;
  width: 28px;
  height: 100%;
  background: 0 0
}

.able-volume-slider input[type=range]::-moz-range-track {
  border: 1px solid #fff;
  width: 7px;
  cursor: pointer;
  background: #000
}

input[type=range]::-moz-range-thumb {
  background-color: var(--able-control-color);
  outline: 1px solid var(--able-volume-outline);
  outline-offset: -2px;
  height: var(--able-base-control-size);
  width: var(--able-base-control-size);
  border-radius: 100%
}

.able-status-bar {
  color: var(--able-statusbar-color);
  font-size: .875rem;
  padding: 8px 12px;
  gap: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--able-statusbar-background)
}

.able-status-bar span.able-timer {
  text-align: start
}

.able-status-bar span.able-speed {
  text-align: center
}

.able-status {
  font-style: italic;
  text-align: end
}

div.able-captions-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  display: block;
  z-index: 6000
}

div.able-captions-wrapper:not(.able-captions-overlay) {
  padding: 0 0 8px
}

div.able-captions {
  display: none;
  padding: 4px 6px;
  line-height: 1.4;
  background-color: var(--able-default-caption-background);
  font-size: 1rem;
  color: var(--able-default-caption-color);
  opacity: .75
}

div.able-vidcap-container div.able-captions-overlay {
  position: absolute;
  margin: 0;
  bottom: 12px
}

div.able-vidcap-container div.able-captions-below {
  position: relative;
  min-height: 4rem
}

div.able-audcap-container.captions-off {
  display: none
}

div.able-descriptions {
  position: relative;
  color: var(--able-default-description-color);
  background-color: var(--able-default-description-background);
  min-height: 4rem;
  border-top: 1px solid var(--able-description-border);
  margin: 0;
  padding: 12px;
  text-align: center
}

div.able-now-playing {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  padding: .5rem .5rem 1rem;
  color: var(--able-now-playing-color);
  background: var(--able-now-playing-background)
}

div.able-now-playing span {
  font-size: .875rem
}

div.able-video div.able-now-playing {
  display: none
}

div.able-modal-dialog {
  position: fixed;
  display: none;
  z-index: 10000;
  max-height: 90%;
  overflow: auto;
  transform: translate(-50%, -50%) !important;
  top: 50%;
  left: 50%;
  outline: 0 none;
  color: var(--able-modal-color);
  background-color: var(--able-modal-background);
  border: var(--able-modal-border);
  width: 50rem;
  max-width: 95%;
  padding: 1rem;
  box-sizing: border-box
}

body.able-modal-active {
  overflow: hidden
}

div.able-modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: var(--able-modal-overlay);
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  z-index: 9500
}

.able-alert button,
.able-modal-dialog button {
  all: unset;
  padding: 4px 12px;
  font-size: 1.125rem;
  border: 2px solid
}

.able-prefs-buttons {
  display: flex;
  gap: 8px;
  margin-top: 1rem
}

.able-modal-header {
  display: flex;
  justify-content: space-between
}

.able-modal-dialog .modalCloseButton {
  margin: 0;
  align-self: flex-start
}

div.able-modal-dialog h1 {
  font-size: 1.5rem;
  line-height: 1.6;
  margin: 0 0 .5rem;
  order: -1
}

.able-prefs-form div[role=group] {
  padding: 1rem 0;
  border: none
}

.able-prefs-form h2 {
  font-weight: 700;
  font-size: 1.1rem
}

.able-desc-pref-prompt {
  font-weight: 700;
  font-style: italic;
  margin-left: 1rem !important
}

.able-prefDescFormat>div {
  margin-left: 1.5rem
}

.able-prefs-captions>div,
.able-prefs-descriptions>div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .25rem
}

.able-prefs-captions label,
.able-prefs-descriptions label {
  text-align: end;
  width: 10rem
}

.able-prefs-checkbox label {
  width: auto
}

.able-prefs-captions select,
.able-prefs-descriptions select {
  width: 10rem
}

div.able-prefDescPause {
  margin-top: 1rem
}

.able-prefs-form div.able-captions-sample {
  padding: .5rem;
  text-align: center
}

.able-prefs-form div.able-desc-sample {
  padding: .5rem;
  text-align: center;
  color: #fff;
  background-color: #000
}

.able-prefs-form h2 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.1rem
}

.able-prefs-form ul {
  margin-top: 0
}

able-prefs-form-keyboard ul {
  list-style-type: none
}

span.able-modkey-alt,
span.able-modkey-ctrl,
span.able-modkey-shift {
  color: #666;
  font-style: italic
}

span.able-modkey {
  font-weight: 700;
  color: #000;
  font-size: 1.1rem
}

.able-resize-form h1 {
  font-size: 1.15rem
}

.able-resize-form div div {
  margin: 1rem 0
}

.able-resize-form label {
  display: block
}

.able-resize-form input {
  font-size: 1.25rem;
  padding: 4px
}

.able-resize-form input[readonly] {
  color: var(--able-separator-color)
}

.able-window-toolbar {
  background-color: var(--able-controller-background);
  color: var(--able-control-color);
  padding: 8px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.able-window-toolbar>div {
  display: flex
}

.able-window-toolbar button {
  color: var(--able-control-color)
}

.able-window-toolbar .able-button-handler-preferences svg {
  min-width: var(--able-base-control-size);
  min-height: var(--able-base-control-size);
  height: 1rem;
  width: 1rem
}

.able-draggable:hover {
  cursor: move
}

.able-window-toolbar .able-button-handler-preferences {
  background-color: transparent;
  border: none;
  outline: 0;
  padding: 0;
  z-index: 9300
}

.able-window-toolbar .able-button-handler-preferences img {
  display: block
}

.able-window-toolbar .able-popup {
  position: absolute;
  cursor: default;
  left: 0;
  top: 0;
  display: block;
  border-radius: 0 0 5px 5px;
  background: var(--able-controller-background)
}

.able-drag {
  outline: 3px dashed var(--able-drag-outline);
  outline-offset: 2px;
  cursor: move
}

.able-resizable {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0;
  right: 0;
  padding: 1px;
  cursor: nwse-resize
}

.able-resizable svg line {
  stroke: var(--able-resizable-color);
  stroke-width: 2px
}

.able-sign-window {
  position: relative;
  z-index: 8000;
  background: var(--able-sign-background);
  border: 1px solid var(--able-sign-border)
}

.able-sign-window video {
  width: 100%;
  margin-bottom: 1rem
}

.able-sign-window:focus {
  outline: 0
}

div.able-chapters-div {
  padding: 0;
  max-width: 100%
}

div.able-chapters-div .able-chapters-heading {
  margin: 8px;
  font-size: 1.125rem;
  font-weight: 700
}

div.able-chapters-div ul,
div.able-chapters-div ul li {
  list-style-type: none;
  padding: 0;
  margin: 0
}

div.able-chapters-div button {
  all: unset;
  width: 100%;
  height: 100%;
  border: none;
  background-color: var(--able-chapter-background);
  color: var(--able-chapter-color);
  font-size: 1rem;
  text-align: start;
  padding: 8px
}

div.able-chapters-div li.able-current-chapter button {
  background-color: var(--able-current-chapter-background);
  color: var(--able-current-chapter-color)
}

div.able-chapters-div button:focus {
  border: 0;
  outline: 2px solid var(--able-focus-outline);
  outline-offset: 2px
}

div.able-chapters-div button:hover {
  outline: 2px solid var(--able-hover-outline);
  outline-offset: 2px
}

div.able-wrapper.fullscreen {
  margin: 0 !important;
  position: fixed !important;
  top: 0 !important;
  background: 0 0 !important
}

.able-tooltip {
  position: absolute;
  padding: 4px 8px;
  border: 1px solid var(--able-tooltip-border);
  color: var(--able-tooltip-color) !important;
  background-color: var(--able-tooltip-background);
  border-radius: 3px;
  display: block;
  font-size: .875rem
}

.able .able-alert {
  border: none
}

.able-alert {
  background-color: var(--able-alert-background);
  z-index: 9400;
  padding: 4px 8px;
  position: absolute;
  height: fit-content;
  width: 100%;
  border: 1px solid;
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  bottom: 0;
  left: 0
}

.able-popup {
  z-index: 9200
}

.able-tooltip {
  z-index: 9500
}

.able ul.able-popup,
ul.able-popup {
  position: absolute;
  margin: 0;
  padding: 0;
  padding-inline-start: 0;
  list-style-type: none;
  border-width: 1px;
  border-color: var(--able-menu-border);
  background-color: var(--able-menu-background);
  outline: 1px solid var(--able-menu-outline);
  color: var(--able-menu-color);
  opacity: .95;
  border-radius: 4px;
  display: grid;
  cursor: default;
  width: auto
}

.able ul.able-popup li,
ul.able-popup li {
  padding: 4px 16px;
  margin: 0;
  width: auto
}

.able ul.able-popup li:first-of-type,
ul.able-popup li:first-of-type {
  border-radius: 4px 4px 0 0
}

.able ul.able-popup li:last-of-type,
ul.able-popup li:last-of-type {
  border-radius: 0 0 4px 4px
}

.able ul.able-popup li.able-focus,
ul.able-popup li.able-focus {
  background-color: var(--able-menu-focus-background);
  color: var(--able-menu-focus-color)
}

.able-popup-captions li[aria-checked=true]::before {
  content: "\2713" /'';
  margin-right: 4px
}

.able-transcript-area {
  border-width: 1px;
  border-style: solid;
  z-index: 7000;
  padding-bottom: 25px;
  background-color: var(--able-transcript-background)
}

.able-transcript {
  position: relative;
  overflow-y: scroll;
  padding-left: 1rem;
  padding-right: 1rem;
  background-color: #fff;
  height: 350px
}

.able-transcript div {
  margin: 1rem 0
}

.able-transcript-heading {
  font-size: 1.375rem;
  font-weight: 700;
  margin: .5rem 0;
  padding: 0
}

.able-transcript-chapter-heading {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
  padding: 0
}

.able-transcript div.able-transcript-desc {
  background-color: var(--able-cue-audio-description-background);
  color: var(--able-cue-audio-description-color);
  border: 1px solid;
  font-style: italic;
  padding: .5rem
}

.able-transcript .able-unspoken {
  font-weight: 700
}

.able-highlight,
.able-highlight span:active,
.able-highlight span:focus,
.able-highlight span:hover {
  background-color: var(--able-cue-highlighted-background) !important;
  color: var(--able-cue-highlighted-color) !important;
  padding: .25rem .1rem;
  border: none;
  outline: 0
}

.able-transcript span:active,
.able-transcript span:focus,
.able-transcript span:hover {
  background: var(--able-cue-interacting-background);
  color: var(--able-cue-interacting-color);
  border: none;
  outline: 0;
  border-bottom: 1px solid;
  cursor: pointer
}

.able-window-toolbar label {
  display: inline;
  font-size: .875rem;
  margin-right: .333rem;
  color: var(--able-control-label-color)
}

.able-alert button,
.able-controller div[role=button],
.able-controller input,
.able-modal-dialog button,
.able-playlist li button,
.able-popup li,
.able-search-results li button,
.able-seekbar-head,
.able-window-toolbar .able-button-handler-preferences,
.able-window-toolbar input,
.able-window-toolbar select,
div.able-modal-dialog button,
div.able-modal-dialog input {
  outline-style: solid;
  outline-width: 3px;
  outline-color: transparent
}

.able-alert button:focus,
.able-controller div[role=button]:focus,
.able-controller input:focus,
.able-modal-dialog button:focus,
.able-playlist button:focus,
.able-search-results li button:focus,
.able-seekbar-head:focus,
.able-window-toolbar .able-button-handler-preferences:focus,
.able-window-toolbar input:focus,
.able-window-toolbar select:focus,
.able-wrapper .able button.able-big-play-button:focus .icon-play,
.able-wrapper .able button.able-big-play-button:focus svg,
div.able-modal-dialog button:focus,
div.able-modal-dialog input:focus {
  outline-color: var(--able-focus-outline)
}

.able-alert button:hover,
.able-controller div[role=button]:hover,
.able-controller input:hover,
.able-modal-dialog button:hover,
.able-playlist li button:hover,
.able-popup li:hover,
.able-search-results li button:hover,
.able-seekbar-head:hover,
.able-window-toolbar .able-button-handler-preferences:hover,
.able-window-toolbar input:hover,
.able-window-toolbar select:hover,
.able-wrapper .able button.able-big-play-button:hover .icon-play,
.able-wrapper .able button.able-big-play-button:hover svg,
div.able-modal-dialog button:hover,
div.able-modal-dialog input:hover {
  outline-color: var(--able-hover-outline)
}

.able-playlist,
.able-search-results ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: grid
}

.able-playlist li,
.able-search-results li {
  background-color: var(--able-playlist-item-background);
  color: var(--able-playlist-item-color);
  padding: 0;
  margin: 0;
  border: 1px solid;
  width: auto;
  border-bottom: none;
  max-width: 100%
}

.able-search-results li {
  display: flex
}

.able-playlist li:first-of-type:not(.able-player.able-playlistli),
.able-search-results li:first-of-type {
  border-radius: 5px 5px 0 0
}

.able-playlist li:last-of-type:not(.able-player.able-playlistli),
.able-search-results li:last-of-type {
  border-bottom: 2px solid;
  border-radius: 0 0 5px 5px
}

.able-playlist li button,
.able-search-results li button {
  border: none;
  color: var(--able-playlist-item-button-color);
  background-color: transparent;
  font-size: .875rem;
  width: 100%;
  padding: 8px;
  text-align: start;
  display: flex;
  align-items: center;
  gap: 12px;
  outline-offset: -6px
}

.able-search-results li button {
  outline-offset: -3px;
  border-radius: 4px
}

.able-search-results li>span {
  font-size: .875rem;
  padding: 8px
}

.able-search-results li button {
  width: fit-content;
  background: var(--able-search-results-button-background);
  color: var(--able-search-results-buttonc-color);
  border-radius: 3px;
  margin: 2px
}

.able-playlist li button img {
  max-width: 100px;
  max-height: 100px;
  display: block
}

.able-playlist li.able-current {
  background-color: var(--able-playlist-current-background);
  border-color: var(--able-playlist-current-border);
  outline: 2px solid var(--able-playlist-current-outline);
  outline-offset: -2px
}

.able-playlist li.able-current button:active,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:hover {
  color: var(--able-playlist-current-active-color);
  background: var(--able-playlist-current-active-background)
}

#able-search-term-echo {
  font-style: italic
}

button.able-search-results-time {
  font-weight: 700;
  cursor: pointer
}

#able-search-term-echo,
.able-search-term {
  background-color: var(--able-search-term-background);
  color: var(--able-search-term-color);
  font-weight: 700
}

.able-modal-dialog button svg,
.able-modal-dialog div[role=button] svg,
.able-wrapper button svg,
.able-wrapper div[role=button] svg {
  display: block;
  fill: currentColor
}

#able-vts-instructions {
  padding: 1rem;
  border: 1px solid #999;
  width: 100%;
  margin: 0 auto 1.5rem;
  box-sizing: border-box
}

#able-vts fieldset {
  margin: 0 auto 1.5rem;
  border: none
}

#able-vts fieldset legend {
  color: #000;
  font-weight: 700
}

#able-vts fieldset div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center
}

#able-vts thead tr {
  background: #f0f0f0
}

#able-vts table {
  border-collapse: collapse
}

#able-vts table,
#able-vts table td,
#able-vts table th {
  border: 1px solid #323232;
  padding: 8px;
  color: #323232
}

#able-vts table td[contenteditable=true]:hover {
  background: #fff;
  color: #333
}

#able-vts table td[contenteditable=true]:focus-within {
  background: #fff;
  color: #000
}

#able-vts table td button {
  width: auto;
  padding: 2px;
  margin: 1px;
  display: flex;
  align-items: center;
  float: left;
  color: #323232;
  background: #f6f6f6;
  border-radius: 2px
}

#able-vts table td button svg {
  width: 22px;
  height: 22px
}

#able-vts table button:hover svg {
  fill: #c00
}

tr.kind-subtitles {
  background-color: #fff
}

tr.kind-descriptions {
  background-color: #fee
}

tr.kind-chapters {
  background-color: #e6ffe6
}

.able-vts-dragging {
  background-color: #ffc
}

div#able-vts-icon-credit {
  font-size: .875rem
}

div#able-vts-alert {
  display: none;
  position: fixed;
  top: 5px;
  left: 5px;
  border: 2px solid #666;
  background-color: #ffc;
  padding: 1rem;
  font-weight: 700;
  z-index: 9400
}

button#able-vts-save {
  font-size: 1rem;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 1rem;
  font-weight: 700
}

button#able-vts-save:focus,
button#able-vts-save:hover {
  color: #fff;
  background-color: #060
}

.able-vts-output-instructions {
  width: 720px;
  max-width: 90%
}

#able-vts textarea {
  height: 200px;
  width: 720px;
  max-width: 90%
}

@media (width < 480px) {
  .able-control-row {
    gap: 8px
  }

  .able-control-row div[role=button] {
    min-width: 32px;
    height: 32px
  }

  .able-sign-window,
  .able-transcript-area {
    position: static !important;
    width: 100% !important
  }

  div.able-captions-wrapper:not(.able-captions-overlay) {
    min-height: 5rem
  }
}