/* Media
/* ######################################################################################### */
:root {
    --nui-media: "nui_media_2.0.0";
}

body {
	--media-control-height: 6rem;
	--media-control-maxwidth: 65rem;
	--media-control-shade: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	--media-text: rgb(0,0,0);
	--media-text-dim: rgb(50,50,50);
	--media-bar-back: rgba(180,180,180,0.4);
	--media-bar-proz: rgba(180,180,180);
	--media-bar-proz-playing: var(--color-highlight);
	--media-timeline-height: 0.4rem;
	--media-volume-width: 7rem;
	--media-text-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.3);
	--media-widget-back: rgb(110,110,110);
	--media-widget-text: rgba(255,255,255);
	--media-widget-arrow: 0.65rem;
	--media-widget-offset: calc(var(--media-control-height)*0.7);
	--media-box-back: rgba(255,255,255);
	--media-box-radius: 0.2rem;
	--media-box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.5);
}

body.dark,
.nui-media.video {
	--media-control-shade: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
	--media-text: rgb(255,255,255);
	--media-text-dim: rgb(220,220,220);
	--media-bar-back: rgba(180,180,180,0.4);
	--media-bar-proz: rgba(180,180,180);
	--media-bar-proz-playing: rgb(255,255,255);
	--media-timeline-height: 0.4rem;
	--media-volume-width: 7rem;
	--media-text-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.3);
	--media-widget-back: rgb(110,110,110);
	--media-widget-text: var(--media-text);
	--media-widget-arrow: 0.65rem;
	--media-widget-offset: calc(var(--media-control-height)*0.7);
	--media-box-back: rgba(0,0,0,0.1);
	--media-box-radius: 0.2rem;
	--media-box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.5);
}

.nui-media.video {
	background-color: black;
}
.nui-media {
	position: relative;
	padding: 0;
	border-radius: var(--media-box-radius);
	box-shadow: var(--media-box-shadow);
	overflow: hidden;
	display: flex;
	align-items: center;
	background-color: var(--media-box-back);
	z-index: 1;
	transition: opacity 0.3s;
}

.nui-media video {
	display: block;
	object-fit: contain;
	width: 100%;
	margin: 0;
	outline: 0;
	padding: 0;
}

/* Media Main */

