:root {
  /* --pf-global--primary-color--200: #d60248; */
  --default-background-color: #ffffff;
  --link-hover-color: #ff6600aa;
  --border-radius: 12px;
  --box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
  --max-page-width: calc(320px + 1.5rem);
  --primary-color: hsl(240 5.9% 10% / 1);
  --regular-text-color: rgb(9, 9, 11);
  --small-info: #8c8c8c;

  --pf-global--primary-color--100: var(--primary-color);
}

* {
  box-sizing: border-box;
}

.login-pf body {
  background:
    /* url("../img/background.avif") 50% 0 / contain no-repeat, */
    white;
  color: var(--regular-text-color);
}

.login-pf .login-pf-page {
  padding: unset;
}

.login-pf .login-pf-page-header {
  background: url("../img/iqony_black.svg") 50% / contain no-repeat;
  min-height: 200px;
  max-height: 50vh;
  margin: 0 auto;
  max-width: var(--max-page-width);
}

.login-pf #kc-header-wrapper {
  display: none;
}

.login-pf #kc-content-wrapper,
.login-pf #kc-form-wrapper,
.login-pf #kc-form-buttons {
  margin: 0;
}

.login-pf #kc-form-wrapper {
  max-width: 320px;
}

.login-pf #kc-form-login {
  display: grid;
  gap: 1rem;
}

.login-pf #kc-form-buttons {
  justify-self: center;
  width: 100%;
  max-width: 320px;
}

.login-pf .form-group {
  margin: 0;
}

.login-pf .login-pf-header {
  display: none;
}

.login-pf a:hover {
  backdrop-filter: blur(10px);
  color: var(--link-hover-color);
  text-decoration: none;
}

.login-pf .card-pf {
  background: var(--default-background-color);
  border: 1px solid rgb(228, 228, 231);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  width: var(--max-page-width);
  max-width: min(100%, var(--max-page-width));
  padding: 1.5rem;
}

.login-pf .pf-c-button {
  height: 2.25rem;
  width: auto;
  border-radius: 6px;
  padding: 0 12px;
  width: 100%;
}

.login-pf .pf-c-form__label-text {
  color: var(--regular-text-color);
}

.login-pf .pf-c-form-control {
  --pf-global--primary-color--100: unset;
  border: 1px solid rgb(228, 228, 231);
  border-radius: 6px;
  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
  rgba(0, 0, 0, 0) 0px 0px 0px 0px,
  rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  font-size: 14px;
  width: 100%;
  padding: 4px 12px;
}

.login-pf input:focus.pf-c-form-control {
  outline: none;
  border-bottom-color: var(--primary-color);
}

/* Logout specific styles */
#kc-logout-confirm {
  text-align: center;
}

#kc-logout-confirm .instruction {
  text-align: left;
  color: rgb(113, 113, 122);
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 12px;
}

#kc-logout-confirm #kc-info-message {
  margin-top: 12px;
}

#kc-logout-confirm #kc-info-message p {
  margin: 0;
}

#kc-logout-confirm #kc-info-message a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  height: 36px;
  border-radius: 6px;
  background-color: transparent;
  color: var(--regular-text-color);
}

#kc-logout-confirm #kc-info-message a:hover {
  background-color: rgb(244, 244, 245);
}