/* colors */
:root {

    --dae-red: #F4002F;
    --dae-dark-petrol: #004B5D;
    --dae-almost-black: #3a3a3a;
    --dae-grey: #9B9B9B;
    --dae-light-grey: #EDEDED;
    --dae-petrol: #00798e;
    --dae-light-petrol: #67C4C5;
    --dae-green: #235C4D;
    --dae-dark-green: #1D5235;
    --dae-very-dark-petrol: #002028;
    --dae-green-petrol: #00616A;
    --dae-font-color: var(--dae-almost-black);


    /* override pf mappings */

}

/* variables */

:root, html, body {
    font-size: 14.875px;
    --pf-v5-global--active-color--100: var(--dae-petrol);
    --pf-v5-global--active-color--200: var(--dae-light-petrol);
    --pf-v5-global--active-color--300: var(--dae-green-petrol);
    --pf-v5-global--active-color--400: var(--dae-light-petrol);
    --pf-v5-global--disabled-color--100: var(--dae-grey);
    --pf-v5-global--disabled-color--200: var(--dae-light-grey);
    --pf-v5-global--disabled-color--300: white;
    --pf-v5-global--primary-color--100: var(--dae-petrol);
    --pf-v5-global--primary-color--200: var(--dae-dark-petrol);
    --pf-v5-global--primary-color--light-100: var(--dae-light-petrol);
    --pf-v5-global--primary-color--dark-100: var(--dae-dark-petrol);
    --pf-v5-global--secondary-color--100: var(--dae-grey);
    --pf-v5-global--default-color--100: var(--dae-petrol);
    --pf-v5-global--default-color--200: var(--dae-petrol);
    --pf-v5-global--default-color--300: var(--dae-dark-petrol);
    --pf-v5-global--success-color--100: var(--dae-green);
    --pf-v5-global--success-color--200: var(--dae-dark-green);
    --pf-v5-global--info-color--100: var(--dae-petrol);
    --pf-v5-global--info-color--200: var(--dae-dark-petrol);
    --pf-v5-global--warning-color--100: #f0ab00;
    --pf-v5-global--warning-color--200: #795600;
    --pf-v5-global--danger-color--100: var(--dae-red);
    --pf-v5-global--danger-color--200: #a30000;
    --pf-v5-global--danger-color--300: #7f0000;

    --pf-v5-global--link--Color: var(--dae-petrol);
    --pf-v5-global--link--Color--hover: var(--dae-petrol);
    --pf-v5-global--link--Color--light: var(--dae-light-petrol);
    --pf-v5-global--link--Color--light--hover: var(--dae-light-petrol);
    --pf-v5-global--link--Color--dark: var(--dae-dark-petrol);
    --pf-v5-global--link--Color--dark--hover: var(--dae-dark-petrol);
    --pf-v5-global--link--Color--visited: purple;

    --pf-v5-global--FontFamily--heading: "Asap Condensed", sans-serif;
    --pf-v5-global--FontFamily--text: "Asap", sans-serif;
    --pf-v5-global--FontFamily--sans-serif: "Asap", sans-serif;
    --pf-v5-global--FontFamily--heading--sans-serif: "Asap Condensed", sans-serif;
    --pf-v5-global--FontFamily--monospace: "Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace;
    --pf-v5-global--FontFamily--overpass--sans-serif: "overpass", overpass, "open sans", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --pf-v5-global--FontFamily--overpass--monospace: "overpass-mono", overpass-mono, "SFMono-Regular", menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;

    /* --pf-v5-global--FontSize--4xl: 2.25rem;
    --pf-v5-global--FontSize--3xl: 1.5rem;
    --pf-v5-global--FontSize--2xl: 1.4rem;
    --pf-v5-global--FontSize--xl: 1.3rem;
    --pf-v5-global--FontSize--lg: 1.2rem;
    --pf-v5-global--FontSize--md: 1.1rem;
    --pf-v5-global--FontSize--xs: .875rem; */

    --pf-v5-global--FontWeight--light: 300;
    --pf-v5-global--FontWeight--normal: 400;
    --pf-v5-global--FontWeight--semi-bold: 700;
    --pf-v5-global--FontWeight--overpass--semi-bold: 500;
    --pf-v5-global--FontWeight--bold: 700;
    --pf-v5-global--FontWeight--overpass--bold: 600;
    --pf-v5-global--LineHeight--sm: 1.3;
    --pf-v5-global--LineHeight--md: 1.5;

    --pf-v5-global--ListStyle: disc outside;
    --pf-v5-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
    --pf-v5-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
    --pf-v5-global--TransitionDuration: 250ms;
    --pf-v5-global--arrow--width: 0.9375rem;
    --pf-v5-global--arrow--width-lg: 1.5625rem;
    --pf-v5-global--target-size--MinWidth: 44px;
    --pf-v5-global--target-size--MinHeight: 44px;

    --pf-v5-c-form__label-required--Color: var(--pf-v5-global--danger-color--100);

}

