.acgMediaPlayer
{
	position:relative;
	overflow:hidden;
	cursor:grab;
	box-sizing:border-box;
	jborder:1px solid red;
	width:360px;
	jmin-height:20px;
	min-height:100%;
}

.acgMediaPlayer.acgGrabbing
{
	cursor:grabbing;
}

.acgMediaPlayer .acgImage
{
	pointer-events:none;
}

.acgMediaPlayerHotspots
{
	touch-action:none;	/* Required to prevent the pointerXXX events from being "cancelled" by the browser after the initial few events */
}

.acgMediaPlayerHotspot
{
	display:flex;
	background-color:rgba(165,0,52,0.8);
	border:2px solid white;
	position:absolute;
	jpadding:0.5em 1em;
	width:32px;
	height:32px;
	border-radius:100%;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	cursor:pointer;
	visibility:hidden;
	color:white;
	opacity:0;
}

.acgMediaPlayerHotspot:hover
{
	background-color:rgba(200,0,75,0.8);
}

.acgMediaPlayerActiveHotspot
{
	visibility:visible;
	opacity:1;
}

.acgMediaPlayerHotspot
{
    transition:.3s opacity;
}

.acgMediaPlayerFocusHotspot
{
	jborder:2px solid green;
	background-color:rgba(0,255,0,0.5);
}

.acgMediaPlayerFocusHotspot:hover
{
	jborder:2px solid green;
	background-color:rgba(0,255,0,0.5);
}

.acgMediaPlayerWrapper
{
	position:relative;
	overflow:auto;
	box-sizing:border-box;
	jwidth:100%;
	jheight:100%;
	/* Changes the scrollbar to be "thin" on FF */
	scrollbar-width:thin;
	scrollbar-color:rgba(255,255,255,0.5) rgba(0,0,0,0);
	jbackground-color:green;
	width:360px;
	height:360px;
	margin:auto;
}
.acgMediaPlayerDragHelpPointer
{
	position:absolute;
	left:0;
	top:0;
	z-index:999999;
	jbackground-image:url("images/mediaplayer/drag-pointer.png");
}
.acgMediaPlayerSpinIcon
{
	position:absolute;
	width:50px;
	right:0px;
	top:6px;
	z-index:2;
}
.acgMediaPlayerHotspotDetails
{
	joverflow-y:auto;
	jheight:5em;
}
.acgMediaPlayerProgressBarArea
{
	position:absolute;
	z-index:100;
	left:0;
	top:0;
	width:100%;
}
.acgMediaPlayerProgressBarAreaText
{
	text-align:center;
}