/* Minification failed. Returning unminified contents.
(1494,34): run-time error CSS1036: Expected expression, found '!important'
(1495,34): run-time error CSS1036: Expected expression, found '!important'
(1569,38): run-time error CSS1034: Expected closing parenthesis, found ','
(1569,38): run-time error CSS1042: Expected function, found ','
(1569,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
/*! jQuery UI - v1.12.1 - 2016-09-14
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	-ms-touch-action: none;
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}
/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("images/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("images/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("images/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("images/ui-icons_777777_256x240.png");
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .3;
	filter: Alpha(Opacity=30); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}

/*** Font ****/
h1 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 26.4px;
}

h3 {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    line-height: 15.4px;
}

p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

div {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 20px;
}

blockquote {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 21px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 30px;
}

pre {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 18.5714px;
}



/**************/


.vjs-16-9 {
    z-index:1 !important;
}

.vjs-default-skin .vjs-text-track-display {
    z-index: 3;
}



/*This gets applied to video js text tracks*/
.vjs-text-track-display.video-js-text-track-cue .vjs-text-track-cue {
    inset: unset !important;
    bottom: 36px !important;
}

.vjs-text-track-display.video-js-text-track-cue.video-js-text-track-cue-extra .vjs-text-track-cue {
    inset: unset !important;
    bottom: 60px !important;
}

.video-div {
    display: block;
}
.share-media-btn {
    margin-left: 5px;
    margin-right: 5px;
}

html {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    outline-style: none;
    outline: 0;
    font-size: 0.95em;
    line-height: 1.4em;
}


.bigButtonShowVideoOnly {
    position: absolute;
    top: 45px;
    left: 2%;
    z-index: 1000;
}

.menuBanner {
    left: 0;
    z-index: 199;
    min-height: 43px;
}

/*This is for the show/hide transcript button.*/
#selected-transcript-toggle-span {
    text-decoration: underline;
}

#transcript-toggle-button.toggleOn #selected-transcript-toggle-span {
    text-decoration: none;
}

@media only screen and (max-width : 1200px) {
    html {
        font-size: 0.9em;
    }

    .tab-span {
        font-size: 0.9em !important;
    }

    p {
        font-size: 0.9em;
    }
}

@media only screen and (max-width : 1000px) {
    html {
        font-size: 0.85em;
        line-height: 1.3em;
    }

    .tab-span {
        font-size: 0.85em !important;
    }

    p {
        font-size: 0.85em;
    }
}


@media only screen and (max-width : 850px) and (min-height : 1000px) {
    html {
        font-size: 0.9em;
        line-height: 1.4em;
    }

    .tab-span {
        font-size: 1em !important;
    }
}

@media only screen and (max-width : 850px) and (max-height : 1000px) {
    html {
        font-size: 0.9em;
        line-height: 1.4em;
    }

    .tab-span {
        font-size: 0.9em !important;
    }

    p {
        font-size: 0.9em;
    }
}




body {
    -webkit-tap-highlight-color: !important rgba(0,0,0,0);
    -webkit-tap-highlight-color: !important transparent;
    background: none transparent;
    /*padding:1px;*/
}


/**** useful styles ****/
.margin-top {
    margin-top: 3px;
}

.disable-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by any browser but < IE9 */
}

input:focus,
select:focus,
textarea:focus,
button:focus,
div:focus,
video:focus {
    outline: none;
}

    input:focus::-webkit-input-placeholder {
        opacity: 0;
    }

    input:focus:-moz-placeholder {
        opacity: 0;
    }
    /* FF 4-18 */
    input:focus::-moz-placeholder {
        opacity: 0;
    }
    /* FF 19+ */
    input:focus:-ms-input-placeholder {
        opacity: 0;
    }


/* IE 10+ */

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


/* Override the classes brought by azure media player. */
.amp-content-title {
    display: none;
}

.vjs-control-bar {
    display: none;
}

.cursorPointer {
    cursor: pointer;
}

input[type="color"] {
    height: 15px;
}

.loader {
    border: 8px solid rgb(255,255,255,0);
    border-radius: 50%;
    /*
    border-top: 8px solid rgb(71, 89, 160);
    border-bottom: 8px solid rgb(71, 89, 160);
    */
    border-top: 8px solid #EEEEEE;
    border-bottom: 8px solid #EEEEEE;
    /*
    border-left: 8px solid #107d8b;
    border-right: 8px solid #107d8b;
    */
    width: 90px;
    height: 90px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    margin-left: auto;
    margin-right: auto;
    /*
    margin-top: 5px;
    margin-bottom: 25px;
        */
}

.loaderArea {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0,0,0,0.4);
    border-radius: 10px;
    padding: 10px;
}

    .loaderArea.hasText {
        background-color: rgba(0,0,0,0.7);
    }

.loader-text {
    color: white;
}

.loaderAreaError {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0,0,0,0.8);
    border-radius: 10px;
    padding: 10px;
}

    .loaderAreaError h2 {
        color: white;
    }

.fullLoader {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.hidden {
    display: none;
}


/**** Text Layers *****/
.interface-video-title {
    color: white;
    overflow: hidden;
    max-height: 40px;
}

.interface-languages {
    line-height: 29px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.inteface-transcript {
    line-height: 29px;
    color: white;
    padding-top: 3px;
    padding-bottom: 3px;
}


html.fullscreen .interface-languages {
    line-height: 29px;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
}

html.fullscreen .interface-video-title {
    vertical-align: middle;
}

#current-time {
    color: white;
}

.interface-control-button-label {
    margin-left: 5px;
    color: white;
}

html.fullscreen .interface-control-button-label {
    margin-left: 5px;
    color: white;
}

.interface-control-button-anchor {
    color: white;
}

.endOfVideoContainer {
    width: 100%;
    z-index: 9999;
    position: absolute;
    bottom: -500px;
    left: 0;
    text-align: center;
}



/********** Video Controls *******/
.progress-bar {
    background-color: white;
    height: 7px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    margin-left: 3px;
    margin-right: 3px;
}

html.fullscreen .progress-bar {
    background-color: white;
    height: 7px;
    cursor: pointer;
    position: relative;
    border-radius: 3px;
    margin-left: 3px;
    margin-right: 3px;
}

.video-control-layover-content {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.video-control-layover {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 198;
    height: 50px;
    background-color: rgba(51,51,51,0.75);
}

.menuWrapper {
    position: absolute;
    left: 0;
    z-index: 199;
    top: 0;
    width: 100%;
    height: 43px;
    background-color: rgba(51,51,51,0.75);
}

html.fullscreen .menuWrapper {
    position: absolute;
    left: 0;
    z-index: 199;
    top: 0;
    width: 100%;
    height: 43px;
    background-color: rgba(51,51,51,0.75);
}

.video-control-button {
    vertical-align: top;
    height: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 33px;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    border-radius: 3px;
}

.video-control-button-feather {
    vertical-align: top;
    height: 100%;
    padding-top: 5px;
    padding-bottom: 8px;
    width: 33px;
    text-align: center;
    box-sizing: border-box;
    margin: 0;
    color: white;
    border-radius: 3px;
}

.video-control-button.lesspadding {
    padding-top: 6px;
    padding-bottom: 6px;
}

.video-control-button.noborder {
    border: 0;
}

.video-control-button.right {
}

.video-control-button a {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.clickButtons {
    cursor: pointer;
    pointer-events: all;
    display: block;
}

.clickButton {
    border-radius: 5px;
    padding: 20px;
    border: solid black 1px;
}

.clickButtonWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.transcriptEditorButtonWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 10002;
    position: absolute;
    top: 0;
    left: 0;
}

.transcriptEditorOuterbox {
    display: block;
    background-color: white;
    border-radius: 5px;
    border: solid 1px #DDDDDD;
    color: black;
    z-index: 10003;
}

.transcriptEditorTitleLine {
    color: black;
    font-family: 'proxima-nova', sans-serif !important;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    border-bottom: solid 1px #DDDDDD;
}

.transcriptEditorInstructionLine p {
    color: black;
    font-family: 'proxima-nova', sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #DDDDDD;
    margin: 0;
}



.transcriptEditorClickButton {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #00A7E1;
    color: white;
    border-radius: 5px;
    display: block;
    width: 100px;
    margin-left: auto;
    text-align: center;
}

.transcriptEditorClickButtons {
    display: block;
    padding: 10px;
}

.transcriptEditorClickButton:focus {
    border: solid black 2px;
}


.bigButtons {
    position: relative;
    transform: translate(-50%, -50%);
    display: table;
    border-radius: 5px;
    background: rgba(51, 51, 51, 0.75);
    width: 40px;
    height: 29px;
    cursor: pointer;
    pointer-events: all;
}



    .bigButtons img {
        position: absolute;
        top: 0;
        left: 5px;
    }


.bigButton {
    display: table-cell;
    vertical-align: middle;
}


/* Transcript CSS */

.full-anchor {
    width: 100%;
    height: 100%;
}

.transcript-title {
    font-size: 1em;
    font-weight: 700;
}



.transcript-chapter {
    /*
    border-top: solid #555555 1px;
    padding-top:10px;
    margin-bottom:10px;
    */
}

.transcript-chapter-title {
    font-size: 1em;
    cursor: pointer;
    line-height: 1.375em;
    margin-top: 10px;
    margin-bottom: 10px;
}



html.hover .transcript-chapter-title:hover {
    padding-left: 2px;
    padding-right: 2px;
}

html.hover .transcript-chapter-title:hover {
    padding-left: 2px;
    padding-right: 2px;
}


.about-row {
    width: 100%;
    padding-top: 4px;
    padding-bottom: 4px;
}

.about-row-nopadding {
    width: 100%;
    padding-bottom: 2px;
}

.about-row-moretoppadding {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 4px;
}

.about-row-morebottompadding {
    width: 100%;
    padding-bottom: 10px;
}

.about-label {
    margin-right: 10px;
    font-weight: bold;
}

.about-link {
    color: white;
    text-decoration: underline;
}


.about-label-fieldset {
    margin-right: 10px;
    text-decoration: underline;
    font-weight: 700;
}

.about-scrunch-label {
    margin-right: 5px;
    line-height: 1.2em;
    font-weight: bold;
}





.about-data {
    word-break: break-word;
}



.about-bold {
    line-height: 1.2em;
}



.segment-row {
    width: 100%;
    margin-bottom: 8px;
}

    .segment-row::after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

.segment-row-visual {
    margin-bottom: 16px;
}

    .segment-row-visual::after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

.segment-row-description {
    width: 100%;
    margin-bottom: 8px;
}

.segment-image {
    float: left;
    margin-right: 15px;
    width: 30%;
}

    .segment-image img {
        width: 100%;
        cursor: pointer;
        float: left;
    }

.segment-row-container {
    width: 100%;
}

.segment-data-row {
    width: 100%;
    display: block;
    min-height: 10px;
}

.speaker-span {
    margin-right: 3px;
    font-size: 1em;
    font-weight: 700;
}



#segments-area .segment-row:not(:first-child) {
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid #555555 1px;
}

#segments-content-container .segment-row:not(:first-child) {
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid #555555 1px;
}

#related-area .related-row-top:not(:first-child) {
    padding-top: 10px;
    margin-top: 10px;
    border-top: solid #555555 1px;
}

.transcript-segment {
    cursor: pointer;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 16px;
}



.rollingHighlight {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 16px;
}



.transcript-paragraph {
    margin-top: 0px;
    margin-bottom: 8px;
}

/* Scrubber Image Classes */
.scrubber-container {
    width: 150px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 199;
    display: none;
    background-color: rgba(0,0,0,0.8);
}

    .scrubber-container.active {
    }

        .scrubber-container.active .scrubber-container-title {
        }

.scrubber-container-title {
    background-color: transparent;
    text-align: center;
}

.scrubber-container-time {
    font-size: 0.85em;
}

.scrubber-container-title-title {
}

