/*
	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 = 9000

  * Pop-ups with critical content:  (7000 - 8000):
	.able-sign-window = 8000
	.able-transcript-area = 7000

  * Player controls: (5000 - 6000)
  .able-controller .able-seekbar = 6900
  .able-controller .buttonOff = 6800
  .able-controller div[role="button"] > img = 6700
  .able-controller div[role="button"] > span = 6700
	.able-controller div[role="button"] = 6600
	.able-big-play-button = 6500
	div.able-captions-wrapper = 6000
  .able-seekbar-head = 5500
  .able-seekbar-played = 5200
	.able-seekbar-loaded = 5100
	.able = 5000
*/
.able-wrapper {
  position: relative;
  margin: 1em 0;
  padding: 0;
  max-width: 100%;
  height: auto;
  box-sizing: content-box !important;
  text-align: left;
}
.able {
  position: relative;
  margin: 0;
	padding: 0; 
  width: 100%; /* will be changed dynamically as player is contructed */
  background-color: #000;
  box-shadow: 0px 0px 16px #262626;
  z-index: 5000;
}
.able-column-left {
    float: left;
}
.able-column-right {
    float: left;
}
.able .able-vidcap-container {
  background-color: black;
  /* height: 360px; */
  left: 0;
  margin: 0;
  position: relative;
  top: 0;
}
.able .able-audcap-container { 
  background-color: black;
  position: relative;
  margin: 0;
	padding: 1.5em 0.25em;
}
.able-player {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #262626; /* background color of player (appears on top & bottom) */
}
.able-audio { 
	padding-top: 1em;
}
.able-offscreen {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.able-media-container audio {
  display: none !important;
}
.able-controller {
	position: relative;
	border-bottom: 1px solid #4c4c4c;
	background-color: #464646; /* background color of controller bar */
	min-height: 38px; /* height of button (20px) + 4px border + 4px padding */
	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%; 
}

/*
  YouTube and Vimeo 
*/
.able-media-container iframe { 
	max-width: 100%;
}

/*
  Controller Buttons & Controls
*/
.able-big-play-button {
    position: absolute;
    font-size: 8em;
    color: #fdfdfd;
    background-color: transparent;
    border: none;
    outline: none;
    left: 0;
    top: 0;
    padding: 0;
    z-index: 6500;
    /* 
      Opacity value chosen to achieve a 
      contrast ratio of 5.63 in the worst case.
    */
    opacity: 0.75;
    filter:alpha(opacity=75); /* for IE */
}

.able-big-play-button:hover, .able-big-play-button:focus {
  opacity: 100;
  filter:alpha(opacity=100); /* for IE */
}

.able-big-play-button .icon-play, 
.able-big-play-button svg {
  background-color: black;
  padding: 1rem 2rem;
}
.able-big-play-button:hover .icon-play, 
.able-big-play-button:hover svg {
  outline-style: solid;
  outline-width: medium;
  outline-color: #8AB839 !important; /* green */
}
.able-big-play-button:focus .icon-play,
.able-big-play-button:focus svg {
  outline-style: solid;
  outline-width: medium;
	outline-color: #ffbb37 !important; /* yellow */
}
.able-left-controls, .able-right-controls {
    overflow: visible;
}
.able-left-controls div[role="button"], .able-right-controls div[role="button"] {
    vertical-align: middle;
}
.able-left-controls {
  float: left;
}
.able-right-controls {
  float: right;
}
.able-black-controls,
.able-black-controls div[role="button"],
.able-black-controls label  {
  color: #000 !important;
}
.able-black-controls .able-seekbar {
  border: 1px solid #000;
}
.able-white-controls,
.able-white-controls div[role="button"],
.able-black-controls label {
  color: #FFF !important;
}
.able-white-controls .able-seekbar {
  border: 1px solid #FFF;
}
.able-controller div[role="button"] {
  background: none;
  position: relative;
  display: inline-block;
  border-style: none;
  margin: 3px;
  padding: 0;
  font-size: 20px;
  min-width: 24px;
/*  outline: 2px solid #464646; */ /* same color as .able-controller background-color */
  border: none;
  overflow: visible !important;
  z-index: 6600;
}
.able-controller div[role="button"] > span,
.able-controller div[role="button"] > img {
  width: 20px;
  margin: 0 auto;
  padding: 0;
  z-index: 6700;
}
.able-controller .buttonOff {
	opacity: 0.5;
	filter:alpha(opacity=50); /* for IE */
  z-index: 6800;
}
.able-controller .able-seekbar {
  margin: 0 5px;
  z-index: 6900;
}
.able-controller div[role="button"]:hover,
.able-controller div[role="button"]:focus {
  outline-style: solid;
  outline-width: medium;
}
.able-controller div[role="button"]:hover {
	outline-color: #8AB839 !important; /* green */
}
.able-controller div[role="button"]:focus {
	outline-color: #ffbb37 !important; /* yellow */
}
.able-controller button::-moz-focus-inner,
.able-search-results button::-moz-focus-inner {
  border: 0;
}


/*
  Seekbar
*/
.able-seekbar-wrapper {
  display: inline-block;
  vertical-align: middle;
}
.able-seekbar {
  position: relative;
  height: 0.5em;
  border: 1px solid;
  background-color: #000000;
  margin: 0 3px;
  border-style: solid;
  border-width: 2px;
  border-color: #ffffff;
}
.able-seekbar-loaded {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5em;
  background-color: #464646;
  z-index: 5100;
}
.able-seekbar-played {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5em;
  background-color: #DADADA;
  z-index: 5200;
}
.able-seekbar-head {
  display: inline-block;
  position: relative;
  left: 0;
  top: -0.4em;
  background-color: #FDFDFD;
  width: 0.8em;
  height: 0.8em;
  border: 1px solid;
  border-radius: 0.8em;
  z-index: 5500;
}

/*
  Volume Slider
*/
.able-volume-slider {
  width: 34px;
  height: 80px; 
  background-color: #464646; /* same as .able-controller */
  margin: 0;
  padding: 5px 0;
  position: absolute;
  right: 0px;
  bottom: 60px; 
  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;
  /* -webkit-appearance: none; */ /* Hides the slider so that custom slider can be made */
  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 white;
  width: 7px;
  cursor: pointer;
  background: #000; 
}
input[type=range]::-moz-range-thumb {
  background-color: #fdfdfd;
  outline: 1px solid #333;
  height: 16px;
  width: 24px;
  z-index: 9175;
}

/* 
  TODO: Style the slider in webkit to match the one in Mozilla 
  First attempt at this was unsuccessful; it's quite fussy 
  Placeholder selectors are provided below 
  Also, will need to uncomment -webkit-appearance: none in slider rule above 
*/ 
.able-volume-slider input[type=range]::-webkit-slider-runnable-track {}
.able-volume-slider input[type=range]::-webkit-slider-thumb {}

/* 
  TODO: Style the slider for IE (not a high priority) 
*/   
input[type=range]::-ms-track {}
input[type=range]::-ms-fill-lower {}
input[type=range]::-ms-fill-upper {}
input[type=range]::-ms-thumb {}
input[type=range]:focus::-ms-fill-lower {}
input[type=range]:focus::-ms-fill-upper {}

/*
  Status Bar
*/

.able-status-bar {
	height: 1.5em;
	min-height: 1.5em;
	color: #CCC;
	font-size: 0.9em;
	background-color: transparent;
	padding: 0.5em 0.5em 0.25em;
}
.able-status-bar span.able-timer {
	/* contains both span.elapsedTime and span.duration */
	text-align: left;
	float: left;
	width: 32%;
}
.able-status-bar span.able-speed {
  float: left;
  width: 33%;
  text-align: center;
}
.able-status {
	font-style: italic;
	float: right;
	width: 32%;
	text-align :right;
}

/*
  Captions and Descriptions
*/

div.able-captions-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  display: block;
  z-index: 6000;
}
div.able-captions {
  display: none;
  padding: 0.15em 0.25em;
	line-height: 1.35em;
  /* settings that are overridden by user prefs */
  background-color: black;
  font-size: 1em;
  color: white;
  opacity: 0.75;
}
div.able-vidcap-container div.able-captions-overlay {
  position: absolute;
  margin: 0;
  bottom: 0.5em;
}
div.able-vidcap-container div.able-captions-below {
  position: relative;
  min-height: 3.2em;
}
div.able-audcap-container.captions-off { 
	display: none;
}
div.able-descriptions {
  position: relative;
  color: #FF6; /* yellow, to differentiate it from captions */
  background-color: #262626;
  min-height: 2.8em;
  border-top: 1px solid #666;
  margin: 0;
  padding: 3%;
  width: 94%;
  text-align: center;
}

