/* 1) Point to your logo file */
:root{
  --kc-logo__image-url: url("../img/dms-logo.png");
  --keycloak-bg-logo-url: url("../img/keycloak-bg-darken.svg");
  --kc-logo__image-width: 30px;
  --kc-logo__image-height: 30px;
}

.pf-v5-c-login__container{
  display: flex !important;
  flex-direction: column !important;
}

.login-pf body {
    background: var(--keycloak-bg-logo-url) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

#kc-header-wrapper {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.kc-logo { 
  display: flex !important; 
  align-items: center !important; 
  justify-content: center !important; 
  gap: 10px; 
  margin: 0 auto 12px auto !important; 
  width: auto !important; 
  height: auto !important; 
  background: none !important; 
}

.kc-logo-text {
  font-size: 28px !important;
  font-weight: 700 !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

.kc-logo-text::before {
  content: "";
  display: inline-block;
  width: var(--kc-logo__image-width);
  height: var(--kc-logo__image-height);
  background: var(--kc-logo__image-url) no-repeat center / contain;
}

/* 3) Optional: narrow the card (v2 uses PatternFly v5) */
.pf-v5-c-login__main {
  max-width: 520px !important;  /* tweak to taste */
  margin: 0 auto !important;
  padding: 24px !important;
}

/* 4) Optional: make the title larger */
#kc-page-title{
  font-size: 28px !important;
  font-weight: 700 !important;
}