/* What shows in #root until the app has downloaded and started: React
   replaces it on mount. Plain colours, because the stylesheets of the app are
   not loaded yet. */
.boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 100vh;
  font-family: Lexend, sans-serif;
  color: #0f172a;
  background: #ffffff;
}
.boot__name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}
/* The Digi Dawai mark drawing itself while the app loads: a dot runs the small
   d, hops to the start of the route, runs the D, and settles as the hub at the
   bottom left. One loop is five seconds; it repeats until the screen is ready.
   The dot's path is the d, a hop, the D and a hop home joined end to end, and
   the keyframe distances are where each part ends along it. */
.boot__mark {
  width: 72px;
  height: 72px;
  overflow: visible;
  color: #4a7399;
  animation: boot-fade 5s linear infinite;
}
.boot__mark-d,
.boot__mark-route {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.boot__mark-d {
  stroke-width: 3.6;
  animation: boot-d 5s infinite;
}
.boot__mark-route {
  stroke-width: 6;
  animation: boot-route 5s infinite;
}
.boot__mark-dot {
  fill: currentColor;
  offset-path: path(
    'M33 36A5 5 0 0 0 28 31A5 5 0 0 0 23 36A5 5 0 0 0 28 41A5 5 0 0 0 33 36V22Q23.5 14 14 38V14H30A18 18 0 0 1 30 50H26Q20 36 14 50'
  );
  offset-rotate: 0deg;
  offset-distance: 100%;
  transform: scale(5);
  animation: boot-dot 5s infinite;
}
.boot__mark-hub {
  display: none;
  fill: currentColor;
}
@keyframes boot-d {
  0% {
    stroke-dashoffset: 1;
    animation-timing-function: ease-in-out;
  }
  22%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes boot-route {
  0%,
  30% {
    stroke-dashoffset: 1;
    animation-timing-function: ease-in-out;
  }
  60%,
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes boot-dot {
  0% {
    offset-distance: 0%;
    transform: scale(2.4);
    animation-timing-function: ease-in-out;
  }
  22% {
    offset-distance: 23.34%;
    transform: scale(2.4);
    animation-timing-function: ease-in-out;
  }
  30% {
    offset-distance: 38.4%;
    transform: scale(3.2);
    animation-timing-function: ease-in-out;
  }
  60% {
    offset-distance: 90.08%;
    transform: scale(3.2);
    animation-timing-function: ease-in-out;
  }
  69%,
  100% {
    offset-distance: 100%;
    transform: scale(5);
  }
}
@keyframes boot-fade {
  0%,
  93% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* Animations turned off, or a browser that cannot move the dot along a path:
   the finished mark, still. */
@media (prefers-reduced-motion: reduce) {
  .boot__mark,
  .boot__mark * {
    animation: none !important;
  }
}
@supports not (offset-path: path('M0 0')) {
  .boot__mark,
  .boot__mark * {
    animation: none !important;
  }
  .boot__mark-dot {
    display: none;
  }
  .boot__mark-hub {
    display: inline;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body {
    background: #0d1219;
  }
  :root:not([data-theme='light']) .boot {
    color: #e2e8f0;
    background: #0d1219;
  }
  :root:not([data-theme='light']) .boot__mark {
    color: #8fb2cf;
  }
}
:root[data-theme='dark'] body,
:root[data-theme='dark'] .boot {
  color: #e2e8f0;
  background: #0d1219;
}
:root[data-theme='dark'] .boot__mark {
  color: #8fb2cf;
}
.boot__hidden {
  position: absolute;
  left: -9999px;
}
/* A screen loading inside the office or driver layout: the content area only,
   on the layout's own background. */
:root .boot.boot--in-layout {
  min-height: 50vh;
  color: inherit;
  background: transparent;
}
.boot__note {
  margin: 0;
  max-width: 28rem;
  padding: 0 16px;
  font-size: 0.9375rem;
  text-align: center;
}
.boot__reload {
  min-height: 44px;
  padding: 0 20px;
  font: inherit;
  font-weight: 600;
  color: #ffffff;
  background: #4a7399;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}