body{
	font-family: Arial, Helvetica, sans-serif;
}

 

.able-transcript-area {
  border-width: 1px;
  border-style: solid;
  height: 400px;
  z-index: 9999999;
  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-container{
  line-height: 1.5em;
}
.able-transcript-heading {
  font-size: 1.4em;
  font-weight: bold;
}
.able-transcript-chapter-heading {
  font-size: 1.2em;
  font-weight: bold;
}
.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 {
	background: #FF6; /* light yellow */
}
.able-previous {
	background: black !important;
	font-style: italic;
}
.able-transcript span:hover,
.able-transcript span:focus,
.able-transcript span:active {
	background: #CF6; /* light green */
	cursor: pointer;
}

.able-window-toolbar-bg{
  position: absolute;
  top: 0;
  left:0;
  width:100%;
  height: 100%;
}


.able-window-toolbar label {
  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 */
}

.transcript-autoscroll-wrapper{
  display: flex;
    align-items: center;
  float: left;
    margin-right: 25px;
}


.transcript-language-select-wrapper {
  display: flex;
    align-items: center;
  float: left;
}


/*
  Drag & Drop
*/

.able-window-toolbar {
  position: relative;
  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: 16px;
  height: 16px;
  padding: 5px 2px;
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
  background: transparent url('../data/icons/resize.png') no-repeat;
}

.able-close-dialog {
    position: absolute;
    top: 0;
    right: 5px;
    width: 16px;
    height: 100%;
    background: transparent url('../data/icons/close.png') no-repeat center center;
    cursor: pointer;
}
.able-close-dialog:hover {
  outline-style: solid;
    outline-width: medium;
    outline-color: #2196F3!important;
}