.scrubber-image {
    /*width: 150px;*/
    height: 84px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.transcript-highlight {
    padding-left: 2px;
    padding-right: 2px;
    background-color: #107d8b;
    color: #EEEEEE;
}

/* Volume Bar */
.volume-box {
    width: 50px;
    cursor: pointer;
    vertical-align: middle;
    height: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    box-sizing: border-box;
    margin-right: 5px;
}

.volume-bar {
    width: 100%;
    background-color: black;
    height: 5px;
    vertical-align: middle;
    border-radius: 5px;
}

.volume-indicator {
    width: 100%;
    background-color: white;
    height: 100%;
}

.tab-area {
    /*display: none;*/
}

/***************  Menu Container **********/
.menu-inactive {
    display: none;
}

.menu-check {
    display: flex;
    align-items: center;
}

.menu-check-option {
    display: flex;
    color: #EEEEEE;
    align-items: center;
    width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
}



    .menu-check-option > img {
        margin-top: -2px;
    }


.menu-checkicon {
    flex-grow: 0;
}

.menu-uncheckicon {
    flex-grow: 0;
}

.menu-check-label {
    flex-grow: 1;
    padding-left: 8px;
    color: #EEEEEE;
}

    .menu-check-label.smallLabel {
        font-size: 0.9em;
    }

.menu-check-label-nogrow {
    flex-grow: 0;
    margin-right: 10px;
    margin-left: 10px;
    width: 100px;
}


.menu-small {
    width: 250px;
}



.menu-close {
    position: absolute;
    right: 3px;
    top: 3px;
    color: #EEEEEE;
    z-index: 399;
}

.menu-title {
    display: flex;
    align-items: center;
    padding-bottom: 3px;
    font-size: 1.5em;
    position: relative;
    padding-top: 2px;
    border-bottom: solid #EEEEEE 1px;
    color: #eeeeee;
}

.menu-sub-title {
    font-size: 1.1em;
    display: block;
    text-decoration: underline;
    color: #eeeeee;
}

.menu-text {
    display: block;
    margin-left: 10px;
    color: #eeeeee;
}

.menu-title img {
    margin-right: 5px;
    vertical-align: middle;
}

.menu-title svg {
    margin-right: 5px;
    margin-top: -2px;
}

.menu-title span {
    vertical-align: middle;
}

.menu-row {
    display: flex;
    margin-top: 8px;
    width: 100%;
}

.menu-row-space {
    display: flex;
    margin-top: 8px;
    justify-content: space-between;
    max-width: 120px;
    height: 23px;
}

.menu-row-column {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.menu-row-column-nocolor {
    margin-top: 8px;
    width: 100%;
    display: flex;
    flex-direction: column;
}



.option-selected {
    background-color: rgba(255,255,255,0.9);
    color: black;
}

    .option-selected .menu-check-label {
        color: black;
    }

    .option-selected:focus .menu-check-label {
        color: #EEEEEE;
    }

.menu-check-image {
    height: 40px;
}

    .menu-check-image > img {
        height: 100%;
    }





.menu-indentrow {
    margin-top: 8px;
    padding-left: 20px;
}

.menu-margin-top {
    margin-top: 10px;
}

.menu-row-no-flex {
    width: 100%;
    margin-top: 12px;
}

.menu-inline {
    display: inline-block;
}

.menu-label {
    font-size: 1.0em;
    flex-grow: 0;
    color: #eeeeee;
}



.menu-control {
    font-size: 1.0em;
}



.menu-control-full {
    font-size: 12px;
    flex-grow: 1;
}


.menu-input-small {
    width: 50px;
}

.menu-input {
    border-radius: 3px;
    border: solid #171717 1px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 2px;
    padding-left: 5px;
    font-size: 1em;
    font-weight: 300;
}

.menu-time-span {
    text-decoration: underline;
}

.menu-input-error {
    border: solid red 1px;
}

.menu-control-right {
    text-align: right;
    margin-left: auto;
}


.menu-control-button {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: auto;
    margin-left: auto;
    background-color: black;
    border: solid #EEEEEE 1px;
    border-radius: 6px;
    color: #EEEEEE;
}

html.hover .menu-control-button:hover {
    background-color: #EEEEEE;
    color: black;
}

.menu-right {
    flex-grow: 1;
    margin-top: auto;
    text-align: right !important;
}

    .menu-right div {
        text-align: right !important;
    }

.menu-left {
    flex-grow: 0;
}



.menu-select {
    border-radius: 3px;
    border: 0;
    width: 290px;
}

.menu-center {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.ui-menu {
    width: 250px !important;
}

.menu-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.menu-toparrow {
    height: 17px;
    text-align: center;
    box-sizing: border-box;
}

.menu-top-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-bottomarrow {
    height: 17px;
    text-align: center;
    position: relative;
    box-sizing: border-box;
}

.menu-bottom-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.white-select-border {
    color: #EEEEEE;
    background-color: #EEEEEE;
}


.menu-share-button {
    margin-left: 5px;
    margin-right: 5px;
}


/*********** Cad more Image and stuff ********/

.cadmore-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}


.thumb-wrapper-title {
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 1.6em;
    background: rgba(24, 24, 24, 0.8);
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
}

.thumb-wrapper-play {
    background: rgba(32, 32, 32, 0.6);
    padding-top: 5px;
    border-radius: 5px;
    width: 65px;
    height: 35px;
    text-align: center;
    cursor: pointer;
    z-index: 100;
    pointer-events: all;
}

    .thumb-wrapper-play:hover {
        background: #107d8b;
    }


    .thumb-wrapper-play > img {
        /*background-color: rgba(32,32,32,0.6);*/
        /*background-color: #107d8b;*/
        margin-top: -11px;
        cursor: pointer;
    }


.quoteButton {
    font-size: 30pt;
}

.ui-selectmenu-menu {
    z-index: 103;
}

.rotate180 {
    transform: rotate(180deg);
}

.white-border-top {
}


/*********  Shared Progress Bar ********/

.progress-indicator {
    width: 0%;
    background-color: #107d8b;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
}

.progress-indicator-clip {
    width: 0%;
    background-color: rgba(255,0,0,0.8);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.progress-indicator-clip-playback {
    width: 0%;
    background-color: black;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 11;
}

.chapter-scrubber-div {
    width: 8px;
    /*background-image: linear-gradient(rgba(125,125,125,1), rgba(75,75,75,1));*/
    background-color: #202020;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    border-radius: 3px;
    /*box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.03), 0px 0px 0px 2px rgba(0,0,0,0.015);*/
}
/********* Clip Mode Dialog *******/
.clip-menu-container {
    width: 300px;
}

/************  Visual ToC **************/

.visual-toc-image {
    width: 18vw;
    cursor: pointer;
    float: left;
    margin-right: 5px;
    margin-top: 5px;
    border: solid #EEEEEE 1px;
}

.contents-active {
    display: block;
}

.contents-inactive {
    display: none;
}

.segment-row-highlight {
    background-color: #888888;
}


/**** Auto Scroll ******/

#auto-scroll-image {
    margin-top: -1px;
}

#content-collapse-image {
    margin-top: -1px;
}

.transcript-tab-top-autoscroll {
    padding: 2px;
    margin-left: 10px;
}

/*** Transcript Tab Search stuff *****/

.transcript-top-search-div {
    position: absolute !important;
    top: -31px;
    right: 3px;
    cursor: pointer;
}

.transcript-tab-top-search-input input {
    border: none;
    background-color: white;
    color: #202020;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
}

html.fullsceen .transcript-tab-top-search-input input {
    border: none;
    background-color: white;
    color: #202020;
    margin-top: auto;
    margin-bottom: auto;
    width: 100%;
}

.transcript-tab-top-search-arrows {
    display: flex;
    visibility: hidden;
}


.transcript-tab-top-search-arrows-left {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    margin-right: 2px;
}

.transcript-tab-top-search-arrows-right {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    margin-right: 2px;
}

.search-input {
    color: black;
}

/******** Tabs *********/

.tab {
    box-sizing: border-box;
    cursor: pointer;
    margin-right: 3px;
    margin-left: 3px;
    display: inline-block;
    text-align: left;
    font-size: 1em;
    text-align: center;
    outline: none;
    padding-top: 3px;
    border-left: none;
    border-right: none;
    border-top: none;
}

    .tab.half {
        width: 45%;
    }


.tab-span {
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 1.0em;
}





.tabFirst {
    margin-left: 0px;
}

.tabLast {
    margin-right: 0px;
}

.tab.activeTab {
    box-sizing: border-box;
}



.activeTab img {
    display: block !important;
    position: absolute;
    margin-top: -20px;
}



.tab img {
    display: none;
}


/******** Related Tab ******/
.related-row {
    width: 100%;
    margin-bottom: 8px;
}

    .related-row::after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
    }

.related-row-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.related-title {
    word-wrap: break-word;
}








/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}


    /* Tooltip text */
    .tooltip .tooltiptext-top {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 50%;
        margin-left: -45px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 3px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        opacity: 0;
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 50%;
        margin-left: -80px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 3px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        opacity: 0;
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -45px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom-left {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom-right {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -10px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 180px;
        top: 100%;
        left: -50%;
        margin-left: -45px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-right {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 50%;
        margin-left: 0px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }



    .tooltip .tooltiptext-right-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -15px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


    .tooltip .tooltiptext-top-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


        .tooltip .tooltiptext-top-anchor.largeToolMargin {
            margin-bottom: 12px;
        }

        .tooltip .tooltiptext-top-anchor.wideTool {
            width: 120px;
        }

    .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }

    .tooltip .tooltiptext-top.wideTool {
        width: 160px;
        margin-left: -80px;
    }

    .tooltip .tooltiptext.wideTool {
        width: 110px;
    }


/* Show the tooltip text when you mouse over the tooltip container */
html.hover .tooltip:hover .tooltiptext-top {
    visibility: visible;
    opacity: 1;
}

.tooltip .toollargertext {
    font-size: 1em;
}

html.hover .tooltip:hover .tooltiptext-bottom {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-bottom-left {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-right {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-right-anchor {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-top-anchor {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-top-left-anchor {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-top-left-mobile-anchor {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-bottom-anchor {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-left {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-top-left {
    visibility: visible;
    opacity: 1;
}

html.hover .tooltip:hover .tooltiptext-bottom-right {
    visibility: visible;
    opacity: 1;
}


/***** Recenter Icons ********/
.progress-recenter {
    position: absolute;
    z-index: 13;
    margin-top: -11px;
    pointer-events: none;
    /*
    background-color: #18bcd1;
    border-radius:50%;
    width:16px;
    height:16px;
    position:absolute;
    z-index:13;
    top:0;
        */
}

.transcript-recenter {
    position: absolute;
    z-index: 13;
    display: none;
    cursor: pointer;
}

/************ Full Screen Button Interchages *******/
#go-full-screen-button {
    display: none;
}

html.fullscreen #full-screen-video-only > .on {
    display: unset;
}

html.fullscreen #full-screen-video-only > .off {
    display: none;
}

html.videoonly #full-screen-video-only > .on {
    display: none;
}

html.videoonly #full-screen-video-only > .off {
    display: unset;
}

#full-screen-video-only > .on {
    display: unset;
}

#full-screen-video-only > .off {
    display: none;
}
/********  Menu Wrapper ***************/
.menuRail {
    display: flex;
    background: transparent;
    width: 100%;
    height: 43px;
    position: relative;
    text-overflow: clip;
}

.menu_explore_container {
    flex-grow: 0;
    width: 55px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: unset;
    flex-direction: column;
    font-size: 0.7em;
    line-height: 1em;
}

.menu_explore_container_icon {
    border-radius: 3px;
    color: white;
}



.menu_title_container {
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding-top: 1px;
}

.menu_tools_container {
    flex-grow: 0;
    width: 55px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: unset;
    flex-direction: column;
    font-size: 0.7em;
    line-height: 1em;
}

.menuSubRail {
    display: flex;
    background: rgba(0,0,0,0.7);
    width: 100%;
    position: relative;
}

.menu_explore {
    background: rgba(51,51,51,0.75);
    position: absolute;
    top: 0px;
    right: 0;
}

.menu_explore_left {
    background: rgba(51,51,51,0.75);
    position: absolute;
    top: 0px;
    left: 0;
}



.menu-help {
    position: absolute;
    top: 0;
    right: 0;
}

/******** Color Config ***********/



/**** SCroll Bars *****/

.menu-list::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.menu-list::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.7);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* IE 11 STYLES */
.menu-list {
    scrollbar-base-color: #EEEEEE;
    scrollbar-face-color: #1392a2;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;
    scrollbar-track-color: #EEEEEE;
    scrollbar-arrow-color: #1392a2;
    scrollbar-shadow-color: #1392a2;
    scrollbar-dark-shadow-color: #EEEEEE;
}


.menu::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.menu::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.7);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* IE 11 STYLES */
.menu {
    scrollbar-base-color: #EEEEEE;
    scrollbar-face-color: #1392a2;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;
    scrollbar-track-color: #EEEEEE;
    scrollbar-arrow-color: #1392a2;
    scrollbar-shadow-color: #1392a2;
    scrollbar-dark-shadow-color: #EEEEEE;
}


.menu-copyzone::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.menu-copyzone::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.7);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* IE 11 STYLES */
.menu-copyzone {
    scrollbar-base-color: #EEEEEE;
    scrollbar-face-color: #1392a2;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;
    scrollbar-track-color: #EEEEEE;
    scrollbar-arrow-color: #1392a2;
    scrollbar-shadow-color: #1392a2;
    scrollbar-dark-shadow-color: #EEEEEE;
}


.menu-copyzone-full::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.menu-copyzone-full::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.7);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

/* IE 11 STYLES */
.menu-copyzone-full {
    scrollbar-base-color: #EEEEEE;
    scrollbar-face-color: #1392a2;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;
    scrollbar-track-color: #EEEEEE;
    scrollbar-arrow-color: #1392a2;
    scrollbar-shadow-color: #1392a2;
    scrollbar-dark-shadow-color: #EEEEEE;
    color: #eeeeee;
}


/* IE ONLY STYLES */
.transcript-tab-bottom {
    scrollbar-base-color: #EEEEEE;
    scrollbar-face-color: #1392a2;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;
    scrollbar-track-color: #EEEEEE;
    scrollbar-arrow-color: #1392a2;
    scrollbar-shadow-color: #1392a2;
    scrollbar-dark-shadow-color: #EEEEEE;
}


    .transcript-tab-bottom::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
        border-radius: 4px;
        /*background-color: rgba(75,75,75,1);*/
    }

    .transcript-tab-bottom::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #1392a2;
        /*border: solid #c0c0c0 1px;*/
    }


.about-tab-bottom::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    background-color: rgba(127,127,127,1);
}

.about-tab-bottom::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(212,212,212,1);
}

/* IE 11 STYLES */
.about-tab-bottom {
    scrollbar-base-color: #EEEEEE;
    scrollbar-face-color: #1392a2;
    scrollbar-3dlight-color: #EEEEEE;
    scrollbar-highlight-color: #EEEEEE;
    scrollbar-track-color: #EEEEEE;
    scrollbar-arrow-color: #1392a2;
    scrollbar-shadow-color: #1392a2;
    scrollbar-dark-shadow-color: #EEEEEE;
}





/*********  Explore *****************/

.explore-container-container {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

.explore-tab-container {
    overflow-y: auto;
}



.explore-tab {
    color: rgba(255,255,255,0.7);
    border-bottom: rgba(255,255,255,0) 2px solid;
    width: 120px;
    margin-right: 20px;
    cursor: pointer;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    background-color: transparent;
    padding: 0;
}

.explore-tab-div {
    display: flex;
    align-items: center;
    font-size: 11pt;
    line-height: 30px;
}

.explore-tab-icon {
    width: 20px;
    margin-right: 2px;
}



.explore-tab-content {
    width: 100%;
    height: 100%;
}

.thumbnails-content-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}



.thumbnails-chaptertitle {
    width: 100%;
}

.thumbnails-title {
    width: 100%;
    color: #eeeeee;
}

.thumbnails-timestamp {
}

.explore-tab-padding {
    height: 10px;
}



.explore-about-container {
    margin-left: 10px;
}

.about-card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.about-card-sub-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: solid #EEEEEE 1px;
}

.about-card {
    border: solid #EEEEEE 1px;
    padding: 5px;
    background-color: rgba(0,0,0,0.4);
}

.about-card-full {
    border: solid #EEEEEE 1px;
    padding: 5px;
    background-color: rgba(0,0,0,0.4);
}

.about-sub-card {
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    background-color: rgba(0,0,0,0.4);
}

.explore-segments-container {
    margin-left: 10px;
    margin-top: 5px;
}

/***** Video Menus ******/

.video-menu-container {
    position: absolute;
    background-color: rgba(51,51,51,0.75);
    z-index: 599;
}

.video-menu {
}

.video-menu-list {
}

.video-menu-column {
}

.video-menu-select {
    cursor: pointer;
    text-align: center;
    padding-top: 3px;
    padding-bottom: 3px;
    color: white;
}

    .video-menu-select:hover {
        background-color: #107d8b;
    }

/*******  Transcript Clipping *******/

.clipped {
    opacity: 0.4;
}

/***** Cadmore Branding *****/
.cadmore-branding-div {
    position: absolute;
    top: -39px;
    right: 2px;
    background-color: rgba(51,51,51,0.75);
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    height: 25px;
    width: 150px;
    padding: 3px;
}

