/* Template Styles */
:root{
	--WSSBGold: #FEDB16;
	--WSSBGoldPale: #FEEB80;
}

#playlist .external_link_icon svg {
    display: none;
}


#tinymce {
	div.playlist-wrapper video{
		display: none;
	}
	ul.able-playlist a {
		color: var(--WSSBGoldPale);
		line-height: 2em;
		padding: 1em;
	}
	div#playlist {
		border: 3px dotted black;
	}
	ul.able-playlist {
		height: fit-content;
	}
}

@page upright {
  size: portrait;
  page-orientation: upright;
}

@page left {
  size: landscape;
  page-orientation: rotate-left;
  
}

@page right {
	size: landscape;
  page-orientation: rotate-right;
}
.tableDiv{ break-inside: avoid;}
@media print {
	body {
  overflow: hidden; /* Hide scrollbars */
}
#content  #wiki_page_show, #tinymce{
/*	.printLandscape{
		page: left;
		
	}*/
	table{
		break-inside: avoid-page;
		border: 4px black solid;

	th{ 
		background: white;
		color: black !important;
		padding: 1em;
		border: 2px solid var(--ic-brand-primary-darkened-15) !important;
	}
	tr{break-inside: avoid;}
	td{ 
		padding: 1em;
		border: 1px solid black;
	}
	}
	table.matchIconA{
		border-color: black;
		th{background: white;
		border-color:  var(--iconColorA);}
		td{ color: black;}
	}
	table.matchIconB{
		border-color: black;
		th{background: white;
		border-color:  var(--iconColorB);}
		td{ color: black;}
	}
	table.matchIconC{
		border-color: black;
		th{background: white;
		border-color:  var(--iconColorC);}
		td{ color: black;}
	}
	table.matchIconD{
		border-color: black;
		th{background: white; 
		border-color:  var(--iconColorD);}
		td{ color: black;}
	}
}}


	#content  #wiki_page_show, #tinymce{
	table{
		border: 4px var(--ic-brand-primary-darkened-15) solid;
	th{ 
		background: var(--ic-brand-primary-darkened-15);
		color: white;
		padding: 1em;
		border: 2px solid white;
	}
	td{ 
		padding: 1em;
		border: 1px solid var(--ic-brand-primary-darkened-15);
	}
	tr:hover{ 
		border: 3px solid var(--WSSBGold);
		background:	var(--WSSBGoldPale);
	}
	tr:hover th{ 
		border: 3px solid var(--WSSBGold);
	}
	}
	table.matchIconA{
		border-color: var(--iconColorA);
		th{ background: var(--iconColorA);}
		tr:hover{background: var(--iconColorAPale);}
		td{ color: black;}
	}
	table.matchIconB{
				border-color: var(--iconColorB);
		th{ background: var(--iconColorB);		}
		tr:hover{background: var(--iconColorBPale);}
		td{ color: black;}
	}
	table.matchIconC{
				border-color: var(--iconColorC);
		th{ background: var(--iconColorC);}
		tr:hover{background: var(--iconColorCPale);}
		td{ color: black;} 
	}
	table.matchIconD{
				border-color: var(--iconColorD);
		th{ background: var(--iconColorD);	}
		tr:hover{background: var(--iconColorDPale);}
		td{ color: black;}
	}
}


#content  #wiki_page_show h2, #tinymce h2  {
    border-top: 2px solid var(--ic-brand-primary);
    padding-top: 0.5em;
    margin-top: 1em;
}

.pages.show h1.page-title {
    color: var(--ic-brand-primary-darkened-15);
    font-weight: bold;
}

div#content div#course_home_content div#wiki_page_show h2{
	color: white;
	background: var(--ic-brand-primary);
	padding:0.5em 1em;
	margin: revert;
	border: none;
	border-radius: 0px 50px 50px 0px;
    font-weight: bold;
}



/* Book Layout */
.sbContent .sbChapter {
    display: none;
}
.sbContent .sbChapter.sbActive {
    display: block;
}
.sbToolbar{
	padding-top: 1em;
	grid-column: 1 / span 3;
	text-align: right;
}

.sbButton{
	background: none;
	border: none;
}

.sbButton svg{
	width: 4em;
	height: 4em;
}

div.sbTOC{display: block;
color: white;
}

