<style>
.play {
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid #2c3e50;
  margin: 10px auto 10px auto;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  left: 2px;
}
.play:before {
  content: '';
  position: absolute;
  top: -15px;
  left: -23px;
  bottom: -15px;
  right: -7px;
  border-radius: 50%;
  border: 2px solid #2c3e50;
  z-index: 2;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
}
.play:after {
  content: '';
  opacity: 0;
  transition: opacity 0.6s;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
}
.play:hover:before, .play:focus:before {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
}
.play.active {
  border-color: transparent;
}
.play.active:after {
  content: '';
  opacity: 1;
  width: 10px;
  height: 16px;
  background: #2c3e50;
  position: absolute;
  right: 1px;
  top: -8px;
  border-left: 4px solid #2c3e50;
  box-shadow: inset 6px 0 0 0 #f9f9f9;
}

.plyr.plyr--full-ui.plyr--audio {
    margin-top: 0;
}

.plyr:fullscreen video.video-play {
    display: block;
}


video.video-play {
    display: block;
    width: 100%;
    height: auto;
}
</style>


<style>
  span.tmplimage {}

  div.listitem.video {
      height: 64px;
      padding: 4px 0;
  }

  div.listitem span.aplayer {
      width: 20px;
      height: 20px;
    text-align: left;
    margin-top: 0;
    float: left;
    background-image: url(/images/icons/20x20/playbtn.png);
    background-position: top left;
    background-repeat: no-repeat;
  }

  div.listitem span.vplayer {
      width: 90px;
      padding: 1px;
      height: 58px;
      margin-left: 8px;
      background: none;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      border-left: 1px solid #AAA;
      border-top: 1px solid #AAA;
      float: left;
  }


  div.listitem.audio span.title {
    text-align: left;
    overflow: hidden;
    margin: 8px;
  }

  div.listitem.video span.title {
    text-align: left;
    overflow: hidden;

    padding-left: 16px;
  }

  div.listitem span.title span.duration:before {
    clear: both;
  }

  div.listitem span.title span.duration {
    text-align: left;
    width: auto;
  }

  div.listitem span.duration {
    text-align: right;
    margin-right: 8px;
    width: auto;
  }


  div.listitem span.aplayer.playing {
    background-image: url(/images/icons/20x20/pausebtn.png);
  }

  span.tmplimage { }
  span.aplayer span.title { position: relative;background: transparent;overflow: hidden;width: 210px;display: block;vertical-align: middle;}
  div.listitem span.aplayer span.title { margin-left: 110px; position: relative;background: transparent;overflow: hidden;width: 210px;display: block;vertical-align: middle;}
  span.duration {float: left;position: relative;background: transparent;vertical-align: middle;overflow: hidden;margin-left: 8px;width: 64px;}
  span.player {float: left;position: relative;width: 20px;height: 20px;margin-left: 8px;background-image: url(/images/icons/20x20/playbtn.png);background-position: top left;background-repeat: no-repeat;display: block;clear: right;}
  span.vplayer {float: left;position: relative;width: 90px; padding: 1px; height:58px;margin-left: 8px;background: none;border-bottom: 1px solid #000;border-right: 1px solid #000;border-left: 1px solid #AAA;border-top: 1px solid #AAA;display: block;clear: right;}
  span.vplayer img{width:90px; height:58px;}
  a.ui-state-active, a.ui-widget-content .ui-state-active {
      background:#ddd;
      border:1px solid #FBD850;
      color:#EB8F00;
      font-weight:bold;
  }
  .qform .ui-state-default, .ui-widget-content .ui-state-default {
      background:url(/images/tpl/form/dropdown-arrow.png) #fff;
      background-position:334px center;
      background-repeat:no-repeat;
      border:1px solid #999;
      color:#000;
      font-weight:normal;
      height:22px;
      font: normal 11px Verdana, Arial, Helvetica, sans-serif;
      text-decoration:none;
  }
  .qform .ui-state-default span, .ui-widget-content .ui-state-default span{
      background:none;
  }
  .qform .ui-state-default:hover, .ui-widget-content .ui-state-default:hover {
      background:url(/images/tpl/form/dropdown-arrow_hover.png) #fff;
      background-position:334px center;
      background-repeat:no-repeat;
      border:solid 1px #7cf;
  }
  .qform .ui-selectmenu-status{line-height:15px;}
  .qform .ui-corner-all, .ui-widget .ui-corner-all{-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
  ul.ui-widget-content {background:none #fff;overflow-x:hidden;}
  ul.ui-widget-content li a{background:none #fff;font: normal 11px Verdana, Arial, Helvetica, sans-serif;height:20px;line-height:20px;}
  ul.ui-widget-content li a:hover{background:#fff;color:#06c;text-decoration:underline}
  ul.ui-widget-content .ui-state-hover{border-color:#fff;}
  .qform input.long, .qform .control textarea.default{width:351px;}
   .qform .ui-state-default span.player{height:18px;width:18px;background-image:url("/images/icons/20x20/playbtn.png");background-position:left top;background-repeat:no-repeat;position:relative;top:-1px;}
  .qform select.tpl-picker {
      height: 200px;
  }
  .qform select.tpl-picker option {
      height: 200px;
  }

.plyr--video {
/*  max-width: 640px;*/
  width: 100%;
  height: auto;
  padding: 0px;
}

svg.icon--pressed,
svg.icon--not-pressed {
  padding-left: 4px;
  padding-right: 4px;
}

.plyr--audio .plyr__controls {
  background: none;
  height: 40px;
  width: 100%;
  max-width: 360px;
  padding: 0;
}

.plyr__control svg {
    width: 24px;
}

.plyr--audio .plyr__control.plyr__tab-focus {
  background: none;
}

.plyr__control {
  padding: 0;
}

.plyr__controls button {
  padding: 0;
  height: inherit;
}
</style>
