body {
  padding: 0;
  margin: 0;
  background-color: #000;
}

#unity-container {
  position: absolute;
  background: url('background.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 0
}

#unity-container.unity-desktop {
  width: 100%;
  height: 100%
}

#unity-container.unity-mobile {
  width: 100%;
  height: 100%;
}

#unity-canvas {
  width: 100%;
  height: 100%;
}

.unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
}

/* .unity-mobile #unity-canvas { width: 100%; height: 50%; transform: scale(1.5);} */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none
}

#unity-logo {
  background: url('unity-logo-dark.png') no-repeat center;
  width: 210px;
  height: 210px;
  margin-left: auto;
  margin-right: auto;
  display: block
}

#unity-progress-bar-empty {
  width: 613px;
  height: 10px;
  margin-top: 230px;
  background: url('progress-bar-empty-dark.png') no-repeat center
}

#unity-progress-bar-full {
  width: 0%;
  height: 10px;
  margin-top: 230px;
  background: url('progress-bar-full-dark.png') no-repeat center
}

#unity-footer {
  position: relative
}

.unity-mobile #unity-footer {
  display: none
}

#unity-webgl-logo {
  float: left;
  width: 204px;
  height: 38px;
  background: url('webgl-logo.png') no-repeat center
}

#unity-build-title {
  float: right;
  margin-right: 10px;
  line-height: 38px;
  font-family: arial;
  font-size: 18px
}

#unity-fullscreen-button {
  float: right;
  width: 38px;
  height: 38px;
  background: url('fullscreen-button.png') no-repeat center
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none
}

#sDiv {
  /*display: none; */
  position: fixed;
  z-index: 100;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

#cDiv {
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  border: 1px solid #888;
  width: 300px;
  position: relative;
  -webkit-animation: mymove 0.5s;
  animation: mymove 0.5s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  border-radius: 8px;
  text-align: center;
}

#h3Close {
  text-align: center;
  margin: 12px;
}

@-webkit-keyframes mymove {
  from {
    top: -100px;
  }

  to {
    top: 0px;
  }
}

@keyframes mymove {
  from {
    top: -100px;
  }

  to {
    top: 0px;
  }
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 12px 12px 12px;
  cursor: pointer;
  border-radius: 8px;
}

.close {
  color: #aaaaaa;
  /*float: right;*/
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#webview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: none;
  /* width: calc(100% + 35px); */
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 5;
}

#iframebtn {
  background: url('btClose.png');
  background-size: cover;
  position: absolute;
  top: 5px;
  left: 10px;
  border: none;
  width: 40px;
  height: 40px;
  z-index: 9999;
  visibility: visible;
}

/* #WebViewDiv{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  margin: auto;
  z-index: 5;
} */

::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
}

#LiveStreamDiv.Vertical {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-10%) translateY(15%);
  width: 80%;
  height: 80%;
  background-color: #000;
  margin: auto;
  max-height: 800px;
  overflow: hidden;
  z-index: 7;
}

#LiveStreamDiv.Horizontal {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-10%) translateY(30%);
  width: 80%;
  height: 70%;
  background-color: #000;
  margin: auto;
  max-height: 800px;
  overflow: hidden;
  z-index: 7;
}

#LiveStreamIframe {
  position: absolute;
  top: 0%;
  border: none;
  height: 100%;
  /* width: 80%; */
  overflow: hidden;
  /* margin: auto; */
}

#LiveStreamDivWindow.Vertical {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-5%) translateY(5%);
  width: 40%;
  height: 80%;
  background: url('bg-popup.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 0;
  max-width: 500px;
  max-height: 900px;
  cursor: move;

}

#LiveStreamDivWindow.Horizontal {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-5%) translateY(5%);
  width: 60%;
  height: 40%;
  background: url('bg-popup.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 0;
  max-width: 500px;
  max-height: 900px;
  cursor: move;

}

#windowxbtn {
  background: url('bt-close.png') no-repeat center;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  width: 40px;
  height: 40px;
  z-index: 8;
  max-width: 20%;
  max-height: 20%;
}

#LiveStremTxBg.Horizontal {
  position: absolute;
  background-size: cover;
  top: 0%;
  left: 0%;
  width: 70%;
  height: 15%;

}

#LiveStremTxBg.Vertical {
  position: absolute;
  background-size: cover;
  top: 0%;
  left: 0%;
  width: 70%;
  height: 8%;

}

#txtImg {
  position: absolute;
  background: url('popup-bgtitle.png');
  background-size: cover;
  width: 100%;
  height: 100%;
}

#LiveStreamTxt {
  color: #d4c578;
  position: absolute;
  top: 25%;
  left: 10%;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.35vw;
}


