/* This file provides the custom CSS definitions for the VARTA Keycloak theme. */
:root {
    --vartaFontFamily: "Varta DIN RC1", "Varta DIN RC1", Arial;
    --vartaPrimaryColor: #1a428a;
    --vartaSecondaryColor: #999999;
    --vartaErrorColor: #900;
    --vartaLoginCardWidth: 510px;
    --vartaLoginSpacing: 34px;
    --vartaFormSpacing: 16px;
    --vartaInputBorderRadius: 6px;
    --vartaInputErrorTopMargin: 5px;

    --pf-c-form__label-text--FontWeight: 700;
    --pf-c-form__label--FontSize: .65em;
    --pf-c-form__label--LineHeight: 1.31;

    --pf-c-form-control--FontSize: 20px;
    --pf-c-form-control--LineHeight: 28px;

    --pf-c-form-control--focus--BorderBottomWidth: 0;

    --pf-global--FontSize--md: 20px;
    --pf-global--link--Color: var(--vartaSecondaryColor);
    --pf-global--link--Color--hover: var(--vartaPrimaryColor);
}

.pf-c-button {
    --pf-c-button--m-primary--BackgroundColor: var(--vartaPrimaryColor);
    --pf-c-button--m-primary--Color: #fff;
    --pf-c-button--m-primary--hover--BackgroundColor: #fff;
    --pf-c-button--m-primary--hover--Color: var(--vartaPrimaryColor);
    --pf-c-button--m-primary--focus--BackgroundColor: #fff;
    --pf-c-button--m-primary--focus--Color: var(--vartaPrimaryColor);
    --pf-c-button--m-primary--active--BackgroundColor: #fff;
    --pf-c-button--m-primary--active--Color: var(--vartaPrimaryColor);
}

/* Remove default Keycloak background image */
.login-pf,
.login-pf body {
    background: white;
}

/* Headline 1 */
h1 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 30px 0px;
    font-family: var(--vartaFontFamily);
    font-weight: 700;
    font-size: 1.35em;
    line-height: 1.26;
    font-stretch: expanded;
    color: var(--vartaPrimaryColor);
}

@media (min-width: 576px) and (max-width: 767.98px) {
    h1 {
        padding: 0px 0px 20px 0px;
        font-size: 1em;
        line-height: 1.4;
    }
}

@media (max-width: 575.98px) {
    h1 {
        padding: 0px 0px 20px 0px;
        font-size: 1em;
        line-height: 1.4;
    }
}

/* Headline 2 */
h2 {
    margin: 0;
    padding: 0;
    font-family: var(--vartaFontFamily);
    font-weight: 400;
    font-size: 1.2em;
    line-height: 1.29;
    font-stretch: expanded;
    color: var(--vartaPrimaryColor);
}

@media (min-width: 576px) and (max-width: 767.98px) {
    h2 {
        font-size: 1em;
        line-height: 1.4;
    }
}

@media (max-width: 575.98px) {
    h2 {
        font-size: 1em;
        line-height: 1.4;
    }
}

/* Second headline on login related pages. Example: "Bitte geben Sie Ihre Zugangsdaten ein." */
.loginSecondHeadline {
    padding: 0 0 20px 0;
    text-align: center;
}

#kc-info-wrapper {
    --vartaLinkColor: var(--vartaSecondaryColor);

    display: flex;
    flex-direction: column;
    gap: var(--vartaLoginSpacing);
    text-align: center;
    font-size: 1.2em;
}

#kc-info-wrapper a,
.kc-varta-do-forgot-password a{
    text-decoration: none;
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
    font-size: .8em;
    line-height: 1.5;
    font-stretch: normal;
}

.kc-varta-do-forgot-password {
    text-align: right;
}

/* Form Area */
#kc-form .form-group {
    margin-bottom: var(--vartaFormSpacing);
}

form {
    display: inline-block;
    width: 100%;
}

/*****************************************************************************************************************************************/
/* Form Fields */
/*****************************************************************************************************************************************/
input,
textarea,
select {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: var(--vartaFontFamily);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
}

.form-group {
    font-family: var(--vartaFontFamily)
}

.form-group #input-error,
.form-group .pf-m-error {
    color: var(--vartaErrorColor);
    font-size: .65em;
    line-height: 1.31;
    font-weight: 400;
}

.form-group label {
    font-size: var(--pf-c-form__label--FontSize);
    font-weight: var(--pf-c-form__label-text--FontWeight);
    line-height: var(--pf-c-form__label--LineHeight);
    text-transform: uppercase;
}

.form-group input:not([type='submit']) {
    border: 1px solid #ccc;
    border-radius: var(--vartaInputBorderRadius);
    padding: 6px 9px 7px 9px;
}

