@keyframes ma-loader-travel {
  to {
    stroke-dashoffset: -100;
  }
}

.app-loading {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 10em;
}

.app-loading--boot {
  position: fixed;
  inset: 0;
  min-height: 100vh;
  background: #ffffff;
  top: 0;
  z-index: 9999;
}

.app-loading p {
  display: block;
  font-size: 1.17em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  font-weight: normal;
}

.app-loading .ma-loader {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
}

.app-loading .ma-loader__orbit {
  position: absolute;
  inset: 0;
  width: 112px;
  height: 112px;
  overflow: visible;
}

.app-loading .ma-loader__track,
.app-loading .ma-loader__progress {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.app-loading .ma-loader__track {
  stroke: rgba(21, 96, 130, 0.14);
}

.app-loading .ma-loader__progress {
  stroke: #156082;
  stroke-dasharray: 26 74;
  stroke-linecap: round;
  animation: ma-loader-travel 1.4s linear infinite;
}

.app-loading .ma-loader__mark {
  width: 58px;
  height: 58px;
  border-radius: 17px;
  box-shadow: 0 10px 28px rgba(21, 96, 130, 0.2);
}

html[data-theme='dark'] .app-loading .ma-loader__track {
  stroke: rgba(185, 211, 240, 0.15);
}

html[data-theme='dark'] .app-loading--boot {
  background: #0b1220;
}

html[data-theme='dark'] .app-loading .ma-loader__progress {
  stroke: #b9d3f0;
}

html[data-theme='dark'] .app-loading .ma-loader__mark {
  box-shadow: 0 10px 30px rgba(3, 7, 15, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  .app-loading .ma-loader__progress {
    animation: none;
  }
}

@media (forced-colors: active) {
  .app-loading .ma-loader__track {
    stroke: GrayText;
  }

  .app-loading .ma-loader__progress {
    stroke: CanvasText;
  }

  .app-loading .ma-loader__mark {
    box-shadow: none;
  }
}