/* CSS */
.DagTo{margin-bottom:25px;width:100%;background:var(--gray-dark);border-radius:2px;padding-bottom:0}.DagPlaArea{width:100%;transition:width .2s;position:relative;padding:0;overflow:hidden;line-height:20px;border-bottom-right-radius:.3rem;border-bottom-left-radius:.3rem;}#server{overflow:hidden;}#server ul{list-style-type:none;margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}#server ul li{display:inline-block;}#server .DagPlayOpt{width:auto;padding:5px 10px;text-align:center;min-width: 38px;font-weight:400;cursor:pointer;font-size:14px;background: #303030;border-radius: 3px;margin: 0 5px 10px;}#server .DagPlayOpt.on{color:#fff;background:var(--primary);}.video-content{background:#000;overflow:hidden}#embed_holder,#pembed,.video-content{position:relative}#pembed{max-width:100%;height:0;padding-bottom:56.25%}.playerload{width:80px;height:80px;border-radius:150px;border:15px solid #fff;border-top-color:rgba(0,0,0,.3);box-sizing:border-box;position:absolute;top:50%;left:50%;margin-top:-38px;margin-left:-38px;animation:playerload 1.2s linear infinite;-webkit-animation:playerload 1.2s linear infinite}@keyframes playerload{0%{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes playerload{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}#embed_holder embed,#embed_holder iframe{z-index:1;position:absolute;border:none;width:100%;height:100%;top:0;left:0;margin:0;padding:0}.video-nav{display: flex;justify-content: space-between;background: var(--secondary);position:relative;overflow:hidden;font-size:.85em;color:#888;height:38px;line-height:38px;}.itemleft{overflow:hidden;font-weight:300;}.itemleft .icon,.itemright .icon{display:inline-flex;align-items:center;gap:2px;padding:0 8px;cursor:pointer}.itemleft .icon.turnedOff{color:#fff;z-index:999999;position:relative;}.video-nav .icon svg,span.light:before{color:#ababab;vertical-align:middle;border-radius:10px}.video-nav .icon svg{width:14px;height:14px;font-size:14px;}span.light:before{content:'';background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z' fill='%233c97f3'/%3E%3C/svg%3E") center/20px no-repeat;display:inline-block;margin-right:7px;min-width:20px;min-height:20px}.PlayShare{overflow:hidden;width:100%;padding-top:0;line-height:20px}#shadow,.PlayShare.None{display:none;transition:.5s}.ShareSection{overflow:hidden;padding:7px}.ShareSection b{color:#222d34;font-size:16px;margin-right:5px;line-height:22px;border-right:2px solid #fff;padding-right:10px;font-weight:500}.ShareSection b,.sosmed,.sosmed a{display:inline-block}.sosmed a{width:auto;height:auto;font-size:12px;color:#fff!important;border-radius:4px;background:#444;margin:6px;padding:3px 15px}a.shrFB{background:#1877f2}a.shrTW{background:#1da1f2}#shadow{position:fixed;left:0;top:0;bottom:0;background:rgba(0,0,0,.93);width:100%;height:100%;z-index:1;transition:all .5s ease}.DaBlock{display:none;transition:.5s}.DaBlock{display:block!important}
.resIn {background:var(--secondary);min-height: 50px;padding: 12px;color: #fff;display: none;border-radius: .3rem;}.server_option {background: var(--secondary);padding: 15px;border-radius: .3rem;margin-bottom: 1.66rem;}#server .DagPlayOpt:hover {background: #363636;}.servers {margin-bottom: 10px;display: flex;justify-content: flex-end;gap: 5px;}.tabs span {color: #525252;cursor: pointer;padding: 2px 5px;border-radius: .25rem;font-weight: 600;font-size: .98em;transition: all .15s;}.tabs span.active {color: #eee;}.DagTo .icon:hover {background: #141414;}.tabs span:hover,.tabs a:hover {color: #787878;}.serverEpisode {display: none}.video-nav .icon a {color: #888}



<!--[ Streaming Player HTML ]-->

<div id="shadow"></div>
<div class="DagPlaArea DagTo">
  <div id="PlayVideo" class="video-content">
    <div id="embed_holder">
      <div class="player-embed" id="pembed">
        <div class="playerload"></div>
        <div id="player_embed">
          <div class="pframe"><iframe src="" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO"
              width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true"
              mozallowfullscreen="true"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="video-nav">
    <div class="itemleft">
      <div class="icon DagLight">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
            d="M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M11,18H13V15.87C14.73,15.43 16,13.86 16,12A4,4 0 0,0 12,8A4,4 0 0,0 8,12C8,13.86 9.27,15.43 11,15.87V18Z" />
        </svg>
        <span>Turn on Light</span>
      </div>
      <div class="icon DagShre">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M3 3h6v2H5v4H3V3z" fill="currentColor"/><path d="M3 21h6v-2H5v-4H3v6z" fill="currentColor"/><path d="M15 21h6v-6h-2v4h-4v2z" fill="currentColor"/><path d="M21 3h-6v2h4v4h2V3z" fill="currentColor"/></g></svg>
        <a href="#PlayVideo">Expand</a>
      </div>
      <div class="icon DagCom">
        <svg viewBox="0 0 24 24">
          <path fill="currentColor"
            d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z" />
        </svg>
        <a href="#comments"><span>Komentar</span></a>
      </div>
    </div>
    <div class="itemright">
    <div class="icon Report">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="0.38em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 192 512"><path d="M176 432c0 44.112-35.888 80-80 80s-80-35.888-80-80s35.888-80 80-80s80 35.888 80 80zM25.26 25.199l13.6 272C39.499 309.972 50.041 320 62.83 320h66.34c12.789 0 23.331-10.028 23.97-22.801l13.6-272C167.425 11.49 156.496 0 142.77 0H49.23C35.504 0 24.575 11.49 25.26 25.199z" fill="currentColor"/></svg>
        <span>Report</span>
      </div>
    </div>
  </div>

</div>


<!--[ Streaming Server ]-->

<div class="server_option">
  <div class="tabs servers">
    <span class="tablinks" id="serverOpen" onclick="openCity(event, 'VideoVard')">VideoVard</span>
    <span class="tablinks" onclick="openCity(event, 'Streamtape')">Streamtape</span>
    <span class="tablinks" onclick="openCity(event, 'Mp4upload')">Mp4upload</span>
  </div>
  <div id="server">
    <ul id="VideoVard" class="serverEpisode">
      <li>
        <div class="DagPlayOpt" data-embed="https://videovard.sx/e/05aq1d1pqdde?autostart=true" data-id="Server-1">
          <span>01</span> </div>
      </li>
      <li>
        <div class="DagPlayOpt" data-embed="https://videovard.sx/e/m0be9m6fdmky?autostart=true" data-id="Server-1">
          <span>02</span> </div>
      </li>
      <li>
        <div class="DagPlayOpt" data-embed="https://videovard.sx/e/sw5x15pcqxuq?autostart=true" data-id="Server-1">
          <span>03</span> </div>
      </li>
    </ul>
  </div>
</div>


<!--[Javascript ]-->

<script async='async'>
//<![CDATA[
(function () {
  const e = document.querySelectorAll(".DagPlayOpt");
  e.length > 0 && (e.forEach(t => {
    t.addEventListener("click", function (t) {
      const n = t.currentTarget,
        c = n.dataset.embed;
      document.querySelector("#pembed iframe").src = c, document.querySelector("#pembed iframe").contentWindow.location.replace(c), e.forEach(e => e.classList.remove("on")), n.classList.add("on");
      const o = document.querySelectorAll(".resIn");
      o.length > 0 && o.forEach(e => {
        e.id == n.dataset.id ? e.style.display = "block" : e.style.display = "none"
      })
    })
  }), e[0].click());
  const t = document.getElementById("shadow"),
    n = document.querySelector(".DagLight");
  t && n && (t.style.display = "none", n.addEventListener("click", function (e) {
    const n = e.currentTarget;
    t.style.height = document.body.scrollHeight, "none" == t.style.display ? (n.querySelector("span").innerHTML = "Turn on Light", n.classList.add("turnedOff"), t.style.display = "block") : (n.querySelector("span").innerHTML = "Turn off Light", n.classList.remove("turnedOff"), t.style.display = "none")
  }));
  const c = document.querySelector(".DagShre");
  c.addEventListener("click", function (e) {
    const t = document.querySelector(".gta-ms");
    t && t.classList.toggle("expand")
  })
})();

  function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("serverEpisode");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("serverOpen").click();
//]]>
</script>