.form-group input:focus {
    border-color: var(--vartaPrimaryColor) !important;
    border-width: 2px !important;
    outline: none;
}

.form-group input.pf-c-form-control {
    /* Necessary to prevent the 2px bottom border of input fields. */
    border-width: 1px;
}

@media (max-width: 575.98px) {
    .form-group input {
        padding: 4px 6px 4px 6px;
    }
}

.form-group input.pf-c-form-control[aria-invalid=true],
.form-group select[aria-invalid=true] {
    border-color: var(--vartaErrorColor);
    background-image: none;
    border-width: 2px;
}

.pf-c-button {
    display: inline-block;
    margin: 0px 0px 0px 0px;
    padding: 6px 20px 7px 20px;
    font-size: 1em;
    line-height: 1.4;
    font-stretch: normal;
    text-align: center;
    color: #fff;
    background-color: var(--vartaPrimaryColor);
    border: 1px solid var(--vartaPrimaryColor);
    border-radius: var(--vartaInputBorderRadius);
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}

.pf-c-button.btn-default {
    background-image: none;
    background-color: var(--vartaSecondaryColor);
    border: 1px solid var(--vartaSecondaryColor);
}

.pf-c-button.Disabled {
    cursor: default;
    color: #fff;
    background-color: #ccc;
    border: 1px solid #ccc;
}

.aButton.register-hints {
    width: 100%;
    margin-left: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1em !important;
}

#kc-registration-container {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kc-varta-registration-box {
    --vartaRegistrationBoxSpacing: 25px;

    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--vartaRegistrationBoxSpacing);
    text-align: center;
}

@media (max-width: 399px) {
    .kc-varta-registration-box {
        --vartaRegistrationBoxSpacing: 15px;
    }
}

#kc-registration-container .kc-varta-registration-box-title {
    font-size: 1em;
    font-weight: bold;
}

#kc-reset-password-form #kc-form-buttons,
#kc-update-email-form #kc-form-buttons,
#kc-passwd-update-form #kc-form-buttons {
    margin-top: 32px;
}

#kc-passwd-update-form #kc-form-buttons,
#kc-update-email-form #kc-form-buttons {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    gap: 25px;
    direction: rtl;
}

#kc-content {
    display: flex;
    justify-content: center;
}

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

.login-pf-page {
    flex: 1;
    padding-top: 0;
}

.card-pf {
    box-shadow: none;
    margin: 0;
}

h1 {
    text-align: center;
    padding-bottom: 0;
}

@media (min-width: 576px) {
    .vartaLoginPage .login-pf-page {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.vartaLoginPage #kc-content-wrapper {
    width: var(--vartaLoginCardWidth);
}

.login-pf .vartaRegistrationPage .vartaRegistrationHeader,
.login-pf .vartaFramedPage .vartaFramedHeader {
    position: sticky;
    top: 98px;
    background: #fff;
    width: 100%;
    z-index: 999;
    padding: 20px 0;
}

@media (max-width: 1439.99px) {
    .login-pf .vartaRegistrationPage .vartaRegistrationHeader,
    .login-pf .vartaFramedPage .vartaFramedHeader {
        top: 60px;
    }
}

.login-pf .vartaRegistrationPage .vartaRegistrationHeader h1,
.login-pf .vartaFramedPage .vartaFramedHeader h1 {
    text-align: left;
}

.login-pf .vartaRegistrationPage #kc-content,
.login-pf .vartaFramedPage #kc-content {
    display: block;
    max-width: 980px;
    margin: 0 auto;
}

.login-pf .vartaRegistrationPage .kc-varta-register-container,
.login-pf .vartaFramedPage .kc-varta-framed-container {
    border: 1px solid #ddd;
    border-radius: var(--vartaInputBorderRadius);
    margin-top: 9px;
}

.login-pf .vartaRegistrationPage .kc-varta-register-container-inner,
.login-pf .vartaFramedPage .kc-varta-framed-container-inner {
    max-width: 470px;
    margin: 0 auto;
    padding: 40px 30px;
}

/* Reset password page submit button */
.login-pf-page .login-pf-settings {
    display: block;
}

/* Align icons in alert messages with text. */
.pf-c-alert .pf-c-alert__icon {
    display: block;
}

#kc-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#kc-content-wrapper #kc-info {
    order: 1;
    margin: 0;
}

#kc-content-wrapper #kc-reset-password-form,
#kc-content-wrapper #kc-update-email-form,
#kc-content-wrapper #kc-passwd-update-form {
    order: 2;
}

#kc-form-options a {
    font-size: 0.8em;
}

#kc-error-message,
.instruction {
    text-align: center;
}

