#player {
    background-color:black;
    position: relative;
    width: 100%;
}
#controls {
    width: 100%;
    height: 60px;
}
#controls .controls-box{
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
}
#controls .controls-box .left{
    width: 48%;
    display: inline-flex;
}
#controls .controls-box .left .box-timer{
    color: #FFF;
    line-height: 40px;
    margin-left: 1.5rem;
}
#controls .controls-box .right{
    width: 48%;
    display: inline-flex;
    justify-content: flex-end;
}
#player video {
    width: 100% !important;
    height: 500px;
    background:black;
}
#player button {
    text-indent:-9999px;
    width:16px;
    height:16px;
    border:none;
    cursor:pointer;
    background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAAQCAYAAAAWNJ1eAAAAB3RJTUUH4AMQDS0aGLmsqwAAAAlwSFlzAAAOdAAADnQBaySz1gAAAvZJREFUeNrtmk2u0zAQxyele7gBZcOWcAJ8AKTXFVvKhnW5QbhBD4BEe4GnvgULdkaCNeUE5N2gbJGgeDJ26rhO4rFbKRX5P7mtP+YX2x1PHPdl4ErCa/W6UEmc1ACsVekGQjWyeKwrVWYN+bF63aqU99jsVJqryblvbTGyeKxrkoSPesxC/f3CosyaEBzso0DUvgL5JmZk8VhdoihXKLsnLLtLsYix1jkcf+VIU12wZUwI6LZo89xTN7J4rFOZLxxgxrjG+Vm0WNB27hlvXrWQICb6Im5IXqhU9lwi17Zuh13WS2juF/Dzq0TWW+tzLMvuj2ip47J480W8G5V+qnSwStfg+9KxDbW98V6Bw+qThGdA0WYBPQtmohu507rRYQ/ryg77RU8e9Vmlb1b+q0q3iawPqn+fEllmrF+qlDbGUDVtyRkwQs0YjFll4zpSHMsvikASyHnwVlwALbSV1aq+nU2gfRWGOJPoyaNw33VwyqYDYIXqkqwV0x5vK7sWWy6rSwUcHQgd5b1ebO+AIlvtQNh4GoSkx9RN5P0Vr/HbKTsw7P0sWT9ZxrBET5lMZNnqYs2Yvb7TNF/E4bGkM2/CelInZ0WtVPkPp90bZfvQOBAqzInS9MdTFutE52H5bl92mUxk2eKwhiOzB/L33nIgVJgTpT0tZE7+AcQ70XlY9ioU9TFHXJ9i7UglcOaU9j2FZRvPEidzyR33C9BONoGutYLOg7v99h2+7Mn79Bf8X3w4S9T26ayQ6boca8m0tw83l4msLu31u+hoY+r26ERrz1D7nMdo3ZNHPQWKGEa5LotnySrcThNZobocC/c4tP8oGYwS6AT87gysNm31+1I/6jdFZcZptyaUfwf+2cdOdfz08Gxk8VhNLm1Y3e1DzK0nhdU8kceotIJjFBVADmTq8omumMMxhIVoD8cdvKuRxWMdZTas4ed0l2HRzzNC9xudpQByIgmnj//34w+wQ2ANVf6fPfZ63IUZU+YxHOa/SfwPrCvVP/2nY6KBhDUMAAAAAElFTkSuQmCC') no-repeat 0 0; /* url('buttons.png') */
}
#controls .play{
    width: 40px;
    height: 40px;
    background-image: url(/assets/images/video/play-white.png);
    background-size: 50%;
    background-position: center;
    border-radius: 100%;
}
#controls .pause{
    width: 40px;
    height: 40px;
    background-image: url(/assets/images/video/pause-white.png);
    background-size: 50%;
    background-position: center;
    border-radius: 100%;
}
#controls .fullscreen{
    width: 40px;
    height: 40px;
    background-image: url(/assets/images/video/zoom-out.png);
    background-size: 50%;
    background-position: center;
    border-radius: 100%;
    float: right;
    margin-right: 5px;
}
.mute { background-position:-95px 0; margin: 0px 1rem; }
.mute i{
    margin-top: 5px;
}
.unmute { background-position:-114px 0; }
.replay { background-position:-133px 0; }

progress {
  color: #FFD078;
  font-size: 12px;
  width: 100%;
  height: 8px;
  border: none;
  background: #FFD078;
  border-radius: 9px;
  vertical-align: middle;
}
progress::-moz-progress-bar { 
  color: green;
  background: #9F8448; 
}

progress[value]::-webkit-progress-bar {
  background-color: #9F8448;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-color: #FFA600;
}

#volume-bar {
      -webkit-appearance: none;
      width: 100px;
      margin: 6.8px 0;
      background: transparent;
      outline: none;
    /* opacity: 0.7; */
    -webkit-transition: .2s;
    transition: opacity .2s;
}
#volume-bar:focus {
  outline: none;
}
#volume-bar::-webkit-slider-runnable-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  background: #FFF;
  border-radius: 1px;
}
#volume-bar::-webkit-slider-thumb {
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #FFF;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
#volume-bar:focus::-webkit-slider-runnable-track {
  background: #f5f5f5;
}
#volume-bar::-moz-range-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  background: #205928;
  border-radius: 1px;
}
#volume-bar::-moz-range-thumb {
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #FFF;
  cursor: pointer;
}
#volume-bar::-ms-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
#volume-bar::-ms-fill-lower {
  background: #FFF;
  border-radius: 2px;
}
#volume-bar::-ms-fill-upper {
  background: #FFF;
  /* border: 1.1px solid #18d501; */
  border-radius: 2px;
}
#volume-bar::-ms-thumb {
  height: 18px;
  width: 9px;
  border-radius: 3px;
  background: #FFF;
  cursor: pointer;
  height: 4.4px;
}
#volume-bar:focus::-ms-fill-lower {
  background: #f5f5f5;
}
#volume-bar:focus::-ms-fill-upper {
  background: #FFF;
}
#btnPlayRefresh{
    line-height: 40px;
}
p { font-size: 0.9em; }
h1 { 
    font-size:16px;
    color:#333;
}