body {
  background: url("../img/background.jpg");
  background-size: cover;
}
/* Hide the "Keycloak" text at the top */
#kc-header,
#kc-header-wrapper,
.kc-logo-text {
    display: none !important;
}

/* Center the login layout */
.pf-v5-c-login {
    align-items: center !important;
    justify-content: center !important;
}

/* Make the container a single centered column */
.pf-v5-c-login__container {
    display: flex !important;
    justify-content: center !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}

/* Keep the actual login box centered */
.pf-v5-c-login__main {
    margin: 0 auto !important;
}








/* Add your custom logo at the top */
.pf-v5-c-login__main-header::before {
    content: "";
    display: block;
    background: url("../img/boxarr-logo.png") no-repeat center;
    background-size: contain;
    height: 70px;
    margin-bottom: 20px;
}


/* Main login container (Keycloak v2 / PatternFly 5) */
.pf-v5-c-login__main,
.pf-v5-c-login__main .card-pf {
    background: rgba(28, 47, 67, 0.6) !important; /* transparent blue */
    border: 1px solid rgba(28, 47, 67, 0.6) !important;
    border-radius: 12px !important;

}

/* Make inner body transparent too */
.pf-v5-c-login__main-body {
    background: transparent !important;
}

/* Improve readability on transparent background */
.pf-v5-c-login__main,
.pf-v5-c-login__main h1,
.pf-v5-c-login__main label,
.pf-v5-c-login__main .pf-v5-c-form__label-text {
    color: #ffffff !important;
}

/* Inputs stay readable */
.pf-v5-c-login__main input {
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    border-radius: 6px;
}








/* Make sure the login options row is visible */
#kc-form-options,
#kc-form-options .checkbox,
#kc-form-options-wrapper,
.login-pf-settings,
.pf-v5-c-login__main .pf-v5-c-form {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Put remember me and forgot password on one row */
#kc-form-options .checkbox,
#kc-form-options-wrapper {
    width: 100% !important;
}

#kc-form-options {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
    margin-top: 12px !important;
}

/* Make links visible */
#kc-form-options a,
#kc-form-options label,
#kc-form-options span {
    color: #ffffff !important;
}