/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
}

#nprogress .bar {
  background: #29d;
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 1031;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 18px;
  height: 18px;
  box-sizing: border-box;

  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 50%;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  animation: nprogress-spinner 400ms linear infinite;
}

.nprogress-custom-parent {
  overflow: hidden;
  position: relative;
}

.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
  position: absolute;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




#percentage {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

}

#nprogress .bar {
  background: #29d;
  /* 进度条颜色 */
}

#nprogress .peg {
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  /* 进度条阴影 */
}

#nprogress .spinner-icon {
  border-top-color: #29d;
  /* 旋转图标颜色 */
}

/* 自定义百分比显示 */
#nprogress .percentage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #29d;
  font-size: 16px;
  font-weight: bold;
}

.light {
  background: #fff;
}

.light #percentage {
  background: #000;
  background: url(/white.jpg) no-repeat;
  background-size: cover;

}

.dark {
  background: #000;
}

.dark #percentage {
  background: #000;
  background: url(/dark.jpg) no-repeat;
  background-size: cover;

}

.bar-box {
  position: absolute;
  top: 70%;
  width: 90vw;
  height: 6vw;
  left: 5vw;
  background: #3b3b3b;
  border-radius: 3vw;
}

.bar-bg {
  position: relative;
  height: 3vw;
  border-radius: 2vw;
  background: #121211;
  margin: 1.5vw;
}

#percentageNum {
  text-align: right;
  font-family: Montserrat;
  font-size: 19px;
  font-style: normal;
  font-weight: 600;
}

.dark #percentageNum {
  background: var(--Linear, linear-gradient(144deg, #F7C635 1.36%, #FAD750 20.32%, #FFF47D 47.42%, #F5D13E 85.35%, #ECAF00 120.58%, #F8EB73 256.05%, #FAF280 269.6%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.Loadding {
  font-family: Montserrat;
  font-size: 28px;
  font-style: normal;
  position: absolute;
  bottom: 140%;
  left: 0;
  right: 0;
  color: #000;
  text-align: center;

}



.dark .Loadding {
  background: var(--Linear, linear-gradient(144deg, #F7C635 1.36%, #FAD750 20.32%, #FFF47D 47.42%, #F5D13E 85.35%, #ECAF00 120.58%, #F8EB73 256.05%, #FAF280 269.6%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#bar {
  position: absolute;
  left: 0;
  height: 3vw;

  border-radius: 2vw;
  background: linear-gradient(0deg, #B16B01 -7.54%, #D29700 -6.1%, #E0AB00 -4.65%, #EAB800 -1.77%, #F0C000 -0.32%, #F2C300 4.01%, #CC9000 9.78%, #AE6700 15.55%, #984900 19.88%, #8B3700 24.22%, #873101 27.1%, #FFE600 51.64%, #FFEA32 54.53%, #FFF06F 55.97%, #FFF5A3 58.86%, #FFF9CA 60.3%, #FFFCE7 61.74%, #FFFEF8 63.19%, #FFF 64.63%, #FEFDF3 68.96%, #FEF9D5 74.73%, #FEF3A4 83.4%, #FEEA60 93.5%, #FEE431 99.27%, #FCE54A 105.05%, #FCE663 112.26%);
}