/*
  Now Playing
*/
div.able-now-playing {
	text-align: center;
	font-weight: bold;
	font-size: 1.1em;
	color: #FFFFFF;
	background-color: transparent;
	padding: 0.5em 0.5em 1em;
}
div.able-now-playing span {
	font-size: 0.9em;
}
div.able-now-playing span span {
	display: block;
}
div.able-video div.able-now-playing { 
	display: none;
}

/*
  Modal Dialogs
*/
div.able-modal-dialog {
  position: absolute;
  height: auto;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  top: 5%;
  left: 0px;
  right: 0px;
  outline: 0px none;
  display: none;
  color: #000;
  background-color: #FAFAFA;
  box-sizing: content-box !important;
  z-index: 10000;
	max-height: 90%; 
	overflow: scroll; 
}
@supports (transform: translate(-50%,-50%)) {
	div.able-modal-dialog {
	  top: 50%;
		left: 50%;
	  transform: translate(-50%,-50%) !important;
	}
}

div.able-modal-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  display: none;
  z-index: 9500;
}
button.modalCloseButton {
  position: absolute;
  top: 5px;
  right: 5px;
}
button.modal-button {
  margin-right: 5px;
}
div.able-modal-dialog input:hover,
div.able-modal-dialog input:focus,
div.able-modal-dialog button:hover,
div.able-modal-dialog button:focus {
  outline-style: solid;
  outline-width: 2px;
}
div.able-modal-dialog input:hover,
div.able-modal-dialog button:hover {
	outline-color: #8AB839; /* green */
}
div.able-modal-dialog input:focus,
div.able-modal-dialog button:focus {
	outline-color: #ffbb37; /* yellow */
}
div.able-modal-dialog h1 {
  font-weight: bold;
  font-size: 1.8em;
  line-height: 1.2em;
  margin: 0.75em 0;
  color: #000;
  text-align: center;
}
.able-prefs-form,
.able-help-div,
.able-resize-form {
	background-color: #F5F5F5;
	border: medium solid #ccc;
	padding: 0.5em 1em;
	margin: 0 0 0 1em;
	width: 25em;
	display: none;
}