.pf-m-overpass-font {
    --pf-global--FontFamily--sans-serif: var(--pf-global--FontFamily--overpass--sans-serif);
    --pf-global--FontFamily--heading--sans-serif: var(--pf-global--FontFamily--sans-serif);
    --pf-global--FontFamily--monospace: var(--pf-global--FontFamily--overpass--monospace);
    --pf-global--FontWeight--semi-bold: var(--pf-global--FontWeight--overpass--semi-bold);
    --pf-global--FontWeight--bold: var(--pf-global--FontWeight--overpass--bold);
}

html {
    height: 100%;
}

body {
    width: 100%;
    min-height: 100%;
    /* display: flex;
    align-items: stretch; */
    overflow-y: auto;
}

*:focus-visible {
    outline: 2px solid var(--pf-v5-global--default-color--100);
    outline-offset: 5px;
}


/********************************

overwrites

*/

.pf-v5-c-login__container {
    /* display: flex; */
    display: block;
    min-width: 30%;
    max-width: 850px;
}

@media screen and (min-width: 1200px) {
    .pf-v5-c-login__container {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
}

/* alter title font */
.pf-v5-c-title {
    --pf-v5-c-title--m-3xl--FontWeight: var(--pf-v5-global--FontWeight--overpass--semi-bold);
}
/* button overwrites */
.pf-v5-c-button{
    border-radius: 0;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--pf-v5-global--FontFamily--heading);
    font-weight: var(--pf-v5-global--FontWeight--overpass--semi-bold);
    letter-spacing: 1px;

    --pf-v5-c-button--m-tertiary--after--BorderColor: transparent;
    --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--default-color--100);
    --pf-v5-c-button--m-tertiary--BackgroundColor: var(--dae-light-grey);

    --pf-v5-c-button--m-tertiary--hover--after--BorderColor: transparent;
    --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--default-color--100);
    --pf-v5-c-button--m-tertiary--hover--BackgroundColor: var(--dae-grey);

    --pf-v5-c-button--m-tertiary--active--after--BorderColor: transparent;
    --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--default-color--100);
    --pf-v5-c-button--m-tertiary--active--BackgroundColor: var(--dae-grey);

    --pf-v5-c-button--m-tertiary--focus--after--BorderColor: transparent;
    --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--default-color--100);
    --pf-v5-c-button--m-tertiary--focus--BackgroundColor: var(--dae-light-grey);


    --pf-v5-c-button--PaddingTop: .75rem;
    --pf-v5-c-button--PaddingRight: 1rem;
    --pf-v5-c-button--PaddingBottom: .75rem;
    --pf-v5-c-button--PaddingLeft: 1rem;
}

.pf-v5-c-button::after {
    --pf-v5-c-button--after--BorderRadius: 0;
}

/* dont show the headline that is just the realm name again */
#kc-header {
    display: none;
}

