.nativemediaplayer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--header-bg-color-inactive);
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.nativemediaplayer > .metadata {
	z-index: 4;
	position: absolute;
	width: 0;
	height: 0;
}

.nativemediaplayer > .digitalzoom-eventlayer {
	z-index: 5;
	position: absolute;
	width: 100%;
	height: 100%;
	background: none;
	cursor: move;

	display: flex;
	align-items: center;
	justify-content: center;
}

.nativemediaplayer > .snapshot {
	z-index: 6;
	position: absolute;
	width: 100%;
	height: 100%;
	color: #E4E4E4;

	display: flex;
	align-items: center;
	justify-content: center;

	/*cursor: pointer;*/
}
.nativemediaplayer > .snapshot > img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
}

.mediaplayer-controls {
	z-index: 7;
	position: absolute;
	width: 100%;
	height: 100%;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}
.nativemediaplayer > .mediaplayer-controls:hover {
	color: #FF0000;
}
.nativemediaplayer >.mediaplayer-controls > .play,
.nativemediaplayer >.mediaplayer-controls > .pause {
	/*position: absolute;*/
	font-size: 68px;
	width: 68px;
	height: 68px;
}
.nativemediaplayer >.mediaplayer-controls > .pause {
	display: none;
}
.nativemediaplayer > .mediaplayer-controls:hover > .pause {
	display: unset;
}

.nativemediaplayer > .progress {
	z-index: 7;
	position: absolute;
	width: 100%;
	height: 100%;
	color: #E4E4E4;

	display: flex;
	align-items: center;
	justify-content: center;

	cursor: pointer;
}
.nativemediaplayer > .progress > .indicator{
	color: #ffffff;
	font-size: 2em;
}

.nativemediaplayer > .error {
	z-index: 10;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	text-align: center;
	line-height: 25px;
	color: #FF0000;
	background-color: #CACACA;
}
