html {
  -ms-touch-action: none;
}


body,
canvas,
div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;

  cursor: default;
  color: #888;
  background-color: #0E0E0E;

  text-align: center;
  font-family: Helvetica, Verdana, Arial, sans-serif;

  display: flex;
  flex-direction: column;

  /* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 */
  /* overflow cannot be applied in Cocos2dGameContainer, 
  otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */
  overflow: hidden;
}

#Cocos2dGameContainer {
  position: absolute;
  margin: 0;
  left: 0px;
  top: 0px;

  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

canvas {
  background-color: rgba(0, 0, 0, 0);
}

a:link,
a:visited {
  color: #666;
}

a:active,
a:hover {
  color: #666;
}

p.header {
  font-size: small;
}

p.footer {
  font-size: x-small;
}

#splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0E0E0E;
}

#splash_bg {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#splash_logo {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes animate-stripes {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

#progresscontainer {
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

#p-v {
  width: 100%;
  position: absolute;
  text-align: center;
  height: 100%;
  margin-top: 30px;
  left: 50%;
  transform: translateX(-50%);
}

.loading {
  align-items: center;
  justify-content: center;
  /* background-color: #fff;  */
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
  width: 100%;
  z-index: 9999;
}

.loading-bar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background-image: url('progress_bg.d1d8c.png');
  background-size: cover;
}

.loading-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 10px;
  background-image: url('progress_bar.50387.png');
  background-repeat: repeat-x;
  background-position: left center;
  /* background-size: cover; */
  /* animation: loading 2s ease-in-out infinite; */
}

@keyframes loading {
  0% {
    width: 0%;
  }

  100% {
    width: 100%;
  }
}

/* 竖屏提示相关 */
.rotate-basic {
  opacity: 0;
  background: url(rotate_bg.0fe09.png) no-repeat center center fixed;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 禁用事件 */
}

.rotate-basic img {
  width: 10vw;
  max-width: 80px;
  height: auto;
  z-index: 1;
}

.rotate-basic p {
  font-family: Roboto;
  color: #FFFFFF;
  font-size: 2.5vw;
  max-width: 80%;
  position: relative;
  z-index: 2;
  text-align: center;
}

/* For Mobile Landscape View */
@media screen and (max-device-width: 932px) and (orientation: landscape) {
  .rotate-specific {
    opacity: 1;
    pointer-events: auto; /* 启用事件 */
  }
}

/* fix bug: Specify the navigation of the browser that causes content to be blocked. */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
}

/* Remove the password reveal control */
::-ms-reveal,
::-ms-clear {
  display: none !important;
}

/* Hide Safari contacts auto-fill */
::-webkit-credentials-auto-fill-button,
::-webkit-credentials-auto-fill-button:hover,
::-webkit-credentials-auto-fill-button:active {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  height: 0;
  width: 0;
  margin: 0;
}