/* 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%;
  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;
}

.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;
  min-height: 38px;
  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: 0.75;
  filter: alpha(opacity=75);
}

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

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

.able-big-play-button:focus .icon-play, .able-big-play-button:focus svg {
  outline-style: solid;
  outline-width: medium;
  outline-color: #ffbb37 !important;
}

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

.able-controller div[role="button"]:focus {
  outline-color: #ffbb37 !important;
}

.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;
  margin: 0;
  padding: 5px 0;
  position: absolute;
  right: 0px;
  bottom: 60px;
  display: block;
  z-index: 9100;
}

.able-volume-help {
  display: none;
}

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

/* 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 {
  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;
  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;
  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;
}

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

div.able-modal-dialog input:focus, div.able-modal-dialog button:focus {
  outline-color: #ffbb37;
}

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

.able-window-toolbar .able-button-handler-preferences:focus {
  outline-color: #ffbb37 !important;
}

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

/* Transcript */

.able-transcript-area {
  border-width: 1px;
  border-style: solid;
  height: 400px;
  z-index: 7000;
  outline: none;
  padding-bottom: 25px;
  background-color: #FFF;
}

.able-transcript {
  position: relative;
  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);
  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;
  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;
}

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

.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;
  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 {
  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 {
  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 {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  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 */

.able-wrapper [class^="icon-"], .able-wrapper [class*=" icon-"] {
  font-family: 'able' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -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";
}