#tinymce div.sbTOC {
    display: none;
}
.sbParent {
    border: 2px solid var(--iconColorA);
    border-radius: 10px;
    padding: 1em;
    background: var(--iconColorA);
    color: white;
}
.sbContent {
    color: black;
    background: white;
    padding: 1em;
}

.sbTOCI {
    width: 100%;
    padding: 0.5em;
}

.sbTOC ul li {
    list-style: none;
    width: 100%;
    margin-bottom: 0.5em;
}

.sbTOC ul {
    margin: 0 1em 0 0;
}

@media(min-width: 800px){
.sbParent {
    display: grid;
    grid-auto-columns: 1fr 1fr 1fr;
}
.sbTOC{
	min-height: 640px;
	overflow-y: auto;
	max-height: 900px;
	grid-column: 1 / span 1;
}
.sbContent{
	overflow-y: scroll;
	grid-column: 2 / span 2;
}
#tinymce .sbContent {
    grid-column: 1 / span 3;
}
}

.sbParent:fullscreen .sbTOC, .sbParent:fullscreen .sbContent {
  height: 80vh;
}
.sbParent:fullscreen .sbToolbar{margin-bottom: 5vh;}
.sbParent:fullscreen .sbMaxButton {
	display: none;
	
}

/* print styles */
@media print {
	
	
	
.sbParent {
    background: white;
    color: black;
}
	
.sbTOC{display: none;}
.sbContent .sbChapter { display: block;}
.able-window-toolbar {
	display: none !important;	
}
.able-vidcap-container{
	display: none;
}
.able-wrapper{
	width: 100% !important;
}
.able-transcript-area{
	position: revert !important;
	width: 100% !important;
	height: fit-content !important;
	display: block !important;
}
.able-transcript{
	height: fit-content !important;
	overflow-y: auto !important;
	positoin: inherit !important;
	with: 100% !important;
}
.able-transcript-block{
	break-inside: avoid;
}
.able-transcript-chapter-heading{
	break-after: avoid;
	
}
}

/* AbleFire Styles */
div#playlist ul {
    height: 400px;
    overflow-y: scroll;
}
.playlist-wrapper #player, .playlist-wrapper #playlist {
    float: left;
}

div#playlist {
    padding: 0em 1em;
}

.mceOnly {
	display: none;
}
#tinymce .mceOnly{
	display: block;	
}

div.afContent {
    padding: 1em;
    display: none;
    overflow: hidden;
    background-color: #FEEB80;
    position: absolute;
    top: 10em;
    z-index: 2;
    border: 2px solid black;
}


div.afContent form input {
    border: 1px solid black;
    background: white;
    margin: 0.5em 0em;
}

div.afContent h2 {
    font-weight: bold;
}
#afYouTubeB{
    padding: 0.5 em;
    background: white;
}

div.afContent form button.afButton {
    padding: 1em;
    background: white;
    border: 1px solid black;
    border-radius: 25px;	
}

div#afImgDiv {
    max-width: 100%;
    width: 300px;
}

