.html5_button {
 font-family: 'Material Icons' !important;
 font-size: 14px;
 color: #ffffff;
 width: 50px;
 height: 34px;
 overflow: hidden;
 background: transparent;
 border: none;
}

.material_icons {
  font-family: 'Material Icons' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

video {
  width: 100%;
  height: 100%;
}

.vop-video-container {
  width: 100%;
  height: 100%;
}

.player {
  position: relative;
  width: 100%;
  height: 100%;  
}

.live_player {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
font-size: 11px;
outline: 0px;
}

.vop_help_text {
  position: absolute;
  top: -26px;
  height: 22px;
  padding: 0 4px;
  background-color: #252525;
  display: none;
}

.universe_player {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  font-size: 11px;
  outline: 0px;
  }

/******** Begin Tooltip ********/
.vop_tooltip {
position: absolute;

bottom: 50px;
z-index: 15;

display: none;

/*Don't enable select state*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

@media screen and (min-width: 1920px) {
  .vop_tooltip {
  position: absolute;
  bottom: 75px;
  z-index: 15;
  display: none;
  user-select: none;
  }
}

.vop_tooltip_bg {
position: relative;
width: 158px;
height: 90px;
background-color: #000;
background-repeat: no-repeat;
display: none;
}

.vop_tooltip_text_wrapper {
border-radius: 3px;
font-size: 11px;
}

.vop_tooltip_text {
display: block;
color: white;
background-color: rgba(28,28,28,0.9);
border-radius: 2px;
padding: 5px 9px;
}

.vop_preview {
padding: 2px;
background-color: rgba(28,28,28,0.9);
border-radius: 2px
}

.vop_preview .vop_tooltip_bg {
display: block;
}

.vop_preview .vop_tooltip_text_wrapper {
position: absolute;
bottom: 5px;
left: 0;
width: 100%;
text-align: center;
}

.vop_preview .vop_tooltip_text {
display: inline;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}
/******** End Tooltip ********/

.vop_gradient_bottom {
width:100%;position:absolute;background-repeat:repeat-x;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);-moz-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);-webkit-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
pointer-events:none;
}

.vop_gradient_bottom { height:49px;padding-top:49px;bottom:0;z-index:2;background-position:bottom }

.vop_control_bar {
position:absolute;
text-shadow:0 0 2px rgba(0,0,0,.5);
display: none;
}
.vop_control_bar {
left: 12px;
right: 0;
bottom: 0px;
height: 42px;
z-index: 2000;
text-align: left;
direction: ltr;
}
.vop_control_bar {
-moz-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}

.vop_progress_bar {
position: absolute;
width: calc(100% - 12px);
height: 5px;
background-color: rgba(192,192,192,0.3);
cursor: default;
}

.vop_pointer {
  cursor: pointer;
}

.vop_progress_list {
position: absolute;
background: rgba(255,255,255,.2);
height: 100%;
width: 100%;
}

.vop_load_progress,
.vop_play_progress,
.vop_hover_progress {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 100%;

-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}

.vop_load_progress {
background: rgba(255,255,255,.4);
}

.vop_play_progress {
background-color: #E32826;
transform: scaleX(0);
}

.vop_hover_progress {
background: rgba(255,255,255,.5);
opacity: 0;
-moz-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition: opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}

.vop_progress_bar:hover .vop_hover_progress {
opacity: 1;
}

.vop_scrubber_container {
position:absolute;
height:13px;
width:13px;
border-radius:6.5px;
top:-4px;
left:-6.5px;
background-color: #E32826;
transform: translateX(0px);
pointer-events: none;

}

.vop_live_container {
  position: absolute;
  height: 13px;
  width: 2px;
  top: -4px;
  left: -6.5px;
  background-color: #fff;
  transform: translateX(0px);
  pointer-events: none;
  display: none;
}

.vop_live_container > div {
  position: absolute;
  bottom: 20px;
  left: -10px;
}

.vop_controls {
position: absolute;
width: 100%;
height: calc(100% - 6px);
top: 6px;
overflow: hidden;
}

.vop_left_controls {
height: 100%;
width: 40%;
float: left;
}

