/* Minification failed. Returning unminified contents.
(24,160): run-time error CSS1039: Token not allowed after unary operator: '-text'
(179,79): run-time error CSS1039: Token not allowed after unary operator: '-main-color'
(185,197): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(186,145): run-time error CSS1039: Token not allowed after unary operator: '-tip'
(252,160): run-time error CSS1039: Token not allowed after unary operator: '-tip'
 */
* { /*box-shadow:inset 0 0 0 1px red;*/ margin: 0; padding: 0; box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent }

@keyframes pl_appear_bottom {
    from { transform: translateY(10px); opacity: 0; }
}

@keyframes pl_appear_left {
    from { transform: translateX(-10px); opacity: 0; }
}

@keyframes pl_appear_scale {
    from { transform: translateX(-10px); opacity: 0 }
    50% { transform: none; opacity: 1 }
    100% { transform: translateX(10px); opacity: 0 }
}


/*@font-face { font-family: player; src: url(/Content/Font/player.ttf?v=4.9.25_250820); }*/





player { /*height:360px; width:640px;*/ position: relative; overflow: hidden; background: rgb(25, 25, 25); display: flex; align-items: center; font-size: var(--text); height: 100%; flex-shrink: 0; }

view[fullscreen] player { height: 100% !important; width: 100% !important; background: #000 }

player engine {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}

/*player[single] engine[orientation="landscape"] {
    height: unset;
    aspect-ratio: 16 / 9;
}

player[single] engine[orientation="portrait"] {
    width: unset;
    aspect-ratio: 9 / 16;
}*/

player[single] engine[orientation] > video,
player[single] engine[orientation] > div {
    min-width: unset !important;
    min-height: unset !important;
}

/*view[fullscreen] player[single] engine[orientation="landscape"] {
    right: 0;
    margin: auto;
    width: 100vw;
    height: unset;*/
    /*aspect-ratio: 16 / 9;*/
/*}

view[fullscreen] player[single] engine[orientation="portrait"] {
    right: 0;
    margin: auto;
    width: unset;
    height: 100vh;*/
    /*aspect-ratio: 9 / 16;*/
/*}*/

@media (min-aspect-ratio: 16 / 9) {
    view[fullscreen] player[single] engine[orientation="landscape"] {
        width: unset;
        height: 100vh;
    }
}
@media (max-aspect-ratio: 9 / 16) {
    view[fullscreen] player[single] engine[orientation="portrait"] {
        width: 100vw;
        height: unset;
    }
}

player pl_toolbar { position: absolute; display: flex; align-items: center; color: #fff; }

player[desktop] pl_toolbar { transform: translateY(60px); opacity: 0; transition-delay: .325s; transition-duration: .175s; padding: 10px 20px 20px; height: 60px; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 3; user-select: none }

player[hover][mobile] pl_toolbar, player[state="pause"][mobile] pl_toolbar { opacity: 1 }
player[mobile] pl_toolbar { width: 100%; opacity: 0; padding: 0 15px; transition: .125s; bottom: 30px; left: 0; z-index: 2 }
/*player[mobile] pl_toolbar control { background: rgba(0,0,0,.2) }
*/




pl_mobile { display: none }

player[mobile] pl_mobile { display: flex; position: absolute; height: 100%; width: 100%;z-index:2 }
pl_mobile pl_seek { display: flex; position: absolute; height: 100%; width: 100%; }
pl_mobile pl_seek control { width: 100%; height: 0px; padding-bottom: 100%; position: absolute; border-radius: 50%; top: 50%; }
pl_mobile pl_seek control wrap { position: absolute; height: 100%; width: 50%; top: 0;  display: flex; align-items: center; justify-content: center; }

pl_mobile pl_seek control[left] { transform: translateY(-50%) translateX(-50%); }
pl_mobile pl_seek control[right] { transform: translateY(-50%) translateX(50%); }

pl_mobile pl_seek control[left] wrap{right:0;}
pl_mobile pl_seek control[right] wrap{left: 0;}

player[mobile] control[command="fullscreen"],
player[mobile] control[command="exitfullscreen"] { order: 3 }


pl_mobile pl_seek control wrap text { opacity:0; transition:.225s}




pl_mobile pl_seek control[left] wrap text{transform:translateX(-20px)}
pl_mobile pl_seek control[right] wrap text{transform:translateX(20px)}
pl_mobile pl_seek control.show wrap text{ opacity:1; transform:none  }

pl_mobile pl_seek control .material_ink{ opacity:0; transition:.225s}

pl_mobile pl_seek control.show .material_ink{opacity:1}
/** temp*/



@media (max-width: 400px) {

    player[mobile] wrap[time] { display: none }
}


/**/
player.pl_error content { display: none }

player content img { max-width: 100%; max-height: 100%; margin: auto; /*position: absolute;left: 50%;transform: translateX(-50%);*/ }
view[fullscreen] player content video { width: 100%; height: 100%; }
view[fullscreen] player content > img { height: 100%; }

player content iframe { width: 100%; height: 100%; display: flex; margin: auto; pointer-events: none; border: none; }
player content > iframe { min-width: 640px; min-height: 360px; }

view[fullscreen] player pl_timeline { transform: translateY(100%) translateX(0px)}


pl_overlay { position: absolute; height: 150px; left: 0; bottom: 0; transition-delay: .325s; transition-duration: .175s; width: 100%; background: linear-gradient(to top, rgb(25, 25, 25) 0%,rgba(0,0,0,0) 100%); pointer-events: none; opacity: 0; transform: translateY(100%); z-index:1; }
view[fullscreen] player pl_overlay { background: linear-gradient(to top, rgb(0,0,0) 0%,rgba(0,0,0,0) 100%); }


player[hover][desktop] pl_toolbar,
player[state="pause"][desktop] pl_toolbar,
player[hover][desktop] pl_overlay,
player[state="pause"][desktop] pl_overlay { transform: translateY(0px); transition-delay: 0s; opacity: 1; }



player[hover] pl_timeline,
view[fullscreen] player[hover] pl_timeline,
player[state="pause"] pl_timeline,
view[fullscreen] player[state="pause"] pl_timeline
{ transform: translateY(-60px) translateX(30px); transition-delay: 0s; width: calc(100% - 60px); height: 20px; }


player[hover][mobile] pl_timeline,
view[fullscreen] player[hover][mobile] pl_timeline,
player[state="pause"][mobile] pl_timeline,
view[fullscreen] player[state="pause"][mobile] pl_timeline { transform: translateY(-10px) translateX(20px); width: calc(100% - 40px); }


player.pl_error pl_timeline,
player.pl_error wrap[time],
player.pl_error wrap[volume] { display: none }


player pl_timeline { transform: translateY(0) translateX(0px); transition-delay: .425s; transition-duration: .175s; display: flex; height: 4px; width: 100%; position: absolute; left: 0; bottom: 0; align-items: center; cursor: pointer; z-index: 2; }

player pl_playprogress {background: #fff;background: #4e87de;background: var(--main-color);position: absolute;display: flex;height: 4px;border-radius: 10px;}
player pl_buffer {background: rgba(255,255,255,.5);position: absolute;display: flex;height: 4px;border-radius: 10px;}
player pl_progresshover {background: rgba(255,255,255,.3);position: absolute;display: flex;height: 4px;opacity: 0;transition-duration: .125s;transition-property: opacity;transition-delay: .225s;border-radius: 10px;z-index: 2;}



player pl_progresshover tip { white-space: nowrap; position: absolute; transform: translateY(0px) translateX(50%); padding: 6px 15px; bottom: 100%; right: 0; background: #424242; background: var(--tip); border-radius: 30px; color: #fff; position: absolute; pointer-events: none; visibility: hidden; opacity: 0; transition-delay: .125s; transition-duration: .125s; }
player pl_progresshover thumbnail { transition: opacity .225s; position: absolute; bottom: 50px; left: 0; background: #424242; background: var(--tip); pointer-events: none; visibility: hidden; opacity: 0; margin: 0; border-radius: 5px; box-shadow: 0 0 0 2px #fff; /* z-index: 1; */ }
player pl_progresshover thumbnail canvas { width: 100%; height: 100% }

pl_timeline[hover] pl_progresshover tip, pl_timeline[drag] pl_progresshover tip { visibility: visible; opacity: 1; transform: translateY(-10px) translateX(50%); }
pl_timeline[hover] pl_progresshover thumbnail.show, pl_timeline[drag] pl_progresshover thumbnail.show { visibility: visible; opacity: 1; }

player pl_timeline[hover] pl_progresshover, player pl_timeline[drag] pl_progresshover { opacity: 1; transition-delay: 0s }


player pl_bar {background: rgba(255,255,255,.15);position: absolute;display: flex;height: 4px;width: 100%;border-radius: 10px;}


player pl_drag { position: absolute; justify-content: center; align-items: center; right: -4px; top: -4px; width: 12px; height: 12px; display: flex; background: #fff; border-radius: 20px; transition-delay: .425s; transition-duration: .125s; transform: scale(0) }
player [drag] pl_drag, player pl_timeline[hover] pl_drag, player [volume_slider][hover] pl_drag { transform: scale(1); cursor: pointer; transition-delay: 0s; }


control[command="pause"],
control[command="play"] { animation: pl_appear_left .225s; }


player control[disabled="disabled"] { pointer-events: none; opacity: .5 }
player control { height: 40px; width: 40px; border-radius: 30px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; border-radius: 20px; }
player control circle { fill: rgba(255,255,255,.5); }

control[right] { margin-left: auto; }
player control:active icon { transform: translateY(1px) }


player[state="stop"] control[command="pause"],
player[state="play"] control[command="play"],
player[state="pause"] control[command="pause"],
view[fullscreen] player control[command="fullscreen"],
player control[command="exitfullscreen"],
player control[command="unmute"],
player wrap[jump],
player[muted] control[command="mute"],
.pl_loading messages icon[large],
control[command="play"] { display: none; }

view[cover] { background-size: cover; align-items: center; justify-content: center; background-position: center center; }
view[cover] .large { width: 70px; height: 70px; padding: 0; color: #fff; background: rgba(0,0,0,.7); border-radius: 50px; }
view[cover] .large icon { margin: auto }
view[cover] pl_layer { display: flex }

view[image] { background-size: contain; background-repeat: no-repeat; align-items: center; justify-content: center; background-position: center center; }


player[muted] control[command="unmute"],
view[fullscreen] player control[command="exitfullscreen"],
player[state="pause"] control[command="play"],
player[playlist] wrap[jump] { display: flex; }


player subtitle { display: none; z-index: 1; position: absolute; font-size: 18px; width: 100%; text-align: center; bottom: 0; transform: translateY(-20px); transition-duration: .225s; transition-delay: .325s; flex-direction: column; align-items: center; }
player subtitle.show { display: flex; }

subtitle p { background: rgba(0,0,0,.8); color: #fff; text-align: center; display: inline-block; }


player[hover][desktop] subtitle[float], player[state="pause"][desktop] subtitle[float], player[hover][desktop] subtitle [float], player[state="pause"][desktop] subtitle [float] { transform: translateY(-90px); transition-delay: 0s; }


player[hover][mobile] subtitle, player[state="pause"][mobile] subtitle, player[hover][mobile] subtitle, player[state="pause"][mobile] subtitle { transform: translateY(-80px); transition-delay: 0s; }



player [tip]:after { content: "" attr(tip) ""; white-space: nowrap; position: absolute; padding: 6px 15px; border-radius: 30px; bottom: 100%; background: var(--tip); color: #fff; position: absolute; pointer-events: none; visibility: hidden; opacity: 0; transition-delay: .125s; transition-duration: .125s; }
player [tip]:hover:after, [tip]:active:after, [drag] pl_drag:after { visibility: visible; opacity: 1; transform: translateY(-10px); }



/*player  icon{width:30px;height:30px;display:flex;-moz-font-feature-settings: "liga=1, dlig=1"; -ms-font-feature-settings: "liga", "dlig"; -webkit-font-feature-settings: "liga", "dlig"; -o-font-feature-settings: "liga", "dlig"; font-feature-settings: "liga", "dlig"; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility; font-family: player; display: flex; display: -ms-flexbox; display: -webkit-flex; align-items: center; -ms-flex-align: center; justify-content: center; -ms-flex-pack: center; font-size: 20px; font-weight: 400; font-style: normal; user-select: none;  cursor: default;  text-transform: lowercase; position: relative; z-index: 9; overflow:hidden; }*/
/*player  icon[middle]{font-size:30px}*/
player icon[large] { width: 60px; height: 60px; font-size: 60px; }

/*player[mobile] icon{font-size:24px;}*/


player messages { display: flex; width: 100%; height: 100%; flex-direction: column; position: absolute; color: #fff; align-items: center; justify-content: center; pointer-events: none; top: 0; left: 0; transition: .125s; transition-delay: .125s }
player messages wrap { display: flex; }

[mobile][state="pause"] messages, [mobile][hover] messages { height: calc(100% - 70px) }

player loader { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; display: none }

player loader spinner { height: 30px; width: 30px; position: absolute; }
player loader spinner svg { animation: rotate 2.5s linear infinite; width: 30px; height: 30px; }
player loader spinner svg circle { stroke-dasharray: 60; stroke-dashoffset: 0; stroke: #fff; stroke-linecap: round; animation: dash 1.25s ease-in-out infinite; }

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% { stroke-dasharray: 1,150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90,150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90,150; stroke-dashoffset: -124; }
}

@keyframes loader_appear {
    from { opacity: 0 }
    to { }
}


player messages text { display: none; flex-direction: column; text-align: center; animation: pl_appear_bottom .225s backwards }
player messages text[light] { opacity: .5; animation: pl_appear_bottom .325s .125s backwards }
player.pl_error messages text { display: flex; }

player.pl_error { min-width: 320px; min-height: 320px; }

player messages icon { display: none; }

/**/

/*show message items*/


[desktop][action][state="pause"]:not(.pl_error):not(.pl_loading) messages icon[pause],
[desktop][action][state="play"]:not(.pl_error):not(.pl_loading) messages icon[play] { display: flex; animation: pl_appear_scale .85s both; }

.pl_loading > messages loader, .pl_loading [main] messages loader { display: flex; animation: loader_appear .125s .125s both }

/**/



pl_layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: .5; z-index: 2; pointer-events: none; display: none }

player[state="pause"] pl_layer,
player[mobile][state="play"][hover] pl_layer { display: flex; }

player content { display: flex; width: 100%; height: 100%; transition: .125s; position: relative; top: 0; left: 0; margin: auto; }
player content zone { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; }
player content zone ~ zone { z-index: 1; }
player content zone img { margin: auto; max-width: initial; max-height: initial; width: 100%; }

player content video { max-width: initial; max-height: initial; width: 100%; height: 100%; margin: auto; }

player [image_contain] engine > div { background-size: contain !important; }


pl_toolbar wrap { display: flex; justify-content: center; align-items: center; z-index: 1 }



player volume {width: 0;height: 4px;background: rgba(255,255,255,.5);position: relative;display: flex;visibility: hidden;opacity: 0;transition-delay: .425s;transition-duration: .125s;cursor: pointer;border-radius: 30px;}
player volume slider {background: #fff;height: 4px;display: flex;position: relative;border-radius: 5px;}
player wrap[volume][show] volume, wrap[volume][drag] volume { visibility: visible; opacity: 1; transition-delay: 0s; width: 80px; }
player wrap[volume][show] volume, player wrap[volume][drag] volume { margin: 0 10px }
player wrap[volume] wrap { height: 20px; cursor: pointer; }

player[desktop] pl_separator { height: 30px; width: 1px; background: #fff; display: flex; margin: 0 10px; opacity: .15 }

player wrap[time] span { padding: 5px; }

player[state="play"] { cursor: none; }

player[hover] { cursor: inherit; }