:root{
    --logo-width: 300px;
}
.pf-v5-c-login {
    /* distance from logo to form */
    --pf-v5-c-login__header--c-brand--MarginBottom: 0;
    /* max width of login box */
    --pf-v5-c-login__container--xl--MaxWidth: var(--pf-v5-global--breakpoint--sm);
    --pf-v5-c-login__container--MaxWidth: var(--pf-v5-global--breakpoint--sm);
    --pf-v5-c-login--PaddingTop: 0;
    --pf-v5-c-form__actions--MarginBottom: var(--pf-v5-global--spacer--sm);
    --pf-v5-c-login__main--MarginBottom: var(--pf-v5-global--spacer--sm);
    --pf-v5-c-login__main-header--PaddingTop: var(--pf-v5-global--spacer--xl);
    --pf-v5-c-login__main-header--PaddingBottom: var(--pf-v5-global--spacer--xl);
    --pf-v5-c-login__main--BackgroundColor: var(--groupui-sys-color-background-base);
    --pf-v5-c-login__main-body--PaddingRight: var(--groupui-sys-spacing-600);
    --pf-v5-c-login__main-body--PaddingLeft: var(--groupui-sys-spacing-600);
    --pf-v5-c-login__footer--c-list--xl--PaddingTop: 1rem;
    color: var(--groupui-sys-color-text-normal);
}
.pf-v5-c-login__main {
    margin: var(--groupui-sys-spacing-400);
    --pf-v5-c-login__main--BoxShadow: 0 0 0 var(--groupui-sys-border-width-s) var(--groupui-sys-color-line-weak);
    border-radius: var(--groupui-sys-border-radius-m);
}
.pf-v5-c-login__main-footer-links {
    padding-inline-end: var(--pf-v5-c-login__main-body--PaddingRight);
    padding-inline-start: var(--pf-v5-c-login__main-body--PaddingLeft);
}
#kc-header-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
div.kc-logo-text span {
    display: none;
}

.login-pf body {
    background: var(--groupui-sys-color-background-inform) none;
}
.pf-v5-c-login__header {
    margin: var(--groupui-sys-spacing-600);
}
div.kc-logo-text {
    background-image: url('../img/vw-group-logo.svg');
    background-repeat: no-repeat;
    height: calc(18*var(--logo-width)/332.2);
    width: var(--logo-width);
}
/* -> start footer */
.pf-v5-c-login__footer .pf-v5-c-list.pf-m-inline li:not(:last-child) {
    margin-inline-end: var(--pf-v5-global--spacer--sm);
}
.pf-v5-c-login__footer {
    margin: var(--groupui-sys-spacing-600) 0;
    text-align: center;
    a {
        color: var(--groupui-sys-color-link-primary-unvisited-default-inverse) !important;
        text-decoration: underline;
        &:hover{
            color: var(--groupui-sys-color-link-primary-unvisited-hover-inverse) !important;
        }
    }
    ul.pf-v5-c-list.pf-m-inline {
        justify-content: center;
    }
}
/* <- end footer */
#kc-select-try-another-way-form {
    /* avoid select-try-another-way without distance to login button */
    margin-top: var(--pf-v5-c-form__actions--MarginBottom);
}
/*
Hide "Try another way" at certificate login because x509 sets the user in the context and then
the GID is displayed as username.
For hiding Next-sibling_combinator is used: https://developer.mozilla.org/en-US/docs/Web/CSS/Next-sibling_combinator
*/
#kc-x509-login-info + #kc-select-try-another-way-form {
    display: none;
}
@media (min-width: 550px) {
    .pf-v5-c-login {
        --pf-v5-c-login__main-body--PaddingRight: var(--pf-v5-c-login__main-body--md--PaddingRight);
        --pf-v5-c-login__main-body--PaddingLeft: var(--pf-v5-c-login__main-body--md--PaddingLeft);
    }
}

/* --pf-v5-global--breakpoint--sm */
@media (min-width: 576px) {
    :root{
        --logo-width: 450px;
    }
    .pf-v5-c-login {
        --pf-v5-c-login__main-header--PaddingTop: var(--pf-v5-global--spacer--2xl);
    }
    .pf-v5-c-login__header {
        margin: var(--groupui-sys-spacing-400) var(--groupui-sys-spacing-400) var(--groupui-sys-spacing-1000);
    }
}
@media (min-width: 768px) {
    .pf-v5-c-login__main-header {
        /* align center  for Header */
        grid-template-columns: initial;
    }
}
/* --pf-v5-global--breakpoint--xl */
@media (min-width: 1200px) {
    .pf-v5-c-login {
        --pf-v5-c-login__main--MarginBottom: var(--pf-v5-global--spacer--lg);
    }
    .pf-v5-c-login__container {
        grid-column-gap: initial;
        display: initial;
        grid-template-areas: initial;
        grid-template-columns: initial;
        justify-content: initial;
        padding-inline-end: initial;
        padding-inline-start: initial;
    }
}