@font-face {
  font-family: Lato;
  src: url('../fonts/Lato-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
:root {
  --overa-black: #11171e;
  --overa-green: #13af3b;
  --overa-text: #f5f8f7;
  --overa-muted: #bbc8c2;
  --overa-line: #3c574b;
}
html.login-pf,
.login-pf body {
  min-height: 100%;
  background: var(--overa-black);
  color: var(--overa-text);
  font-family: Lato, sans-serif;
  font-weight: 500;
}
body {
  margin: 0;
}
.login-pf-page {
  padding: 52px 24px 32px;
}
#kc-header {
  margin: 0 auto 30px;
  max-width: 460px;
}
#kc-header-wrapper {
  width: 210px;
  height: 76px;
  padding: 0;
  margin: auto;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background: url('../img/overa-logo.svg') center / contain no-repeat;
}
.login-pf-page .card-pf {
  max-width: 460px;
  margin: auto;
  padding: 32px;
  background: #10231c;
  border: 1px solid var(--overa-line);
  border-top: 3px solid var(--overa-green);
  border-radius: 16px;
  box-shadow: 0 16px 60px #0005;
}
#kc-page-title {
  font-family: Lato, sans-serif;
  font-size: 28px;
  line-height: 1.25;
  color: var(--overa-text);
}
.login-pf-page .login-pf-header {
  margin: 0 0 24px;
}
.pf-c-form__label,
label,
.subtitle {
  color: var(--overa-text);
  font-size: 15px;
}
#kc-content label[for],
#kc-content .pf-c-form__label {
  display: block;
  margin-bottom: 10px;
}
.pf-c-form-control,
input[type='text'],
input[type='password'],
input[type='email'] {
  min-height: 46px;
  border: 1px solid var(--overa-line);
  border-radius: 7px;
  background: #091611;
  color: var(--overa-text);
  font-family: inherit;
  font-size: 16px;
  padding: 10px 12px;
}
input:-webkit-autofill {
  -webkit-text-fill-color: var(--overa-text);
  box-shadow: 0 0 0 1000px #091611 inset;
}
.pf-c-button.pf-m-primary,
#kc-login {
  min-height: 46px;
  border: 1px solid var(--overa-green);
  border-radius: 7px;
  background: var(--overa-green);
  color: var(--overa-black);
  font:
    500 16px Lato,
    sans-serif;
}
.pf-c-button.pf-m-control {
  background: #172f25;
  color: var(--overa-text);
  border-color: var(--overa-line);
}
.pf-c-button::after {
  border-radius: 7px;
}
a,
.login-pf a,
#kc-form-options a,
#kc-info a {
  color: #80e59a;
  text-decoration: underline;
  text-underline-offset: 3px;
}
a:hover,
.login-pf a:hover {
  color: #b3f5c4;
}
:is(a, button, input, select):focus-visible {
  outline: 3px solid #61c7ff;
  outline-offset: 3px;
  box-shadow: none;
}
.pf-c-form-control:focus {
  border-color: #61c7ff;
}
#kc-info-wrapper,
.login-pf-page #kc-info {
  background: transparent;
  color: var(--overa-muted);
  padding: 18px 0 0;
}
.login-pf-page #kc-info {
  margin-left: 0;
  margin-right: 0;
  overflow-wrap: anywhere;
}
.pf-c-alert {
  margin: 0 0 20px;
  border-radius: 7px;
  padding: 12px;
  background: #2b2113;
  border: 1px solid #b69d5a;
  color: #fff2c6;
}
.pf-c-alert.pf-m-danger {
  background: #3b1b20;
  border-color: #c6727c;
  color: #ffdde2;
}
.pf-c-alert__title,
.kc-feedback-text,
#input-error,
[id^='input-error-'] {
  color: inherit;
}
.pf-m-error,
#input-error,
[id^='input-error-'] {
  color: #ffb7c3;
}
#kc-content-wrapper,
#kc-form,
#kc-form-wrapper {
  max-width: 100%;
}
@media (max-width: 520px) {
  .login-pf-page {
    padding: 24px 16px;
  }
  .login-pf-page .card-pf {
    width: 100%;
    padding: 24px 20px;
  }
  #kc-header {
    margin-bottom: 22px;
  }
  #kc-page-title {
    font-size: 25px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    transition: none !important;
  }
}