.branding-anchor {
    width: 100%;
    display: block;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.branding-anchor-overlay {
    width: 100%;
    display: block;
    height: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.brandingOverlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(51,51,51,0.75);
    z-index: 101;
    padding: 3px;
    margin: 2px;
    border-radius: 3px;
}



/***** Outlining for Focus (Keyboard Accessibility) *****/
.thumb-wrapper-play:focus {
    background-color: #107d8b;
}

.thumb-wrapper-play:active {
    background-color: inherit;
}

.icon-focus-highlight {
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
    outline: none;
    border-radius: 3px;
}

    .icon-focus-highlight:focus {
        background-color: #107d8b;
    }

    .icon-focus-highlight:active {
        background-color: inherit;
    }

    .icon-focus-highlight:hover {
        background-color: #107d8b;
    }

.menu-close-button:focus {
    outline: none;
}

    .menu-close-button:focus svg {
        background-color: #107d8b;
    }

.menu-close-button:active svg {
    background-color: inherit;
}

.video-control-button:focus {
    background-color: #107d8b;
    outline: none;
}

.video-control-button:active {
    background-color: inherit !important;
}

.video-control-button:hover {
    background-color: #107d8b;
    outline: none;
}

.explore-tab:focus {
    background-color: #107d8b;
}

.explore-tab:active {
    background-color: inherit;
}

.thumbnails-thumbnail:focus {
    background-color: #107d8b;
}

.thumbnails-thumbnail:active {
    background-color: inherit;
}

/*
.explore-tab-container:focus::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    background-color: rgba(255,255,255,1);
}

.explore-tab-container:focus::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,255,1);
}
    */

.explore-tab-content:focus {
    border-top: solid blue 3px;
}

.explore-tab-content:active {
    border: none;
}

.focusAnchor {
    display: block;
    padding: 2px;
}

    .focusAnchor:focus {
        outline: none;
        background-color: #107d8b;
    }

    .focusAnchor:active {
        outline: none;
        background-color: inherit;
    }

.interface-control-button:focus {
    background-color: #107d8b !important;
}

    .interface-control-button:focus div {
    }

.interface-control-button:hover {
    background-color: #107d8b !important;
}

    .interface-control-button:hover div {
    }

.interface-control-button:active {
    background-color: inherit !important;
}

.menu-check-option:focus {
    background-color: #107d8b;
    outline: none;
}

.menu-check-option:active {
    background-color: inherit;
    outline: none;
}

.menu-time-span:focus {
    background-color: #107d8b;
}

.menu-time-span:active {
    background-color: inherit;
}

.menu-share-button:focus {
    background-color: #107d8b;
}

.menu-share-button:active {
    background-color: inherit;
}

.menu-control-button:focus {
    background-color: #107d8b;
}

.menu-control-button:active {
    background-color: inherit;
}

.plainSelect:focus {
    outline: #107d8b solid 3px;
}

.menu-check-option:focus {
    background-color: #107d8b;
}

.menu-check-option:active {
    background-color: inherit;
}

.timejump-textbox:focus {
    background-color: #107d8b;
}

.timejump-textbox:active {
    background-color: inherit;
}

.interface-languages:focus {
    background-color: #107d8b;
}

.interface-languages:active {
    background-color: inherit;
}

.interface-languages:hover {
    background-color: #107d8b;
}

.video-menu-select:focus {
    background-color: #107d8b;
}

.video-menu-select:active {
    background-color: inherit;
}

.volume-box:focus {
    background-color: #107d8b;
}

.progress-recenter:focus {
    background-color: #107d8b;
    outline: none;
}

.video-control-button-feather:active {
    background-color: inherit !important;
}

.video-control-button-feather:focus {
    background-color: #107d8b !important;
}

.video-control-button-feather:hover {
    background-color: #107d8b !important;
}

.cadmore-branding-div:focus img {
    border: solid 3px #107d8b;
}

.tab:focus {
    background-color: #107d8b !important;
    border-bottom: solid #107d8b 2px;
}


.tab.activetab:focus {
    background-color: #107d8b !important;
    border-bottom: solid #107d8b 2px;
}



.tab:active {
    background-color: inherit;
}

.tab-area:focus {
    outline: solid #107d8b 3px;
}

.tab-area:active {
    outline: none;
}

.transcript-tab-top-search-arrows-left:focus {
    background-color: #107d8b !important;
}

.transcript-tab-top-search-arrows-right:focus {
    background-color: #107d8b !important;
}

.transcript-tab-top-search-arrows-left:active {
    background-color: inherit;
}

.transcript-tab-top-search-arrows-right:active {
    background-color: inherit;
}

.content-tab-top-search-arrows-left:focus {
    background-color: #107d8b !important;
}

.content-tab-top-search-arrows-left:focus {
    background-color: #107d8b !important;
}

.content-tab-top-search-arrows-left:active {
    background-color: inherit;
}

.content-tab-top-search-arrows-left:active {
    background-color: inherit;
}

.transcript-tab-bottom:focus {
    outline: solid #107d8b 3px;
}

.transcript-recenter:focus {
    background-color: #107d8b;
    outline: none;
}

.transcript-chapter-title:focus {
    background-color: #107d8b;
    outline: none;
}

.transcript-segment:focus {
    background-color: #107d8b;
    outline: none;
}

.segment-chap-div:focus {
    background-color: #107d8b;
}

.segment-chap-div:active {
    background-color: inherit;
}

.sr-only {
    position: absolute;
    left: -99999px;
}

.transcript-tab-top-search-button:focus {
    outline: solid 3px #107d8b;
}

.transcript-tab-top-search-count:focus {
    background-color: #107d8b;
}

.transcript-tab-top-search-count:active {
    background-color: inherit;
}

.transcript-top-search-div:focus {
    outline: solid 3px #107d8b;
}
/**** Accessible Highlighting ******/
.rollingHighlight::before, .rollingHighlight::after {
    content: " [highlight current position start] ";
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.rollingHighlight::after {
    content: " [highlight current position end] ";
}

.transcript-highlight::before, .transcript-highlight::after {
    content: " [highlight search start] ";
    clip-path: inset(100%);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
}

.transcript-highlight::after {
    content: " [highlight search end] ";
}

#play-button > img {
    margin-top: -6px;
}

#repeat-button > img {
    margin-top: -6px;
}

#fullscreen-button > img {
    margin-top: -5px;
}

.subscriptionanchor {
    text-decoration: none;
    outline: none;
    color: white;
    width: 115px;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

    .subscriptionanchor:focus {
        background-color: #107d8b;
        outline: none;
    }

    .subscriptionanchor:hover {
        background-color: #107d8b;
        outline: none;
    }

.subscription-control-button {
    width: 130px;
    height: 40px;
}



/*****  Images in Metaata *****/

.fieldset-image {
    max-width: 100%;
}


/**** Transcriptless View *****/

.video-container.transcriptless {
    width: unset;
    background-color: transparent;
    height: 100%;
    width: 100%;
}

.video-div.transcriptless {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
}

.media-container.transcriptless {
    display: block;
    width: 100%;
}



.container.transcriptless:not(.audio) {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    box-sizing: border-box;
    border: none !important;
}


.thumbWrapper.transcriptless {
    background-color: transparent;
    width: 100%;
    height: 100%;
}

.menu-container.transcriptless {
    margin-left: auto;
    margin-right: auto;
}

body.transcriptless {
    height: 100%;
    width: 100%;
}

html.transcriptless {
    height: 100%;
    width: 100%;
    margin: 0;
}


/***** Preroll Wrapper ****/
.preRollControlsWrapper {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .preRollControlsWrapper a {
        color: white;
        cursor: pointer;
        background-color: rgba(0,0,0,0.5);
        padding: 8px;
        margin-bottom: 8px;
        width: 88px;
    }

.preRollControlsWrapper-MAL {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 99%;
    height: 100%;
}

    .preRollControlsWrapper-MAL a {
        color: white;
        cursor: pointer;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

/***** Related Popover ****/

.relatedPopoverWrapper {
    position: absolute;
    left: 0;
    bottom: 15%;
    z-index: 200;
    width: 100%;
    background-color: rgba(51,51,51,0.75);
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .relatedPopoverWrapper .relatedPopoverItem {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: space-between;
        padding: 5px;
    }

        .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemImage {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }


            .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemImage > img {
                max-width: 8vw;
            }

                .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemImage > img:not(:hover) {
                    opacity: 0.5;
                }

        .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemContent {
            flex: 7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            padding: 8px;
            font-size: smaller;
        }

            .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemContent .relatedPopoverItemTitle, .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemContent .relatedPopoverItemDescription {
                text-align: left;
            }

        .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemTitle, .relatedPopoverWrapper .relatedPopoverItem .relatedPopoverItemTitle:visited {
            font-weight: bold;
            color: white;
        }


@media only screen and (max-width : 615px) and (min-height :225px) {

    .interface-video-title {
        /*white-space: nowrap;*/
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        /*width: calc(100%);*/
    }

    .menu_title_container {
        align-items:flex-start;
    }
    /* Azure Media Player Overrides */
    .vjs-text-track-display {
        height: calc(100% + 15px) !important;
    }


        .vjs-text-track-display div {
            margin-bottom: 1px !important;
        }

    .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    .vjs-text-track-display div div {
        font-size: 4vmin !important;
        line-height: 4.1vmin !important;
        padding: 3px !important;
        width: 100% !important;
    }


        .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }



    .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .explore-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: calc(100vw - 12px);
        height: calc(100vh - 9px);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .menu-normal {
        width: 80vw;
    }

    .menu-list {
        padding-left: 20px;
        padding-right: 5px;
        max-height: 15vh;
        overflow-y: scroll;
    }

    .menu-stack-row-left {
        width: 100%;
    }

    .menu-stack-row-right {
        width: 100%;
    }

    .menu-stack {
        display: flex;
        flex-direction: column;
    }

    .menu-large {
        max-width: 90vw;
        min-width: 80vw;
    }

    .menu {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    .menu_explore {
        background-color: rgba(51,51,51,0.75);
    }

    .menu_explore_left {
        background-color: rgba(51,51,51,0.75);
    }

    /* CMPL Styles */


    html {
    }

    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    .container {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        box-sizing: border-box;
    }



    /* Container contains the entire video container and tab container. */
    .media-container {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }

    .video-container {
        width: 100%;
        height: 100%;
        background-color: black;
        box-sizing: border-box;
        display: block;
    }

    /* This is the video container which contains the video tag */
    .video-div {
        background-color: black;
        width: 100%;
        height: 100%;
        position: relative;
    }



    /* This is the actual video tag */
    .CMPLVideo {
        width: 100% !important;
        height: 100% !important;
    }

    /* THis is the container holding the tab controls. */
    .tab-container {
        width: 100%;
        height: 100%;
        display: block;
    }

    .tab-content {
        width: 100%;
        height: calc(100% - 40px);
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 1%;
        box-sizing: border-box;
        position: relative;
    }

    .tabs {
        padding-left: 1%;
        height: 40px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .innerTabContainer {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        display: flex;
    }





    /* Transcript Tab */

    .transcript-tab {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .transcript-tab-top {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        height: 20px;
        padding-left: 1px;
        padding-right: 1px;
        white-space: nowrap;
        display: flex;
    }

    .transcript-tab-bottom {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        box-sizing: border-box;
        height: calc(100% - 30px);
        padding-right: 13px;
    }

        .transcript-tab-bottom.closed {
            height: calc(100%);
        }

    /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
        */

    /* Transcript Tab Top Autoscroll and Search */
    .transcript-tab-top-divider-left {
        text-align: left;
        box-sizing: border-box;
        display: flex;
        white-space: normal;
        vertical-align: top;
    }


    .transcript-tab-top-divider-right {
        text-align: right;
        box-sizing: border-box;
        display: flex;
        white-space: normal;
        vertical-align: top;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .transcript-tab-top-search-active {
        border-bottom: solid white 1px;
        display: flex;
        height: 18px;
        padding-bottom: 1px;
        box-sizing: border-box;
        width: 100%;
        max-width: 125px;
        margin-left: auto;
    }

    .transcript-tab-top-search-inactive {
        display: flex;
        height: 18px;
        padding-bottom: 1px;
        box-sizing: border-box;
        width: 100%;
        max-width: 125px;
        margin-left: auto;
    }

    .transcript-tab-top-search {
        display: flex;
        box-sizing: border-box;
        margin-top: auto;
        margin-bottom: auto;
        width: 100%;
        align-items:center;
    }

    .transcript-tab-top-search-input {
        background-color: white;
        width: 100%;
        padding-left: 3px;
        padding-top: 2px;
        border: solid #202020 1px;
    }






        .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #888888;
        }

        .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
            color: #888888;
        }


    .transcript-tab-top-search-button {
        color: white;
        cursor: pointer;
        display: block;
        height: 22px;
        margin-top: auto;
        margin-bottom: auto;
        background-color: white;
        padding-right: 3px;
        padding-left: 2px;
        border: solid 1px #202020;
    }

        .transcript-tab-top-search-button img {
            margin-top: 2px;
        }


    /* About Tab */

    .about-tab {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }


    .about-tab-bottom {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        box-sizing: border-box;
        height: calc(100% - 9px);
    }

    /* Gives sizing information for anchor icon on the screen */
    .icon-sizer {
        width: 100%;
        height: 100%;
        display: inline-block;
    }


    html.hover .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }


    /* Video Controls */
    .video-controls {
        height: 35px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
    }

    /* Video Controls Left are not available on mobile*/
    .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }

    .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }




    .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    .timejump-div {
        display: inline-table;
        height: 100%;
    }

    .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        .timejump-textbox input {
            width: 50px;
            display: none;
            color: #202020;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    .timejump-duration {
        width: 50px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: white;
    }

        .timejump-duration span {
            font-size: 12px;
            color: white;
        }


    /* Interface Controls */

    .video-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 30px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }


    .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        .interface-control-button.nopadding {
            padding-top: 2px;
        }

        .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }

    .interface-control-button-anchor {
        display: flex;
    }


    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */
    .bigButtonWrapper {
        position: absolute;
        left: 50%;
        z-index: 100;
        top: 50%;
        pointer-events: none;
    }



    .mobileOnly {
        display: block;
    }

    .mobileBorderBottom {
        border-bottom: solid black 2px;
    }

    /* Thumb Nail Wrapper */
    .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
    }

    .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
    }

    .thumb-wrapper-play {
        display: none;
    }


    /********** Tool tips *************/
    .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 0%;
        margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -24px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


    .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 0%;
        margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }


    /********  Transcript Tab Search stuf *********/
    .transcript-tab-top-search-count {
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
        white-space: nowrap;
    }


    @media only screen and (max-device-width : 400px) {

        .mobileNoShow {
            display: none;
        }

        .bigButtonWrapper {
            position: absolute;
            left: 50%;
            z-index: 100;
            top: 50%;
            pointer-events: none;
        }




        .notOnMobileSmall {
            display: none;
        }
    }

    .controlActualWhite {
        color: #EEEEEE;
    }

    /* Interface Controls Menu */
    .interface-controls-menu {
        flex-grow: 0.15;
        display: table;
        vertical-align: middle;
        color: white;
        height: 100%;
    }

    html.hover .interface-controls-menu:hover {
        background-color: #EEEEEE;
    }

    .interface-controls-menu.activeMenu {
        background-color: #EEEEEE;
    }


    .interface-controls-cell {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        text-align: center;
        padding-top: 6px;
    }

    .mobileFlexHigh {
        flex-grow: 1;
    }

    .mobileFlexLow {
        flex-grow: 0.5
    }

    .notOnMobile {
        display: none;
    }

    /******** Hidden Mobile Control Bar controls *******/

    .mobileNo {
        display: none;
    }

    /**** Thumnails *****/
    .thumbnails-image-div {
        width: 100%;
    }

    .thumbnails-image {
        width: 100%;
    }


    .thumbnails-thumbnail {
        width: 100%;
        margin: 5px;
    }


    .about-card {
        width: 100%;
        margin: 5px;
    }

    .about-card-full {
        width: 100%;
    }

    .explore-related-container {
        margin-top: 5px;
    }

    .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}