/* background image */
.login-pf body {
    flex-grow: 1;
    background-image: url('../background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* registration button stuff */
.login-pf-signup {
    background-color: var(--pf-v5-global--default-color--100);
    margin-top: 2rem;
    margin-block-end: calc(var(--pf-v5-c-login__main-body--PaddingBottom) * -1);
    margin-inline-start: calc(var(--pf-v5-c-login__main-body--PaddingLeft) * -1);
    margin-inline-end: calc(var(--pf-v5-c-login__main-body--PaddingRight) * -1);
    padding-top: var(--pf-v5-c-login__main-body--PaddingBottom);
    padding-block-end: var(--pf-v5-c-login__main-body--PaddingBottom);
    padding-inline-start: var(--pf-v5-c-login__main-body--PaddingLeft);
    padding-inline-end: var(--pf-v5-c-login__main-body--PaddingRight);
    color: var(--dae-light-grey);
}

/* regular links in the blue area benath the form itself (where register buttons etc are located) */
.login-pf-signup a:not([class*="btn"]) {
    color: var(--dae-light-grey);
    text-decoration: underline;

}

#kc-registration p {
    margin-bottom: 2rem;
}

/* form customizations */

.pf-v5-c-login {
    --pf-v5-c-login__main-body--PaddingBottom: var(--pf-v5-global--spacer--2xl);
}

.pf-v5-c-form {
    --pf-v5-c-form__label--FontSize: var(--pf-v5-global--FontSize--md);
    --pf-v5-c-form__label--hover--Cursor: default;
    --pf-v5-c-form--GridGap: var(--pf-v5-global--spacer--xl);
}
.newsletter-distribution-subscription-checkbox-group .pf-v5-c-check {
    display: block;
}
.newsletter-distribution-subscription-checkbox-group .pf-v5-c-check label {
    display: flex;
}
.newsletter-distribution-subscription-checkbox-group .pf-v5-c-check label span {
    display: flex;
}
.newsletter-distribution-subscription-checkbox-group label.pf-v5-c-check {
    margin-bottom: 0;
}
.newsletter-distribution-subscription-checkbox-group div.pf-v5-c-check:not(:last-child) {
    margin-bottom: var(--pf-v5-global--spacer--md);
}
.pf-v5-c-select {
    --pf-v5-c-select__toggle--PaddingTop: .75rem;
    --pf-v5-c-select__toggle--PaddingRight: .75rem;
    --pf-v5-c-select__toggle--PaddingBottom: .75rem;
    --pf-v5-c-select__toggle--PaddingLeft: .75rem;
    /* --pf-v5-c-select__toggle--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
    --pf-v5-c-select__toggle--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
    --pf-v5-c-select__toggle--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
    --pf-v5-c-select__toggle--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
    --pf-v5-c-select__toggle--before--BorderWidth: initial; */
    --pf-v5-c-select__toggle--before--BorderTopColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-select__toggle--before--BorderRightColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-select__toggle--before--BorderBottomColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-select__toggle--before--BorderLeftColor: var(--pf-v5-global--primary-color--light-100);
}

/* align icons (e.g. select toggle icon) vertically to the center */
.pf-v5-c-form-control__utilities {
    height: 100%;
}
.pf-v5-c-form-control__toggle-icon,
.pf-v5-c-form-control__icon {
    display: flex;
    align-items: center;
}

.pf-v5-c-form-control {
    --pf-v5-c-form-control--FontSize: var(--pf-v5-global--FontSize--xl);
    --pf-v5-c-form-control--PaddingTop: .75rem;
    --pf-v5-c-form-control--PaddingRight: .75rem;
    --pf-v5-c-form-control--PaddingBottom: .75rem;
    --pf-v5-c-form-control--PaddingLeft: .75rem;
    /* --pf-v5-c-form-control--before--BorderStyle: var(); */
    --pf-v5-c-form-control--before--BorderTopColor: var(--pf-v5-global--primary-color--light-100);
    /* --pf-v5-c-form-control--before--BorderTopWidth: var(); */
    --pf-v5-c-form-control--before--BorderBottomColor: var(--pf-v5-global--primary-color--light-100);
    /* --pf-v5-c-form-control--before--BorderBottomWidth: var(); */
    --pf-v5-c-form-control--before--BorderLeftColor: var(--pf-v5-global--primary-color--light-100);
    /* --pf-v5-c-form-control--before--BorderLeftWidth: var(); */
    --pf-v5-c-form-control--before--BorderRightColor: var(--pf-v5-global--primary-color--light-100);
    /* --pf-v5-c-form-control--before--BorderRightWidth: var(); */
    /* --pf-v5-c-form-control--after--BorderBottomWidth:  */
    --pf-v5-c-form-control--after--BorderBottomColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-form-control__toggle-icon--PaddingTop: 0;
    --pf-v5-c-form-control__icon--PaddingTop: 0;
}
.pf-v5-c-button {
    /* --pf-v5-c-button--PaddingTop: var(--pf-v5-global--spacer--form-element);
    --pf-v5-c-button--PaddingRight: var(--pf-v5-global--spacer--md);
    --pf-v5-c-button--PaddingBottom: var(--pf-v5-global--spacer--form-element);
    --pf-v5-c-button--PaddingLeft: var(--pf-v5-global--spacer--md);
    --pf-v5-c-button--LineHeight: var(--pf-v5-global--LineHeight--md);
    --pf-v5-c-button--FontWeight: var(--pf-v5-global--FontWeight--normal);
    --pf-v5-c-button--FontSize: var(--pf-v5-global--FontSize--md);
    --pf-v5-c-button--BackgroundColor: transparent;
    --pf-v5-c-button--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
    --pf-v5-c-button--after--BorderRadius: var(--pf-v5-global--BorderRadius--sm);
    --pf-v5-c-button--after--BorderColor: transparent;
    --pf-v5-c-button--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
    --pf-v5-c-button--hover--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--focus--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--active--after--BorderWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--disabled--Color: var(--pf-v5-global--disabled-color--100);
    --pf-v5-c-button--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
    --pf-v5-c-button--disabled--after--BorderColor: transparent;
    --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--200);
    --pf-v5-c-button--m-primary--hover--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--200);
    --pf-v5-c-button--m-primary--focus--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--200);
    --pf-v5-c-button--m-primary--active--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--Color: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-secondary--m-danger--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--m-danger--Color: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-secondary--m-danger--after--BorderColor: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-secondary--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-tertiary--BackgroundColor: transparent;
    --pf-v5-c-button--m-tertiary--after--BorderColor: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--hover--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--focus--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-tertiary--active--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-warning--BackgroundColor: var(--pf-v5-global--warning-color--100);
    --pf-v5-c-button--m-warning--Color: var(--pf-v5-global--Color--dark-100);
    --pf-v5-c-button--m-warning--hover--BackgroundColor: var(--pf-v5-global--palette--gold-500);
    --pf-v5-c-button--m-warning--hover--Color: var(--pf-v5-global--Color--dark-100);
    --pf-v5-c-button--m-warning--focus--BackgroundColor: var(--pf-v5-global--palette--gold-500);
    --pf-v5-c-button--m-warning--focus--Color: var(--pf-v5-global--Color--dark-100);
    --pf-v5-c-button--m-warning--active--BackgroundColor: var(--pf-v5-global--palette--gold-500);
    --pf-v5-c-button--m-warning--active--Color: var(--pf-v5-global--Color--dark-100);
    --pf-v5-c-button--m-danger--BackgroundColor: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-danger--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-danger--hover--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-danger--focus--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-danger--active--BackgroundColor: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-danger--active--Color: var(--pf-v5-global--Color--light-100);
    --pf-v5-c-button--m-link--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--Color: var(--pf-v5-global--link--Color);
    --pf-v5-c-button--m-link--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--hover--Color: var(--pf-v5-global--link--Color--hover);
    --pf-v5-c-button--m-link--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--focus--Color: var(--pf-v5-global--link--Color--hover);
    --pf-v5-c-button--m-link--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--active--Color: var(--pf-v5-global--link--Color--hover);
    --pf-v5-c-button--m-link--disabled--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
    --pf-v5-c-button--m-link--m-inline--FontSize: inherit;
    --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: var(--pf-v5-global--link--TextDecoration--hover);
    --pf-v5-c-button--m-link--m-inline--hover--Color: var(--pf-v5-global--link--Color--hover);
    --pf-v5-c-button--m-link--m-inline--PaddingTop: 0;
    --pf-v5-c-button--m-link--m-inline--PaddingRight: 0;
    --pf-v5-c-button--m-link--m-inline--PaddingBottom: 0;
    --pf-v5-c-button--m-link--m-inline--PaddingLeft: 0;
    --pf-v5-c-button--m-link--m-inline__progress--Left: var(--pf-v5-global--spacer--xs);
    --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft: calc(var(--pf-v5-c-button--m-link--m-inline__progress--Left) + 1rem + var(--pf-v5-global--spacer--sm));
    --pf-v5-c-button--m-link--m-danger--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--m-danger--Color: var(--pf-v5-global--danger-color--100);
    --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--m-danger--hover--Color: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--m-danger--focus--Color: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-link--m-danger--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-link--m-danger--active--Color: var(--pf-v5-global--danger-color--200);
    --pf-v5-c-button--m-plain--BackgroundColor: transparent;
    --pf-v5-c-button--m-plain--Color: var(--pf-v5-global--Color--200);
    --pf-v5-c-button--m-plain--hover--BackgroundColor: transparent;
    --pf-v5-c-button--m-plain--hover--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-plain--focus--BackgroundColor: transparent;
    --pf-v5-c-button--m-plain--focus--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-plain--active--BackgroundColor: transparent;
    --pf-v5-c-button--m-plain--active--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-plain--disabled--Color: var(--pf-v5-global--disabled-color--200);
    --pf-v5-c-button--m-plain--disabled--BackgroundColor: transparent;
    --pf-v5-c-button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
    --pf-v5-c-button--m-control--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-control--BorderRadius: 0;
    --pf-v5-c-button--m-control--after--BorderWidth: var(--pf-v5-global--BorderWidth--sm); */
    --pf-v5-c-button--m-control--after--BorderTopColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-button--m-control--after--BorderRightColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-button--m-control--after--BorderBottomColor: var(--pf-v5-global--primary-color--light-100);
    --pf-v5-c-button--m-control--after--BorderLeftColor: var(--pf-v5-global--primary-color--light-100);
    /*
    --pf-v5-c-button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--300);
    --pf-v5-c-button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
    --pf-v5-c-button--m-control--hover--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
    --pf-v5-c-button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
    --pf-v5-c-button--m-control--active--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-control--active--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
    --pf-v5-c-button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
    --pf-v5-c-button--m-control--focus--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
    --pf-v5-c-button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
    --pf-v5-c-button--m-control--m-expanded--Color: var(--pf-v5-global--Color--100);
    --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth: var(--pf-v5-global--BorderWidth--md);
    --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--active-color--100);
    --pf-v5-c-button--m-small--FontSize: var(--pf-v5-global--FontSize--sm);
    --pf-v5-c-button--m-display-lg--PaddingTop: var(--pf-v5-global--spacer--md);
    --pf-v5-c-button--m-display-lg--PaddingRight: var(--pf-v5-global--spacer--xl);
    --pf-v5-c-button--m-display-lg--PaddingBottom: var(--pf-v5-global--spacer--md);
    --pf-v5-c-button--m-display-lg--PaddingLeft: var(--pf-v5-global--spacer--xl);
    --pf-v5-c-button--m-display-lg--FontWeight: var(--pf-v5-global--FontWeight--bold);
    --pf-v5-c-button--m-link--m-display-lg--FontSize: var(--pf-v5-global--FontSize--lg);
    --pf-v5-c-button__icon--m-start--MarginRight: var(--pf-v5-global--spacer--xs);
    --pf-v5-c-button__icon--m-end--MarginLeft: var(--pf-v5-global--spacer--xs);
    --pf-v5-c-button__progress--width: calc(var(--pf-v5-global--icon--FontSize--md) + var(--pf-v5-global--spacer--sm));
    --pf-v5-c-button__progress--Opacity: 0;
    --pf-v5-c-button__progress--TranslateY: -50%;
    --pf-v5-c-button__progress--TranslateX: 0;
    --pf-v5-c-button__progress--Top: 50%;
    --pf-v5-c-button__progress--Left: var(--pf-v5-global--spacer--md);
    --pf-v5-c-button--m-progress--TransitionProperty: padding;
    --pf-v5-c-button--m-progress--TransitionDuration: var(--pf-v5-global--TransitionDuration);
    --pf-v5-c-button--m-progress--PaddingRight: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
    --pf-v5-c-button--m-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width) / 2);
    --pf-v5-c-button--m-in-progress--PaddingRight: var(--pf-v5-global--spacer--md);
    --pf-v5-c-button--m-in-progress--PaddingLeft: calc(var(--pf-v5-global--spacer--md) + var(--pf-v5-c-button__progress--width));
    --pf-v5-c-button--m-in-progress--m-plain--Color: var(--pf-v5-global--primary-color--100);
    --pf-v5-c-button--m-in-progress--m-plain__progress--Left: 50%;
    --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
    --pf-v5-c-button__count--MarginLeft: var(--pf-v5-global--spacer--sm);
    --pf-v5-c-button--disabled__c-badge--Color: var(--pf-v5-global--Color--dark-100);
    --pf-v5-c-button--disabled__c-badge--BackgroundColor: var(--pf-v5-global--BackgroundColor--200);
    --pf-v5-c-button--m-primary__c-badge--BorderColor: var(--pf-v5-global--BorderColor--300);
    --pf-v5-c-button--m-primary__c-badge--BorderWidth: var(--pf-v5-global--BorderWidth--sm); */
}

/*  button group */
.pf-v5-c-toggle-group {
    flex-wrap: wrap;
}
.pf-v5-c-toggle-group__text {
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
    font-weight: var(--pf-v5-global--FontWeight--overpass--semi-bold);
    /* color: var(--pf-v5-global--default-color--100); */
    font-size: var(--pf-v5-c-form__label--FontSize);
    letter-spacing: .1em;
}
.pf-v5-c-toggle-group__button {
    cursor: pointer;
}
.pf-v5-c-toggle-group__button:has(input:checked) {
    --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
    --pf-v5-c-toggle-group__button--Color: var(var(--dae-light-grey), inherit);
    --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--m-selected--ZIndex);
    --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-global--default-color--100);
}

