/* Catalytics branding over the maintained Keycloak login templates. */
:root {
  color-scheme: dark;
  --pf-t--global--background--color--primary--default: #100b17;
  --pf-t--global--color--brand--default: #b57cff;
}
html, .login-pf, .login-pf body, body {
  min-height: 100%;
  background: #09050f !important;
  background-image: radial-gradient(ellipse at 50% 0, #2d1346 0, #130b1d 42%, #09050f 78%) !important;
  color: #f7f2fb !important;
  font-family: Inter, "Segoe UI", sans-serif !important;
}
.login-pf-page { padding: 40px 20px !important; }
#kc-header { margin: 0 0 26px !important; }
#kc-header-wrapper {
  padding: 0 !important;
  color: #f7f2fb !important;
  font-size: 25px !important;
  font-weight: 750 !important;
  letter-spacing: .13em;
  text-align: center;
}
#kc-header-wrapper::before {
  content: "";
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 17px;
  background: url("../img/shoutcat-paw.png") center / contain no-repeat;
}
#kc-header-wrapper::after {
  content: "SHOUTCAT HOSTING";
  display: block;
  margin-top: 9px;
  color: #c6a5e7;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .23em;
}
.card-pf, .pf-v5-c-login__main, .pf-v6-c-login__main {
  width: 100%;
  max-width: 490px;
  margin: 0 auto !important;
  padding: 32px 36px !important;
  background: #130c1c !important;
  color: #f7f2fb !important;
  border: 1px solid #513164 !important;
  border-top: 3px solid #aa55ef !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px #0008 !important;
}
.pf-v5-c-login__container, .pf-v5-c-login__header,
.pf-v6-c-login__container, .pf-v6-c-login__header { background: transparent !important; color: #f7f2fb !important; }
#kc-page-title { margin: 0 0 24px !important; font-size: 25px !important; font-weight: 700; line-height: 1.3; }
label, .control-label, .pf-v5-c-form__label, .pf-v6-c-form__label { color: #e9def1 !important; font-size: 14px !important; }
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea,
.form-control, .pf-v5-c-form-control, .pf-v6-c-form-control {
  min-height: 45px;
  background: #0b0711 !important;
  color: #f7f2fb !important;
  border: 1px solid #614575 !important;
  border-radius: 9px !important;
  box-shadow: none !important;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid #cf9cff !important;
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: #ae60f3; }
input:-webkit-autofill { -webkit-text-fill-color: #f7f2fb !important; box-shadow: 0 0 0 1000px #170f20 inset !important; }
.btn-primary, input[type="submit"], .pf-v5-c-button.pf-m-primary, .pf-v6-c-button.pf-m-primary {
  min-height: 45px;
  background: linear-gradient(110deg, #7620be, #a72df0) !important;
  border: 1px solid #b76af0 !important;
  border-radius: 9px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 7px 24px #8725c12b !important;
}
.btn-primary:hover, input[type="submit"]:hover { filter: brightness(1.12); }
button[data-password-toggle] { background: #21132e !important; color: #e2c9f7 !important; border-color: #614575 !important; }
a, a:visited { color: #d1a2ff !important; }
a:hover { color: #ecd8ff !important; }
#kc-info-wrapper, #kc-registration-container, .login-pf-signup {
  background: transparent !important;
  color: #bbaac9 !important;
  border-color: #3e284e !important;
}
#kc-info { margin-top: 24px !important; }
.alert, .pf-v5-c-alert, .pf-v6-c-alert { border-radius: 9px; }
@media (max-width: 600px) {
  .login-pf-page { padding: 26px 16px !important; }
  .card-pf, .pf-v5-c-login__main, .pf-v6-c-login__main { padding: 26px 22px !important; }
  #kc-header-wrapper { font-size: 21px !important; }
  #kc-header-wrapper::before { width: 62px; height: 62px; }
  #kc-page-title { font-size: 22px !important; }
}
/* Keep the brand and form in one centered column on the installed v2 layout. */
.pf-v5-c-login, .pf-v6-c-login {
  min-height: 100vh;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 36px 20px;
}
.pf-v5-c-login__container, .pf-v6-c-login__container {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 490px;
  gap: 0 !important;
}
.pf-v5-c-login__header, .pf-v6-c-login__header { order: 0; width: 100%; }
.pf-v5-c-login__main, .pf-v6-c-login__main { order: 1; }
.pf-v5-c-login__main-header, .pf-v5-c-login__main-body, .pf-v5-c-login__main-footer,
.pf-v6-c-login__main-header, .pf-v6-c-login__main-body, .pf-v6-c-login__main-footer { padding: 0 !important; }
.pf-v5-c-check__label, .pf-v6-c-check__label, .pf-v5-c-form__helper-text, .pf-v6-c-form__helper-text { color: #d9c7e5 !important; }
.pf-v5-c-form-control > input, .pf-v6-c-form-control > input { border: 0 !important; background: transparent !important; outline: none !important; }
.pf-v5-c-form-control::before, .pf-v5-c-form-control::after,
.pf-v6-c-form-control::before, .pf-v6-c-form-control::after { display: none !important; }
.pf-v5-c-form-control:focus-within, .pf-v6-c-form-control:focus-within { outline: 2px solid #cf9cff !important; outline-offset: 2px; }
.pf-v5-c-form-control.pf-m-error, .pf-v6-c-form-control.pf-m-error { border-color: #ff90ae !important; }
@media (max-width: 600px) {
  .pf-v5-c-login, .pf-v6-c-login { padding: 24px 16px; }
}
.pf-v5-c-login__main, .pf-v6-c-login__main {
  width: 100% !important;
  max-width: 490px !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
#kc-header { padding: 0 !important; }
.pf-v5-c-login__container, .pf-v6-c-login__container { padding: 0 !important; }