/** Very small mobile.  ****/
@media only screen and (max-width : 384px) and (min-height :225px) {
    /** Overrides for tiny view on controls ***/


    .menuRail {
        height: 25px;
    }

    .menu_title_container {
        height: 20px;
        width: 100%;
    }

    .menu_title_container {
        align-items: flex-start;
    }


    .interface-video-title {
        /*white-space: nowrap;*/
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        /*width: calc(100%);*/
    }

    .noTiny {
        display: none;
    }

    .video-control-layover {
        height: 37px;
    }

    .interface-languages {
        line-height: 17px;
    }

    #selected-transcript-toggle-span {
        font-size: 11px;
    }

    #selected-language-span {
        font-size: 11px;
    }

    #play-button > img {
        margin-top: -3px;
    }

    #fullscreen-button > img {
        margin-top: -4px;
        width: 24px;
        height: 24px;
    }

    #cc-button-container {
        padding: 0;
    }

        #cc-button-container img {
            height: 16px;
            width: 16px;
            margin-top: 3px;
        }

    #pause-button img {
        height: 14px;
        width: 14px;
    }

    .video-control-button-feather {
        width: 20px;
        padding: 0;
        padding-top: 2px;
        margin-left: 4px;
    }

        .video-control-button-feather svg {
            width: 20px;
            height: 20px;
        }

    .video-menu-select {
        font-size: 11px;
    }

    /*** Tiny mobile overrides ***/
    .video-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 4px;
        width: 20px;
        text-align: center;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 2px;
        margin-right: 2px;
        line-height: 17px;
    }

        .video-control-button img {
            width: 22px;
            height: 22px;
        }

    /* Video Controls */
    .video-controls {
        height: 25px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .menuWrapper {
        /*
        display: none !important;
        */
        display: block !important;
        height: 25px;
    }

    .menu_explore_container {
        display: none;
    }

    .menu_tools_container {
        display: none;
    }


    .interface-transcript {
        line-height: 17px;
    }

        .interface-transcript img {
            height: 25px;
            width: 71px;
        }
}

@media only screen and (min-width : 850px) and (min-height : 334px) {


    /* These classes handle the embed menu which specifically needs help */
    .menu-stack-row-left {
        width: 50%;
        margin-right: 2px;
    }

    .menu-stack-row-right {
        width: 50%;
        margin-left: 2px;
    }

    .menu-stack {
        display: flex;
    }

    .menu-large {
        max-width: 80vw;
        min-width: 50vw;
    }

    .menu {
        max-height: 39vw;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 50vw;
    }

    .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.85);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .explore-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.85);
        width: calc(100vw - 10px);
        height: calc(40.18vw);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .menu-normal {
        width: 50vw;
    }

    .menu-list {
        padding-left: 20px;
        padding-right: 5px;
        max-height: 12vw;
        overflow-y: scroll;
    }

    /****************************/

    /* Azure Media Player Overrides */
    .vjs-text-track-display {
        /*height: calc(40.18vw - 10px) !important;*/
        height: calc(100% + 15px) !important;
    }

        .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 45px !important;*/
    }

    .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 45px !important;*/
    }

    .vjs-text-track-display div div {
        font-size: 1.8vmax !important;
        line-height: 1.9vmax !important;
        padding: 3px !important;
        width: 100% !important;
    }


        .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }


    /* CMPL Styles */


    html {
        /*
        width: 100vw;
        height: calc(40.18vw);
        margin: 2px;
        */
    }

    body {
        /*
        width: 100vw;
        height: calc(40.18vw);
        margin: 0;
        position:relative;
        */
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    .container {
        /*
        width: calc(100vw - 10px);
        height: calc(40.18vw);
        border-radius: 3px;
        */
        width: 100%;
        height: 100%;
        border-radius: 3px;
        box-sizing: border-box;
    }



    /* Container contains the entire video container and tab container. */
    .media-container {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        flex-direction: row;
        flex-wrap: nowrap;
        box-sizing: border-box;
    }

    .video-container {
        height: 100%;
        background-color: black;
        flex: 0.69;
    }

    /* This is the video container which contains the video tag */
    .video-div {
        /*
        background-color: white;
        width: calc(71.43vw);
        height: 100%;
        position: relative;
        */
        background-color: black;
        width: 100%;
        height: 100%;
        position: relative;
    }



    /* This is the actual video tag */
    .CMPLVideo {
        /*
        width: calc(71.43vw) !important;
        height: 100% !important;
        */
        width: 100% !important;
        height: 100% !important;
    }

    .video-div.transcriptless .CMPLVideo {
        width: 100% !important;
        /*height: calc(100vh - 12px) !important;*/
    }

    /* THis is the container holding the tab controls. */
    .tab-container {
        /*width: calc(28.57vw - 2px);*/
        /*height: calc(40.18vw);*/
        height: 100%;
        flex: 0.31;
    }



    .tab-content {
        width: 100%;
        height: calc(100% - 40px);
        padding-left: 5%;
        padding-top: 3%;
        padding-bottom: 3%;
        box-sizing: border-box;
        position: relative;
    }

    .tabs {
        padding-left: 15px;
        padding-right: 20px;
        height: 40px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .innerTabContainer {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        display: flex;
    }





    /* Transcript Tab */

    .transcript-tab {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .transcript-tab-top {
        width: 100%;
        box-sizing: border-box;
        height: 20px;
        margin-bottom: 10px;
        padding-left: 1px;
        padding-right: 1px;
        white-space: nowrap;
        display: flex;
    }



    .transcript-tab-bottom {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        box-sizing: border-box;
        height: calc(100% - 30px);
        padding-right: 13px;
    }

        .transcript-tab-bottom.closed {
            height: calc(100%);
        }

    /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
        */

    /* Transcript Tab Top Autoscroll and Search */
    .transcript-tab-top-divider-left {
        text-align: left;
        box-sizing: border-box;
        display: flex;
        white-space: normal;
        vertical-align: top;
    }

    .transcript-tab-top-divider-right {
        text-align: right;
        box-sizing: border-box;
        display: flex;
        white-space: normal;
        vertical-align: top;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .transcript-tab-top-search-active {
        border-bottom: solid white 1px;
        display: flex;
        height: 18px;
        padding-bottom: 1px;
        box-sizing: border-box;
        width: 100%;
        max-width: 125px;
        margin-left: auto;
        cursor: pointer;
    }

    .transcript-tab-top-search-inactive {
        display: flex;
        height: 18px;
        padding-bottom: 1px;
        box-sizing: border-box;
        width: 100%;
        max-width: 125px;
        margin-left: auto;
        cursor: pointer;
    }

    .transcript-tab-top-search {
        display: flex;
        box-sizing: border-box;
        margin-top: auto;
        margin-bottom: auto;
        width: 100%;
        align-items:center;
    }

    .transcript-tab-top-search-input {
        background-color: white;
        width: 100%;
        margin-right: 1px;
        padding-left: 3px;
        padding-top: 2px;
        border: solid #202020 1px;
    }




        .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #888888;
        }

        .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
            color: #888888;
        }

    .transcript-tab-top-search-button {
        color: #EEEEEE;
        cursor: pointer;
        display: block;
        height: 22px;
        margin-top: auto;
        margin-bottom: auto;
        background-color: white;
        padding-right: 3px;
        padding-left: 2px;
    }

        .transcript-tab-top-search-button img {
            margin-top: 2px;
        }


    /* About Tab */

    .about-tab {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .about-tab-bottom {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        box-sizing: border-box;
        height: calc(100% - 9px);
        padding-right: 5px;
    }


    /* Gives sizing information for anchor icon on the screen */
    .icon-sizer {
        width: 100%;
        height: 100%;
        display: inline-block;
    }


    html.hover .icon-sizer:hover {
        border-radius: 5px;
        background-color: white;
    }




    /* Video Controls */
    .video-controls {
        height: 35px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }


    .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }



    .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    .timejump-div {
        display: inline-table;
        height: 100%;
    }

    .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        .timejump-textbox input {
            width: 50px;
            display: none;
            color: #202020;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        .timejump-textbox div {
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    .timejump-duration {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        color: white;
    }

        .timejump-duration span {
            color: white;
        }


    /* Interface Controls */



    .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        .interface-control-button.nopadding {
            padding-top: 2px;
        }

        .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }


    /* Thumb Nail Wrapper */
    .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        /*width: calc(71.43vw);*/
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
    }

    .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        /*width: calc(71.43vw);*/
        width: 100%;
        height: calc(40.18vw);
        background-color: black;
        cursor: pointer;
    }

    .video-div.transcriptless .thumbWrapper {
        width: calc(100%);
        height: 100%;
        box-sizing: border-box;
    }

    .video-div.transcriptless .clickButtonWrapper {
        width: calc(100%);
        height: 100%;
        box-sizing: border-box;
    }

    .video-div.transcriptless .menuWrapper {
        width: calc(100%);
    }

    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */

    .bigButtonWrapper {
        display: none;
    }

    .interface-controls-menu {
        display: none;
    }

    .mobileOnly {
        display: none;
    }

    /********** Tool tips *************/
    .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        top: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


    /********  Transcript Tab Search stuf *********/
    .transcript-tab-top-search-count {
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
        white-space: nowrap;
    }

    /**** Thumnails *****/
    .thumbnails-image-div {
        height: calc(23vw * 0.5625);
    }

    .thumbnails-image {
        height: calc(23vw * 0.5625);
    }


    .thumbnails-thumbnail {
        width: 23vw;
        margin: 5px;
        cursor: pointer;
    }


    .about-card {
        width: 98vw;
        margin: 5px;
    }

    .about-card-full {
        width: 98vw;
        margin: 5px;
    }

    .explore-related-container {
        margin-top: 5px;
    }

    .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}

/*
@media only screen and (max-width : 849px) and (min-width : 570px) and (min-height : 779px) {
*/
@media only screen and (max-width : 850px) and (min-width : 615px) and (min-height : 225px) {
    /* These classes handle the embed menu which specifically needs help */
    .menu-stack-row-left {
        width: 100%;
    }

    .menu-stack-row-right {
        width: 100%;
    }

    .menu-stack {
        display: flex;
        flex-direction: column;
    }

    .menu-large {
        max-width: 90vw;
        min-width: 80vw;
    }

    .menu {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .explore-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: calc(100vw - 12px);
        height: calc(100vh - 9px);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    .menu-normal {
        width: 80vw;
    }

    .menu-list {
        padding-left: 20px;
        padding-right: 5px;
        max-height: 70vw;
        overflow-y: scroll;
    }

    /* Azure Media Player Overrides */
    /* Azure Media Player Overrides */
    .vjs-text-track-display {
        height: calc(100% + 15px) !important;
    }


        .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 40px !important;*/
    }

    .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 40px !important;*/
    }

    .vjs-text-track-display div div {
        font-size: 3vmax !important;
        line-height: 3.1vmax !important;
        padding: 3px !important;
        width: 100% !important;
    }


        .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }





    /* CMPL Styles */

    html {
    }

    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    .container {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        box-sizing: border-box;
    }



    /* Container contains the entire video container and tab container. */
    .media-container {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }

    .video-container {
        width: 100%;
        height: 100%;
        background-color: black;
        display: block;
    }

    /* This is the video container which contains the video tag */
    .video-div {
        background-color: black;
        width: 100%;
        height: 100%;
        position: relative;
    }


    /* This is the actual video tag */
    .CMPLVideo {
        width: 100% !important;
        height: 100% !important;
    }

    /* THis is the container holding the tab controls. */
    .tab-container {
        width: 100%;
        height: 100%;
        display: block;
    }

    .tab-content {
        width: 100%;
        height: calc(100% - 40px);
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 1%;
        box-sizing: border-box;
        position: relative;
    }

    .tabs {
        padding-left: 1%;
        height: 40px;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .innerTabContainer {
        box-sizing: border-box;
        height: 100%;
        width: 100%;
        display: flex;
    }





    /* Transcript Tab */

    .transcript-tab {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    .transcript-tab-top {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        height: 20px;
        padding-left: 1px;
        padding-right: 1px;
        white-space: nowrap;
        display: flex;
    }

    .transcript-tab-bottom {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        box-sizing: border-box;
        height: calc(100% - 30px);
        padding-right: 13px;
    }

        .transcript-tab-bottom.closed {
            height: calc(100%);
        }

    /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
    */

    /* Transcript Tab Top Autoscroll and Search */
    .transcript-tab-top-divider-left {
        text-align: left;
        box-sizing: border-box;
        display: flex;
        white-space: normal;
        vertical-align: top;
    }


    .transcript-tab-top-divider-right {
        text-align: right;
        box-sizing: border-box;
        display: flex;
        white-space: normal;
        vertical-align: top;
        justify-content: center;
        align-items: center;
        margin-left: auto;
    }

    .transcript-tab-top-search-active {
        display: flex;
        height: 18px;
        padding-bottom: 1px;
        box-sizing: border-box;
        width: 100%;
        max-width: 125px;
        margin-left: auto;
    }

    .transcript-tab-top-search-inactive {
        display: flex;
        height: 18px;
        padding-bottom: 1px;
        box-sizing: border-box;
        width: 100%;
        max-width: 125px;
        margin-left: auto;
    }

    .transcript-tab-top-search {
        display: flex;
        box-sizing: border-box;
        margin-left: auto;
        margin-top: auto;
        margin-bottom: auto;
        align-items:center;
    }

    .transcript-tab-top-search-input {
        background-color: white;
        padding-left: 10px;
        padding-top: 2px;
        border: solid #202020 1px;
    }






        .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
            color: #888888;
        }

        .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
            color: #B8B8B8;
        }

    .transcript-tab-top-search-button {
        color: white;
        cursor: pointer;
        display: block;
        height: 22px;
        margin-top: auto;
        margin-bottom: auto;
        background-color: white;
        padding-right: 3px;
        padding-left: 2px;
        border: solid 1px #202020;
    }

        .transcript-tab-top-search-button img {
            margin-top: 2px;
        }

    /* About Tab */

    .about-tab {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }


    .about-tab-bottom {
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        box-sizing: border-box;
        height: calc(100% - 9px);
    }

    /* Gives sizing information for anchor icon on the screen */
    .icon-sizer {
        width: 100%;
        height: 100%;
        display: inline-block;
    }

    html.hover .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }



    /* Video Controls */
    .video-controls {
        height: 35px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }

    .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }




    .iconimage img {
        width: 27px;
    }


    /* Time jump Controls */
    .timejump-div {
        display: inline-table;
        height: 100%;
    }

    .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        .timejump-textbox input {
            width: 50px;
            display: none;
            color: black;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    .timejump-duration {
        width: 50px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: white;
    }

        .timejump-duration span {
            font-size: 12px;
            color: white;
        }


    /* Interface Controls */


    .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        .interface-control-button.nopadding {
            padding-top: 2px;
        }

        .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }





    /* Thumb Nail Wrapper */
    .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
    }

    .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
    }

    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */

    .bigButtonWrapper {
        display: none;
    }

    .interface-controls-menu {
        display: none;
    }


    .mobileOnly {
        display: none;
    }

    .portraitNo {
        display: none;
    }


    /********** Tool tips *************/
    .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 0%;
        margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


    .tooltip .tooltiptext-bottom {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -65px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    tooltip .tooltiptext-bottom-left {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -65px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }

    /********  Transcript Tab Search stuf *********/
    .transcript-tab-top-search-count {
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
        white-space: nowrap;
    }



    /**** Thumnails *****/
    .thumbnails-image-div {
        height: calc(42vw * 0.5625);
    }

    .thumbnails-image {
        height: calc(42vw * 0.5625);
    }


    .thumbnails-thumbnail {
        width: 42vw;
        margin: 5px;
        cursor: pointer;
    }

    .about-card {
        width: 98vw;
        margin: 5px;
    }

    .about-card-full {
        width: 98vw;
        margin: 5px;
    }

    .explore-related-container {
        margin-top: 5px;
    }

    .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}

