.app-loading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 100%;
  height: 100%;
}
/**
  * Ring of dots
  *
  * @author jh3y
*/
@-webkit-keyframes ring-of-dots {
  0% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399; }
  14.28571% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #663399, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #663399, 12.4698px -15.63663px 0 0 white; }
  28.57143% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #663399, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #663399, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  42.85714% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #663399, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #663399, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  57.14286% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #663399, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #663399, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  71.42857% {
    -webkit-box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #663399, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #663399, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  85.71429% {
    -webkit-box-shadow: 20px 0px 0 0 #663399, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd;
            box-shadow: 20px 0px 0 0 #663399, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; }
  100% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399; } }
@keyframes ring-of-dots {
  0% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399; }
  14.28571% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #663399, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 #ba98dd, -4.45042px -19.49856px 0 0 #663399, 12.4698px -15.63663px 0 0 white; }
  28.57143% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #663399, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 #ba98dd, -18.01938px -8.67767px 0 0 #663399, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  42.85714% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #663399, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 #ba98dd, -18.01938px 8.67767px 0 0 #663399, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  57.14286% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #663399, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 #ba98dd, -4.45042px 19.49856px 0 0 #663399, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  71.42857% {
    -webkit-box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #663399, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white;
            box-shadow: 20px 0px 0 0 #ba98dd, 12.4698px 15.63663px 0 0 #663399, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 white; }
  85.71429% {
    -webkit-box-shadow: 20px 0px 0 0 #663399, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd;
            box-shadow: 20px 0px 0 0 #663399, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 white, 12.4698px -15.63663px 0 0 #ba98dd; }
  100% {
    -webkit-box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399;
            box-shadow: 20px 0px 0 0 white, 12.4698px 15.63663px 0 0 white, -4.45042px 19.49856px 0 0 white, -18.01938px 8.67767px 0 0 white, -18.01938px -8.67767px 0 0 white, -4.45042px -19.49856px 0 0 #ba98dd, 12.4698px -15.63663px 0 0 #663399; } }

.ring-of-dots:before {
  animation: ring-of-dots 1s infinite linear reverse;
  border-radius: 10px;
  content: '';
  display: block;
  height: 10px;
  width: 10px; }