/**
 * Created by yanwsh on 4/3/16.
 */

.IIV::-webkit-media-controls-play-button,
.IIV::-webkit-media-controls-start-playback-button {
  opacity: 0;
  pointer-events: none;
  width: 5px;
}

@font-face {
  font-family: "VideoJS-Panorama";
  src: url("data:application/font-woff;base64,d09GRgABAAAAAAU8AAsAAAAABPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFgGNtYXAAAAFoAAAAVAAAAFQXVtKIZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAASwAAAEsI6gHfmhlYWQAAALwAAAANgAAADYKxyD1aGhlYQAAAygAAAAkAAAAJAexA8dobXR4AAADTAAAABgAAAAYDgAAUWxvY2EAAANkAAAADgAAAA4AvgCMbWF4cAAAA3QAAAAgAAAAIAAKAD9uYW1lAAADlAAAAYYAAAGGmUoJ+3Bvc3QAAAUcAAAAIAAAACAAAwAAAAMDVQGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QEDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkB//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAwARAHID7wL8ACIALwA8AAABJiQMAQcOARQWFx4DMzcwNjMyFjEXMj4CNz4CJicxASImNTQ2MzIWFRQGIyEiJjU0NjMyFhUUBiMD7wv+zv6X/tAICAkJCAM6XntFKi47PzkjRHpcOAMHCgEICv0FPVZWPT1WVzwCEj1WVj09VlY9AvwKCQEKCAnD5sMIAwUDAnFrgloCBAQDB8LmxAr+Q1Y9PVZWPT1WVj09VlY9PVYAAAAAAQBA/8AC+gPAAA0AAAU+AS4BBxUJARU2HgECAvorJjirqP6AAYDJ40ZPQE22mmUE/gGAAYD4BZzs/u0AAQAAAAAAADT5+xNfDzz1AAsEAAAAAADT3O48AAAAANPc7jwAAP/AA+8DwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAD7wABAAAAAAAAAAAAAAAAAAAABgQAAAAAAAAAAAAAAAIAAAAEAAARBAAAQAAAAAAACgAUAB4AeACWAAAAAQAAAAYAPQADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=") format("woff"), url("data:;base64,AAEAAAALAIAAAwAwT1MvMg8SBYAAAAC8AAAAYGNtYXAXVtKIAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZiOoB34AAAF4AAABLGhlYWQKxyD1AAACpAAAADZoaGVhB7EDxwAAAtwAAAAkaG10eA4AAFEAAAMAAAAAGGxvY2EAvgCMAAADGAAAAA5tYXhwAAoAPwAAAygAAAAgbmFtZZlKCfsAAANIAAABhnBvc3QAAwAAAAAE0AAAACAAAwNVAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAQPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QH//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAADABEAcgPvAvwAIgAvADwAAAEmJAwBBw4BFBYXHgMzNzA2MzIWMRcyPgI3PgImJzEBIiY1NDYzMhYVFAYjISImNTQ2MzIWFRQGIwPvC/7O/pf+0AgICQkIAzpee0UqLjs/OSNEelw4AwcKAQgK/QU9VlY9PVZXPAISPVZWPT1WVj0C/AoJAQoICcPmwwgDBQMCcWuCWgIEBAMHwubECv5DVj09VlY9PVZWPT1WVj09VgAAAAABAED/wAL6A8AADQAABT4BLgEHFQkBFTYeAQIC+ismOKuo/oABgMnjRk9ATbaaZQT+AYABgPgFnOz+7QABAAAAAAAANPn7E18PPPUACwQAAAAAANPc7jwAAAAA09zuPAAA/8AD7wPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAPvAAEAAAAAAAAAAAAAAAAAAAAGBAAAAAAAAAAAAAAAAgAAAAQAABEEAABAAAAAAAAKABQAHgB4AJYAAAABAAAABgA9AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.vjs-full-window .video-js{
  position: fixed!important;
  top: 0!important;
  left: 0!important;
  z-index: 1000000;
}

.video-js {
  .vjs-control-bar{
    z-index: 5;

    .vjs-VR-control{
      cursor: pointer;

      &::before{
        font-family: "VideoJS-Panorama";
        content: "\e900";
      }

      &.enable::before{
        content: "\e901";
      }
    }
  }

  &.vjs-using-native-controls .vjs-poster, &.vjs-using-native-controls .vjs-big-play-button{
    display: block;
  }

  &.vjs-panorama {
    display: block;

    .vjs-video-canvas{
      position: absolute;
      top: 0;
      left: 50%;
      -webkit-transform: translateX(-50%) translateZ(0);
      -moz-transform: translateX(-50%) translateZ(0);
      -o-transform: translateX(-50%) translateZ(0);
      transform: translateX(-50%) translateZ(0);
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      background: #000;
      cursor: pointer;
    }

    .vjs-video-notice-label{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      font-size: 1.3em;
      font-size: 1vw;
      padding: 0.5em 1em;
      background: rgba(0, 0, 0, 0.8);
      color: #FFF;
      -webkit-border-radius: 0.5em;
      -moz-border-radius: 0.5em;
      border-radius: 0.5em;
      -webkit-transition: opacity 0.3s linear;
      -moz-transition: opacity 0.3s linear;
      -ms-transition: opacity 0.3s linear;
      -o-transition: opacity 0.3s linear;
      transition: opacity 0.3s linear;
      pointer-events: none;

      &.vjs-video-notice-fadeOut{
        opacity: 0;
      }
    }

    #webgl-error-message{
      position: relative;
      font-family: monospace;
      font-size: 13px;
      font-weight: normal;
      text-align: center;
      color: rgb(0, 0, 0);
      padding: 1.5em;
      width: 400px;
      margin: 5em auto 0px;
      background: rgb(255, 255, 255);

      -webkit-transition: opacity 0.3s linear;
      -moz-transition: opacity 0.3s linear;
      -ms-transition: opacity 0.3s linear;
      -o-transition: opacity 0.3s linear;
      transition: opacity 0.3s linear;

      &.vjs-video-notice-fadeOut{
        opacity: 0;
      }
    }

    .vjs-loading-spinner{
      z-index: 10;
    }

    &.vjs-panorama-mobile-inline-video.vjs-seeking .vjs-loading-spinner{
      display: none;
    }

    &.vjs-panorama-mobile-inline-video.vjs-waiting .vjs-loading-spinner{
      display: block!important;
    }

    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner{
      display: block!important;
    }


    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner:before,
    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner:after{
      -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite;
      animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite; }

    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner:before,
    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner:before {
      border-top-color: white; }

    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner:after,
    &.vjs-panorama-mobile-inline-video-buffering .vjs-loading-spinner:after {
      border-top-color: white;
      -webkit-animation-delay: 0.44s;
      animation-delay: 0.44s; }
  }
}