/*,
    only screen and (min-width : 570px) and (max-width: 849px) and (max-height : 420px)*/

@media only screen and (max-width : 384px) and (max-height: 225px), 
    only screen and (max-width : 849px) and (max-height : 225px)
{

    /** Overrides for tiny view on controls ***/
    .menu_explore_container {
        display: none;
    }

    .menu_tools_container {
        display: none;
    }

    .menuRail {
        height: 20px;
    }

    .menu_title_container {
        height: 20px;
        width: 100%;
    }

    .interface-video-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100%);
    }

    .noTiny {
        display: none;
    }

    .video-control-layover {
        height: 37px;
    }

    .interface-languages {
        line-height: 17px;
    }

    .interface-transcript {
        line-height: 17px;
    }

        .interface-transcript img {
            height: 25px;
            width: 71px;
        }

    #selected-transcript-toggle-span {
        font-size: 11px;
    }

    #selected-language-span {
        font-size: 11px;
    }

    #play-button > img {
        margin-top: -3px;
    }

    #fullscreen-button > img {
        margin-top: -4px;
        width: 24px;
        height: 24px;
    }

    #cc-button-container {
        padding: 0;
    }

        #cc-button-container img {
            height: 16px;
            width: 16px;
            margin-top: 3px;
        }

    #pause-button img {
        height: 14px;
        width: 14px;
    }

    .video-control-button-feather {
        width: 20px;
        padding: 0;
        padding-top: 2px;
        margin-left: 4px;
        margin-right:4px;
    }

        .video-control-button-feather svg {
            width: 20px;
            height: 20px;
        }

    .video-menu-select {
        font-size: 11px;
    }
    /***************/
    .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .menuWrapper {
        /*
        display: none !important;
        */
        display: block !important;
        height: 25px;
    }

    .menu-large {
        max-width: 80vw;
        min-width: 50vw;
    }

    .menu {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    .menu-stack-row-left {
        width: 50%;
        margin-right: 2px;
    }

    .menu-stack-row-right {
        width: 50%;
        margin-left: 2px;
    }

    .menu-stack {
        display: flex;
    }

    .menu-normal {
        width: 50vw;
    }


    .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 50vw;
    }


    /*
    .video-div.transcriptless .menuWrapper {
        display: block !important;
    }
    */


    /****************************/

    /* Azure Media Player Overrides */
    /* Azure Media Player Overrides */
    .vjs-text-track-display {
        height: calc(100% + 15px) !important;
    }

        .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    .vjs-text-track-display div div {
        font-size: 4vmax !important;
        line-height: 4.1vmax !important;
        padding: 3px !important;
        width: 100% !important;
    }


        .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }



    /* CMPL Styles */


    html {
    }

    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        position: relative;
    }

    .container {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        box-sizing: border-box;
        border: none !important;
    }



    /* Container contains the entire video container and tab container. */
    .media-container {
        width: 100%;
        height: 100%;
        position: relative;
        box-sizing: border-box;
    }

    .video-container {
        width: 100%;
        margin-top: auto;
        margin-bottom: auto;
        background-color: black;
        display: block;
    }

    /* This is the video container which contains the video tag */
    .video-div {
        background-color: black;
        width: 100%;
        height: 100%;
        position: relative;
    }




    /* This is the actual video tag */
    .CMPLVideo {
        width: 100% !important;
        height: 100% !important;
    }

    /*
    .video-div.transcriptless .CMPLVideo {
        width:100%;
        height:100%;

    }
    */

    .tab-container {
        display: none !important;
    }

    .interface-control {
        display: none !important;
    }



    /* Gives sizing information for anchor icon on the screen */
    .icon-sizer {
        width: 100%;
        height: 100%;
        display: inline-block;
    }


    html.hover .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }


    /* Video Controls */
    .video-controls {
        height: 25px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }


    .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }

    .video-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 4px;
        width: 20px;
        text-align: center;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 2px;
        margin-right: 2px;
        line-height: 17px;
    }

        .video-control-button:not(.no-smaller) img {
            width: 22px;
            height: 22px;
        }

        .video-control-button.lesspadding {
            padding-top: 6px;
            padding-bottom: 6px;
        }

        .video-control-button.noborder {
            border: 0;
        }

        .video-control-button.right {
        }

        .video-control-button a {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

    .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    .timejump-div {
        display: inline-table;
        height: 100%;
    }

    .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        .timejump-textbox input {
            width: 50px;
            display: none;
            color: black;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }




    /* Interface Controls */

    .interface-control {
        height: 40px;
        width: 100%;
        box-sizing: border-box;
    }

    .interface-controls {
        height: 40px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    .interface-controls-left {
        flex-grow: 1;
        display: flex;
    }

    .interface-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }




    .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        .interface-control-button.nopadding {
            padding-top: 2px;
        }

        .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }


    /* Thumb Nail Wrapper */
    .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
        box-sizing: border-box;
    }

    .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: 100%;
        background-color: black;
        cursor: pointer;
        box-sizing: border-box;
    }

    /*
    .video-div.transcriptless .thumbWrapper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        
    }
    */
    .thumb-wrapper-play {
        display: none;
    }


    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */

    .bigButtonWrapper {
        position: absolute;
        left: 50%;
        z-index: 100;
        top: 50%;
        pointer-events: none;
    }






    .interface-controls-menu {
        display: none;
    }

    .mobileFlexHigh {
        flex-grow: 1;
    }

    .mobileFlexLow {
        flex-grow: 0.5
    }

    .notOnMobile {
        display: none;
    }

    /******** Hidden Mobile Control Bar controls *******/

    .mobileNo {
        display: none;
    }

    .notOnInvalid {
        display: none;
    }

    /********** Tool tips *************/
    .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -85px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: white;
        color: black;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: white;
        color: black;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        top: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: white;
        color: black;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 180px;
        top: 100%;
        left: 0%;
        margin-left: -140px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: white;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }

    /********  Transcript Tab Search stuf *********/
    .transcript-tab-top-search-count {
        color: white;
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
    }

    /**** Thumnails *****/
    .thumbnails-image-div {
        width: 100%;
    }

    .thumbnails-image {
        width: 100%;
    }


    .thumbnails-thumbnail {
        width: 100%;
        margin: 5px;
    }


    .about-card {
        width: 100%;
        margin: 5px;
    }

    .about-card-full {
        width: 100%;
    }

    .explore-related-container {
        margin-top: 5px;
    }

    .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}

@media all {

    html.videoonly .menuWrapper {
        display: none !important;
    }
    /****************************/
    /* Azure Media Player Overrides */
    html.videoonly .vjs-text-track-display {
        height: calc(97vh - 45px) !important;
    }

        html.videoonly .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    html.videoonly .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        bottom: 0px !important;
    }

    html.videoonly .amp-default-skin .vjs-text-track-display > div > div {
        bottom: 0px !important;
        width: 100% !important;
    }

    html.videoonly .vjs-text-track-display div div {
        font-size: 3.2vmin !important;
        line-height: 3.5vmin !important;
        padding: 3px !important;
    }


        html.videoonly .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            html.videoonly .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }


    /* CMPL Styles */
    html.videoonly .video-js.vjs-fluid, html.videoonly .video-js.vjs-16-9, html.videoonly .video-js.vjs-4-3 {
        height:100% !important;
    }

    html.videoonly {
        width: 100vw;
        height: 100vh;
        margin: 0;
    }

        html.videoonly body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            position: fixed;
        }

        html.videoonly .container {
            width: 100vw;
            height: 100vh;
            background-color: rgba(0,0,0,0.5);
            border: none !important;
        }

        /* Container contains the entire video container and tab container. */
        html.videoonly .media-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
        }

        html.videoonly .video-container {
            width: 100vw;
            height: 100vh;
            background-color: black;
            border: none;
        }

        /* This is the video container which contains the video tag */
        html.videoonly .video-div {
            background-color: black;
            width: 100vw !important;
            position: relative;
            height: 100vh !important;
        }

        html.videoonly .video-control-layover {
            width: 100%;
            background-color: rgba(51,51,51,0.75);
            position: absolute;
            z-index: 199;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
        }

        /* This is the actual video tag */
        html.videoonly .CMPLVideo {
            width: 100vw !important;
            height: 100vh !important;
        }


        html.videoonly .tab-container {
            display: none;
        }

        html.videoonly .interface-control {
            display: none;
        }




        /* Gives sizing information for anchor icon on the screen */
        html.videoonly .icon-sizer {
            width: 100%;
            height: 100%;
            display: inline-block;
        }


    html.hover.videoonly .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }


    /* Video Controls */
    html.videoonly .video-controls {
        height: 35px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    html.videoonly .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }


    html.videoonly .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }



    html.videoonly .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    html.videoonly .timejump-div {
        display: inline-table;
        height: 100%;
    }

    html.videoonly .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        html.videoonly .timejump-textbox input {
            width: 50px;
            display: none;
            color: black;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        html.videoonly .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    html.videoonly .timejump-duration {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
        color: white;
    }

        html.videoonly .timejump-duration span {
            color: white;
        }


    /* Interface Controls */



    html.videoonly .interface-video-title {
        vertical-align: middle;
        font-weight: 700;
    }




    html.videoonly .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        width: 33px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        html.videoonly .interface-control-button.nopadding {
            padding-top: 2px;
        }

        html.videoonly .interface-control-button a {
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

    html.videoonly .interface-control-button-label {
        display: none;
    }
    /* Thumb Nail Wrapper */
    html.videoonly .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        pointer-events: none;
        width: 100vw;
        top: 50%;
        /* bring your own prefixes */
        transform: translate(0%, -50%);
        background-color: black;
        cursor: pointer;
    }


    html.videoonly .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        pointer-events: none;
        width: 100vw;
        top: 50%;
        /* bring your own prefixes */
        transform: translate(0%, -50%);
        background-color: black;
        cursor: pointer;
    }


    html.videoonly .interface-controls-menu {
        display: none;
    }


    /********** Tool tips *************/
    html.videoonly .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -85px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.videoonly .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.videoonly .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        top: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.videoonly .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.videoonly .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -145px
    }


    /********  Transcript Tab Search stuf *********/
    html.videoonly .transcript-tab-top-search-count {
        color: white;
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
    }


    /************ Full Screen Button Interchages *******/

    html.videoonly #full-screen-video-only {
        display: block;
    }


    /*** OVerrides for mobile view ****/
    html.videoonly .video-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
        width: 30px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
        line-height:initial;
    }

    html.videoonly #fullscreen-button > img {
        margin-top: -5px;
        width: 29px;
        height: 29px;
    }

    html.videoonly #cc-button-container img {
        height: 20px;
        width: 20px;
        margin-top: 0px;
    }

    html.videoonly #cc-button-container {
        padding-top:8px;
        padding-bottom:8px;
    }

    html.videoonly #play-button > img {
        width:30px;
        height:30px;
    }

    html.videoonly .video-control-button-feather {
        vertical-align: top;
        height: 100%;
        padding-top: 5px;
        padding-bottom: 8px;
        width: 33px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
        color: white;
        border-radius: 3px;
    }

        html.videoonly .video-control-button-feather svg {
            width: initial;
            height: initial;
        }
  
}

