: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
    }
}