/*
  Preferences Form
*/

.able-prefs-form div[role="group"] {
  margin: 1em 0;
  padding: 0;
	border: none;
}
.able-prefs-form h2 {
	color: black;
	font-weight: bold;
	font-size: 1.1em;
}
.able-prefs-form div[role="group"] > div {
  display: table;
  margin-left: 1em;
}
.able-prefs-form div[role="group"] > div > input {
  display: table-cell;
	width: 1em;
	vertical-align: middle;
}
.able-prefs-form div[role="group"] > div > label {
  display: table-cell;
	padding-left: 0.5em;
}
.able-desc-pref-prompt {
  font-weight: bold;
  font-style: italic;
  margin-left: 1em !important;
}
.able-prefDescFormat > div {
  margin-left: 1.5em;
}
.able-prefs-captions label,
.able-prefs-captions select {
  display: block;
  float: left;
  margin-bottom: 0.25em;
}
.able-prefs-captions label {
  width: 6em;
  text-align: right;
  padding-right: 1em;
}
.able-prefs-captions select {
  width: 10em;
  font-size: 0.9em;
  border-radius: none;
}
.able-prefs-descriptions >  div.able-prefs-select { 
	margin: 0.5em 1em;
}
.able-prefs-descriptions >  div.able-prefs-select > label,
.able-prefs-descriptions >  div.able-prefs-slider > label {
  width: 6em;
  text-align: right;
  padding-right: 1em;
}
.able-prefs-descriptions > div.able-prefs-select > select,
.able-prefs-descriptions > div.able-prefs-slider > select {
  width: 10em;
  font-size: 0.9em;
  border-radius: none;
}
div.able-prefDescPause {
  margin-top: 1em;
}
.able-prefs-form div.able-captions-sample {
  padding: 0.5em;
  text-align: center;
}
.able-prefs-form div.able-desc-sample {
  padding: 0.5em;
  text-align: center;
  color: #FFF;
  background-color: #000;
}
.able-prefs-form h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 1.1em;
}
.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.1em;
}

