.loading-cls-2 {
  fill: #757575;
}

.loading-cls-1 {
  fill: #747272;
}

.loading-cls-3 {
  fill: #bd4d3a;
}

.loading-cls-4 {
  fill: #bd4d3a;
}
.logo-svg {
  z-index: 40000;
  width: 189px;
  height: 150px;
}

.loadingImg {
  float: center;
  position: fixed;
  top: calc(40% - 70px);
  left: -moz-calc(50% - 88px);
  left: -webkit-calc(50% - 90px);
  left: -o-calc(50% - 90px);
  left: calc(50% - 90px);
  z-index: 3006;
}

.ele {
  animation: 0s fadeIn;
  animation-fill-mode: forwards;

  visibility: hidden;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.loadingSpin {
  float: center;
  position: fixed;
  top: calc(40% - 100px);
  left: -moz-calc(50% - 100px);
  left: -webkit-calc(50% - 100px);
  left: -o-calc(50% - 100px);
  left: calc(50% - 100px);
  z-index: 3007;
  border-bottom: 5px solid #fff;
  border-left: 5px solid #fff;
  border-right: 5px solid #bd4d3a;
  border-top: 5px solid #bd4d3a;
  border-radius: 100%;
  height: 200px;
  width: 200px;
  -webkit-animation: spinR 1s infinite linear;
  -moz-animation: spinR 1s infinite linear;
  -ms-animation: spinR 1s infinite linear;
  -o-animation: spinR 1s infinite linear;
  animation: spinR 1s infinite linear;
}

@keyframes spinR {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
    -moz-transform: rotate(359deg);
    -o-transform: rotate(359deg);
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-moz-keyframes spinR {
  from {
    -moz-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-webkit-keyframes spinR {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-ms-keyframes spinR {
  from {
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -ms-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@-o-keyframes spinR {
  from {
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -o-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
.fade-in {
  -webkit-animation: fadein 0.1s linear;
  -moz-animation: fadein 0.5s linear;
  -ms-animation: fadein 0.5s linear;
  -o-animation: fadein 0.5s linear;
  animation: fadein 0.5s linear;
}

.fade-out {
  -webkit-animation: fadeout 0.1s linear;
  -moz-animation: fadeout 0.1s linear;
  -ms-animation: fadeout 0.1s linear;
  -o-animation: fadeout 0.1s linear;
  animation: fadeout 0.1s linear;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.kd-loading-status-wrapper {
  color: #fff;
  position: fixed;
  bottom: 8vh;
  right: 0;
  z-index: 4005;
  white-space: nowrap;
}

.kd-loading-status {
  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 14px;
  width: 300px;
  color: #fff;
  position: absolute;
  bottom: 0px;
  right: 0px;
  white-space: nowrap;
}

.kd-app-loading {
  float: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #212121;
  z-index: 30000;
}

.kd-display-none {
  display: none;
}

.ele {
  animation: 1.5s fadeIn;
  animation-fill-mode: forwards;

  visibility: hidden;
}

@keyframes fadeIn {
  99% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

.log-error {
  font-size: 12px;
  color: #f00;
}

.log-debug {
  font-size: 12px;
  color: #333;
}

#screen-log {
  background: #fff;
  position: fixed;
  z-index: 10000;
  top: 100px;
  left: 100px;
}