.vop_right_controls {
height: 100%;
width: auto;
float: right;
}

/******** Begin custom button *********/
.vop_button {
width: 36px;
height: 36px;
border: 0;
background-color: transparent;
color: white;
cursor: pointer;
padding: 0;

/*Don't enable select state*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.vop_button:focus,
.vop_button {outline:0}
.vop_button::-moz-focus-inner {padding:0;border:0}

.vop_play_button,
.vop_mute_button,
.vop_startover_button,
.vop_replay_10s_button, 
.vop_backtolive_button,
.vop_volume_panel,
.vop_time_display,
.vop_stop_button
{
float: left;
}

/* ripple-effect */
@keyframes effect_dylan {
  50% {
    transform: scale(1.5, 1.5);
    opacity: 0;
  }
  99% {
    transform: scale(0.001, 0.001);
    opacity: 0;
  }
  100% {
    transform: scale(0.001, 0.001);
    opacity: 1;
  }
}




/* time unit */
.vop_time_display {
float: left;
height: 100%;
width: auto;
padding-left: 6px;
padding-top: 2px;
display:table;

/*Don't enable select state*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.vop_time_text {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: normal;
font-size: 11px;
}

/* .vop_subtitles_button {
display: none;
} */

/******** End custom button ********/

/************ Begin volume bar ************/
.vop_volume_panel {
float: left;
width: 52px;
height: 100%;
cursor: pointer;
margin: 0 10px;
margin-top: 1px;
}

.vop_volume_slider {
position:relative;
top: calc(50% - 3px);
height:3px;
background-color: #fff;
}

.vop_volume_slider_handle {
position:absolute;top:50%;width:10px;height:10px;border-radius:5px;margin-top:-5px;background:#fff;
}
/************ End volume bar ************/

.vop_autohide { cursor:none }
.vop_autohide .vop_gradient_bottom {
display: none;
}
.vop_autohide .vop_control_bar {
opacity: 0;
-moz-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}

.vop_autohide * {
cursor: none;
}

.vop_invisible {
  opacity: 0;
}

.vop_invisible {
  -moz-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
  -webkit-transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
  transition:opacity .25s cubic-bezier(0.0,0.0,0.2,1);
}

.changewidth_control_bar {
  width: 83%;
}

/************ Begin vop popup menu ************/
.vop_popup {
position: absolute;
overflow-x: auto;
max-height: 350px;
border-radius: 2px;
background: rgba(28,28,28,0.9);
text-shadow: 0 0 2px rgba(0,0,0,.5);
-moz-transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1);
-webkit-transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1);
transition: opacity .1s cubic-bezier(0.0,0.0,0.2,1);
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}

.vop_settings_menu {
right: 11px;
bottom: 42px;
z-index: 3000;
}

.vop_panel {
bottom: 0;
right: 0;
overflow-y: auto;
overflow-x: hidden;
}

.vop_panel_header {
border-bottom: 1px solid rgba(255,255,255,0.2);
line-height: inherit;
color: #eee;
padding: 6px 0;
height: 33px;
white-space: nowrap;
}

.vop_panel_title {
font-weight: 500;
padding: 0 10px 0 35px;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: left 3px center;
background-size: 32px 32px;
-moz-background-size: 32px 32px;
-webkit-background-size: 32px 32px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJNIDE5LjQxLDIwLjA5IDE0LjgzLDE1LjUgMTkuNDEsMTAuOTEgMTgsOS41IGwgLTYsNiA2LDYgeiIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=);

background-color:transparent;
border:none;
color:inherit;
cursor: pointer;
outline: 0px;
}

.vop_panel_title[role=plain] {
background-image: none;
padding: 0;
width: 100%;
font-size: 11px;
}

.vop_panel_menu {
padding: 6px 0;
box-sizing: border-box;

color: #eee;
width: 100%;

display: table;
}

.vop_menuitem {
width: 100%;
height: 33px;
cursor: pointer;
display: table-row;
white-space: nowrap;
outline: 0px;
}

.vop_menuitem:hover {
background-color: rgba(255,255,255,.1);
}