/*****************************************************************************************************************************************/
/* a-Tag */
/*****************************************************************************************************************************************/
a {
    text-decoration: none;
    color: var(--pf-global--link--Color);
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
    /* Hover */
    /* Focus */
}

a:hover {
    text-decoration: none;
    color: var(--pf-global--link--Color--hover);
}

a:focus {
    outline: none;
    color: inherit;
    text-decoration: none;
}

.kc-varta-form-buttons {
    margin: 25px 0;
    display: flex;
    justify-content: space-between;
}

.kc-varta-form-buttons #kc-form-options,
.kc-varta-form-buttons #kc-form-buttons {
    margin: 0;
    align-self: center;
    min-width: 175px;
}

@media (max-width: 390px) {
    .kc-varta-form-buttons #kc-form-options,
    .kc-varta-form-buttons #kc-form-buttons {
        min-width: unset;
    }
}

.kc-varta-framed-form-buttons {
    margin: 25px 0;
    justify-content: space-between;
    display: flex;
}

.kc-varta-framed-form-buttons input {
    min-width: 175px;
}

/* Footer: Hald uses an extra delimiter div for the gaps between the items. As we generate the list dynamically this
 leads to an additional element at the end of the list. By using the flexbox gap property we achieve the same with
 modern CSS and no additional spacing element. */
.LanguageChoice {
    gap: 28px;
}

/* Show/hide password button */
#password,
#password-confirm,
#password-new {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.varta-password-visibility-btn::after {
    content: none !important;
}
.varta-password-visibility-btn {
    border-color: #ccc;
    border-left: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    height: calc(20px*1.5 + 1px*2 + calc(0.375rem - 1px) + calc(0.375rem - 1px)); /* Logic originates from Keycloak */
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
.varta-password-visibility-show {
    background-image: url("../images/Icon_Passwort_sichtbar.svg");
    background-repeat: no-repeat;
    height:30px;
    width: 30px;
}
.varta-password-visibility-hide {
    background-image: url("../images/Icon_Passwort_unsichtbar.svg");
    background-repeat: no-repeat;
    height:30px;
    width: 30px;
}

.checkbox {
    display: flex;
    line-height: 1.5;
}
.checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    border: 1px solid #ccc;
    border-radius: 3px;
    width: 22px;
    height: 22px;
    position: unset;
    margin: 0;
    padding: 0;
}
.checkbox label {
    font-size: .8em;
    font-weight: 400;
    text-transform: none;
}
.checkbox input[type="checkbox"]::before {
    content: "";
    width: 22px;
    height: 22px;
}
.checkbox  input[type="checkbox"]:checked::before {
    background-image: url("../images/checkbox-chop.png");
    background-position: center center;
    background-repeat: no-repeat;
}
.checkbox input[type="checkbox"]:hover {
    color: #000;
}
.checkbox div {
    text-transform: none;
    font-size: 14px;
}
.checkbox a {
    color: var(--vartaPrimaryColor);

    &:hover {
        text-decoration: underline;
    }
}
.checkbox label {
    padding-left: 14px;
}
#input-error-acceptOnlineServicesPrivacyPolicy,
#input-error-acceptOnlineServicesTermsOfUse,
#input-error-shadowRegistrationConsent,
.varta-kc-checkbox-error {
    display: block;
    margin-top: var(--vartaInputErrorTopMargin);
    padding-left: 36px;
}

div.divMandatoryText {
    font-size: 0.7em;
    text-wrap: inherit;

    a {
        color: var(--vartaPrimaryColor);

        &:hover {
            text-decoration: underline;
        }
    }
}

/** Migration form **/
.vartaMigrationForm .kc-varta-framed-form-buttons {
    justify-content: end;
}
.vartaMigrationForm select {
    padding: 8px 9px 10px 9px;
    background: none;
    border: 1px solid #ccc;
    border-radius: var(--vartaInputBorderRadius);
}
.vartaMigrationForm input[type="checkbox"] {
    margin-top: 3px;
}
.vartaMigrationForm .form-group label,
#kc-register-form .form-group label {
    font-size: var(--pf-c-form__label--FontSize);
}
.required {
    font-size: 20px;
    font-weight: 700;
    line-height: 1px;
    padding: 0 1px;
    position: relative;
    top: 5px;
}

/* Captcha */
#input-error-captcha {
    margin-top: var(--vartaInputErrorTopMargin);
}
#varta-captchafox-element .cf-button {
    min-width: 100%;
}

/** Fix for footer keyboard navigation */
footer.Footer div.Navigation a:focus,
footer.Footer div.LanguageChoice a:focus {
    color: var(--vartaPrimaryColor);
}