/* form label */
.pf-v5-c-form__label {
    color: var(--pf-v5-global--default-color--100);
    margin-bottom: 0.5rem;
    display: flex;
}

/* checkbox label color */
.pf-v5-c-check__label {
    color: var(--pf-v5-global--default-color--100);
}

.pf-v5-c-form__label-text,
.pf-v5-c-form__label,
.pf-v5-c-check__label {
    font-family: var(--pf-v5-global--FontFamily--heading);
    font-weight: var(--pf-v5-global--FontWeight--overpass--semi-bold);
    text-transform: uppercase;
    letter-spacing: 1px;
    letter-spacing: .1em;
}

.pf-v5-c-check__description {
    /* display: inline-block;
    margin-left: 1.25rem; */
}

.pf-v5-c-form__label-required {
    --pf-v5-c-form__label-required--FontSize: var(--pf-v5-global--FontSize--lg)
}

#kc-form-options {
    margin-bottom: 1rem;
}

.login-pf-settings .form-options-wrapper:not(:only-child) {
    margin-top: 1rem;
}

input[type="checkbox"], input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-right: .25rem;
    flex-shrink: 0;
}

/* align buttons to the right and space around two buttons */
.pf-v5-c-form__group > .pf-v5-c-form__actions {
    flex-direction: row-reverse;
    justify-content: space-between;
}