.vop_menuitem_label {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
font-size: 11px;
}

.vop_menuitem_content {
display: table-cell;
vertical-align: middle;
padding: 0 15px;
font-size: 11px;
text-align: right;
}

.vop_menuitem_content_text {
font-size: 11px;
color: #ccc;
}

.vop_menuitem_toggle_checkbox {
height: 14px;
width: 36px;
float: right;
position: relative;
border-radius: 14px;
background: rgba(255,255,255,0.3);
-moz-transition: all .08s cubic-bezier(0.4,0.0,1,1);
-webkit-transition: all .08s cubic-bezier(0.4,0.0,1,1);
transition: all .08s cubic-bezier(0.4,0.0,1,1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1)
}

.vop_menuitem_toggle_checkbox:after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
border-radius: 20px;
margin-top: -3px;
background-color: #bdbdbd;
box-shadow: 0 1px 5px 0 rgba(0,0,0,0.6);
-moz-transition: all .08s cubic-bezier(0.4,0.0,1,1);
-webkit-transition: all .08s cubic-bezier(0.4,0.0,1,1);
transition: all .08s cubic-bezier(0.4,0.0,1,1)
}

.vop_menuitem[role=menuitemradio]
.vop_menuitem_label {
padding-left: 35px;
padding-right: 20px;
border-bottom: none;
}

.vop_menuitem[role=menuitemradio][aria-checked=true]
.vop_menuitem_label {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJNOSAxNi4yTDQuOCAxMmwtMS40IDEuNEw5IDE5IDIxIDdsLTEuNC0xLjRMOSAxNi4yeiIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=);
background-repeat: no-repeat;
background-size: 18px 18px;
-moz-background-size: 18px 18px;
-webkit-background-size: 18px 18px;
background-position: left 10px center;
}

.vop_menuitem[aria-haspopup=true]
.vop_menuitem_content {
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 32px 32px;
-moz-background-size: 32px 32px;
-webkit-background-size: 32px 32px;
padding-right: 38px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwJSIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMzIgMzIiIHdpZHRoPSIxMDAlIj48cGF0aCBkPSJtIDEyLjU5LDIwLjM0IDQuNTgsLTQuNTkgLTQuNTgsLTQuNTkgMS40MSwtMS40MSA2LDYgLTYsNiB6IiBmaWxsPSIjZmZmIiAvPjwvc3ZnPg==);
}

.vop_menuitem[aria-checked="true"]
.vop_menuitem_toggle_checkbox {
background: #E32826
}

.vop_menuitem[aria-checked="true"]
.vop_menuitem_toggle_checkbox:after {
background-color: #fff;
-moz-transform: translateX(16px);
-ms-transform: translateX(16px);
-webkit-transform: translateX(16px);
transform: translateX(16px)
}


.vop_fccitem_checkbox {
width:18px;
height:18px;
margin-top:8px;
}

.vop_fccpropertyitem_input {
margin-top: 5px;

}
/************ End vop popup menu ************/

/************ Begin loading animation ************/
.vop_spinner {
position: absolute;
left: calc(50% - 25px);
top: calc(50% + 75px);
width: 50px;
z-index: 18;
pointer-events: none;
display: none;
}

.vop_spinner_container {
pointer-events: none;
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
margin-top: -50%;
margin-left: -50%;
animation: vop_spinner_linspin 1568.23529647ms linear infinite;
-webkit-animation: vop_spinner_linspin 1568.23529647ms linear infinite;
}

.vop_spinner_rotator {
position: absolute;
width: 100%;
height: 100%;
-webkit-animation: vop_spinner_easespin 5332ms cubic-bezier(0.4,0.0,0.2,1) infinite both;
animation: vop_spinner_easespin 5332ms cubic-bezier(0.4,0.0,0.2,1) infinite both;
}

.vop_spinner_left {
position: absolute;
top: 0;
left: 0;
bottom: 0;
overflow: hidden
}

.vop_spinner_right {
position: absolute;
top: 0;
right: 0;
bottom: 0;
overflow: hidden
}

.vop_spinner_left {
right: 49%
}

