/* TK Maintenance login scene 0.4.11 */
.login {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: url('/login-background-v0411.png');
}

.login::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 0 0 55%;
  background: linear-gradient(90deg, rgba(6, 18, 27, .18), rgba(5, 20, 31, .62));
  pointer-events: none;
}

.login-workflow {
  position: fixed;
  z-index: 0;
  top: 50%;
  right: clamp(16px, 2.2vw, 48px);
  width: clamp(390px, 34vw, 620px);
  max-height: 94vh;
  aspect-ratio: 520 / 780;
  transform: translateY(-50%);
  pointer-events: none;
}

.login-workflow svg {width: 100%;height: 100%;overflow: visible;}
.workflow-link {fill: none;stroke: rgba(70, 190, 225, .28);stroke-width: 1.5;stroke-dasharray: 4 8;}
.workflow-frame {fill: rgba(8, 42, 59, .20);stroke: rgba(91, 202, 235, .43);stroke-width: 1.9;vector-effect: non-scaling-stroke;}
.workflow-runner {
  fill: none;
  stroke: #f8fdff;
  stroke-width: 3.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1.15 98.85;
  filter: url(#login-light-glow);
  animation: login-frame-run 8.5s linear infinite;
}
.workflow-node:nth-of-type(2) .workflow-runner {animation-delay: -1.4s;}
.workflow-node:nth-of-type(3) .workflow-runner {animation-delay: -2.8s;}
.workflow-node:nth-of-type(4) .workflow-runner {animation-delay: -4.2s;}
.workflow-node:nth-of-type(5) .workflow-runner {animation-delay: -5.6s;}
.workflow-icon {fill: none;stroke: rgba(207, 228, 237, .72);stroke-width: 5;stroke-linecap: round;stroke-linejoin: round;}
.workflow-node text {fill: rgba(210, 228, 236, .76);font: 600 14px Arial, sans-serif;text-anchor: middle;letter-spacing: .5px;}

body.is-authenticating .workflow-runner {animation-duration: 1.65s;stroke-width: 3.6;}
body.is-authenticating .workflow-frame {stroke: rgba(99, 211, 242, .60);}
body.is-authenticating .login-card {box-shadow: 0 28px 74px rgba(0, 0, 0, .42),0 0 30px rgba(72, 194, 226, .14);}
body.is-authenticating .login-card form {cursor: progress;}
body.is-authenticating .login-card input {pointer-events: none;}
body.is-authenticating .login-card button {pointer-events: none;}
.login-progress {min-height: 4px;border-radius: 99px;overflow: hidden;background: transparent;}
.login-progress::before {content: "";display: block;width: 34%;height: 3px;border-radius: inherit;background: linear-gradient(90deg, transparent, #49d8ff, transparent);opacity: 0;transform: translateX(-110%);}
body.is-authenticating .login-progress::before {opacity: 1;animation: login-progress 1s ease-in-out infinite;}

@keyframes login-frame-run {to {stroke-dashoffset: -100;}}
@keyframes login-progress {to {transform: translateX(300%);}}

@media (min-width: 1001px) {
  .login-card {transform: translateX(clamp(-145px, -8vw, -48px));}
}

@media (max-width: 1280px) {
  .login-workflow {right: 8px;width: clamp(340px, 32vw, 430px);opacity: .88;}
  .login-card {width: min(500px, 48vw);}
}

@media (max-width: 1000px), (max-aspect-ratio: 4/3) {
  .login::after,.login-workflow {display: none;}
  .login-card {width: min(520px, 92vw);transform: none;}
}

@media (max-width: 640px) {
  .login {overflow: auto;}
  .login-card {width: 100%;}
}

@media (prefers-reduced-motion: reduce) {
  .workflow-runner,.login-progress::before {animation: none !important;}
  .workflow-runner {stroke-dasharray: .8 99.2;opacity: .75;}
}