/* x0 Loading */

.x0l {
  width: 120px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.x0l .ball {
  width: 0;
  height: 0;
  border: 5px solid black;
  border-radius: 30%;
  position: absolute;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.x0l .ball-1 {
  /*border-color: rgb(50,125,255);*/
  border-color: #555;
  animation-name: BallFly-1;
}

.x0l .ball-2 {
  /*border-color: rgb(75,150,255);*/
  border-color: #777;
  animation-name: BallFly-2;
}

.x0l .ball-3 {
  /*border-color: rgb(135,185,255);*/
  border-color: #999;
  animation-name: BallFly-3;
}

.x0l .ball-4 {
  /*border-color: rgb(150,200,255);*/
  border-color: #bbb;
  animation-name: BallFly-4;
}

@keyframes BallFly-1 {
  from { margin-left: 0; }
  38% { margin-left: 110px; }
  50% { margin-left: 110px; }
  88% { margin-left: 0; }
  to { margin-left: 0; }
}

@keyframes BallFly-2 {
  from { margin-left: 0; }
  4% { margin-left: 0; }
  42% { margin-left: 110px; }
  54% { margin-left: 110px; }
  92% { margin-left: 0; }
  to { margin-left: 0; }
}

@keyframes BallFly-3 {
  from { margin-left: 0; }
  8% { margin-left: 0; }
  46% { margin-left: 110px; }
  58% { margin-left: 110px; }
  96% { margin-left: 0; }
  to { margin-left: 0; }
}

@keyframes BallFly-4 {
  from { margin-left: 0; }
  12% { margin-left: 0; }
  50% { margin-left: 110px; }
  62% { margin-left: 110px; }
  to { margin-left: 0; }
}

/* x0 Popup */

.x0p-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(180, 180, 180, .8);
  z-index: 99998;
  animation: x0pfadeIn .5s ease;
}

.x0p {
  position: fixed;
  left: 50%;
  top: 50%;
  font-size: 16px;
  background-color: white;
  /*border: 1px solid #ddd;*/
  transform: translate(-50%, -60%);
  font-family: 'STHeiti', 'Helvetica';
  animation: x0ppop .45s ease;
  z-index: 99999;
}

.x0p-overlay.no-animation,
.x0p.no-animation,
.x0p.no-animation .xi > span::before {
  animation: none;
}

@keyframes x0pfadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes x0ppop {
  from { transform: scale(0.9) translate(-55%, -60%); opacity: .3; }
  50% { transform: scale(1.1) translate(-45%, -60%); opacity: .7; }
  to { transform: scale(1) translate(-50%, -60%); opacity: 1; }
}

@keyframes x0pslideUp {
  from { transform: translate(-50%, 200%); opacity: 0;  }
  to { transform: translate(-50%, -60%); opacity: 1; }
}

@keyframes x0pslideDown {
  from { transform: translate(-50%, -260%); opacity: 0;  }
  to { transform: translate(-50%, -60%); opacity: 1; }
}

/* x0 Icon */
.xi {
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  /*background-color: #999;*/
  /*position: relative;*/
  transform: translate(-50%, -50%);
}

/* x0 Icon OK */
.xi-ok span::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  height: 8%;
  border-radius: 10px;
  background-color: #60BF80;
}

.xi-ok-left::before {
  width: 40%;
  left: 15%;
  top: 50%;
  transform: rotate(45deg);
  animation: showOKLeft .6s ease;
}

.xi-ok-right::before {
  width: 60%;
  left: 35%;
  top: 42%;
  transform: rotate(-50deg);
  animation: showOKRight .75s ease;
}

@keyframes showOKLeft {
  from { transform: rotate(45deg); width: 0; left: 21%; top: 37%; }
  75% { transform: rotate(45deg); width: 0; left: 21%; top: 37%; }
  to { transform: rotate(45deg); width: 40%; left: 15%; top: 50%; }
}

@keyframes showOKRight {
  from { transform: rotate(-50deg); width: 0; left: 46%; top: 65%; }
  80% { transform: rotate(-50deg); width: 0; left: 46%; top: 65%; }
  to { transform: rotate(-50deg); width: 60%; left: 35%; top: 42%; }
}

/* x0 Icon Info */
.xi-info span::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  background-color: #5080DF;
}

.xi-info-circle::before {
  width: 11%;
  height: 11%;
  border-radius: 50%;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
}

.xi-info-line::before {
  width: 8%;
  height: 45%;
  border-radius: 10px;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
}

/* x0 Icon Warning */
.xi-warning span::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  background-color: #F29F3F;
}

.xi-warning-circle::before {
  width: 11%;
  height: 11%;
  border-radius: 50%;
  left: 50%;
  top: 71%;
  transform: translateX(-50%);
}

.xi-warning-line::before {
  width: 8%;
  height: 45%;
  border-radius: 10px;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
}

/* x0 Icon Error */
.xi-error span::before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  background-color: #EF6080;
  width: 8%;
  border-radius: 10px;
}

.xi-error-right::before {
  height: 80%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  animation: errorDrawRight .6s ease;
}

.xi-error-left::before {
  height: 80%;
  top: 10%;
  left: 50%;
  transform: translateX(-50%) rotate(-45deg);
  animation: errorDrawLeft .75s ease;
}

@keyframes errorDrawLeft {
  from { height: 0; top: 22%; left: 23%; }
  75% { height: 0; top: 22%; left: 23%; }
  to { height: 80%; top: 10%; left: 50%; }
}

@keyframes errorDrawRight {
  from { height: 0; top: 22%; left: 76%; }
  80% { height: 0; top: 22%; left: 76%; }
  to { height: 80%; top: 10%; left: 50%; }
}

/* No Scroll */
.noscroll {
  overflow: hidden;
}