.vop_spinner_right {
left: 49%
}

.vop_spinner_circle {
box-sizing: border-box;
position: absolute;
width: 200%;
height: 100%;
border-style: solid;
border-color: #e32826 #e32826 transparent;
border-radius: 50%;
border-width: 6px
}

.vop_spinner_left .vop_spinner_circle {
left: 0;
right: -100%;
border-right-color: transparent;
-webkit-animation: vop_spinner_left_spin 1333ms cubic-bezier(0.4,0.0,0.2,1) infinite both;
animation: vop_spinner_left_spin 1333ms cubic-bezier(0.4,0.0,0.2,1) infinite both;
}

.vop_spinner_right .vop_spinner_circle {
left: -100%;
right: 0;
border-left-color: transparent;
-webkit-animation: vop_spinner_right_spin 1333ms cubic-bezier(0.4,0.0,0.2,1) infinite both;
animation: vop_spinner_right_spin 1333ms cubic-bezier(0.4,0.0,0.2,1) infinite both;
}

@-webkit-keyframes vop_spinner_linspin {
to {
  -webkit-transform: rotate(360deg)
}
}

@keyframes vop_spinner_linspin {
to {
  transform: rotate(360deg)
}
}

@-webkit-keyframes vop_spinner_easespin {
12.5% {
  -webkit-transform: rotate(135deg)
}

25% {
  -webkit-transform: rotate(270deg)
}

37.5% {
  -webkit-transform: rotate(405deg)
}

50% {
  -webkit-transform: rotate(540deg)
}

62.5% {
  -webkit-transform: rotate(675deg)
}

75% {
  -webkit-transform: rotate(810deg)
}

87.5% {
  -webkit-transform: rotate(945deg)
}

to {
  -webkit-transform: rotate(1080deg)
}
}

@keyframes vop_spinner_easespin {
12.5% {
  transform: rotate(135deg)
}

25% {
  transform: rotate(270deg)
}

37.5% {
  transform: rotate(405deg)
}

50% {
  transform: rotate(540deg)
}

62.5% {
  transform: rotate(675deg)
}

75% {
  transform: rotate(810deg)
}

87.5% {
  transform: rotate(945deg)
}

to {
  transform: rotate(1080deg)
}
}

@-webkit-keyframes vop_spinner_left_spin {
0% {
  -webkit-transform: rotate(130deg)
}

50% {
  -webkit-transform: rotate(-5deg)
}

to {
  -webkit-transform: rotate(130deg)
}
}

@keyframes vop_spinner_left_spin {
0% {
  transform: rotate(130deg)
}

50% {
  transform: rotate(-5deg)
}

to {
  transform: rotate(130deg)
}
}

@-webkit-keyframes vop_spinner_right_spin {
0% {
  -webkit-transform: rotate(-130deg)
}

50% {
  -webkit-transform: rotate(5deg)
}

to {
  -webkit-transform: rotate(-130deg)
}
}

@keyframes vop_spinner_right_spin {
0% {
  transform: rotate(-130deg)
}

50% {
  transform: rotate(5deg)
}

to {
  transform: rotate(-130deg)
}
}

/************ End loading animation ************/

.player_button {
  height: 30px;
  cursor: pointer;
}



/*********** Large icons triggered in main.js:342 ************/
/* @media screen and (min-width: 1920px) {
  .vop_button_big {
    width: 50px;
    height: 56px;
    border: 0;
    background-color: transparent;
    color: white;
    cursor: pointer;
  }
  
  .vop_control_bar_big {
    height: 63px;
  }

  .player_button_big {
    height: 54px; 
  }

  .material_icons_big {
    font-size: 36px;
  }

  .vop_volume_panel_big {
    margin: 0 15px;
    width: 78px;
  }

  .vop_time_text_big {
    font-size: 16.5px;
  }

  .vop_settings_menu_big {
    bottom: 18px;
  }

  .vop_button_big > * {
    height: 36px;
  }

  .vop_gradient_bottom {
    height: 90px;
    padding-top: 65px;
    bottom: 0;
    z-index: 2;
    background-position: bottom;
  }
} */