body > span {
  display: grid;
}

.FormLogin {
  position: absolute !important;
  top: 0px !important;
  left: 0px !important;
  box-shadow: none !important;
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: center;

  background: none !important;
  border: none !important;
  border-radius: 0px !important;
  transition: none !important;

  overflow: hidden;
}

.LoginLabel {
  width: 95px;
}

#divLoginPanel {
  background: var(--ACZ-color-1);
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-1);
  min-width: 300px;
  max-width: 600px;
  display: none;
  opacity: 0;
  transition: var(--ACZ-transition-panel) !important;
  color: var(--ACZ-color-input);
  font-size: var(--ACZ-font-size-3);
  height: auto !important;
  position: absolute !important;
  top: 15% !important;
  left: unset !important;
  padding: var(--ACZ-margin-1) !important;
  gap: var(--ACZ-margin-1) !important;
}

#divLoginCredentials,
#divLoginButtons,
#divLoginLog {
  background: var(--ACZ-color-2);
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-2);
  padding: var(--ACZ-margin-1) !important;
  gap: var(--ACZ-margin-1) !important;
}
#divLoginButtons {
  order: 3;
  display: flex;
  flex-direction: row;
  padding: var(--ACZ-margin-1) !important;
  gap: var(--ACZ-margin-1) !important;
  justify-content: center;
  align-items: center;
  height: auto;
}

#divLoginUsername,
#divLoginPassword {
  margin-left: var(--ACZ-margin-1);
  gap: var(--ACZ-margin-1);
}
#divLoginCredentials > div > input,
#divLoginCredentials > div > select {
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-3) !important;
  transition: width   var(--ACZ-transition-delay) linear,
              outline var(--ACZ-transition-short) linear;
}

.LoginButtons {
  border: var(--ACZ-border-1);
  border-radius: var(--ACZ-border-radius-3) !important;
  min-width: 45px;
  transition: var(--ACZ-transition-std);
  padding: 0px !important;
  height: 40px !important;
}
.LoginButtons:disabled {
  border: var(--ACZ-border-1) !important;
  opacity: var(--ACZ-opacity-2) !important;
}

.LoginButtons > div {
  font-size: var(--ACZ-font-size-3);
  display: inline;
  position: relative;
  top: -2px;
  pointer-events: none;
}
.LoginButtons > svg {
  pointer-events: none;
}

#btnLoginForgot {
  max-width: 90px;
}

#btnLoginProgress {
  position: relative !important;
  top: 0px !important;
  right: 5px !important;
  left: unset !important;
  border: none !important;

  z-index: 1;
  order: 3;
  transform: scale(1.05);
}

#divLoginCredentials > div > input.caps-off:focus {
  outline: 2px solid var(--ACZ-color-10) !important;
}
#divLoginCredentials > div > input.caps-on:focus {
  outline: 2px solid var(--ACZ-color-8) !important;
}

#labelPasswordCAPS,
#labelPasswordCAPS.caps-off {
    background: var(--ACZ-color-8);
    color: var(--ACZ-color-11);
    height: 30px;
    margin: 0px 0px 0px -5px;
    padding: 5px 0px 5px 0px;
    width: 0px;
    border: var(--ACZ-border-1);
    border-radius: var(--ACZ-border-radius-3);
    opacity: 0;
    transition: opacity var(--ACZ-transition-delay) linear,
                width   var(--ACZ-transition-delay) linear,
                padding var(--ACZ-transition-delay) linear,
                margin  var(--ACZ-transition-delay) linear var(--ACZ-transition-short);
    overflow: hidden;
}
#labelPasswordCAPS.caps-on {
    background: var(--ACZ-color-8);
    color: var(--ACZ-color-11);
    height: 30px;
    margin: 0px 0px 0px 2px;
    padding: 5px 5px 5px 5px;
    width: 45px;
    border: var(--ACZ-border-1);
    border-radius: var(--ACZ-border-radius-3);
    opacity: 1;
    transition: opacity var(--ACZ-transition-delay) linear,
                width   var(--ACZ-transition-delay) linear,
                outline var(--ACZ-transition-delay) linear,
                padding var(--ACZ-transition-delay) linear;

    overflow: hidden;
}


#divLoginPanel,
#divLoginLog {
  transition: var(--ACZ-transition-quick);
}

#divLoginLog {
  display: none !important;
  height: 0px;
}

#divLoginLogDisplay > div > div.CodeMirror-overlayscroll-vertical {
  border-radius: var(--ACZ-border-radius-3);
}
#divLoginLogDisplay > div > div.CodeMirror-overlayscroll-vertical > div {
  border-radius: var(--ACZ-border-radius-2);
}