/*! Copyright (c)2026 Bad Math (http://www.badmath.com) */

html, body {
	/* font-size: 16px; */
	margin:0;
	padding:0;
}


.player-container {
	width: 30em;
	/*
	background: url('images/background-double.bf9b1e89.png') left top no-repeat #d6d6d6;
	background-size: 30.625em 26.125em;
	padding: 0.3125em 0.3125em 0;
	height: 25.5em;
	*/
	/*
	background: url('images/background-double.bf9b1e89.png') left bottom no-repeat #d6d6d6;
	background-size: 30.625em 25.75em;
	*/
	background: #d6d6d6;
	padding: 0.3125em 0.3125em 3em;
	margin: 0;
	font-size: 16px;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

	.player-container.hideControls {
		padding:0;
	}

.player-container.fullScreen {
	width:100% !important;
	background-size: contain;
	background-position: center top;
	height: 100% !important;
	top: 0 !important;
}

@media screen and (max-width: 480px) {
	html .player-container {
		width:100%;

	}
}

.player-container.fullScreen .controls {
	/* height: 300px; */
	/* height: 4.0625em; */
}


.player-widget {
	position:relative;
	width:100%;
	margin-left: auto;
    margin-right: auto;
}
/*
	.player-container.fullScreen .player-widget {
		height: 100%;
	}*/

	.hideControls .inClipIndicator {
		display:none !important;
	}

	.player-container.inClip .player-widget .inClipIndicator {
		position: absolute;
		top: 0.625em;
		right:0.625em;
		height:0.875em;
		width:0.875em;
		border-radius: 50%;
		background-color: #ebc500;
		z-index: 1;
	}

.player-widget .contents  {
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.player-container .fullScreenButton {
	background: url("images/fullscreen.1a679acd.png") no-repeat center center;
	background-size: 1.375em 1.375em;
	color: transparent;
	height: 1.375em;
	/* left: 26.875em; */
	right: 1.75em;
	position: absolute;
	top: 0.0625em;
	width: 1.375em;
	cursor: pointer;
}


/*
.player-container .fullScreenButton:before {
	content: 'Full Screen';
}

.player-container.fullScreen .fullScreenButton:before {
	content: 'Exit Full Screen';
}*/


.player-container .lockToLogButton {
	background: url("images/lockToLog.9b7d33f4.png") no-repeat center top;
	background-size: 1.375em 2.75em;
	color: transparent;
	height: 1.375em;
	/* left: 28.8125em; */
	right: -0.1875em;
	position: absolute;
	top: 0.0625em;
	width: 1.375em;
	cursor: pointer;
}

	.player-container.lockedToLog .lockToLogButton { background-position: center -1.375em; }


.player-container button {
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font-size: 1em; /* override client default */
	outline: 0;
}

	.player-widget .playButton {
		width: 1.25em;
		height: 1.375em;
		background: url('images/play.176672a2.png') center top no-repeat;
		background-size: 1.375em 1.375em;
		color: transparent;
		overflow: hidden;
		cursor: pointer;
		position: absolute;
		left: -0.375em;
		top: 0.0625em;
	}
		.player-widget .playButton.playing { background-image: url('images/pause.dd7cbb06.png'); }

		/*.player-widget .playButton:before { content: 'Play'; }
		.player-widget .playButton.playing:before { content: 'Pause'; } */

.player-widget .textProgress {
	position: absolute;
	right: 8.81818em;
	top: 0.36364em;

	font-family: Consolas, monospace;
	font-weight: bold;
	font-size: 0.6875em;
	background-color: #e8e8e8;
	padding: 0.091em 0.182em;
}

	.player-widget .textProgress .duration,
	.player-widget .textProgress .duration .tcField { color: #444; }

.player-widget .tcField {
	font-family: Consolas, monospace;
	font-weight: bold;
	font-size: 1em;
	background: transparent;
	width: 1.182em;
	padding: 0;
	border: 0;
	height: 1em;
	margin: 0;
	vertical-align: middle;
}

	.player-widget .tcField::selection { color: white; background-color: black; }
	.player-widget .tcField::-moz-selection { color: white; background-color: black; }

.player-widget .pointField {
	position: absolute;
	top: -0.375em;
	width: 50%;
	display:inline-block;
}

	.player-widget .inPoint {
		left: 0;
	}

	.player-widget .outPoint {
		text-align: right;
		right: 0;
	}

	.player-container.hideClipControls .pointField { display: none; }

	.player-container.disableClipTrimming .player-widget .setPoint { display: none; }

.player-widget .controlsBG {
	position: absolute;
	top: 1.5625em;
	height: 1.375em;
	left: -0.125em;
	right: -0.125em;
	background: #c1c1c1;
}

.player-widget .pointField span {
	display: inline-block;
	position: absolute;
	top: 3.182em;
	font-size: 0.6875em;
	background-color: #e8e8e8;
	padding: 0.091em 0.273em;
}

	.player-widget .pointField span.inPointPos { left: 5.6364em; }
	.player-widget .pointField span.outPointPos { right: 2.9091em; }

	.player-widget .pointField span:before {
		font-size: 1.091em;
		line-height: 1.083em;
		position: absolute;
		text-transform: uppercase;
	}
		.player-widget .pointField span.inPointPos:before {
			left: -5.091em;
			content: "Clip start:";
		}
		.player-widget .pointField span.outPointPos:before {
			left: -4.364em;
			content: "Clip end:";
		}

.player-widget .setPoint {
	display:block;
	background: url("images/inOutButton-setHere.17ee887b.png") no-repeat left top;
	background-size: 1.8125em 1.25em;
	position: absolute;
	font-size: 1em;
	top: 2.0625em;
	width: 1.8125em;
	height: 1.25em;
	overflow: hidden;
}
	.setPoint:before {
		font-size: 0.5625em;
		content: 'Set';
		color: transparent;
		text-transform: uppercase;
		text-align: center;
	}
	.player-widget .inPoint .setPoint { left: 7.25em; }
	.player-widget .outPoint .setPoint { right: 0; }


.player-widget .progressBar {
    height: 0.3125em;
    left: 1.75em;
    top: 0.625em;
    right: 14.3125em;
    border: none;
    background-color: #a7a9a9;
    position: absolute;

}

/* handle extensions; to texbe used in the next version
.player-widget .progressBar:after {
	content:'';
	display:block;
	position:absolute;
	top:3em;
	border: 0.0625em solid black;
	border-bottom: 0;
	left: -5%;
	width: 110%;
	height: 1em;
}
*/

	.player-widget .progressBar .buffered {
		height: 100%;
		position:absolute;
		width:100%;
	}

	.player-widget .progressBar .buffered .bufferedSection {
		height: 100%;
		position:absolute;
		background-color: #ebeeee;
	}

	.player-widget .progressBar .clip {
		height: 100%;
		position:absolute;
		background-color: #ebc600;
	}

		.fullClip .player-widget .progressBar .clip {
			background-color: transparent;
		}

		.player-widget .progressBar .clipHandle {
			background-color: black;
			/* height: 3em; */
			height: 1.125em;
			width: 0.0625em;
			position:absolute;
			top: -0.3125em;
			z-index: 1;
			cursor: pointer;
		}

			.player-container.hideClipControls .player-widget .progressBar .clipHandle { display: none; }

		.player-widget .progressBar .clipHandle.inHandle {
			left:0;
		}

			.player-widget .progressBar .clipHandle.inHandle:after {
				content: '';
				width: 0;
				height: 0;
				border-style: solid;
				/* border-width: 0 0 1em 1em; */
				border-width: 0 0 0.5em 0.5em;
				border-color: transparent transparent black transparent;
				position:absolute;
				/* top: 2em; */
				top: 0.625em;
				right:0;
			}

		/*
		.player-widget .progressBar .clip:before {
				content: '';
				display:block;
				position:absolute;
				height: 0.0625em;
				left: 0;
				width: 100%;
				top: 3em;
				border-top: 0.0625em solid white;
				z-index: 2;
			}
		*/

		/*
			.player-widget .progressBar .clip:before {
				content: '';
				display:block;
				position:absolute;
				height: 1em;
				left: -100%;
				width: 100%;
				top: 3em;
				border-top: 0.0625em solid black;
				border-left: 0.0625em solid black;
			}
		*/
		.player-widget .progressBar .clipHandle.outHandle {
			right: 0;

		}

			.player-widget .progressBar .clipHandle.outHandle:after {
				content: '';
				width: 0;
				height: 0;
				border-style: solid;
				/* border-width: 1em 0 0 1em; */
				border-width: 0.5em 0 0 0.5em;
				border-color: transparent transparent transparent black;
				position:absolute;
				/* top: 2em; */
				top: 0.625em;
				left:0;
			}

	.player-widget .progressBar .played {
		height: 100%;
		position:absolute;
		background-color: #333;
	}

	.player-widget .progressBar .playHead {
		/*
		border-radius: 50%;
		width: 2em;
		height: 2em;
		background-color: red;
		margin-left: -1em;
		*/
		position:absolute;
		z-index:2;
		/*
		margin-left: -0.5625em;
		width: 1.0625em;
		height: 1.0625em;
		background: url('images/playhead.a5bb1974.png') transparent center center no-repeat;
		background-size: 1.0625em 1.0625em;
		*/
		top: -0.25em;
		cursor: pointer;
		background-color: #ddd;
		border-radius: 0.875em;
		box-shadow: 0 0 0.0625em rgba(0, 0, 0, 0.2) inset, 0 0 0.25em rgba(0, 0, 0, 0.4), 0 0 0.25em white inset;
		margin-left: -0.4375em;
		height: 0.875em;
		width: 0.875em;
	}
/*
.player-widget .inPoint:before{
	content: 'In Point: ';
}

.player-widget .outPoint:before{
	content: 'Out Point: ';
}
	*/

.player-widget .statusText {
	display: none;
	z-index: 100000;
	color: yellow;
	font-size: 20px;
	position:absolute;
	bottom:10px;
}



.player-widget .playerDiv:before{
	content: "";
    display: block;
	padding-top: 75%;
}


.aspect5625 .player-widget .playerDiv:before{
	content: "";
    display: block;
	padding-top: 56.25%;
}

.aspect6864 .player-widget .playerDiv:before{
	content: "";
    display: block;
	padding-top: 68.64%;
}


.aspect6666 .player-widget .playerDiv:before{
	content: "";
    display: block;
	padding-top: 66.66%;
}

.aspect7272 .player-widget .playerDiv:before{
	content: "";
    display: block;
	padding-top: 72.72%;
}

.hideControls .player-widget .playerDiv:before{
	padding-top: 90%;
}



.player-widget .playerDiv {
	position: relative;
	width:100%;
	height: auto;
	margin: 0;
	float: none;

}

	.player-widget > .playerDiv {
		margin: -0.125em;
		border: 0.125em inset #d6d6d6;
		background-color: black;
		cursor: pointer;
	}

	.hideControls .player-widget > .playerDiv {
		margin: 0;
		border: 0;
	}

	.player-widget .playerDiv video,
	.player-widget .playerDiv object {
		position:absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 1;
		/* width and height attributes size the player coorectly on the iPad */
		width:100%;
		height:100%;
		object-fit: fill;
	}

	.player-widget .playerDiv .largePlayButton {
		background: url('images/largePlay.7f53b841.png');
		background-size: 5em 5em;
		background-repeat: no-repeat;
		background-position: center center;
		z-index: 2;
		position:absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		opacity: 0.65;

	}

.player-widget .controls {
	position: relative;
}

.player-widget .fineTuningBar {
	width: 10.5em;
	height: 1.125em;
	background: url("images/fine_adjust_bar.f89777ee.png") no-repeat center top;
	background-size: 10.5em 1.125em;
	position:absolute;
	top: 1.6875em;
	/* left: 10.125em; */
	left: 50%;
	margin-left: -4.875em;
}
	.player-widget .fineTuningBar .pointer {
		width: 0.875em;
		margin-left: -0.4375em;
		left: 50%;
		position:absolute;
		height: 1.375em;
		top: -0.125em;
		background: url("images/fine_marker.935694ef.png") no-repeat center top;
		background-size: 0.875em 1.375em;
		cursor: pointer;
	}

.player-container .debug {
	font-size: 1.5em;
}

.player-container .debug:before {
	content: 'Debug Info:';
	display:block;
}

.volumeControl {
	position:absolute;
	height: 1em;
	top: 0.0625em;
	/* left: 24.9375em; */
	right: 4.4375em;
	width: 0.625em;
}

	.volumeControl .volumeButton {
		background: url("images/volume.17e3ecb9.png") no-repeat center 0.25em;
		background-size: 1.375em 2.75em;
		color: transparent;
		height: 1.375em;
		position: absolute;
		width: 1.375em;
		top: -0.25em;
		padding-top: 0.25em;
		cursor: pointer;
	}

		.volumeControl.muted .volumeButton { background-position: center -1.125em; }

		.volumeControl.muted .volumeLevel { height: 0 !important; }

	.audioDisabled .volumeButton {
		opacity: 0.5;
	}

	/*
	.volumeControl .volumeButton:before {
		content: 'Volume';
	}

	.volumeControl.muted .volumeButton:before {
		content: 'Volume (muted)';
	}
*/

	.volumeControl .volumeBar {
		position: absolute;
		display: none;
		height: 6em;
		width: 1em;
		/* bottom: 1.125em; */
		bottom: 0.9375em;
		z-index: 2;
		/* background-color: #ced7d7; */
		background-color: rgb(214, 214, 214);
		border-color: rgb(214, 214, 214);
		border-style: outset;
		border-width: 0.125em 0.125em 0;
		cursor: pointer;
	}

		.volumeControl .volumeBar .volumeLevel,
		.volumeControl .volumeBar .volumeLevelBG {
			position: absolute;
			bottom: 0.0625em;
			width: 0.3125em;
			left: 0.3125em;
		}

		.volumeControl .volumeBar .volumeLevel {
			background-color: #ebc600;
			z-index: 2;
		}
		.volumeControl .volumeBar .volumeLevelBG {
			background-color: #a7a9a9;
			z-index: 1;
			height: 5.625em;
		}

.thumbnailPreview {
	position:absolute;
	top:0;
	left:0;

	width: 100%;
	display:none;
	z-index: 2;
}

.thumbnailPreview img {

	width: 100%;
}

#callbacks {
	 border: 0.0625em solid #000000;
    float: right;
    height: 600px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
}