div#afImgDiv img{
    width: 100%;
}
/* Able Player Styles*/
.able-wrapper {
    position: relative;
    margin: 1em 0;
    padding: 0;
    max-width: 100%;
    height: auto;
    box-sizing: content-box !important;
    text-align: left;
	/*WSSB Customizations*/
	min-width: 25%;
	width: 560px;

}
.able {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #000;
/*    box-shadow: 0 0 16px #262626; */
    z-index: 5000;
}
.able-column-left {
    float: left;
}
.able-column-right {
    float: left;
}
.able .able-vidcap-container {
    background-color: #000;
    left: 0;
    margin: 0;
    position: relative;
    top: 0;
}
.able .able-audcap-container {
    background-color: #000;
    position: relative;
    margin: 0;
    padding: 1.5em 0.25em;
}
.able-player {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #000;
}
.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 #000;
    background-color: var(--ic-brand-global-nav-bgd);
	/*--ic-brand-primary*/
    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%;
}
.able-media-container iframe {
    max-width: 100%;
}
.able-big-play-button {
    position: absolute;
    font-size: 8em;
    color: #fff;
    background-color: transparent;
    border: none;
    outline: 0;
    left: 0;
    top: 0;
    padding: 0;
    z-index: 6500;
    opacity: 0.75;
}
.able-big-play-button:focus,
.able-big-play-button:hover {
    opacity: 100;
}
.able-big-play-button .icon-play,
.able-big-play-button svg {
    background-color: #000;
    padding: 1rem 2rem;
}
.able-big-play-button:hover .icon-play,
.able-big-play-button:hover svg {
    outline-style: solid;
    outline-width: medium;
    outline-color: #FEDB16 !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;
	padding-left: 0.5em;
}
.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-black-controls label,
.able-white-controls,
.able-white-controls div[role="button"] {
    color: #fff !important;
}
.able-white-controls .able-seekbar {
    border: 1px solid #fff;
}
.able-controller div[role="button"] {
    background: 0 0;
    position: relative;
    display: inline-block;
    border-style: none;
    margin: 3px;
    padding: 0;
    font-size: 20px;
    min-width: 24px;
    border: none;
    overflow: visible !important;
    z-index: 6600;
}
.able-controller div[role="button"] > img,
.able-controller div[role="button"] > span {
    width: 20px;
    margin: 0 auto;
    padding: 0;
    z-index: 6700;
}
.able-controller .buttonOff {
    opacity: 0.5;
    z-index: 6800;
}
.able-controller .able-seekbar {
    margin: 0 5px;
    z-index: 6900;
}
.able-controller div[role="button"]:focus,
.able-controller div[role="button"]:hover {
    outline-style: solid;
    outline-width: medium;
}
.able-controller div[role="button"]:hover {
    outline-color: #FEDB16 !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;
}
.able-seekbar-wrapper {
    display: inline-block;
    vertical-align: middle;
}
.able-seekbar {
    position: relative;
    height: 0.5em;
    border: 1px solid;
    background-color: #000;
    margin: 0 3px;
    border-style: solid;
    border-width: 2px;
    border-color: #fff;
}
.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;
}
.able-volume-slider {
    width: 34px;
    height: 80px;
    background-color: #464646;
    margin: 0;
    padding: 5px 0;
    position: absolute;
    right: 0;
    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;
    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: #fdfdfd;
    outline: 1px solid #333;
    height: 16px;
    width: 24px;
    z-index: 9175;
}
.able-status-bar {
    height: 1.5em;
    min-height: 1.5em;
    color: #000;
    font-size: 0.9em;
    background-color: #fff;
	border: 3px solid var(--ic-brand-global-nav-bgd);
    padding: 0.5em 1em;
}
.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;
}
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: #000;
    font-size: 1em;
    color: #fff;
    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;
}
div.able-now-playing {
    text-align: center;
    font-weight: 700;
    font-size: 1.1em;
    color: #fff;
    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;
}
div.able-modal-dialog {
    position: absolute;
    height: auto;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    top: 5%;
    left: 0;
    right: 0;
    outline: 0 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 button:focus,
div.able-modal-dialog button:hover,
div.able-modal-dialog input:focus,
div.able-modal-dialog input:hover {
    outline-style: solid;
    outline-width: 2px;
}
div.able-modal-dialog button:hover,
div.able-modal-dialog input:hover {
    outline-color: #FEDB16;
}
div.able-modal-dialog button:focus,
div.able-modal-dialog input:focus {
    outline-color: #ffbb37;
}
div.able-modal-dialog h1 {
    font-weight: 700;
    font-size: 1.8em;
    line-height: 1.2em;
    margin: 0.75em 0;
    color: #000;
    text-align: center;
}
.able-help-div,
.able-prefs-form,
.able-resize-form {
    background-color: #f5f5f5;
    border: medium solid #ccc;
    padding: 0.5em 1em;
    margin: 0 0 0 1em;
    width: 25em;
    display: none;
}
.able-prefs-form div[role="group"] {
    margin: 1em 0;
    padding: 0;
    border: none;
}
.able-prefs-form h2 {
    color: #000;
    font-weight: 700;
    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: 700;
    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;
}
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.1em;
}
.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: 700;
}
.able-resize-form input[type="text"] {
    font-size: 1em;
}
.able-resize-form input[readonly] {
    color: #aaa;
}
.autoscroll-transcript{
	float: left;
}
.able-window-toolbar.able-white-controls.able-draggable {
    overflow: auto;
}