@media only screen and (max-width : 349px) {
    html.videoonly .noTiny {
        display: none !important;
    }

    html.videoonly .mobileNo {
        display: none !important;
    }
}
@media only screen and (max-width : 615px) and (min-height :225px) {

    /* Azure Media Player Overrides */
    html.fullscreen .vjs-text-track-display {
        height: 56vw !important;
        bottom: 5px !important;
    }

        html.fullscreen .vjs-text-track-display div {
            margin-bottom: 0 !important;
            bottom: 5px !important;
        }

    html.fullscreen .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /* bottom: 0px !important; */
    }

    html.fullscreen .amp-default-skin .vjs-text-track-display > div > div {
        /* bottom: 0px !important; */
    }

    html.fullscreen .vjs-text-track-display div div {
        font-size: 4vmin !important;
        line-height: 4.1vmin !important;
        padding: 3px !important;
        width: 100% !important;
    }


        html.fullscreen .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            html.fullscreen .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }



    html.fullscreen .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html.fullscreen .explore-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: calc(100vw - 12px);
        height: calc(100vh - 9px);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    html.fullscreen .menu-stack-row-left {
        width: 100%;
    }

    html.fullscreen .menu-stack-row-right {
        width: 100%;
    }

    html.fullscreen .menu-stack {
        display: flex;
        flex-direction: column;
    }

    html.fullscreen .menu-large {
        width: 90vw;
    }

    html.fullscreen .menu {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    html.fullscreen .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    html.fullscreen .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    html.fullscreen .menu-normal {
        width: 80vw;
    }

    html.fullscreen .menu-list {
        padding-left: 20px;
        padding-right: 5px;
        max-height: 15vh;
        overflow-y: scroll;
    }

    html.fullscreen .menu_explore {
        background-color: rgba(32,32,32,0.95);
    }

    html.fullscreen .menu_explore_left {
        background-color: rgba(32,32,32,0.95);
    }

    /* CMPL Styles */


    html.fullscreen {
        background-color: black !important;
    }

        html.fullscreen body {
            width: 100vw;
            height: calc(100vh);
            margin: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        html.fullscreen .container {
            width: 100%;
            height: 100%;
            border-radius: 3px;
            box-sizing: border-box;
        }


        /* Container contains the entire video container and tab container. */
        html.fullscreen .media-container {
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
        }



        html.fullscreen .video-container {
            width: 100%;
            height: 100%;
            background-color: black;
            display: block;
        }

        /* This is the video container which contains the video tag */
        html.fullscreen .video-div {
            background-color: black;
            width: 100%;
            height: 100%;
            position: relative;
        }



        /* This is the actual video tag */
        html.fullscreen .CMPLVideo {
            width: 100% !important;
            height: 100% !important;
        }

        /* THis is the container holding the tab controls. */
        html.fullscreen .tab-container {
            width: 100%;
            height: 100%;
            display: block;
        }

        html.fullscreen .tab-content {
            width: 100%;
            height: calc(100% - 40px);
            padding-top: 1%;
            padding-bottom: 1%;
            padding-left: 1%;
            box-sizing: border-box;
            position: relative;
        }

        html.fullscreen .tabs {
            padding-left: 1%;
            height: 40px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
        }

        html.fullscreen .innerTabContainer {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            display: flex;
        }




        /* Transcript Tab */

        html.fullscreen .transcript-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .transcript-tab-top {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
            height: 20px;
            padding-left: 1px;
            padding-right: 1px;
            white-space: nowrap;
            display: flex;
        }

        html.fullscreen .transcript-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 30px);
            padding-right: 13px;
        }


            html.fullscreen .transcript-tab-bottom.closed {
                height: calc(100%);
            }
        /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
        */

        /* Transcript Tab Top Autoscroll and Search */
        html.fullscreen .transcript-tab-top-divider-left {
            text-align: left;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
        }


        html.fullscreen .transcript-tab-top-divider-right {
            text-align: right;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search-active {
            border-bottom: solid white 1px;
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search-inactive {
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search {
            display: flex;
            box-sizing: border-box;
            width: 100%;
            margin-top: auto;
            margin-bottom: auto;
            align-items: center;
        }

        html.fullscreen .transcript-tab-top-search-input {
            background-color: white;
            width: 100%;
            padding-left: 3px;
            padding-top: 2px;
            border: solid 1px #202020;
        }



            html.fullscreen .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #888888;
            }

            html.fullscreen .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
                color: #888888;
            }


        html.fullscreen .transcript-tab-top-search-button {
            color: white;
            cursor: pointer;
            display: block;
            height: 22px;
            margin-top: auto;
            margin-bottom: auto;
            background-color: white;
            padding-right: 3px;
            padding-left: 2px;
            border: solid 1px #202020;
        }

            html.fullscreen .transcript-tab-top-search-button img {
                margin-top: 2px;
            }


        /* About Tab */

        html.fullscreen .about-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }


        html.fullscreen .about-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 9px);
        }

        /* Gives sizing information for anchor icon on the screen */
        html.fullscreen .icon-sizer {
            width: 100%;
            height: 100%;
            display: inline-block;
        }


    html.hover.fullscreen .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }


    /* Video Controls */
    html.fullscreen .video-controls {
        height: 35px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
    }

    /* Video Controls Left are not available on mobile*/
    html.fullscreen .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }

    html.fullscreen .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }



    html.fullscreen .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    html.fullscreen .timejump-div {
        display: inline-table;
        height: 100%;
    }

    html.fullscreen .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        html.fullscreen .timejump-textbox input {
            width: 50px;
            display: none;
            color: #202020;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        html.fullscreen .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    html.fullscreen .timejump-duration {
        width: 50px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: white;
    }

        html.fullscreen .timejump-duration span {
            font-size: 12px;
            color: white;
        }


    /* Interface Controls */



    html.fullscreen .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        html.fullscreen .interface-control-button.nopadding {
            padding-top: 2px;
        }

        html.fullscreen .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }

    html.fullscreen .interface-control-button-anchor {
        display: flex;
    }



    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */
    html.fullscreen .bigButtonWrapper {
        position: absolute;
        left: 50%;
        z-index: 100;
        top: 50%;
        pointer-events: none;
    }



    html.fullscreen .bigButtons {
        position: relative;
        transform: translate(-50%, -50%);
        display: table;
        border-radius: 5px;
        background: rgba(32, 32, 32, 0.6);
        width: 40px;
        height: 27px;
        cursor: pointer;
        pointer-events: all;
    }



        html.fullscreen .bigButtons img {
            position: absolute;
            top: 0;
            left: 5px;
        }


    html.fullscreen .mobileOnly {
        display: block;
    }

    html.fullscreen .mobileBorderBottom {
        border-bottom: solid black 2px;
    }

    /* Thumb Nail Wrapper */
    html.fullscreen .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: calc(56vw - 4px);
        background-color: black;
        cursor: pointer;
    }

    html.fullscreen .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: calc(56vw - 4px);
        background-color: black;
        cursor: pointer;
    }

    html.fullscreen .thumb-wrapper-play {
        display: none;
    }


    /********** Tool tips *************/
    html.fullscreen .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 0%;
        margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-bottom {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 50%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: black;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 3px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -24px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


    html.fullscreen .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 0%;
        margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }


    /********  Transcript Tab Search stuf *********/
    html.fullscreen .transcript-tab-top-search-count {
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
        white-space: nowrap;
    }


    @media only screen and (max-device-width : 400px) {

        html.fullscreen .mobileNoShow {
            display: none;
        }

        html.fullscreen .bigButtonWrapper {
            position: absolute;
            left: 50%;
            z-index: 100;
            top: 50%;
            pointer-events: none;
        }

        html.fullscreen .bigButtons {
            position: relative;
            transform: translate(-50%,-50%);
            display: table;
            border-radius: 5px;
            background: rgba(24, 24, 24, 0.7);
            padding-top: 5px;
        }

        html.fullscreen .notOnMobileSmall {
            display: none;
        }
    }

    html.fullscreen .bigButton {
        display: table-cell;
        vertical-align: middle;
    }

    html.fullscreen .controlActualWhite {
        color: #EEEEEE;
    }

    /* Interface Controls Menu */
    html.fullscreen .interface-controls-menu {
        flex-grow: 0.15;
        display: table;
        vertical-align: middle;
        height: 100%;
    }



    html.fullscreen .interface-controls-cell {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
        text-align: center;
        padding-top: 6px;
    }

    html.fullscreen .mobileFlexHigh {
        flex-grow: 1;
    }

    html.fullscreen .mobileFlexLow {
        flex-grow: 0.5
    }

    html.fullscreen .notOnMobile {
        display: none;
    }

    /******** Hidden Mobile Control Bar controls *******/

    html.fullscreen .mobileNo {
        display: none;
    }


    /************ Full Screen Button Interchages *******/


    html.fullscreen #full-screen-video-only {
        display: block;
    }


    /**** Thumnails *****/
    html.fullscreen .thumbnails-image-div {
        width: 100%;
    }

    html.fullscreen .thumbnails-image {
        width: 100%;
    }


    html.fullscreen .thumbnails-thumbnail {
        width: 100%;
        margin: 5px;
    }

    html.fullscreen .about-card {
        width: 100%;
        margin: 5px;
    }


    html.fullscreen .about-card-full {
        width: 100%;
        margin: 5px;
    }


    html.fullscreen .explore-related-container {
        margin-top: 5px;
    }

    html.fullscreen .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}


/** Very small mobile.  ****/
@media only screen and (max-width : 384px) and (min-height :225px) {
    /** Overrides for tiny view on controls ***/


    html.fullscreen .menuRail {
        height: 25px;
    }

    html.fullscreen .menu_title_container {
        height: 20px;
        width: 100%;
    }

    html.fullscreen .menu_title_container {
        align-items: flex-start;
    }


    html.fullscreen .interface-video-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100%);
    }

    html.fullscreen .noTiny {
        display: none;
    }

    html.fullscreen .video-control-layover {
        height: 37px;
    }

    html.fullscreen .interface-languages {
        line-height: 17px;
    }

    html.fullscreen #selected-transcript-toggle-span {
        font-size: 11px;
    }

    html.fullscreen #selected-language-span {
        font-size: 11px;
    }

    html.fullscreen #play-button > img {
        margin-top: -3px;
    }

    html.fullscreen #fullscreen-button > img {
        margin-top: -4px;
        width: 24px;
        height: 24px;
    }

    html.fullscreen #cc-button-container {
        padding: 0;
    }

        html.fullscreen #cc-button-container img {
            height: 16px;
            width: 16px;
            margin-top: 3px;
        }

    html.fullscreen #pause-button img {
        height: 14px;
        width: 14px;
    }

    html.fullscreen .video-control-button-feather {
        width: 20px;
        padding: 0;
        padding-top: 2px;
        margin-left: 4px;
    }

        html.fullscreen .video-control-button-feather svg {
            width: 20px;
            height: 20px;
        }

    html.fullscreen .video-menu-select {
        font-size: 11px;
    }

    /*** Tiny mobile overrides ***/
    html.fullscreen .video-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 4px;
        width: 20px;
        text-align: center;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 2px;
        margin-right: 2px;
        line-height: 17px;
    }

        html.fullscreen .video-control-button img {
            width: 22px;
            height: 22px;
        }

    /* Video Controls */
    html.fullscreen .video-controls {
        height: 25px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    html.fullscreen .menuWrapper {
        /*
        display: none !important;
        */
        display: block !important;
        height: 25px;
    }

    html.fullscreen .menu_explore_container {
        display: none;
    }

    html.fullscreen .menu_tools_container {
        display: none;
    }


    html.fullscreen .interface-transcript {
        line-height: 17px;
    }

        html.fullscreen .interface-transcript img {
            height: 25px;
            width: 71px;
        }
}

@media all and (min-width : 850px) and (min-height : 334px) {


    /* These classes handle the embed menu which specifically needs help */
    html.fullscreen .menu-stack-row-left {
        width: 50%;
        margin-right: 2px;
    }

    html.fullscreen .menu-stack-row-right {
        width: 50%;
        margin-left: 2px;
    }

    html.fullscreen .menu-stack {
        display: flex;
    }

    html.fullscreen .menu-large {
        max-width: 80vw;
        min-width: 50vw
    }

    html.fullscreen .menu {
        max-height: 39vw;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }



    html.fullscreen .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    html.fullscreen .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 50vw;
    }

    html.fullscreen .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html.fullscreen .explore-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.85);
        width: calc(100vw - 10px);
        height: calc(40.18vw);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    html.fullscreen .menu-normal {
        width: 50vw;
    }

    html.fullscreen .menu-list {
        padding-left: 20px;
        padding-right: 5px;
        max-height: 12vw;
        overflow-y: scroll;
    }



    /****************************/

    /* Azure Media Player Overrides */
    html.fullscreen .vjs-text-track-display {
        height: calc(40.18vw - 10px) !important;
    }

        html.fullscreen .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    html.fullscreen .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
        width: 100% !important;
    }

    html.fullscreen .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    html.fullscreen .vjs-text-track-display div div {
        font-size: 1.8vmax !important;
        line-height: 1.9vmax !important;
        padding: 3px !important;
    }


        html.fullscreen .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            html.fullscreen .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }


    /* CMPL Styles */


    html.fullscreen {
        background-color: black;
    }


        html.fullscreen body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        html.fullscreen .container {
            width: 100vw;
            height: 39.4vw;
            border-radius: 3px;
            box-sizing: border-box;
        }


        /* Container contains the entire video container and tab container. */
        html.fullscreen .media-container {
            width: 100%;
            height: 100%;
            display: flex;
            position: relative;
            flex-direction: row;
            flex-wrap: nowrap;
            box-sizing: border-box;
        }

        html.fullscreen .video-container {
            height: 100%;
            background-color: black;
            flex: 0.7;
        }

        /* This is the video container which contains the video tag */
        html.fullscreen .video-div {
            background-color: black;
            width: 100%;
            height: 100%;
            position: relative;
        }

        html.fullscreen .video-control-layover {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 198;
            height: 50px;
            /*background-image: linear-gradient(to top, rgba(32,32,32,0.7) 40%, rgba(32,32,32,0));*/
            background-color: rgba(32,32,32,0.6);
        }

        /* This is the actual video tag */
        html.fullscreen .CMPLVideo {
            width: 100% !important;
            height: 100% !important;
        }

        /* THis is the container holding the tab controls. */
        html.fullscreen .tab-container {
            height: 100%;
            flex: 0.3;
        }

        html.fullscreen .tab-content {
            width: 100%;
            height: calc(100% - 40px);
            padding-left: 5%;
            padding-top: 3%;
            padding-bottom: 3%;
            box-sizing: border-box;
            position: relative;
        }

        html.fullscreen .tabs {
            padding-left: 15px;
            padding-right: 20px;
            height: 40px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
        }

        html.fullscreen .innerTabContainer {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            display: flex;
        }








        /* Transcript Tab */

        html.fullscreen .transcript-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .transcript-tab-top {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
            height: 20px;
            padding-left: 1px;
            padding-right: 1px;
            white-space: nowrap;
            display: flex;
        }



        html.fullscreen .transcript-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 30px);
        }

            html.fullscreen .transcript-tab-bottom.closed {
                height: calc(100%);
            }

        /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
        */

        /* Transcript Tab Top Autoscroll and Search */
        html.fullscreen .transcript-tab-top-divider-left {
            text-align: left;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
        }

        html.fullscreen .transcript-tab-top-divider-right {
            text-align: right;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        html.fullscreen .transcript-tab-top-search-active {
            border-bottom: solid white 1px;
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
            cursor: pointer;
        }

        html.fullscreen .transcript-tab-top-search-inactive {
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
            cursor: pointer;
        }

        html.fullscreen .transcript-tab-top-search {
            display: flex;
            box-sizing: border-box;
            margin-left: auto;
            margin-top: auto;
            margin-bottom: auto;
            align-items:center;
        }

        html.fullscreen .transcript-tab-top-search-input {
            background-color: white;
            border: solid #202020 1px;
            width: 100%;
            padding-left: 3px;
            padding-top: 2px;
        }




            html.fullscreen .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #888888;
            }

            html.fullscreen .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
                color: #888888;
            }

        html.fullscreen .transcript-tab-top-search-button {
            color: #EEEEEE;
            cursor: pointer;
            display: block;
            height: 22px;
            margin-top: auto;
            margin-bottom: auto;
            background-color: white;
            padding-right: 3px;
            padding-left: 2px;
            border: solid 1px #202020;
        }

            html.fullscreen .transcript-tab-top-search-button img {
                margin-top: 2px;
            }


        /* About Tab */

        html.fullscreen .about-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }


        html.fullscreen .about-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 9px);
        }


        /* Gives sizing information for anchor icon on the screen */
        html.fullscreen .icon-sizer {
            width: 100%;
            height: 100%;
            display: inline-block;
        }


    html.hover.fullscreen .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }


    /* Video Controls */
    html.fullscreen .video-controls {
        height: 35px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    html.fullscreen .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }


    html.fullscreen .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }



    html.fullscreen .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    html.fullscreen .timejump-div {
        display: inline-table;
        height: 100%;
    }

    html.fullscreen .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        html.fullscreen .timejump-textbox input {
            width: 50px;
            display: none;
            color: #202020;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        html.fullscreen .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    html.fullscreen .timejump-duration {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

        html.fullscreen .timejump-duration span {
            color: white;
        }


    /* Interface Controls */




    html.fullscreen .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        html.fullscreen .interface-control-button.nopadding {
            padding-top: 2px;
        }

        html.fullscreen .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }


    /* Thumb Nail Wrapper */
    html.fullscreen .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        /*width: calc(71.43vw);*/
        width: 100%;
        height: calc(40.18vw);
        background-color: black;
        cursor: pointer;
    }

    html.fullscreen .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        /*width: calc(71.43vw);*/
        width: 100%;
        height: calc(40.18vw);
        background-color: black;
        cursor: pointer;
    }

    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */

    html.fullscreen .bigButtonWrapper {
        display: none;
    }

    html.fullscreen .interface-controls-menu {
        display: none;
    }

    html.fullscreen .mobileOnly {
        display: none;
    }

    /********** Tool tips *************/
    html.fullscreen .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        top: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        top: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-top: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }


    /********  Transcript Tab Search stuf *********/
    html.fullscreen .transcript-tab-top-search-count {
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
        white-space: nowrap;
    }



    /************ Full Screen Button Interchages *******/


    html.fullscreen #full-screen-video-only {
        display: block;
    }


    /**** Thumnails *****/
    html.fullscreen .thumbnails-image-div {
        height: calc(23vw * 0.5625);
    }

    html.fullscreen .thumbnails-image {
        height: calc(23vw * 0.5625);
    }


    html.fullscreen .thumbnails-thumbnail {
        width: 23vw;
        margin: 5px;
        cursor: pointer;
    }


    html.fullscreen .about-card {
        width: 98vw;
        margin: 5px;
    }


    html.fullscreen .about-card-full {
        width: 98vw;
        margin: 5px;
    }


    html.fullscreen .explore-related-container {
        margin-top: 5px;
    }

    html.fullscreen .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}

