html,
body {
  padding: 0;
  margin: 0;
}

.page-loading-wrapper {
  overflow: auto;
  height: 100vh;
  background:
    url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA0MDkuMiAxMTcuNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDA5LjIgMTE3Ljc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlhNTElEXzI5NTdfIj4KCTxwYXRoIGlkPSJYTUxJRF8yOTU4XyIgZD0iTTQwNi4yLDExNi43SDNjLTEuMSwwLTItMC45LTItMlYzYzAtMS4xLDAuOS0yLDItMmg0MDMuMmMxLjEsMCwyLDAuOSwyLDJ2MTExLjcKCQlDNDA4LjIsMTE1LjgsNDA3LjMsMTE2LjcsNDA2LjIsMTE2Ljd6IE04LjksMTA4LjhoMzkxLjRWOC45SDguOVYxMDguOHoiLz4KPC9nPgo8ZyBpZD0iWE1MSURfMjk1Ml8iPgoJPHBhdGggaWQ9IlhNTElEXzI5NTNfIiBkPSJNMjcsMjcuOWMwLTAuNiwwLjQtMSwxLTFoMjQuNWMxMS43LDAsMjIuNywyLjgsMjIuNywxNS44YzAsOS01LjcsMTMuMy0xMi4xLDE0LjZ2MC4yCgkJQzcwLjgsNTguOSw3Nyw2Mi45LDc3LDczLjFjMCwxMi44LTExLjMsMTcuNi0yMy4yLDE3LjZIMjhjLTAuNiwwLTEtMC40LTEtMVYyNy45eiBNNTEuMSw1My4yYzcuMywwLDEwLjctMi44LDEwLjctNy43CgkJYzAtNS0zLTcuNy0xMC41LTcuN0g0MC44djE1LjRDNDAuOCw1My4yLDUxLjEsNTMuMiw1MS4xLDUzLjJ6IE01Mi4xLDgwYzcuNywwLDExLjItMy4xLDExLjItOC41YzAtNS42LTQtOC40LTExLjgtOC40SDQwLjhWODAKCQlINTIuMXoiLz4KPC9nPgo8ZyBpZD0iWE1MSURfMjk0OF8iPgoJPHBhdGggaWQ9IlhNTElEXzI5NDlfIiBkPSJNOTIsMjcuOWMwLTAuNiwwLjQtMSwxLTFoMjIuOWMxNS43LDAsMjUuMSw1LjYsMjUuMSwxOS43YzAsMTAuMS00LjcsMTUuNi0xMy4zLDE4LjJsMTMuNCwyNC4zCgkJYzAuNCwwLjctMC4xLDEuNS0wLjksMS41aC0xMi41Yy0wLjQsMC0wLjctMC4yLTAuOS0wLjZsLTEyLjctMjUuOWMtMC4yLTAuMy0wLjUtMC42LTAuOS0wLjZoLTcuNXYyNmMwLDAuNi0wLjQsMS0xLDFIOTMKCQljLTAuNiwwLTEtMC40LTEtMVYyNy45eiBNMTE1LjMsNTIuOGM2LDAsMTItMS4zLDEyLTYuN2MwLTUuOS0zLjktNy43LTEyLTcuN2gtOS42djE0LjRDMTA1LjcsNTIuOCwxMTUuMyw1Mi44LDExNS4zLDUyLjh6Ii8+CjwvZz4KPGcgaWQ9IlhNTElEXzI3MzRfIj4KCTxwYXRoIGlkPSJYTUxJRF8yNzM1XyIgZD0iTTMzMy40LDI3LjljMC0wLjYsMC40LTEsMS0xaDIyLjljMTUuNywwLDI1LjEsNS42LDI1LjEsMTkuN2MwLDEwLjEtNC43LDE1LjYtMTMuMywxOC4ybDEzLjQsMjQuMwoJCWMwLjQsMC43LTAuMSwxLjUtMC45LDEuNWgtMTIuNWMtMC40LDAtMC43LTAuMi0wLjktMC42bC0xMi43LTI1LjljLTAuMi0wLjMtMC41LTAuNi0wLjktMC42aC03LjV2MjZjMCwwLjYtMC40LDEtMSwxaC0xMS44CgkJYy0wLjYsMC0xLTAuNC0xLTFMMzMzLjQsMjcuOUwzMzMuNCwyNy45eiBNMzU2LjgsNTIuOGM2LDAsMTItMS4zLDEyLTYuN2MwLTUuOS0zLjktNy43LTEyLTcuN2gtOS42djE0LjQKCQlDMzQ3LjIsNTIuOCwzNTYuOCw1Mi44LDM1Ni44LDUyLjh6Ii8+CjwvZz4KPGcgaWQ9IlhNTElEXzI3MzFfIj4KCTxwYXRoIGlkPSJYTUxJRF8yNzMyXyIgZD0iTTIzMCwzOC42aC0xOGMtMC42LDAtMS0wLjQtMS0xdi05LjdjMC0wLjYsMC40LTEsMS0xaDUwYzAuNiwwLDEsMC40LDEsMXY5LjdjMCwwLjYtMC40LDEtMSwxaC0xOHY1MQoJCWMwLDAuNi0wLjQsMS0xLDFoLTEyYy0wLjYsMC0xLTAuNC0xLTFWMzguNnoiLz4KPC9nPgo8ZyBpZD0iWE1MSURfMjcyOF8iPgoJPHBhdGggaWQ9IlhNTElEXzI3MjlfIiBkPSJNMjc2LDI2LjloNDNjMC42LDAsMSwwLjQsMSwxdjkuN2MwLDAuNi0wLjQsMS0xLDFoLTI5Ljl2MTMuN0gzMTRjMC42LDAsMSwwLjQsMSwxdjkuMWMwLDAuNi0wLjQsMS0xLDEKCQloLTI0Ljl2MTUuOEgzMTljMC42LDAsMSwwLjQsMSwxdjkuNGMwLDAuNi0wLjQsMS0xLDFoLTQzYy0wLjYsMC0xLTAuNC0xLTFWMjcuOUMyNzUsMjcuNCwyNzUuNSwyNi45LDI3NiwyNi45eiIvPgo8L2c+CjxnIGlkPSJYTUxJRF8yNzIxXyI+Cgk8ZyBpZD0iWE1MSURfMjcyNl8iPgoJCTxwYXRoIGlkPSJYTUxJRF8yNzI3XyIgZD0iTTE2OC45LDM5LjhsLTcuMy0xMi40Yy0wLjItMC4zLTAuNS0wLjUtMC45LTAuNWgtMTIuMWMtMC44LDAtMS4zLDAuOC0wLjksMS41bDE1LDI0LjRMMTY4LjksMzkuOHoiLz4KCTwvZz4KCTxnIGlkPSJYTUxJRF8yNzIyXyI+CgkJPHBhdGggaWQ9IlhNTElEXzI3MjVfIiBkPSJNMTkwLjUsMjcuNGwtMjEuNywzNi4ydjI2YzAsMC42LDAuNCwxLDEsMWgxMS45YzAuNiwwLDEtMC40LDEtMXYtMjZsMjEuMS0zNS4yYzAuNC0wLjctMC4xLTEuNS0wLjktMS41CgkJCWgtMTEuN0MxOTEsMjYuOSwxOTAuNywyNy4xLDE5MC41LDI3LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==')
      no-repeat calc(25% - 120px) center fixed,
    linear-gradient(transparent 0, transparent 2px, #fff 2px, #fff 20px),
    linear-gradient(to right, #eeedee 0, #eeedee 2px, #fff 2px, #fff 20px) 21.5px -2px;
  background-size:
    94px auto,
    30px 30px,
    30px 30px;
}

.page-loading {
  font-family: 'Lota', sans-serif;
  margin: calc(50vh - 190px) auto 0;
  padding: 35px 40px;
  max-width: 380px;
  height: 350px;
  border-radius: 2px;
  box-shadow: 0 0 10px 0 rgba(134, 144, 161, 0.42);
  background: #fff;
}

.page-loading h1 {
  font-size: 22px;
  font-weight: bold;
  margin: 0;
}

.page-loading h2 {
  font-size: 18px;
  font-weight: normal;
  color: #7e8286;
  margin: 0;
}

.page-loading a {
  color: #186bf2;
}

.page-loading .info-box {
  border-top: solid 1px #e8e8e8;
  padding: 12px 0;
  font-size: 12px;
  color: #7e8286;
}

.app-loader-wrapper {
  overflow: auto;
  height: 220px;
}

.app-loader {
  position: relative;
  width: 70px;
  height: 50px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 70px 0;
}

.app-loader .duo {
  position: absolute;
  margin: -5px 0 0;
  top: 50%;
  height: 10px;
  width: 40px;
  transform: translate(-50%, 0);
}

.app-loader .duo,
.app-loader .dot {
  animation-duration: 0.8s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.app-loader .duo1 {
  left: 0;
  animation-name: app-loader-spin;
}

.app-loader .duo2 {
  left: 30px;
  animation-name: app-loader-spin;
  animation-direction: reverse;
}

.app-loader .dot {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background-color: #186bf2;
  position: absolute;
}

.app-loader .dot-a {
  left: 0;
}

.app-loader .dot-b {
  right: 0;
}

.app-loader .duo2 .dot-b {
  animation-name: app-loader-onoff;
}

.app-loader .duo1 .dot-a {
  opacity: 0;
  animation-name: app-loader-onoff;
  animation-direction: reverse;
}

@keyframes app-loader-spin {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(180deg);
  }
}

@keyframes app-loader-onoff {
  0% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}