:root {
    --blue: #3366ff;
    --gray: #777;
    --gay: linear-gradient(45deg, red, orange, yellow, green, blue, purple 83.33%);


}
.login-pf body {
    background-image: url('../img/Regenbogen_16-9.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #FFFFFF;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

#kc-header-wrapper {
    margin-top: 4em;
    text-align: center;
}
#kc-header-wrapper::after {
    content: "";
    background-size: contain;
    background-image: url('../img/Logo_Queer_Lexikon.png');
    background-repeat: no-repeat;
    display: block;
    height: 12em;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    width: 12em;
}

#kc-page-title {
    display: none;
    text-align: center;
}

.pf-m-error{
    color: #ff5555;
}

#kc-username {
    text-align: center;
    background-color: #cff4fc;
    border: 1px solid #b6effb;
    color: #055160;
    border-radius: .25em;
    margin: 1em auto;
    padding: 1em;
    width: 40em;
    text-align: center;
}

/*login box*/
#kc-content-wrapper {
    background-color: white;
    border: 1px solid lightgray;
    border-radius: .125em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    width: 20em;
}

.pf-c-form__label {
    display: block;
    margin: 0.25em 0 0 0;
}

.pf-c-form-control {
    --pf-c-form-control--BorderWidth: 0px;
    --pf-c-form-control--BorderBottomWidth: 2px;
    --pf-c-form-control--BorderRadius: var(--pf-global--BorderRadius--sm);
    --pf-c-form-control--BackgroundColor: #f5f5f5;

    border-image: var(--gay) 1;
    border-bottom-width: var(--pf-c-form-control--focus--BorderBottomWidth);

}
.pf-c-button.pf-m-primary {
    margin: 1em 0 0 0;
    padding: 0.25em 0;
}

#mastodon_handle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext dominant-baseline='hanging'%3E@%3C/text%3E%3C/svg%3E");
    --pf-c-form-control--m-icon--BackgroundPositionX: var(--pf-c-form-control--inset--base);
    padding-left: calc(var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--BackgroundPositionX) + 3px);
    background-position-x: var(--pf-c-form-control--inset--base);
    background-position-y: center;
    background-size: var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
}

.login-pf-header {
    text-align: center;
}

#kc-locale ul {
    background-color: var(--pf-global--BackgroundColor--light-100);
    display: none;
    top: 20px;
    min-width: 100px;
    padding: 0;
}

#kc-locale-dropdown{
    display: inline-block;
}

#kc-locale-dropdown:hover ul {
    display:block;
}

#kc-locale-dropdown a {
    color: var(--pf-global--Color--200);
    text-align: right;
    font-size: var(--pf-global--FontSize--sm);
}

a#kc-current-locale-link::after {
    content: "\2c5";
    margin-left: var(--pf-global--spacer--xs)
}

/*other*/
.alert-error,
#kc-error-message {
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #842029;
    border-radius: .25em;
    margin: 1em auto;
    padding: 1em;
    text-align: center;
}

#input-error,
#input-error-otp-code {
    color: #ff3333;
}

.alert-info {
    background-color: #fff3cd;
    border: 1px solid #ffecb5;
    color: #664d03;
    border-radius: .25em;
    margin: 1em auto;
    padding: 1em;
    text-align: center;
}


#kc-form form {
    margin: 0;
}
#kc-form label {
    display: block;
    margin: 0.25em 0 0 0;
}
#kc-form input {
    margin: .25em 0;
}
#kc-form input[type=text],
#kc-form input[type=password],
#kc-otp-login-form input[type=text] {
    border: 0;
    border-bottom: 2px solid;
    border-image: var(--gay) 1;
    border-radius: 0.125em;
    background: #f5f5f5;
    outline: none;
    width: 100%
}

#kc-form input[type=submit],
#kc-form-buttons input[type=submit],
#kc-select-credential-form button[type=submit], 
#kc-form-webauthn input[type=button] {
    background-color: var(--blue);
    border-radius: 0.25em;
    border: 0;
    color: white;
    padding: 0.25em;
    margin-bottom: 1em;
    width: 100%;
}

#kc-form input[type=submit]:last-of-type,
#kc-form-buttons input[type=submit]:last-of-type,
#kc-select-credential-form button[type=submit]:last-of-type {
    margin-bottom: 0;
}
/* totp setting */
#kc-content:has(#kc-totp-settings) {
    background-color: white;
    border: 1px solid lightgray;
    border-radius: .125em;
    margin-left: auto;
    margin-right: auto;
    padding: 1em;
    width: 40em;
}

#kc-content:has(#kc-totp-settings) p {
    padding: 0;
    margin: 0;
}
#kc-content:has(#kc-totp-settings) button {
    padding: 0;
    margin: 0;
}
#kc-content:has(#kc-totp-settings) img {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
#kc-content:has(#kc-totp-settings) input[type=text],
#kc-content:has(#kc-totp-settings) input[type=password] {
    border: 0;
    border-bottom: 2px solid;
    border-image: var(--gay) 1;
    border-radius: 0.125em;
    background: #f5f5f5;
    outline: none;
    width: 100%
}
#kc-content:has(#kc-totp-settings) #cancelTOTPBtn {
    background-color: var(--gray);
    border-radius: 0.125em;
    border: 0;
    color: white;
    margin: 1em 0 0 0;
    padding: 0.25em 0;
    width: calc(50% - 3px);
}
#kc-content:has(#kc-totp-settings) #saveTOTPBtn{
    background-color: var(--blue);
    border-radius: 0.125em;
    border: 0;
    color: white;
    margin: 1em 0 0 0;
    padding: 0.25em 0;
    width: calc(50% - 3px);
}