@media only screen and (max-height:912px) and (orientation:landscape) {

  /* Vertical Video */
  #LiveStreamDivWindow.Vertical {
    top: 0%;
    right: 0%;
    transform: translateX(-5%) translateY(5%);
    width: 25%;
    height: 80%;
    max-height: 500px;
  }

  #LiveStreamDivWindow.Horizontal {
    top: 0%;
    right: 0%;
    transform: translateX(-5%) translateY(5%);
    width: 40%;
    height: 55%;
    max-height: 500px;
  }
}

@media only screen and (orientation:portrait) {
  #LiveStreamDivWindow.Vertical {
    max-height: 30%;
  }

  #LiveStreamDivWindow.Horizontal {
    max-height: 20%;
  }

  #WebViewDiv.CS{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #000;
      margin: auto;
      z-index: 5;    
    }

}

/* Targeting iOS device only */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  @media only screen and (orientation:portrait) {
    #WebViewDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      overflow: hidden;
      background-color: #000;
      margin: auto;
      z-index: 5;
    }

    #WebViewDiv.VendorGame{
      transform: translate(-50%, -50%) rotate(90deg);
      width: 100vh; 
      height: 100vw;
      position: relative;
        /* padding-top: var(--safe-area-top);
          padding-bottom: var(--safe-area-bottom);
          padding-left: var(--safe-area-left);
          padding-right: var(--safe-area-right); */
      will-change: transform;

    }body {
  padding: 0;
  margin: 0;
  background-color: #000;
}

#unity-container {
  position: absolute;
  background: url('background.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 0
}

#unity-container.unity-desktop {
  width: 100%;
  height: 100%
}

#unity-container.unity-mobile {
  width: 100%;
  height: 100%;
}

#unity-canvas {
  width: 100%;
  height: 100%;
}

.unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
}

/* .unity-mobile #unity-canvas { width: 100%; height: 50%; transform: scale(1.5);} */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none
}

#unity-logo {
  background: url('unity-logo-dark.png') no-repeat center;
  width: 210px;
  height: 210px;
  margin-left: auto;
  margin-right: auto;
  display: block
}

#unity-progress-bar-empty {
  width: 613px;
  height: 10px;
  margin-top: 230px;
  background: url('progress-bar-empty-dark.png') no-repeat center
}

#unity-progress-bar-full {
  width: 0%;
  height: 10px;
  margin-top: 230px;
  background: url('progress-bar-full-dark.png') no-repeat center
}

#unity-footer {
  position: relative
}

.unity-mobile #unity-footer {
  display: none
}

#unity-webgl-logo {
  float: left;
  width: 204px;
  height: 38px;
  background: url('webgl-logo.png') no-repeat center
}

#unity-build-title {
  float: right;
  margin-right: 10px;
  line-height: 38px;
  font-family: arial;
  font-size: 18px
}

#unity-fullscreen-button {
  float: right;
  width: 38px;
  height: 38px;
  background: url('fullscreen-button.png') no-repeat center
}

#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none
}

#sDiv {
  /*display: none; */
  position: fixed;
  z-index: 100;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

#cDiv {
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  border: 1px solid #888;
  width: 300px;
  position: relative;
  -webkit-animation: mymove 0.5s;
  animation: mymove 0.5s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  border-radius: 8px;
  text-align: center;
}

#h3Close {
  text-align: center;
  margin: 12px;
}

@-webkit-keyframes mymove {
  from {
    top: -100px;
  }

  to {
    top: 0px;
  }
}

@keyframes mymove {
  from {
    top: -100px;
  }

  to {
    top: 0px;
  }
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0px 12px 12px 12px;
  cursor: pointer;
  border-radius: 8px;
}

.close {
  color: #aaaaaa;
  /*float: right;*/
  font-size: 28px;
  font-weight: bold;
  position: absolute;
  top: 0;
  right: 10px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

#webview {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  border: none;
  /* width: calc(100% + 35px); */
  width: 100%;
  height: 100%;
  overflow: auto;
  z-index: 5;
}

#iframebtn {
  background: url('btClose.png');
  background-size: cover;
  position: absolute;
  top: 5px;
  left: 10px;
  border: none;
  width: 40px;
  height: 40px;
  z-index: 9999;
  visibility: visible;
}

/* #WebViewDiv{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  margin: auto;
  z-index: 5;
} */

::-webkit-scrollbar {
  display: none;
  width: 0px;
  height: 0px;
}

#LiveStreamDiv.Vertical {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-10%) translateY(15%);
  width: 80%;
  height: 80%;
  background-color: #000;
  margin: auto;
  max-height: 800px;
  overflow: hidden;
  z-index: 7;
}

#LiveStreamDiv.Horizontal {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-10%) translateY(30%);
  width: 80%;
  height: 70%;
  background-color: #000;
  margin: auto;
  max-height: 800px;
  overflow: hidden;
  z-index: 7;
}