.able-window-toolbar {
    background-color: var(--ic-brand-global-nav-bgd);
    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: 0;
    padding: 0;
    z-index: 9300;
}
.able-window-toolbar .able-button-handler-preferences:focus,
.able-window-toolbar .able-button-handler-preferences:hover {
    outline-style: solid;
    outline-width: medium;
}
.able-window-toolbar .able-button-handler-preferences:hover {
    outline-color: #FEDB16 !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;
    right: 0;
    cursor: nwse-resize;
}
.able-resizable svg line {
    stroke: #595959;
    stroke-width: 2px;
}
.able-sign-window {
    position: relative;
    margin: 1em;
    z-index: 8000;
}
.able-sign-window video {
    width: 100%;
}
.able-sign-window:focus {
    outline: 0;
}
div.able-chapters-div {
    padding: 0;
}
div.able-chapters-div .able-chapters-heading {
    margin: 1em 0.75em;
    font-size: 1.1em;
    font-weight: 700;
}
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::-moz-focus-inner,
div.able-chapters-div button:focus,
div.able-chapters-div button:hover {
    border: 0;
    outline: 0;
    color: #fff !important;
}
div.able-wrapper.fullscreen {
    margin: 0 !important;
    position: fixed !important;
    top: 0 !important;
    background: 0 0 !important;
}
.able-alert,
.able-tooltip {
    position: absolute;
    padding: 5px 10px;
    border-color: #000;
    border-width: 1px;
    color: #000 !important;
    background-color: #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    display: block;
}
.able-alert {
    background-color: #ffc;
    box-shadow: 0 0 16px #262626;
    z-index: 9400;
    position: absolute;
    top: 1em;
}
.able-popup {
    z-index: 9200;
}
.able-tooltip {
    z-index: 9000;
}
.able-popup {
    position: absolute;
    margin: 0;
    padding: 0;
    border-color: #000;
    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  ";
}
.able-transcript-area {
    border-width: 1px;
    border-style: solid;
    height: 400px;
    z-index: 7000;
    outline: 0;
    padding-bottom: 25px;
    background-color: #fff;
}
.able-transcript {
	width:90%;
    position: relative;
    overflow-y: scroll;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #fff;
    height: 350px;
}
.able-transcript div {
    margin: 1em 0;
}
.able-transcript-heading {
    font-size: 1.4em;
    font-weight: 700;
    margin: 1em 0;
    padding: 0;
}
.able-transcript-chapter-heading {
    font-size: 1.2em;
    font-weight: 700;
    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: 700;
}
.able-transcript .able-hidden {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
}
.able-highlight,
.able-highlight span:active,
.able-highlight span:focus,
.able-highlight span:hover {
    background-color: #000 !important;
    color: #fff !important;
    padding: 0.25em 0.1em;
    border: none;
    outline: 0;
}
.able-previous {
    background: #000 !important;
    font-style: italic;
}
.able-transcript span:active,
.able-transcript span:focus,
.able-transcript span:hover {
    background: #ffc;
    color: #000;
    border: none;
    outline: 0;
    border-bottom: 1px solid #000;
    cursor: pointer;
}
.able-window-toolbar label {
    margin: 1em;
    color: #fff;
}
.able-controller div[role="button"]:focus,
.able-controller div[role="button"]:hover,
.able-controller input:focus,
.able-controller input:hover,
.able-seekbar-head:focus,
.able-seekbar-head:hover,
.able-window-toolbar input:focus,
.able-window-toolbar input:hover,
.able-window-toolbar select:focus,
.able-window-toolbar select:hover {
    outline-style: solid;
    outline-width: 2px;
}
.able-controller div[role="button"]:focus,
.able-controller input:focus,
.able-seekbar-head:focus,
.able-window-toolbar input:focus,
.able-window-toolbar select:focus {
    outline-color: #ffbb37;
}
.able-controller div[role="button"]:hover,
.able-controller input:hover,
.able-seekbar-head:hover,
.able-window-toolbar input:hover,
.able-window-toolbar select:hover {
    outline-color: #FEDB16;
}
.able-window-toolbar .transcript-language-select-wrapper {
    float: left;
    padding-right: 30px;
}
.able-playlist {
    list-style-type: none;
    margin: 0;
    background-color: #fff;
    padding: 5px 0;
}
.able-playlist li {
    background-color: var(--ic-brand-primary-darkened-15);
    margin: 5px;
    padding: 0;
    border: 2px solid var(--WSSBGoldPale);
    border-radius: 5px;
    width: auto;
    max-width: 100%;
}
.able-playlist li button {
    border: none;
    color: #fff;
    background-color: transparent;
    font-size: 1em;
    width: 100%;
    padding: 5px 10px;
    text-align: left;
}
.able-playlist li button:active,
.able-playlist li button:focus,
.able-playlist li button:hover {
    background-color: var(--WSSBGoldPale);
    color: #000;
    text-decoration: none;
    outline: 0;
}
.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: var(--WSSBGoldPale);
    border-color: var(--ic-brand-primary-darkened-15);
}
.able-playlist li.able-current button {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    outline: 0;
}
.able-playlist li.able-current button:active,
.able-playlist li.able-current button:focus,
.able-playlist li.able-current button:hover {
    color: #000;
}
#able-search-term-echo {
    font-weight: 700;
    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: 700;
    cursor: pointer;
}
button.able-search-results-time:active,
button.able-search-results-time:focus,
button.able-search-results-time:hover {
    color: #fff;
    background-color: #000;
}
.able-search-results-text {
    padding-left: 1em;
}
.able-search-term {
    background-color: #ffc;
    font-weight: 700;
}
#search-term {
    font-weight: 700;
    font-style: italic;
}
#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: 700;
}
#able-vts fieldset div {
    float: left;
    padding-right: 1em;
}
#able-vts table {
    clear: left;
}
#able-vts table,
#able-vts table td,
#able-vts table th {
    border: 1px solid #000;
    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 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: 700;
    z-index: 9400;
}
button#able-vts-save {
    font-size: 1em;
    padding: 0.25em;
    border-radius: 5px;
    margin-bottom: 1em;
    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%;
}
.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: red;
    margin: 0.75em;
    padding: 0.5em;
}
.able-fallback {
    display: block;
    text-align: center;
    border: 2px solid #335;
    background-color: #eee;
    color: #000;
    font-weight: 700;
    font-size: 1.1em;
    padding: 1em;
    margin-bottom: 1em;
    max-width: 500px;
    width: 95%;
}
.able-fallback div,
.able-fallback p,
.able-fallback ul {
    text-align: left;
}
.able-fallback li {
    font-weight: 400;
}
.able-fallback img {
    width: 90%;
    margin: 1em auto;
    opacity: 0.3;
}
.able-fallback img.able-poster {
    position: relative;
}
.able-modal-dialog button svg,
.able-modal-dialog div[role="button"] svg,
.able-wrapper button svg,
.able-wrapper div[role="button"] svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    fill: currentColor;
}
div.able-skin-2020 div.able-seekbar-wrapper {
    width: 99%;
    margin: 10px 3px;
}
@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: 400;
    font-style: normal;
}
.able-wrapper [class*=" icon-"],
.able-wrapper [class^="icon-"] {
    font-family: able !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    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";
}