/*
  Resize Window Dialog
*/

.able-resize-form h1 {
  font-size: 1.15em;
}
.able-resize-form div div {
  margin: 1em;
}
.able-resize-form label {
  padding-right: 0.5em;
  font-weight: bold;
}
.able-resize-form input[type="text"] {
  font-size: 1em;
}
.able-resize-form input[readonly] {
  color: #AAA;
}

/*
  Drag & Drop
*/

.able-window-toolbar {
  background-color: #464646;
  min-height: 15px;
  padding: 10px;
  border-style: solid;
  border-width: 0 0 1px 0;
}
.able-draggable:hover {
  cursor: move;
}
.able-window-toolbar .able-button-handler-preferences {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.5em;
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0;
  z-index: 9300;
}
.able-window-toolbar .able-button-handler-preferences:hover,
.able-window-toolbar .able-button-handler-preferences:focus {
  outline-style: solid;
  outline-width: medium;
}
.able-window-toolbar .able-button-handler-preferences:hover {
	outline-color: #8AB839 !important; /* green */
}
.able-window-toolbar .able-button-handler-preferences:focus {
	outline-color: #ffbb37 !important; /* yellow */
}
.able-window-toolbar .able-popup {
  position: absolute;
  cursor: default;
  right: 0;
  top: 0;
  display: block;
}
.able-drag {
  border: 2px dashed #F90;
  cursor: move;
}
.able-resizable {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 5px 2px;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}
.able-resizable svg line {
  stroke: #595959; 
  stroke-width: 2px;
}

/*
  Sign Language Window
*/

.able-sign-window {
  position: relative;
  margin: 1em;
  /* max-width: 100%; */
  z-index: 8000;
}
.able-sign-window video {
  width: 100%;
}
.able-sign-window:focus {
  outline: none;
}


/*
  External chapters div
*/
div.able-chapters-div {
  padding: 0;
}
div.able-chapters-div .able-chapters-heading {
  margin: 1em 0.75em;
  font-size: 1.1em;
  font-weight: bold;
}
div.able-chapters-div ul {
  list-style-type: none;
  padding-left: 0;
}
div.able-chapters-div ul li {
  max-width: 100%;
  padding: 0;
  height: 2em;
}
div.able-chapters-div button {
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  color: #000;
  font-size: 1em;
  text-align: left;
  padding: 0.15em 1em;
}
div.able-chapters-div li.able-current-chapter {
  background-color: #000 !important;
}
div.able-chapters-div li.able-current-chapter button {
  color: #FFF !important;
}
div.able-chapters-div li.able-focus {
  background-color: #4C4C4C;
}
div.able-chapters-div button:focus,
div.able-chapters-div button:hover,
div.able-chapters-div button::-moz-focus-inner {
  border: 0;
  outline: none;
  color: #FFF !important;
}