#LiveStreamIframe {
  position: absolute;
  top: 0%;
  border: none;
  height: 100%;
  /* width: 80%; */
  overflow: hidden;
  /* margin: auto; */
}

#LiveStreamDivWindow.Vertical {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-5%) translateY(5%);
  width: 40%;
  height: 80%;
  background: url('bg-popup.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 0;
  max-width: 500px;
  max-height: 900px;
  cursor: move;

}

#LiveStreamDivWindow.Horizontal {
  position: absolute;
  top: 0%;
  right: 0%;
  transform: translateX(-5%) translateY(5%);
  width: 60%;
  height: 40%;
  background: url('bg-popup.png') no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  border: 0;
  max-width: 500px;
  max-height: 900px;
  cursor: move;

}

#windowxbtn {
  background: url('bt-close.png') no-repeat center;
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  width: 40px;
  height: 40px;
  z-index: 8;
  max-width: 20%;
  max-height: 20%;
}

#LiveStremTxBg.Horizontal {
  position: absolute;
  background-size: cover;
  top: 0%;
  left: 0%;
  width: 70%;
  height: 15%;

}

#LiveStremTxBg.Vertical {
  position: absolute;
  background-size: cover;
  top: 0%;
  left: 0%;
  width: 70%;
  height: 8%;

}

#txtImg {
  position: absolute;
  background: url('popup-bgtitle.png');
  background-size: cover;
  width: 100%;
  height: 100%;
}

#LiveStreamTxt {
  color: #d4c578;
  position: absolute;
  top: 25%;
  left: 10%;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 1.35vw;
}


@media only screen and (max-height:912px) and (orientation:landscape) {

  /* Vertical Video */
  #LiveStreamDivWindow.Vertical {
    top: 0%;
    right: 0%;
    transform: translateX(-5%) translateY(5%);
    width: 25%;
    height: 80%;
    max-height: 500px;
  }

  #LiveStreamDivWindow.Horizontal {
    top: 0%;
    right: 0%;
    transform: translateX(-5%) translateY(5%);
    width: 40%;
    height: 55%;
    max-height: 500px;
  }
}

@media only screen and (orientation:portrait) {
  #LiveStreamDivWindow.Vertical {
    max-height: 30%;
  }

  #LiveStreamDivWindow.Horizontal {
    max-height: 20%;
  }

  #WebViewDiv.CS{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transform-origin: center center;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #000;
      margin: auto;
      z-index: 5;    
    }

}

/* Targeting iOS device only */
@media screen and (-webkit-min-device-pixel-ratio: 0) {

  @media only screen and (orientation:portrait) {
    #WebViewDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      overflow: hidden;
      background-color: #000;
      margin: auto;
      z-index: 5;
    }

    #WebViewDiv.VendorGame{
      transform: translate(-50%, -50%) rotate(90deg);
      width: 100vh; 
      height: 100vw;
      position: relative;
        /* padding-top: var(--safe-area-top);
          padding-bottom: var(--safe-area-bottom);
          padding-left: var(--safe-area-left);
          padding-right: var(--safe-area-right); */
      will-change: transform;

    }

    #WebViewDiv.CS{
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    #webview.VendorGame {
        /* width: calc(100% - 60px); */
        width: calc(100% - 180px);
    }

    #iframebtn.VendorGame {
        position: absolute;
        top: 5px;
        right: 50px;
    }

    #LiveStreamDivWindow.Vertical {
      transform: translateX(-50%) translateY(240%) rotate(90deg);
    }

    #LiveStreamDivWindow.Horizontal {
      transform: translateX(-30%) translateY(350%) rotate(90deg);
    }
  }

  @media only screen and (orientation:landscape) {

    #WebViewDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      overflow: hidden;
      background-color: #000;
      margin: auto;
      z-index: 5;
    }

    #WebViewDiv.VendorGame{
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    #WebViewDiv.CS{
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
  }
}

    #WebViewDiv.CS{
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    #webview.VendorGame {
        /* width: calc(100% - 60px); */
        width: calc(100% - 150px);
    }

    #iframebtn.VendorGame {
        position: absolute;
        top: 5px;
        right: 50px;
    }

    #LiveStreamDivWindow.Vertical {
      transform: translateX(-50%) translateY(240%) rotate(90deg);
    }

    #LiveStreamDivWindow.Horizontal {
      transform: translateX(-30%) translateY(350%) rotate(90deg);
    }
  }

  @media only screen and (orientation:landscape) {

    #WebViewDiv {
      position: absolute;
      top: 50%;
      left: 50%;
      transform-origin: center center;
      overflow: hidden;
      background-color: #000;
      margin: auto;
      z-index: 5;
    }

    #WebViewDiv.VendorGame{
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

    #WebViewDiv.CS{
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
  }
}