/* more spacing for alerts */
.pf-v5-c-alert {
    margin-bottom: 1rem;
}

/********************************

new stuff that we added

*/

.image-copyright {
    color: white;
    opacity:.5;
    font-size: 9px;
    transform: rotate(-90deg);
    transform-origin: top left;

    position: fixed;
    left: 3px;
    bottom: 3px;
}

/* TODO: nomvp: check removed class template.ftl:156 */
.subtitle-wrapper {
    margin-bottom: 2rem;
}

/* custom logo addition on main header */
.logo-header .dae-logo {
    height: 40px;
}

/* overall main header overwrites */
.pf-v5-c-login__main-header {
    display: block;
}
.pf-v5-c-login__main-header_1 {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dae-light-grey);
}

.pf-v5-c-login__main-header_2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .pf-v5-c-login__main-header {
        align-items: end;
    }
    .pf-v5-c-login__main-header_1 {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}


/* infomessages when selecting a usertype */

.infomessage_group:has(.active) {
    margin-top: var(--pf-v5-global--spacer--lg);
}

.infomessage_group [class$="-infomessage"] {
    display: none;
}

.infomessage_group [class$="-infomessage"].active {
    display: block;
}



/* registration newsletter distribution subscription */

.newsletter-distribution-subscription-checkbox-group.main {
    border-bottom: 1px solid var(--pf-v5-global--disabled-color--200);
    padding-bottom: var(--pf-v5-global--spacer--xl);
    margin-bottom: var(--pf-v5-global--spacer--xl);
}

