/**
 * Able Player core styles
 *
 * Default z-index map:
 *
 * Modal dialog
 * 	div.able-modal-dialog = 10000
 * 	div.able-modal-overlay = 9500
 *
 * Items that should always be on top (9000):
 * 	#able-vts = 9400
 * 	.able-alert = 9400
 * 	.able-window-toolbar .able-button-handler-preferences = 9300
 * 	.able-popup = 9200
 * 	.able-volume-head = 9175
 * 	.able-volume-slider = 9150
 * 	.able-tooltip = 9500
 *
 * Pop-ups with critical content: (7000 - 8000):
 * 	.able-sign-window = 8000
 * 	.able-transcript-area = 7000
 *
 * Player controls: (5000 - 6000)
 * 	.able-controller div[role="button"] = 6600
 * 	.able-big-play-button = 6500
 *	.able-seekbar = 6500
 * 	div.able-captions-wrapper = 6000
 * 	.able-seekbar-head = 5500
 * 	.able-seekbar-played = 5200
 * 	.able-seekbar-loaded = 5100
 * 	.able = 5000
**/

: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-modal-overlay,
.able-playlist,
.able-search-results,
.able-chapters-div,
.able-modal-dialog,
.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-playlist,
.able-search-results,
.able-chapters-div,
.able-modal-dialog,
.able-transcript-area,
.able-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.able-playlist, .able-playlist *,
.able-chapters-div, .able-chapters-div *,
.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%; /* will be changed dynamically as player is constructed */
	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;
}

/* Screen reader hidden text classes */
.able-transcript .able-hidden,
.able-screenreader-alert, .able-offscreen {
	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); /* background color of controller bar */
	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%;
	width: 100%;
	display: block; /* Prevents excess height after element */
}

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

/* Controller Buttons & Controls */
.able-wrapper .able button.able-big-play-button {
	position: absolute;
	color: var(--able-control-color);
	background-color: var(--able-big-play-background);
	background: var(--able-big-play-background);
	border: none;
	outline: none;
	left: 0;
	top: 0;
	padding: 0;
	z-index: 6500;
	opacity: 0.75;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.able-audio-wrapper {
	display: flex;
	gap: 4px;
	align-items: center;
	padding: 4px;
	background: var(--able-control-background);
}

.able-audio-wrapper img {
	max-width: 120px;
}

.able-audio-wrapper .able-audio {
	flex: 1;
}

.able-wrapper .able button.able-big-play-button:hover,
.able-wrapper .able button.able-big-play-button:focus {
	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:hover svg,
.able-big-play-button:focus 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: none;
	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"] {
	/* The icon appears too large if this button doesn't have padding. */
	padding: 4px;
}

.able-controller .buttonOff {
	opacity: 0.5;
}

/* Seekbar */
.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: 0.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;
}

/* Volume Slider */
.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: 0px;
	display: block;
	z-index: 9100;
}

.able-volume-help { /* not visible; used in aria-describedby */
	display: none;
}

.able-volume-slider input[type="range"] {
	appearance: slider-vertical;
	writing-mode: bt-rl;
	width: 28px;
	height: 100%;
	background: transparent; /* Otherwise white in Chrome */
}

/* Style slider in Firefox */
.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%;
}

/* Status Bar */
.able-status-bar {
	color: var(--able-statusbar-color);
	font-size: 0.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;
}

/* Captions and Descriptions */
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;
}

div.able-captions {
	display: none;
	padding: 4px 6px;
	line-height: 1.4;
	/* settings that are overridden by user prefs */
	background-color: var(--able-default-caption-background);
	font-size: 1rem;
	color: var(--able-default-caption-color);
	opacity: 0.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;
	display: flex;
	justify-content: center;
	align-items: center;
}

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

div.able-descriptions {
	position: relative;
	color: var(--able-default-description-color); /* yellow, to differentiate it from captions */
	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;
}

/* Now Playing */
div.able-now-playing {
	text-align: center;
	font-weight: bold;
	font-size: 1rem;
	padding: 0.5rem 0.5rem 1rem;
	color: var(--able-now-playing-color);
	background: var(--able-now-playing-background);
}

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

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

/* Modal Dialogs */
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: 0px none;
	color: var(--able-modal-color);
	background-color: var(--able-modal-background);
	border: var(--able-modal-border);
	width: fit-content;
	max-width: 95%;
	padding: 1rem;
	box-sizing: border-box;
}

@media screen and ( width < 800px ) {
	div.able-modal-dialog {
		min-width: 95%;
	}
}

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-modkey-item.hidden {
	display: none;
}

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