.nui-media .wrap{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.nui-media .wrap .controls{
	pointer-events: none;
	display: none;
	opacity: 1;
	transition: opacity 0.3s;
}

.nui-media.init .wrap .controls{
	pointer-events: all;
	display: flex;
}

.nui-media .controls{
	position: absolute;
	bottom:0;
	width: 100%;
	height: 100%;
	z-index: 1;
	color: var(--media-text);
	text-shadow: var(--media-text-shadow);
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.nui-media .fullscreen {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 3.7rem;
	height: 3.7rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 0.2rem;
	color: var(--media-text-dim);
	text-shadow: var(--media-text-shadow);
	opacity: 0;
	transform: scale(0);
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	z-index: 2;
}

.nui-media .fullscreen svg{
	position: absolute;
	width: 1.7rem;
	height: 1.7rem;
	fill: var(--media-text-dim);
	transition: all 0.3s;
}

.nui-media .fullscreen:hover{
	background-color: rgba(0,0,0,0.7);
}
.nui-media .fullscreen:hover svg{
	fill: var(--media-text);
}
.nui-media .info {
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 2.2rem;
	height: 2.2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgba(0,0,0,0);
	color: var(--media-text-dim);
	text-shadow: var(--media-text-shadow);
	opacity: 1;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	z-index: 2;
	pointer-events: none;
}

.nui-media .info .ii_sync {
	position: absolute;
	z-index: 10;
	fill: var(--media-text);
	width: 1.7rem;
	height: 1.7rem;
	animation: load_spin 1.5s linear infinite;
}
.nui-media.video .info {
	width: 6rem;
	height: 6rem;
	background-color: rgba(0,0,0,0.3);
	top: calc(50% - 3rem);
	left: calc(50% - 3rem);
	border-radius: 1rem;
}

.nui-media.video .info .ii_sync{
	width: 3rem;
	height: 3rem;
}
/* Media Bottom */

.nui-media .controls .bottom{
	position: absolute;
	bottom: calc(var(--media-control-height)*-1);
	width: 100%;
	max-width: var(--media-control-maxwidth);
	height: var(--media-control-height);
	display: inline-flex;
	align-items: center;
	opacity: 0;
	transition: all 0.4s;
	transition-property: bottom, opacity;
	z-index: 1;
	user-select: none;
}

.nui-media .bottom_shade{
	position: absolute;
	bottom: calc(var(--media-control-height)*-1);
	width: 100%;
	height: calc(var(--media-control-height)*1.5);
	background: var(--media-control-shade);
	pointer-events: none;
	opacity: 0;
	transition: all 0.5s;
	transition-property: bottom, opacity;
}

.nui-media .controls .bottom div{
	height: 100%;
	width: 4rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	transition: width 0.3s ease-in-out;
	overflow: hidden;
}

.nui-media .controls .bottom .playpause {
	width: 5rem;
	justify-content: center;
	cursor: pointer;
}

.nui-media .controls .bottom .playpause svg{
	position: absolute;
	fill:var(--media-text-dim);
	transition: transform 0.2s ease-in-out;
	height: 1.7rem;
	width: 1.7rem;
}

.nui-media .controls .bottom .playpause .ii_pause{
	transform: scale(0);
}


.nui-media.playing .controls .bottom .playpause .ii_play {
	transform: scale(0);
}
.nui-media.playing .controls .bottom .playpause .ii_pause {
	transform: scale(1);
}

.nui-media .controls .bottom .time {
	padding-right: 1rem;
}
.nui-media .controls .bottom .duration {
	justify-content: flex-start;
	color:var(--media-text-dim);
}

.nui-media .controls .bottom .volume_icon{
	width: 4rem;
	justify-content: flex-start;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.nui-media .controls .bottom .volume_icon svg{
	position: absolute;
	width: 1.7rem;
	height: 1.7rem;
	fill: var(--media-text-dim);
}


/* Media Sliders */

.nui-media .controls .bottom .volume{
	width: 0rem;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.nui-media .controls .bottom .timeline {
	position: relative;
	flex-grow: 1;
	cursor: pointer;
}

.nui-media .controls .bottom .bar{
	position: relative;
	height: var(--media-timeline-height);
	width: 100%;
	background-color: var(--media-bar-back);
	pointer-events: none;
}

.nui-media .controls .bottom .bar .proz{
	position: absolute;
	left:0;
	height: 100%;
	width: 0%;
	background-color: var(--media-bar-proz);
	transition: width 0.05s;
}
.nui-media.playing .controls .bottom .bar .proz{
	background-color: var(--media-bar-proz-playing);
}

.nui-media .widget {
	position: absolute;
	font-size: 0.8rem;
	left: 50%;
	bottom: calc(var(--media-control-height)*0.75);
	bottom: var(--media-widget-offset);
	color: var(--media-widget-text);
	width: 5rem;
	height: 2rem;
	text-align: center;
	line-height:2rem;
	background-color: var(--media-widget-back);
	transform-origin: 50% 100%;
	border-radius: 0.15em;
	margin-top: calc(var(--media-timeline-padding)* 1px);
	transform: translate(-2.5rem, calc(var(--media-widget-arrow)*-1) );
	filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.3));
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.2s;
 }

.nui-media .widget:before {
	content: "";
	height: 0;
	position: absolute;
	width: 0;
	border-color: transparent;
	border-style: solid;
	border-top-color: var(--media-widget-back);
	border-width: var(--media-widget-arrow);
	left: 50%;
	top: 95%;
	margin-left: calc(var(--media-widget-arrow)*-1);
	z-index: -1;
}

/* Media States */

.nui-media.volume-show .controls .volume{
	width: var(--media-volume-width);
}
.nui-media.volume-show .controls .volume_icon{
	padding-left: 1.5rem;
}
.nui-media.volume-show .controls .hitrect div:nth-child(1) {
	width: 13rem;
}

.nui-media.controls-show .controls .bottom{
	bottom: 0;
	opacity: 1;
}
.nui-media.controls-show .bottom_shade{
	bottom: 0;
	opacity: 1;
}

.nui-media.controls-show .fullscreen {
	opacity: 1;
	transform: scale(1);
}

.nui-media.widget-show .widget {
	opacity: 1;
}


.nui-media.audio {
	--media-control-height: 4rem;
	height: var(--media-control-height);
	overflow: unset;
	transition: background-color 0.2s;
}



.nui-media.audio .info {
	border-radius: unset;
	top: 0;
	left:0;
	width: 5rem;
	height: 100%;
	z-index: -1;
}

.nui-media.audio .info::after {
	font-size: 2.7rem;
	opacity: 0.3;
}



.nui-media.audio .bottom{
	opacity: 1;
	bottom: 0;
}

.nui-media.audio.inline {
	--media-control-height: 3rem;
	--media-widget-offset: 2.5rem;
	background-color: transparent;
	box-shadow: unset;
}

.nui-media.audio.inline .playpause{
	justify-content: flex-start;
	width: 3.5em;
}

.nui-media.audio.inline .volume_icon{
	justify-content: flex-end;
	width: 2em;
}

@media only screen and (max-width: 530px) {
	.nui-media  {
		--media-control-height: 4rem;
		--media-volume-width: 5rem;
	}
	.nui-media .controls .bottom .playpause::after{
		font-size: 1.7rem;
	}

	.nui-media .controls .bottom .volume_icon::after{
		font-size: 1.7rem;
	}
}

@keyframes load_spin {
	0% {
	  transform: rotate(360deg);
	  opacity: 0.2;
	}
	50% {
		opacity: 1;
	  }
	100% {
	  transform: rotate(0deg);
	  opacity: 0.2;
	}
  }

  .nui-media.video.outside {
	overflow: unset;
	margin-bottom: var(--media-control-height);
  }
  .nui-media.video.outside .wrap {
	height: 100%;
	top:0;
	padding-bottom: var(--media-control-height);
  }
  .nui-media.video.outside .bottom_shade{
	display: none;
  }
  .nui-media.video.outside .controls{
	overflow: unset;
  }

  .nui-media.video.outside .fullscreen{
	display: none;
  }

  .nui-media.video.outside {
	--media-text: rgb(0,0,0);
	--media-text-dim: rgb(50,50,50);
	--media-bar-back: rgba(180,180,180,0.4);
	--media-bar-proz: rgba(180,180,180);
	--media-bar-proz-playing: var(--color-highlight);
	--media-text-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.3);
	--media-widget-back: rgb(110,110,110);
	--media-widget-text: rgb(255,255,255);
	--media-box-back: rgba(255,255,255);
}

.dark .nui-media.video.outside {
	--media-text: rgb(255,255,255);
	--media-text-dim: rgb(220,220,220);
	--media-bar-back: rgba(180,180,180,0.4);
	--media-bar-proz: rgba(180,180,180);
	--media-bar-proz-playing: rgb(255,255,255);
	--media-text-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.3);
	--media-widget-back: rgb(110,110,110);
	--media-widget-text: var(--media-text);
	--media-box-back: rgba(0,0,0,0.1);
}