/*
  Fullscreen settings
  In v2.2.4b commented out :-webkit-full-screen style
  This was causing the toolbar in fullscreen mode to be positioned slightly offscreen in webkit browsers
  Safari had an additional problem in window height was being calculated 
  Commenting out this style appears have no adverse effect in any browser
  All other fullscreen styles were already commented out, and left here solely for reference
*/
div.able-wrapper.fullscreen { 
	margin: 0 !important; 
	position: fixed !important; 
	top: 0 !important;
	background: none !important;
}
/*
:-webkit-full-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    background: none;
}
:-moz-full-screen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 20;
  background: none;
}

:-ms-fullscreen {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  background: none;
}

:fullscreen {
  position: fixed;
  width: 100%;
  height: 80%;
  top: 0;
  background: none;
}
*/

/*
  Tooltips & Alerts
*/

.able-tooltip, .able-alert {
  position: absolute;
  padding: 5px 10px;
  border-color: black;
  border-width: 1px;
  color: #000 !important;
  background-color: #CCCCCC;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
}
.able-alert {
  background-color: #FFFFCC;
  box-shadow: 0px 0px 16px #262626;
  z-index: 9400;
  position: absolute;
  top: 1em;
}
.able-popup {
  z-index: 9200;
}
.able-tooltip {
  z-index: 9000;
}

/*
  Popup Menus
*/
.able-popup {
  position: absolute;
  margin: 0;
  padding: 0;
  border-color: black;
  border-width: 1px;
  background-color: #000;
  opacity: 0.85;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  cursor: default;
}
ul.able-popup {
  list-style-type: none;
}
.able-popup li {
  padding: 0.25em 1em 0.25em 0.25em;
  margin: 1px;
	width: auto;
  color: #FFF;
}
.able-popup li.able-focus {
  background-color: #CCC;
  color: #000;
}
.able-popup-captions li {
  padding-left: 1em;
}
.able-popup-captions li[aria-checked="true"] {
  padding-left: 0;
}
.able-popup-captions li[aria-checked="true"]::before {
  content: "\2713  "; /* check mark; for heavier mark us 2714 */
}

/*
  Transcript
*/

.able-transcript-area {
  border-width: 1px;
  border-style: solid;
  height: 400px;
  z-index: 7000;
  outline: none;
  padding-bottom: 25px; /* keep content above 16x16px drag icon */
  background-color: #FFF;
}
.able-transcript {
	position: relative; /* must be positioned for scrolling */
  overflow-y: scroll;
  padding-left: 5%;
  padding-right: 5%;
  /* width: 90%; */
  background-color: #FFF;
  height: 350px;
}
.able-transcript div {
	margin: 1em 0;
}
.able-transcript-heading {
  font-size: 1.4em;
  font-weight: bold;
	margin: 1em 0;
	padding: 0;
}
.able-transcript-chapter-heading {
  font-size: 1.2em;
  font-weight: bold;
	margin: 0;
	padding: 0;
}
.able-transcript div.able-transcript-desc {
	background-color: #FEE;
	border: thin solid #336;
	font-style: italic;
	padding: 1em;
}
.able-transcript .able-unspoken {
	font-weight: bold;
}
.able-transcript .able-hidden {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
.able-highlight, 
.able-highlight span:hover,
.able-highlight span:focus,
.able-highlight span:active {
  background-color: #000 !important; 
	color: #FFF !important; 
  padding: 0.25em 0.10em;
  border: none;
  outline: none;
}
.able-previous {
	background: black !important;
	font-style: italic;
}
.able-transcript span:hover,
.able-transcript span:focus,
.able-transcript span:active {
	background: #FFC; /* light yellow */
  color: #000; 
  border: none; 
  outline: none;
  border-bottom: 1px solid #000 ; 
	cursor: pointer;
}
.able-window-toolbar label {
  display: inline;
  margin-right: 10px;
  color: #FFF;
}
.able-window-toolbar input:focus,
.able-window-toolbar input:hover,
.able-window-toolbar select:focus,
.able-window-toolbar select:hover,
.able-controller input:focus,
.able-controller input:hover,
.able-controller div[role="button"]:focus,
.able-controller div[role="button"]:hover,
.able-seekbar-head:focus,
.able-seekbar-head:hover {
  outline-style: solid;
  outline-width: 2px;
}
.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: #ffbb37; /* yellow */
}
.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: #8AB839; /* green */
}
.able-window-toolbar .transcript-language-select-wrapper {
  float: right;
  padding-right: 30px;
}