.newsletter-distribution-subscription-checkbox-group .header {
    margin-bottom: var(--pf-v5-global--spacer--lg);
    --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
    --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
}

.newsletter-distributions-wrapper {
    border-bottom: 1px solid var(--pf-v5-global--disabled-color--200);
    padding-bottom: var(--pf-v5-global--spacer--xl);
}

.newsletter-distribution-subscription-disclaimer {
    margin-bottom: var(--pf-v5-global--spacer--xl);
}

@media (min-width: 850px) {
    .newsletter-distribution-subscription-checkbox-group.main {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;

        border-right: 1px solid var(--pf-v5-global--disabled-color--200);
        padding-right: var(--pf-v5-global--spacer--xl);
        margin-right: var(--pf-v5-global--spacer--xl);

        width: 51%;
        flex-shrink: 0;
    }

    .newsletter-distributions-wrapper {
        display: flex;
    }
}

/* remove group headers */
.pf-v5-c-form__group:has(label.group-header),
label.group-header {
    display: none;
}


/* margin above input helper after text */
.pf-c-form__helper-text-before {
 margin-bottom: 1rem;
}
.pf-c-form__helper-text-after {
 margin-top: 1rem;
}


/* password hint */
.kc-password-complexity-hint {
    display: inline-block;
    /* TODO: nomvp: is there a better way to align this along with the form grid gap? */
    margin-top: -1rem;
}

/* usertype radio toggle group */
input[type="radio"][name="usertype"] {
    appearance: none;
    outline: none;
    width: 0px;
    height: 0px;
}

.pf-v5-c-toggle-group__button:focus-within {
    outline: 2px solid var(--pf-v5-global--default-color--100);
    outline-offset: 5px;
}

/* input type date */
input[type="date"] {
    min-height:  3.138rem; /* 50.2px to align with other inputs */
}

.newsletter-distribution-subscription-subtitle {
    margin-top: 1em;
    margin-bottom: .5em;
}