:host{
    font:13px/normal Helvetica,Arial;
    contain:style size;
    z-index:500;
    color:#fff
}
a,
button,
input{
	all:unset;
	margin:0;
	padding:0;
    cursor:pointer;
    direction:ltr
}
a:hover,
button:hover{
    color:var(--tf_vd_ch,#0073aa)
}
button:focus-visible{
	outline:1px solid currentColor
}
input{
	-webkit-appearance:none;
	appearance:none
}
video{
	object-fit:cover;
    min-height:0
}
.mute,
.tf_fa{
    width:1em;
    height:1em;
    stroke-width:0;
    stroke:currentColor;
    fill:currentColor;
    text-rendering:optimizeSpeed;
    buffered-rendering:static
}
.flex{
	display:flex;
    place-content:center;
    place-items:center;
	flex-wrap:wrap
}
.wrap{
	z-index:10
}
.controls{
	top:100%;
	column-gap:12px;
	padding:7px 20px;
	transform:translateY(-100%);
	transition:transform .3s .5s;
	background:linear-gradient(transparent,rgba(0,0,0,.35))
}
.show .controls,
.wrap:hover .controls{
	transition-delay:.2s;
	transform:translateY(-100%)
}
.btns{
    display:grid;
    font-size:1.5em;
    align-items:center;
    grid-auto-flow:column;
    column-gap:15px
}
.pr_wr{
    background:rgba(255,255,255,.8);
    flex-grow:1;
    height:10px;
    border-radius:3px
}
.wait .pr_wr{
    background:linear-gradient(-45deg,rgba(255,255,255,.4) 25%,transparent 0,transparent 50%,rgba(255,255,255,.4) 0,rgba(255,255,255,.4) 75%,transparent 0,transparent);
    background-size:15px 15px;
    animation:buffering 2s linear infinite
}
.pr,
.cur,
.ld{
    contain:style size;
    border-radius:inherit;
    z-index:1
}
.ld,
.cur{
	background:var(--tf_vd_ld,#fff);
    transform-origin:0 0;
    transform:scaleX(0);
    transition:transform .2s linear
}
.cur{
    background:var(--tf_vd_c,#0073aa);
    z-index:2
}
.pr{
	z-index:3
}
.pr::-webkit-slider-thumb{
	-webkit-appearance:none;
	appearance:none;
    width:10px
}
.pr::-moz-range-thumb{
	appearance:none;
    width:10px
}
.htime{
    top:auto;
    bottom:100%;
    z-index:4;
    font-size:.769em;
	border-radius:50em;
    background:#000;
    padding:3px 6px 7px;
    flex-direction:column; 
    contain:style layout;
	margin-block-end:7px;
	margin-inline-start:2px
}
.htime:after{
    content:'';
    width:0;
    height:0;
    border:7px solid transparent;
    border-block-end-width:0;
    border-block-start-color:#000;
    margin-block-end:-11px
}
.play:before{
    content:"";
    width:0;
    height:0;
    border:0 solid transparent;
    border-width:.7em 0 .7em 1.4em;
    border-left-color:currentColor;
    transition:.1s height linear,.1s border-width linear
}
.lpw_play{
    top:20px;
	inset-inline:auto 10px
}
.playing .play:before{
    border-style:double;
    border-width:0 .4em 0 1em;
    height:14px
}
.vol{
	cursor:s-resize
}
.vol::-webkit-slider-thumb{
    -webkit-appearance:none;
	appearance:none;
    box-shadow:-100vw 0 0 100vw currentColor;
    width:0
}
.vol::-moz-range-thumb{
	appearance:none;
    box-shadow:-100vw 0 0 100vw currentColor;
    width:0
}
.mute .tf_fa{
    transition:transform .1s,visibility .1s
}
.muted .tf-fas-volume-up,
.tf-fas-volume-mute{
	visibility:hidden;
	transform:translateX(-100%)
}
.muted .tf-fas-volume-mute{
	visibility:visible;
	transform:translateX(0)
}
.vol_in{
    position:absolute;
    bottom:100%;
    width:115px;
    height:8px;
    background:rgba(255,255,255,.33);
    transform:rotate(-90deg) scaleX(0);
    transition:transform .5s .3s;
    left:4px;
    transform-origin:0 0
}
.vol_wr:hover .vol_in{
	transition-delay:.1s;
	transform:rotate(-90deg) scaleX(1)
}
.vol_in:after,
.vol_in:before{
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	transform:translateY(-100%)
}
.vol_in:after{
	transform:translateY(100%)
}
.hide_ctl{
	cursor:none
}
.hide_ctl.fullscreen .controls,
.playing .controls{
	transition-delay:1.5s;
	transform:translateY(100%)
}
.sk{   
	position:absolute;
	top:50%;
	left:15px; 
	background:rgba(0,0,0,.6);
	border-radius:50%;
	width:6em;
	height:6em;
	transform:translateY(-50%);
	transition:opacity .3s;
	content-visibility:auto;
	pointer-events:none;
    font-size:.7em
}
.sk_r{
	left:auto;
	right:15px
}
.sk:before{
    font-size:5em;
	content:"\21BA"
}
.sk_r:before{
	content:"\21BB"
}
.show .big_btn,
.show .sk{
	pointer-events:auto;
	opacity:1
}
.big_btn{
	transition:opacity .3s;
	border-radius:100%;
	padding:1.2em 1.05em;
	background:#fff;
	color:#000
}
.big_btn:before{
	margin:0 0 0 4px;
	font-size:1.3em
}
.playing .big_btn{
	opacity:0
}
.playing .big_btn:before{
	margin:0 -2px 0 6px;
	height:23px
}
.tf_loader{
    font-size:5em
}
.tf_loader:before{
	border:.1em solid rgba(255,255,255,.5);
    border-left-color:rgba(255,255,255,.9)
}
.wait .tf_loader{
	display:block
}
@media(pointer:coarse){
	.big_btn{
		pointer-events:none
	}
	.controls{
		padding:7px
	}
	.mute:focus + .vol_in{
		transition-delay:.1s;
		transform:rotate(-90deg) scaleX(1)
	}
}
.pl_wr{
    right:0;
    left:auto;
	width:25%;
    max-width:250px;
    place-content:start;
    transition:transform .3s,opacity .3s;
    background:#000
}
.pl{   
	display:grid;
    row-gap:10px; 
    grid-auto-rows:80px;
    overflow-y:auto;
    padding-block-end:50px;
    transform:translateY(35px);
    border-top:1px solid #666060
}
.pl_v{
    display:grid;
    grid-template-columns:1fr 2fr;
    padding:10px;
	padding-inline:10px 5px;
    column-gap:10px;
    background:#101010;
	transition:background .3s;
    cursor:pointer
}
.pl_v .tf_loader{
    font-size:2em;
    top:50%;
    left:23px;
    transform:translateY(-50%);
}
.pl_sel,
.pl_v:hover{
	background:rgba(255,255,255,.1)
}
.pl_sel video{
	outline:1px solid #f00
}
.pl_info{
    place-content:start;
    row-gap:5px
}
.pl_dur{
    position:absolute;
    font-size:10px;
    background:#000;
    bottom:0;
    inset-inline-end:0;
    padding:0 4px
}
.pl_title{
    font-size:.923em
}
.pl_cap{
    text-overflow:ellipsis;
    white-space:nowrap;
	color:#b8b8b8;
    font-size:.846em
}
.pl_sel_title{
    max-width:80%;
    margin:4px 0 0;
	margin-inline-start:10px;
    text-overflow:ellipsis;
    white-space:nowrap
}
.pl_close{
    width:16px;
    height:16px;
	margin:5px;
	margin-inline:auto auto
}
.pl_open{
    position:absolute;
    top:10px;
    right:10px;
    width:25px;
    height:25px;
    grid-template:1fr 1fr 1fr/1fr 1fr 1fr;
    gap:2px;
    color:#dfe4da
}
.pl_open span{
	background:currentColor;
	border-radius:3px
}
.pl_hide .pl_open{
    display:grid
}
.pl_hide .pl_wr{
    pointer-events:none;
	opacity:0;
	transform:translateX(100%)
}
@keyframes buffering{
    0{background-position:0 0}
    to{background-position:30px 0}
}