@media only screen and (max-width : 850px) and (min-width : 615px) and (min-height : 225px) {

    /* These classes handle the embed menu which specifically needs help */
    html.fullscreen .menu-stack-row-left {
        width: 100%;
    }

    html.fullscreen .menu-stack-row-right {
        width: 100%;
    }

    html.fullscreen .menu-stack {
        display: flex;
        flex-direction: column;
    }

    html.fullscreen .menu-large {
        width: 90vw;
    }

    html.fullscreen .menu {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    html.fullscreen .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    html.fullscreen .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    html.fullscreen .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html.fullscreen .explore-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: calc(100vw - 12px);
        height: calc(100vh - 9px);
        display: flex;
        flex-direction: row;
        align-items: stretch;
    }

    html.fullscreen .menu-normal {
        width: 80vw;
    }

    html.fullscreen .menu-list {
        padding-left: 20px;
        padding-right: 5px;
        max-height: 70vw;
        overflow-y: scroll;
    }


    /* Azure Media Player Overrides */
    /* Azure Media Player Overrides */
    html.fullscreen .vjs-text-track-display {
        height: calc(56vw - 10px) !important;
    }

        html.fullscreen .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    html.fullscreen .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    html.fullscreen .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    html.fullscreen .vjs-text-track-display div div {
        font-size: 2vmax !important;
        line-height: 2.1vmax !important;
        padding: 3px !important;
        width: 100% !important;
    }


        html.fullscreen .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            html.fullscreen .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }





    /* CMPL Styles */

    html.fullscreen {
        background-color: black !important;
    }

        html.fullscreen body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        html.fullscreen .container {
            width: 100%;
            height: 100%;
            border-radius: 3px;
            box-sizing: border-box;
        }


        /* Container contains the entire video container and tab container. */
        html.fullscreen .media-container {
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
        }

        html.fullscreen .video-container {
            width: 100%;
            height: 100%;
            background-color: black;
            display: block;
        }

        /* This is the video container which contains the video tag */
        html.fullscreen .video-div {
            background-color: black;
            width: 100%;
            height: 100%;
            position: relative;
        }

        html.fullscreen .video-control-layover {
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 198;
            height: 50px;
            background-color: rgba(32,32,32,0.6);
        }

        /* This is the actual video tag */
        html.fullscreen .CMPLVideo {
            width: 100% !important;
            height: 100% !important;
        }

        /* THis is the container holding the tab controls. */
        html.fullscreen .tab-container {
            width: 100%;
            height: 100%;
            display: block;
        }

        html.fullscreen .tab-content {
            width: 100%;
            height: calc(100% - 40px);
            padding-left: 1%;
            padding-top: 3%;
            padding-bottom: 3%;
            box-sizing: border-box;
            position: relative;
        }

        html.fullscreen .tabs {
            padding-left: 1%;
            height: 40px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
        }

        html.fullscreen .innerTabContainer {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            display: flex;
        }




        html.fullscreen .progress-bar {
            background-color: #EEEEEE;
            height: 7px;
            cursor: pointer;
            position: relative;
            border-radius: 3px;
            margin-left: 3px;
            margin-right: 3px;
        }


        /* Transcript Tab */

        html.fullscreen .transcript-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .transcript-tab-top {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
            height: 20px;
            padding-left: 1px;
            padding-right: 1px;
            white-space: nowrap;
            display: flex;
        }

        html.fullscreen .transcript-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 30px);
            padding-right: 13px;
        }

            html.fullscreen .transcript-tab-bottom.closed {
                height: calc(100%);
            }

        /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
    */

        /* Transcript Tab Top Autoscroll and Search */
        html.fullscreen .transcript-tab-top-divider-left {
            text-align: left;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
        }


        html.fullscreen .transcript-tab-top-divider-right {
            text-align: right;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search-active {
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search-inactive {
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search {
            display: flex;
            box-sizing: border-box;
            margin-left: auto;
            margin-top: auto;
            margin-bottom: auto;
            align-items: center;
        }

        html.fullscreen .transcript-tab-top-search-input {
            background-color: white;
            border: solid #202020 1px;
            padding-left: 10px;
            padding-top: 2px;
        }


            html.fullscreen .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #888888;
            }

            html.fullscreen .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
                color: #888888;
            }

        html.fullscreen .transcript-tab-top-search-button {
            color: white;
            cursor: pointer;
            display: block;
            height: 22px;
            margin-top: auto;
            margin-bottom: auto;
            background-color: white;
            padding-right: 3px;
            padding-left: 2px;
            border: solid 1px #202020;
        }

            html.fullscreen .transcript-tab-top-search-button img {
                margin-top: 2px;
            }

        /* About Tab */

        html.fullscreen .about-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }


        html.fullscreen .about-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 9px);
        }

        /* Gives sizing information for anchor icon on the screen */
        html.fullscreen .icon-sizer {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

    html.hover.fullscreen .icon-sizer:hover {
        color: white;
        border-radius: 5px;
        background-color: white;
    }



    /* Video Controls */
    html.fullscreen .video-controls {
        height: 35px;
        display: flex;
        width: 100%;
        box-sizing: border-box;
    }

    html.fullscreen .video-controls-left {
        flex-grow: 1;
        white-space: nowrap;
        display: flex;
    }

    html.fullscreen .video-controls-right {
        flex-grow: 1;
        margin-left: auto;
        text-align: right;
        height: 100%;
        display: flex;
        justify-content: flex-end
    }



    html.fullscreen .iconimage img {
        width: 27px;
    }

    /* Time jump Controls */
    html.fullscreen .timejump-div {
        display: inline-table;
        height: 100%;
    }

    html.fullscreen .timejump-textbox {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
        text-align: center;
    }

        html.fullscreen .timejump-textbox input {
            width: 50px;
            display: none;
            color: #202020;
            background-color: white;
            border: 0;
            font-size: inherit;
            font-family: inherit;
            text-align: center;
        }

        html.fullscreen .timejump-textbox div {
            color: white;
            border-bottom: solid white 1px;
            line-height: 1em;
        }

    html.fullscreen .timejump-duration {
        width: 50px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: white;
    }

        html.fullscreen .timejump-duration span {
            font-size: 12px;
            color: white;
        }


    /* Interface Controls */



    html.fullscreen .interface-control-button {
        vertical-align: top;
        height: 100%;
        padding-top: 10px;
        padding-bottom: 8px;
        text-align: center;
        box-sizing: border-box;
        margin: 0;
    }

        html.fullscreen .interface-control-button.nopadding {
            padding-top: 2px;
        }

        html.fullscreen .interface-control-button a {
            display: flex;
            align-items: center;
            margin-left: 15px;
            margin-right: 15px;
        }




    /* Thumb Nail Wrapper */
    html.fullscreen .thumbWrapper {
        position: absolute;
        left: 0;
        z-index: 99;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: calc(56vw - 4px);
        background-color: black;
        cursor: pointer;
    }

    html.fullscreen .clickButtonWrapper {
        position: absolute;
        left: 0;
        z-index: 9999;
        top: 0;
        pointer-events: none;
        width: 100%;
        height: calc(56vw - 4px);
        background-color: black;
        cursor: pointer;
    }

    /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */

    html.fullscreen .bigButtonWrapper {
        display: none;
    }

    html.fullscreen .interface-controls-menu {
        display: none;
    }


    html.fullscreen .mobileOnly {
        display: none;
    }

    html.fullscreen .portraitNo {
        display: none;
    }


    /********** Tool tips *************/
    html.fullscreen .tooltip .tooltiptext-top-left-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 0%;
        margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-bottom-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -40px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }


    html.fullscreen .tooltip .tooltiptext-left {
        visibility: hidden;
        width: 90px;
        bottom: 100%;
        left: 0%;
        margin-left: -70px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 2px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 10pt;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-top-left-mobile-anchor {
        visibility: hidden;
        width: 100px;
        bottom: 100%;
        left: 50%;
        margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
        background-color: #EEEEEE;
        color: #202020;
        text-align: center;
        padding: 1px 0;
        border-radius: 6px;
        /* Position the tooltip text - see examples below! */
        position: absolute;
        z-index: 999;
        font-size: 0.85em;
        margin-bottom: 10px;
        opacity: 0;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        transition: opacity 0.3s;
        height: 20px;
        line-height: 20px;
    }

    html.fullscreen .tooltip .tooltiptext-top-left-anchor.wideTool {
        width: 160px;
        margin-left: -140px
    }

    /********  Transcript Tab Search stuf *********/
    html.fullscreen .transcript-tab-top-search-count {
        vertical-align: middle;
        height: 20px;
        line-height: 22px;
        font-size: 0.8em;
        margin-right: 3px;
        visibility: hidden;
        white-space: nowrap;
    }




    /************ Full Screen Button Interchages *******/

    html.fullscreen #full-screen-video-only {
        display: block;
    }

    /**** Thumnails *****/
    html.fullscreen .thumbnails-image-div {
        height: calc(42vw * 0.5625);
    }

    html.fullscreen .thumbnails-image {
        height: calc(42vw * 0.5625);
    }


    html.fullscreen .thumbnails-thumbnail {
        width: 42vw;
        margin: 5px;
        cursor: pointer;
    }

    html.fullscreen .about-card {
        width: 98vw;
        margin: 5px;
    }


    html.fullscreen .about-card-full {
        width: 98vw;
        margin: 5px;
    }

    html.fullscreen .explore-related-container {
        margin-top: 5px;
    }

    html.fullscreen .explore-tabs {
        width: 100%;
        margin-bottom: 15px;
        margin-top: 5px;
        margin-left: 5px;
    }
}