/*
  Playlist (both audio and video)
*/

.able-playlist {
	list-style-type: none;
	margin: 0;
	background-color: #FFFFFF;
	padding: 5px 0;
}
.able-playlist li {
	background-color: #DDDDDD; /* default background color of each item in playlist */
	margin: 5px;
	padding: 0;
  border: 2px solid #AAA;
	border-radius: 5px;
	width: auto;
	max-width: 100%;
}
.able-playlist li button {
	border: none;
	color: #000000;
	background-color: transparent;
	font-size: 1em;
	width: 100%;
	padding: 5px 10px;
	text-align: left;
}
.able-playlist li button:hover,
.able-playlist li button:focus,
.able-playlist li button:active { /* playlist items when they have mouse or keyboard focus */
	background-color: #FFEEB3;
	color: #000000;
	text-decoration: none;
	outline: none;
}
.able-playlist li button::-moz-focus-inner {
  border: 0;
}
.able-playlist li button img {
 width: 100px;
 float: left;
 margin-right: 10px;
}
.able-playlist li.able-current { /* currently selected playlist item */
	background-color: #340449;
	border-color: #230330;
}
.able-playlist li.able-current button {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: none;
	outline: none;
}
.able-playlist li.able-current button:hover,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:active   {
	color: #000000;
}

/*
  Search
*/

#able-search-term-echo {
  font-weight: bold;
  font-style: italic;
}
.able-search-results ul li {
  font-size: 1.1em;
  margin-bottom: 1em;
}
button.able-search-results-time {
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
}
button.able-search-results-time:hover,
button.able-search-results-time:focus,
button.able-search-results-time:active {
  color: #FFF;
  background-color: #000;
}
.able-search-results-text {
  padding-left: 1em;
}
.able-search-term {
	background-color: #FFC;
	font-weight: bold;
}
  #search-term {
    font-weight: bold;
    font-style: italic;
  }


/*
  Video Transcript Sorter (VTS)
*/
#able-vts-instructions {
	margin-bottom: 1.5em;
	padding: 1em;
	border: 1px solid #999;
	width: 720px;
	max-width: 90%;
}
#able-vts fieldset {
  margin: 1em;
  border: none;
}
#able-vts fieldset legend {
  color: #000;
  font-weight: bold;
}
#able-vts fieldset div {
  float: left;
  padding-right: 1em;
}
#able-vts table {
  clear: left;
}

#able-vts table,
#able-vts table th,
#able-vts table td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0.5em 0.75em;
}
#able-vts table th.actions {
  min-width: 140px;
}
#able-vts table td button {
  width: auto;
  padding: 0;
  margin: 2px;
}
#able-vts table td button svg {
  width: 16px;
  height: 16px;
}
#able-vts table button:hover,
#able-vts table button:focus  {
  /*    border: 3px solid #66c2ff; */
}
#able-vts table button:hover svg {
  fill: #C00;
}
tr.kind-chapters,
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 {
  margin: 1em;
}
div#able-vts-alert {
  display: none;
  position: fixed;
  top: 5px;
  left: 5px;
  border: 2px solid #666;
  background-color: #FFC;
  padding: 1em;
  font-weight: bold;
  z-index: 9400;
}
button#able-vts-save {
	font-size: 1em;
	padding: 0.25em;
	border-radius: 5px;
	margin-bottom: 1em;
	font-weight: bold;
}
button#able-vts-save:hover,
button#able-vts-save:focus {
  color: white;
  background-color: #060;
}
.able-vts-output-instructions {
	width: 720px;
	max-width: 90%;
}
#able-vts textarea {
	height: 200px;
	width: 720px;
	max-width: 90%;
}

