#loading-wrapper{
    position: absolute;
}

.loading-indicator{
    width: 100px;
    left: 50%;
    position: fixed;
    top: 50%;
    z-index: 9000;
    transform: translate(-50%, -50%);
}

.loading-indicator .indicator {
  position: relative;
  margin: 0px auto;
  width: 100px;
  height: 100px;
}

.loading-indicator .indicator:before {
  content: '';
  display: block;
  padding-top: 100%;
}

.circular-indicator {
  -webkit-animation: rotate 2s linear infinite;
          animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
}

.indicator-path {
  stroke-dasharray: 150,200;
  stroke-dashoffset: -10;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
          animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}

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

@keyframes rotate {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}
@-webkit-keyframes color {
  0% {
    stroke: #0A223D;
  }
  40% {
    stroke: #0A223D;
  }
  66% {
    stroke: #0A223D;
  }
  80%, 90% {
    stroke: #0A223D;
  }
}
@keyframes color {
  0% {
    stroke: #0A223D;
  }
  40% {
    stroke: #0A223D;
  }
  66% {
    stroke: #0A223D;
  }
  80%, 90% {
    stroke: #0A223D;
  }
}

.loading-error{
    display: inline-flex;
    left: 50%;
    position: fixed;
    top: 90px;
    z-index: 9001;
    transform: translate(-50%, -50%);
    align-items: center;
    padding: 10px 20px !important;
    background-color: #fde68a;
    color: #92400e;
    font-size: 1.25rem;
}
.loading-error-icon{
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 20px !important;
}
.loading-error-message{
    
}