/* only screen and (min-width : 570px) and (max-width: 849px) and (max-height : 420px)*/
@media only screen and (max-width : 384px) and (max-height: 225px), 
    only screen and (max-width : 849px) and (max-height : 225px) 
     {

    /** Overrides for tiny view on controls ***/
    html.fullscreen .menu_explore_container {
        display: none;
    }

    html.fullscreen .menu_tools_container {
        display: none;
    }

    html.fullscreen .menuRail {
        height: 20px;
    }

    html.fullscreen .menu_title_container {
        height: 20px;
        width: 100%;
    }

    html.fullscreen .interface-video-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: calc(100%);
    }

    html.fullscreen .noTiny {
        display: none;
    }

    html.fullscreen .video-control-layover {
        height: 37px;
    }

    html.fullscreen .interface-languages {
        line-height: 17px;
    }

    html.fullscreen .interface-transcript {
        line-height: 17px;
    }

        html.fullscreen .interface-transcript img {
            height: 25px;
            width: 71px;
        }

    html.fullscreen #selected-transcript-toggle-span {
        font-size: 11px;
    }

    html.fullscreen #selected-language-span {
        font-size: 11px;
    }

    html.fullscreen #play-button > img {
        margin-top: -3px;
    }

    html.fullscreen #fullscreen-button > img {
        margin-top: -4px;
        width: 24px;
        height: 24px;
    }

    html.fullscreen #cc-button-container {
        padding: 0;
    }

        html.fullscreen #cc-button-container img {
            height: 16px;
            width: 16px;
            margin-top: 3px;
        }

    html.fullscreen #pause-button img {
        height: 14px;
        width: 14px;
    }

    html.fullscreen .video-control-button-feather {
        width: 20px;
        padding: 0;
        padding-top: 2px;
        margin-left: 4px;
    }

        html.fullscreen .video-control-button-feather svg {
            width: 20px;
            height: 20px;
        }

    html.fullscreen .video-menu-select {
        font-size: 11px;
    }
    /***************/
    html.fullscreen .menu-container {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 299;
        display: none;
        background-color: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html.fullscreen .menuWrapper {
        /*
        display: none !important;
        */
        display: block !important;
        height: 25px;
    }

    html.fullscreen .menu-large {
        max-width: 80vw;
        min-width: 50vw;
    }

    html.fullscreen .menu {
        max-height: 90vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
    }

    html.fullscreen .menu-stack-row-left {
        width: 50%;
        margin-right: 2px;
    }

    html.fullscreen .menu-stack-row-right {
        width: 50%;
        margin-left: 2px;
    }

    html.fullscreen .menu-stack {
        display: flex;
    }

    html.fullscreen .menu-normal {
        width: 50vw;
    }


    html.fullscreen .menu-copyzone-full {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 80vw;
    }

    html.fullscreen .menu-copyzone {
        background-color: transparent;
        border-radius: 3px;
        word-wrap: break-word;
        padding: 5px;
        overflow-y: scroll;
        width: 50vw;
    }


    /*
    .video-div.transcriptless .menuWrapper {
        display: block !important;
    }
    */


    /****************************/

    /* Azure Media Player Overrides */
    /* Azure Media Player Overrides */
    html.fullscreen .vjs-text-track-display {
        height: calc(100% + 15px) !important;
    }

        html.fullscreen .vjs-text-track-display div {
            margin-bottom: 0 !important;
        }

    html.fullscreen .amp-default-skin.vjs-user-inactive .vjs-has-started.vjs-playing .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    html.fullscreen .amp-default-skin .vjs-text-track-display > div > div {
        /*bottom: 0px !important;*/
    }

    html.fullscreen .vjs-text-track-display div div {
        font-size: 3vmax !important;
        line-height: 3.1vmax !important;
        padding: 3px !important;
        width: 100% !important;
    }


        html.fullscreen .vjs-text-track-display div div div {
            background-color: rgba(0,0,0,0.6) !important;
            color: white !important;
            border-radius: 5px !important;
            display: inline-block !important;
            margin-left: auto !important;
            margin-right: auto !important;
            left: auto !important;
            right: auto !important;
            width: auto !important;
        }



            html.fullscreen .vjs-text-track-display div div div span {
                background-color: rgba(0,0,0,0) !important;
            }



    /* CMPL Styles */


    html.fullscreen {
    }

        html.fullscreen body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            position: relative;
        }

        html.fullscreen .container {
            width: 100%;
            height: 100%;
            border-radius: 3px;
            box-sizing: border-box;
            border: none !important;
        }



        /* Container contains the entire video container and tab container. */
        html.fullscreen .media-container {
            width: 100%;
            height: 100%;
            position: relative;
            box-sizing: border-box;
        }

        html.fullscreen .video-container {
            width: 100%;
            margin-top: auto;
            margin-bottom: auto;
            background-color: black;
            display: block;
        }

        /* This is the video container which contains the video tag */
        html.fullscreen .video-div {
            background-color: black;
            width: 100%;
            height: 100%;
            position: relative;
        }




        /* This is the actual video tag */
        html.fullscreen .CMPLVideo {
            width: 100% !important;
            height: 100% !important;
        }

        /*
    .video-div.transcriptless .CMPLVideo {
        width:100%;
        height:100%;

    }
    */


        /* THis is the container holding the tab controls. */
        html.fullscreen .tab-container {
            width: 100%;
            height: 100%;
            display: block !important;
        }

        html.fullscreen .tab-content {
            width: 100%;
            height: calc(100% - 40px);
            padding-top: 1%;
            padding-bottom: 1%;
            padding-left: 1%;
            box-sizing: border-box;
            position: relative;
        }

        html.fullscreen .tabs {
            padding-left: 1%;
            height: 40px;
            box-sizing: border-box;
            width: 100%;
            display: flex;
            align-items: center;
        }

        html.fullscreen .innerTabContainer {
            box-sizing: border-box;
            height: 100%;
            width: 100%;
            display: flex;
        }

        /* Transcript Tab */

        html.fullscreen .transcript-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .transcript-tab-top {
            width: 100%;
            box-sizing: border-box;
            margin-bottom: 10px;
            height: 20px;
            padding-left: 1px;
            padding-right: 1px;
            white-space: nowrap;
            display: flex;
        }

        html.fullscreen .transcript-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 30px);
            padding-right: 13px;
        }


            html.fullscreen .transcript-tab-bottom.closed {
                height: calc(100%);
            }
        /*
    .transcript-tab-bottomarrow:before {
        content: "";
        position: absolute;
        top: -18px;
        left: 0;
        height: 18px;
        width: 100%;
        background: linear-gradient(rgba(0,0,0,0), #555555);
    }
        */

        /* Transcript Tab Top Autoscroll and Search */
        html.fullscreen .transcript-tab-top-divider-left {
            text-align: left;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
        }


        html.fullscreen .transcript-tab-top-divider-right {
            text-align: right;
            box-sizing: border-box;
            display: flex;
            white-space: normal;
            vertical-align: top;
            justify-content: center;
            align-items: center;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search-active {
            border-bottom: solid white 1px;
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search-inactive {
            display: flex;
            height: 18px;
            padding-bottom: 1px;
            box-sizing: border-box;
            width: 100%;
            max-width: 125px;
            margin-left: auto;
        }

        html.fullscreen .transcript-tab-top-search {
            display: flex;
            box-sizing: border-box;
            width: 100%;
            margin-top: auto;
            margin-bottom: auto;
            align-items: center;
        }

        html.fullscreen .transcript-tab-top-search-input {
            background-color: white;
            width: 100%;
            padding-left: 3px;
            padding-top: 2px;
            border: solid 1px #202020;
        }



            html.fullscreen .transcript-tab-top-search-input input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #888888;
            }

            html.fullscreen .transcript-tab-top-search-input input::-ms-input-placeholder { /* Microsoft Edge */
                color: #888888;
            }


        html.fullscreen .transcript-tab-top-search-button {
            color: white;
            cursor: pointer;
            display: block;
            height: 22px;
            margin-top: auto;
            margin-bottom: auto;
            background-color: white;
            padding-right: 3px;
            padding-left: 2px;
            border: solid 1px #202020;
        }

            html.fullscreen .transcript-tab-top-search-button img {
                margin-top: 2px;
            }


        /* About Tab */

        html.fullscreen .about-tab {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
        }


        html.fullscreen .about-tab-bottom {
            overflow-x: hidden;
            overflow-y: auto;
            position: relative;
            box-sizing: border-box;
            height: calc(100% - 9px);
        }

        /* Gives sizing information for anchor icon on the screen */
        html.fullscreen .icon-sizer {
            width: 100%;
            height: 100%;
            display: inline-block;
        }

        html.fullscreen .interface-control {
            display: none !important;
        }



        /* Gives sizing information for anchor icon on the screen */
        html.fullscreen .icon-sizer {
            width: 100%;
            height: 100%;
            display: inline-block;
        }


        html.fullscreen html.hover .icon-sizer:hover {
            color: white;
            border-radius: 5px;
            background-color: white;
        }


        /* Video Controls */
        html.fullscreen .video-controls {
            height: 25px;
            display: flex;
            width: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .video-controls-left {
            flex-grow: 1;
            white-space: nowrap;
            display: flex;
        }


        html.fullscreen .video-controls-right {
            flex-grow: 1;
            margin-left: auto;
            text-align: right;
            height: 100%;
            display: flex;
            justify-content: flex-end
        }

        html.fullscreen .video-control-button {
            vertical-align: top;
            height: 100%;
            padding-top: 4px;
            width: 20px;
            text-align: center;
            box-sizing: border-box;
            margin-top: 0;
            margin-bottom: 0;
            margin-left: 2px;
            margin-right: 2px;
            line-height: 17px;
        }

            html.fullscreen .video-control-button img {
                width: 22px;
                height: 22px;
            }

            html.fullscreen .video-control-button.lesspadding {
                padding-top: 6px;
                padding-bottom: 6px;
            }

            html.fullscreen .video-control-button.noborder {
                border: 0;
            }

            html.fullscreen .video-control-button.right {
            }

            html.fullscreen .video-control-button a {
                text-align: center;
                margin-left: auto;
                margin-right: auto;
            }

        html.fullscreen .iconimage img {
            width: 27px;
        }

        /* Time jump Controls */
        html.fullscreen .timejump-div {
            display: inline-table;
            height: 100%;
        }

        html.fullscreen .timejump-textbox {
            display: table-cell;
            height: 100%;
            vertical-align: middle;
            text-align: center;
        }

            html.fullscreen .timejump-textbox input {
                width: 50px;
                display: none;
                color: black;
                background-color: white;
                border: 0;
                font-size: inherit;
                font-family: inherit;
                text-align: center;
            }

            html.fullscreen .timejump-textbox div {
                color: white;
                border-bottom: solid white 1px;
                line-height: 1em;
            }




        /* Interface Controls */

        html.fullscreen .interface-control {
            height: 40px;
            width: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .interface-controls {
            height: 40px;
            display: flex;
            width: 100%;
            box-sizing: border-box;
        }

        html.fullscreen .interface-controls-left {
            flex-grow: 1;
            display: flex;
        }

        html.fullscreen .interface-controls-right {
            flex-grow: 1;
            margin-left: auto;
            text-align: right;
            height: 100%;
            display: flex;
            justify-content: flex-end
        }




        html.fullscreen .interface-control-button {
            vertical-align: top;
            height: 100%;
            padding-top: 10px;
            padding-bottom: 8px;
            text-align: center;
            box-sizing: border-box;
            margin: 0;
        }

            html.fullscreen .interface-control-button.nopadding {
                padding-top: 2px;
            }

            html.fullscreen .interface-control-button a {
                display: flex;
                align-items: center;
                margin-left: 15px;
                margin-right: 15px;
            }


        /* Thumb Nail Wrapper */
        html.fullscreen .thumbWrapper {
            position: absolute;
            left: 0;
            z-index: 99;
            top: 0;
            pointer-events: none;
            width: 100%;
            height: 100%;
            background-color: black;
            cursor: pointer;
            box-sizing: border-box;
        }

        html.fullscreen .clickButtonWrapper {
            position: absolute;
            left: 0;
            z-index: 9999;
            top: 0;
            pointer-events: none;
            width: 100%;
            height: 100%;
            background-color: black;
            cursor: pointer;
            box-sizing: border-box;
        }

        /*
    .video-div.transcriptless .thumbWrapper {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        
    }
    */
        html.fullscreen .thumb-wrapper-play {
            display: none;
        }


        /* Mobile Only Buttons 
        Handles mobile specific buttons that move around based on mobile.
    */

        html.fullscreen .bigButtonWrapper {
            position: absolute;
            left: 50%;
            z-index: 100;
            top: 50%;
            pointer-events: none;
        }






        html.fullscreen .interface-controls-menu {
            display: none;
        }

        html.fullscreen .mobileFlexHigh {
            flex-grow: 1;
        }

        html.fullscreen .mobileFlexLow {
            flex-grow: 0.5
        }

        html.fullscreen .notOnMobile {
            display: none;
        }

        /******** Hidden Mobile Control Bar controls *******/

        html.fullscreen .mobileNo {
            display: none;
        }

        html.fullscreen .notOnInvalid {
            display: none;
        }

        /********** Tool tips *************/
        html.fullscreen .tooltip .tooltiptext-top-left-anchor {
            visibility: hidden;
            width: 100px;
            bottom: 100%;
            left: 50%;
            margin-left: -85px; /* Use half of the width (120/2 = 60), to center the tooltip */
            background-color: white;
            color: black;
            text-align: center;
            padding: 1px 0;
            border-radius: 6px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 999;
            font-size: 0.85em;
            margin-bottom: 10px;
            opacity: 0;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: opacity 0.3s;
            height: 20px;
            line-height: 20px;
        }

        html.fullscreen .tooltip .tooltiptext-top-left-mobile-anchor {
            visibility: hidden;
            width: 100px;
            bottom: 100%;
            left: 50%;
            margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
            background-color: white;
            color: black;
            text-align: center;
            padding: 1px 0;
            border-radius: 6px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 999;
            font-size: 0.85em;
            margin-bottom: 10px;
            opacity: 0;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: opacity 0.3s;
            height: 20px;
            line-height: 20px;
        }

        html.fullscreen .tooltip .tooltiptext-bottom-anchor {
            visibility: hidden;
            width: 100px;
            top: 100%;
            left: 50%;
            margin-left: -50px; /* Use half of the width (120/2 = 60), to center the tooltip */
            background-color: white;
            color: black;
            text-align: center;
            padding: 1px 0;
            border-radius: 6px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 999;
            font-size: 0.85em;
            margin-top: 10px;
            opacity: 0;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: opacity 0.3s;
            height: 20px;
            line-height: 20px;
        }

        html.fullscreen .tooltip .tooltiptext-left {
            visibility: hidden;
            width: 180px;
            top: 100%;
            left: 0%;
            margin-left: -140px; /* Use half of the width (120/2 = 60), to center the tooltip */
            background-color: white;
            color: black;
            text-align: center;
            padding: 2px 0;
            border-radius: 6px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 999;
            font-size: 0.85em;
            margin-top: 10px;
            opacity: 0;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            transition: opacity 0.3s;
            height: 20px;
            line-height: 20px;
        }

        html.fullscreen .tooltip .tooltiptext-top-left-anchor.wideTool {
            width: 160px;
            margin-left: -140px
        }

        /********  Transcript Tab Search stuf *********/
        html.fullscreen .transcript-tab-top-search-count {
            color: white;
            vertical-align: middle;
            height: 20px;
            line-height: 22px;
            font-size: 0.8em;
            margin-right: 3px;
            visibility: hidden;
        }

        /**** Thumnails *****/
        html.fullscreen .thumbnails-image-div {
            width: 100%;
        }

        html.fullscreen .thumbnails-image {
            width: 100%;
        }


        html.fullscreen .thumbnails-thumbnail {
            width: 100%;
            margin: 5px;
        }


        html.fullscreen .about-card {
            width: 100%;
            margin: 5px;
        }

        html.fullscreen .about-card-full {
            width: 100%;
        }

        html.fullscreen .explore-related-container {
            margin-top: 5px;
        }

        html.fullscreen .explore-tabs {
            width: 100%;
            margin-bottom: 15px;
            margin-top: 5px;
            margin-left: 5px;
        }
}