/*
  Misc
*/

.able-clipped, .able-screenreader-alert {
	/* hide from sighted users, but not screen reader users */
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
	/* additional rules are needed to ensure clipped buttons are truly invisible in Safari on Mac OS X */
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.able-error {
	display: block;
	background: #ffc;
	border: 2px solid #000;
	color: #FF0000;
	margin: 0.75em;
	padding: 0.5em;
}
.able-fallback {
  display: block;
  text-align: center;
  border: 2px solid #333355;
  background-color: #EEE;
  color: #000;
  font-weight: bold;
  font-size: 1.1em;
  padding: 1em;
  margin-bottom: 1em;
  max-width: 500px;
  width: 95%;
}
.able-fallback div,
.able-fallback ul,
.able-fallback p {
  text-align: left;
}
.able-fallback li  {
  font-weight: normal;
}
.able-fallback img {
  width: 90%;
  margin: 1em auto;
  opacity: 0.3;
}
.able-fallback img.able-poster {
  position: relative;
}

/*
  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: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
  Styles for 2020 Skin
*/
div.able-skin-2020 div.able-seekbar-wrapper {
  width: 99%;
  margin: 10px 3px;
}

/*
  icomoon.io font styling
*/
@font-face {
  font-family: 'able';
    src:    url('../button-icons/fonts/able.eot?dqripi');
    src:    url('../button-icons/fonts/able.eot?dqripi#iefix') format('embedded-opentype'),
        url('../button-icons/fonts/able.ttf?dqripi') format('truetype'),
        url('../button-icons/fonts/able.woff?dqripi') format('woff'),
        url('../button-icons/fonts/able.svg?dqripi#able') format('svg');
  font-weight: normal;
  font-style: normal;
}

.able-wrapper [class^="icon-"], .able-wrapper [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'able' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
    content: "\f04b";
}
.icon-pause:before {
    content: "\f04c";
}
.icon-stop:before {
    content: "\f04d";
}
.icon-restart:before {
    content: "\e900";
}
.icon-rewind:before {
    content: "\e603";
}
.icon-forward:before {
    content: "\e604";
}
.icon-previous:before {
    content: "\e901";
}
.icon-next:before {
    content: "\e902";
}
.icon-slower:before {
    content: "\f0dd";
}
.icon-faster:before {
    content: "\f0de";
}
.icon-turtle:before {
    content: "\e904";
}
.icon-rabbit:before {
    content: "\e905";
}
.icon-ellipsis:before {
    content: "\e903";
}
.icon-pipe:before {
    content: "\e600";
}
.icon-captions:before {
    content: "\e601";
}
.icon-descriptions:before {
    content: "\e602";
}
.icon-sign:before {
    content: "\e60a";
}
.icon-volume-mute:before {
    content: "\e606";
}
.icon-volume-soft:before {
    content: "\e60c";
}
.icon-volume-medium:before {
    content: "\e605";
}
.icon-volume-loud:before {
    content: "\e60b";
}
.icon-volume-up:before {
    content: "\e607";
}
.icon-volume-down:before {
    content: "\e608";
}
.icon-chapters:before {
    content: "\e609";
}
.icon-transcript:before {
    content: "\f15c";
}
.icon-preferences:before {
    content: "\e60d";
}
.icon-close:before {
    content: "\f00d";
}
.icon-fullscreen-expand:before {
    content: "\f065";
}
.icon-fullscreen-collapse:before {
    content: "\f066";
}
.icon-help:before {
    content: "\f128";
}