:root{
	--iconColorA: #3752A4; /*blue*/
	--iconColorB: #706010; /*brown*/
	--iconColorC: #8A609F; /*violet*/
	--iconColorD: #A3295C; /*maroon*/
	--iconColorAPale: #A0AFDF;
	--iconColorBPale: #EFDF8F;
	--iconColorCPale: #C5B0CF;
	--iconColorDPale: #E599B9;

}

.matchIconA {
	color: var(--iconColorA);
	border-color: var(--iconColorA);
	font-weight: bold;
}
.matchIconB {
	color: var(--iconColorB);
	border-color: var(--iconColorB);
	font-weight: bold;
}
.matchIconC {
	color: var(--iconColorC);
	border-color: var(--iconColorC);
	font-weight: bold;
}
.matchIconD {
	color: var(--iconColorD);
	border-color: var(--iconColorD);
	font-weight: bold;
}

#content #wiki_page_show h2.matchIconA, #tinymce h2.matchIconA {
    border-color: var(--iconColorA);
}
#content #wiki_page_show h2.matchIconB, #tinymce h2.matchIconB {
    border-color: var(--iconColorB);
}
#content #wiki_page_show h2.matchIconC, #tinymce h2.matchIconC {
    border-color: var(--iconColorC);
}
#content #wiki_page_show h2.matchIconD, #tinymce h2.matchIconD {
    border-color: var(--iconColorD);
}


.sbParent.matchIconB {
    border-color: var(--iconColorB);
    background: var(--iconColorB);
}
.sbParent.matchIconC {
    border-color: var(--iconColorC);
    background: var(--iconColorC);
}
.sbParent.matchIconD {
    border-color: var(--iconColorD);
    background: var(--iconColorD);
}
h2 img, h3 img, h4 img{
	width: 2em;	
}
p.iconLibrary img{
	width: 3em;	
}