body {
  /* initially hide body, fade in as soon as app is loaded (js/brand.js) */
  opacity: 0;
  transition: opacity 0.7s;
}

a:not(.button) {
  text-decoration: underline !important;
  color: var(--primary);
}

a#social-github {
  background-color: #191717;
  color: white;
}

a#social-github > .kc-social-gray {
  color: white;
}

.kc-body {
  width: clamp(382px, 50vw, 520px);
}

#kc-logo-link {
  justify-content: flex-start;
}

.kc-logo {
  height: clamp(30px, 50vw, 50px);
  width: auto;
  max-width: 100%;
}

.passwordField {
  flex-grow: 1;
}

.passwordBtn {
  position: absolute;
  right: 0;
}

.language-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  width: clamp(382px, 50vw, 520px);
  overflow: hidden;
}

.language-selector  > div:first-child {
  flex-basis: 30%;
}

.language-selector  > div:last-child {
  flex-basis: 70%;
}

#kc-locale-select {
  width: 100%;
}