.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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Keyboard Preferences Dialog */
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: bold;
	color: #000;
	font-size: 1.1rem;
}

/* Resize Window Dialog */
.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);
}

/* Drag & Drop */
.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 button {
	order: 1;
}

.able-window-toolbar .autoscroll-transcript {
	order: 3;
	width: fit-content;
	text-wrap: nowrap;
}

.able-window-toolbar .transcript-language-select-wrapper {
	order: 4;
}

.able-window-toolbar .able-drag-handle {
	order: 2;
	width: 100%;
	height: 100%;
}

.able-window-toolbar .able-drag-handle svg {
	height: 12px;
	width: auto;
	margin: 0 auto;
}

.able-window-toolbar .able-drag-handle path {
	fill: var(--able-medium-light-gray);
}

.able-draggable:hover .able-drag-handle path {
	fill: var(--able-very-light-gray);
}

.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 .able-drag-handle:hover {
	cursor: move;
}

.able-window-toolbar .able-button-handler-preferences {
	background-color: transparent;
	border: none;
	outline: none;
	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: 24px;
	height: 24px;
	bottom: 0;
	right: 0;
	padding: 1px;
	cursor: nwse-resize;
}

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

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

.fade-out {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 2s, opacity 2s linear;
}

.fade-in {
	visibility: visible;
	opacity: 1;
	transition: opacity 1s linear;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.able-sign-window video {
	width: 100%;
	display: block;
}

.able-sign-window .able-resizable {
	background: #00000033;
	background: linear-gradient(to bottom right, transparent 0%, transparent 51%, #fff3 51%, #fff3 100%);
	border-top-left-radius: 20px;
}

.able-sign-window:hover .able-resizable {
	background: var(--able-very-light-gray);
	background: linear-gradient(to bottom right, transparent 0%, transparent 51%, #fffe 51%, #fffe 100%);

}

.able-sign-window.able-fixed video {
	margin: 0;
	display: block;
}

.able-sign-window:focus {
	outline: none;
}

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

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

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;
	box-sizing: border-box;
}

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: none !important;
}

/* Tooltips & Alerts */
.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;
}

/* Popup Menus */
ul.able-popup,
.able 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: 0.95;
	border-radius: 4px;
	display: grid;
	cursor: default;
	width: auto;
}

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

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

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

ul.able-popup li.able-focus,
.able 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" / ''; /* check mark; for heavier mark use 2714 */
	margin-right: 4px;
}

/* Transcript */
.able-transcript-area {
	border-width: 1px;
	border-style: solid;
	z-index: 7000;
	padding-bottom: 25px; /* keep content above drag icon */
	background-color: var(--able-transcript-background);
}

.able-transcript {
	position: relative; /* must be positioned for scrolling */
	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: bold;
	margin: .5rem 0;
	padding: 0;
}

.able-transcript-chapter-heading {
	font-size: 1.125rem;
	font-weight: bold;
	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: bold;
}

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

.able-transcript span:hover,
.able-transcript span:focus,
.able-transcript span:active {
	background: var(--able-cue-interacting-background); /* light yellow */
	color: var(--able-cue-interacting-color);
	border: none;
	outline: none;
	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-window-toolbar .autoscroll-transcript label {
	margin-right: 0;
}

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

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

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

/* Playlist (both audio and video) */
.able-search-results ul,
.able-playlist {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: grid;
}

.able-search-results li,
.able-playlist li {
	background-color: var(--able-playlist-item-background); /* default background color of each item in playlist */
	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-search-results li:first-of-type,
.able-playlist li:first-of-type:not(.able-player .able-playlist li) {
	border-radius: 5px 5px 0 0;
}

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

.able-search-results li button,
.able-playlist 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 { /* currently selected playlist item */
	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:hover,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:active	 {
	color: var(--able-playlist-current-active-color);
	background: var(--able-playlist-current-active-background);
}

/* Search Styling */
#able-search-term-echo {
	font-style: italic;
}

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

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

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


/* Video Transcript Sorter (VTS) */
#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: bold;
}

#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 th,
#able-vts table td {
	border: 1px solid #323232;
	padding: 8px;
	color: #323232;
}

#able-vts table td[contenteditable="true"] {
	white-space: pre-wrap;
}

#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: 16px;
	left: 16px;
	border: 2px solid #666;
	background-color: var(--able-alert-background);
	color: var(--able-black);
	padding: 1rem;
	z-index: 9400;
}

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

button#able-vts-save:hover,
button#able-vts-save:focus {
	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;
	}
}