/*-- Colors

gray-2:     #F5FAFF
Gray 10:    #E6EBF0
gray-90:    #1A1D20

                            hover       active
Blue Sky:       #0064C8     #0246A1     #89c3ff
Green Meadow:   #1E8200     #01631B
Clementine:     #ED7102
Ocean:          #003C8C

button-active-color: #89c3ff
button-blue-color: Blue Sky
button-blue-hover-color: Blue Sky hover
button-green-color: Green Meadow
button-green-hover-color: Blue Sky hover

warning-border-color: Clementine
warning-border-left-color: Clementine

error-border-color: #FF3646
error-border-left-color: #D2001E
error-icon-color: #FF3646

success-border-color: #51AE32
success-border-left-color: #1E8200
success-icon-color: #51AE32


info-border-color: #33B5E5
info-border-left-color: #0064c8
info-icon-color: #33b5e5

label-color: #7D8791
input-border-color: #babdc0

----*/
/*-- RESET BASE CSS START --*/
.login-pf body {
    background-image: none;
    background-color: #fff;
}

* {
    margin: 0;
    padding: 0;
    border-width: 0;
    font-size: 0.875rem;
    line-height: 1.125rem;
}

p {
    margin: 0;
}

/*-- RESET BASE CSS END --*/

html,
body,
.login-pf-page {
    min-height: 100vh;
    padding: 0;
}

body {
    font-family: "Source Sans Pro", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #1A1D20;
    -webkit-font-smoothing: antialiased;
    padding: 0;
    margin: 0;
    min-height: 100%;
}

.systemInformationsList h1,
.systemInformationsList h1 * {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.5rem;
    line-height: normal;
    color: #1A1D20;
    margin: 0;
}

.systemInformationsList h2,
.systemInformationsList h2 * {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.25rem;
    line-height: normal;
    color: #1A1D20;
    margin: 0;
}

.systemInformationsList h3,
.systemInformationsList h3 * {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1rem;
    line-height: normal;
    color: #1A1D20;
    margin: 0;
}

.systemInformationsList h4,
.systemInformationsList h4 * {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.875rem;
    line-height: normal;
    color: #1A1D20;
    margin: 0;
}

.systemInformationsList h5,
.systemInformationsList h5 * {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.75rem;
    line-height: normal;
    color: #1A1D20;
    margin: 0;
}

.systemInformationsList h6,
.systemInformationsList h6 * {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.75rem;
    line-height: normal;
    color: #1A1D20;
    margin: 0;
}

.systemInformationsList a {
    color: #0064C8;
    text-decoration-line: underline;
}

.systemInformationsList a:hover {
    color: #0246A1;
    background-color: rgba(0, 100, 200, 0.10);
    text-decoration-line: underline;
}

.systemInformationsList a:active {
    background-color: rgba(0, 100, 200, 0.10);
    outline: 3px solid #89C3FF;
    text-decoration-line: underline;
}

.systemInformationsList ol {
    padding-left: 1em;
}


.systemInformationsList ul {
    padding-left: 1em;
}

.systemInformationsList ul > li {
    list-style-type: circle;
}

.systemInformationsList ui-datalist-item ul {
    list-style-type: none;
}


.ql-size-small {
    font-size: 0.75em;
    margin: 0;
}

.ql-size-large {
    font-size: 1.5em;
    margin: 0;
}

.ql-size-huge {
    font-size: 2em;
    margin: 0;
}


.login-pf-page .card-pf p {
    color: #1A1D20;
}

p a,
.login-pf-page .login-pf-signup p a {
    margin-left: 0;
    text-decoration: underline;
}

.login-pf-settings {
    display: flex;
    align-items: baseline;
}

.pf-c-tile {
    padding: 0.5rem;
}

.pf-c-tile::before {
    border: none;
}

.pf-c-tile:hover:after {
    background-color: unset;
}


/*-- CONTAINER START --*/
.login-pf-page {
    display: grid;
    grid-template-columns: 1rem 1fr 1fr 1rem;
    grid-template-rows: auto;
    column-gap: 1rem;
}

#kc-header {
    align-self: end;
    margin-top: 3.125rem;
    grid-column-start: 1;
    grid-column-end: 5;
}

.card-pf {
    justify-self: center;
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
}

.systemInformationAvailable .card-pf {
    justify-self: end;
    grid-column-start: 2;
    grid-column-end: 3;
}

.systemInformationsList li.ui-datalist-item {
    border-top: 1px solid #CCD7E2;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
    list-style-type: none;
}

.systemInformationsList li:first-child {
    border-top: none;
    padding-top: unset;
    margin-top: unset;
}

.rightContentContainer {
    justify-self: start;
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 2;
}

.footer-wrapper {
    align-self: end;
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 5;
}

.footer-wrapper a {
    color: #fff;
}

.footer-wrapper a:hover {
    color: #fff;
    text-decoration: underline;
}

.login-pf-page .card-pf,
.rightContentContainer {
    max-width: 615px;
    width: 100%;
    max-height: 700px;
    background-color: #fff;
    padding: 0;
    border-top: 0;
    box-shadow: none;
    margin: 0;
    position: relative;
}

.scrollable {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.card-pf::after,
.rightContentContainer::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.8rem;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.card-pf::before,
.rightContentContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2.8rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#kc-content {
    max-width: 380px;
    margin: 0 auto 2rem auto;
}

/*-- CONTAINER END --*/

#kc-header-wrapper {
    display: none;
}

#logo {
    height: 54px;
    max-width: 100%;
}

#kc-page-title {
    font-size: 2em;
    text-align: center;
    line-height: 2rem;
    font-weight: 400;
    margin: 0;
    hyphens: auto;
}

a {
    text-decoration: none;
    color: #0064C8;
}

a:hover {
    color: #003C8C;
    text-decoration: none;
}

a:active {
    color: #1A1D20;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    color: #999DA1;
}

.impressumlink a {
    color: white;
}

.impressumlink a:active {
    color: white;
}

.impressumlink a:hover {
    color: white;
}

:focus-visible {
    outline: solid 3px #ED7102 !important;
}

p.instruction {
    margin: 2rem 0;
}

ol#kc-totp-settings {
    margin: 2rem 0;
}

ol#kc-totp-settings ul {
    margin-left: 1rem;
}

.note {
    margin: 1rem 0;
    text-align: center;
    color: #666A6E;
}

/*-- INPUT START --*/

label,
.form-horizontal .control-label,
.pf-c-form__label-text {
    color: #666A6E;
    font-size: 0.875rem;
    letter-spacing: 0.031rem;
    line-height: 1rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.pf-c-form-control:focus {
    padding-bottom: 0;
}

input[type="text"],
input[type="password"],
input[type="checkbox"],
textarea,
select {
    border: 1px solid #babdc0;
    border-radius: 0.125rem;
    font-size: 0.875rem;
    padding: 0 0.5rem !important;
}

.pf-c-input-group {
    align-items: stretch;
}

input[name*="password"] {
    border: 1px solid #babdc0;
    border-right-style: none;
    border-radius: 0.125rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    background-color: transparent;
}

button[aria-controls^="password"].pf-c-button {
    border: 1px solid #babdc0;
    border-left-style: none;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0.125rem;
    border-top-right-radius: 0.125rem;
    padding-top: 0.313rem;
    padding-bottom: 0.343rem;
}

button[aria-controls^="password"].pf-c-button.pf-m-control:hover {
    background-color: rgba(0, 100, 200, 0.1);
}

button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible {
    border: transparent;
}

button[aria-controls^="password"].pf-c-button.pf-m-control:hover i::before,
button[aria-controls^="password"].pf-c-button.pf-m-control:active i::before {
    color: #0246A1;
}

button[aria-controls^="password"].pf-c-button.pf-m-control:active {
    background-color: rgba(0, 100, 200, 0.1);
    outline: 3px solid #89C3FF;
}

/*
    hacky hack for outline Support FF 115
    there is no property supported like outline-left: none;
    We don't want to touch each kc template and put some error classes on the password input wrappers
    so we have to do some hacks here

    we also have to use the input.pf-c-form-control[type="text"][id^="password"] selector when showPassword is activated
    we also have to use the button[aria-controls^="password"].pf-c-button.pf-m-control selector because aria-controls can be password; password-new; password-confirm
*/

input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control {
    position: relative;
    outline: 3px solid #D2001E;
    border: none;
}

input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:before,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:before {
    content: " ";
    width: 7px;
    background-color: white;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: -3px;
}

input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible:before,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible:before,
input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:hover:before,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:hover:before,
input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible:hover:before,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible:hover:before {
    left: 1px;
    background-color: #E5EFF9;
}

input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:hover:before,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:hover:before {
    left: -3px;
}

/* when focus is on input password and user hovers over showPassword button, the outlines are broken */
input.pf-c-form-control[type="password"][aria-invalid="true"]:focus-visible,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"]:focus-visible {
    background-color: #fff;
}

input.pf-c-form-control[type="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible,
input.pf-c-form-control[type="text"][id^="password"][aria-invalid="true"] + button[aria-controls^="password"].pf-c-button.pf-m-control:focus-visible {
    background-color: #E5EFF9;
    border: none;
}

/* End Hacky Hack */

input[type="text"]:focus-visible,
input[type="text"][aria-invalid="true"]:focus-visible,
input[type="password"]:focus-visible,
input[type="password"][aria-invalid="true"]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="checkbox"][aria-invalid="true"]:focus-visible,
textarea:focus-visible,
textarea[aria-invalid="true"]:focus-visible,
select:focus-visible,
select[aria-invalid="true"]:focus-visible {
    border: none;
}

input[aria-invalid="true"],
input.pf-c-form-control[aria-invalid="true"] {
    outline: 3px solid #D2001E;
    background-image: url('data:image/svg+xml;charset=UTF-8, <svg fill="%23D2001E" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>');
    background-size: auto 60%;
    border: none;
}

.checkbox label {
    display: flex;
    align-items: end;
}

.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    width: 1rem;
    height: 1rem;
}

.pf-c-form__helper-text.pf-m-error {
    color: #D2001E;
    margin-top: 0.25rem;
    display: block;
}

.pf-c-input-group .fa-eye::before,
.pf-c-input-group .fa-eye-slash::before {
    color: #0064C8;
}

.pf-c-input-group .fa-eye-slash::before {
    /* fix jumping icon on click */
    margin-right: -1px;
    margin-left: -1px;
}

/*-- INPUT END --*/

/*-- BUTTONS START --*/
#kc-form-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1rem;;
    flex-wrap: wrap;
}

.ui-button,
#kc-social-providers a {
    font-size: 0.875rem;
    padding: 0.438rem 0.625rem;
    color: #fff;
    border-radius: 0.375rem;
    transition: background-color 0.5s;
    min-width: 6.25rem;
}

#saveTOTPBtn {
    margin: 0;
    display: block;
}

#back-to-login {
    display: block;
}

.ui-button:active,
#kc-social-providers a:active {
    outline: solid 3px #89c3ff !important;
}

.ui-button.blue-sky,
#kc-social-providers a {
    background-color: #0064C8;
}

.ui-button.blue-sky:hover,
#kc-social-providers a:hover {
    background-color: #0246A1;
}

.ui-button.blue-sky:focus,
#kc-social-providers a:focus {
    background-color: #0246A1;
}

.pf-c-button::after {
    border: unset;
}

input#kc-login {
    background-image: url('data:image/svg+xml;charset=UTF-8, <svg fill="%23FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2024 Fonticons, Inc.--><path d="M192 365.8L302 256 192 146.2l0 53.8c0 13.3-10.7 24-24 24L48 224l0 64 120 0c13.3 0 24 10.7 24 24l0 53.8zM352 256c0 11.5-4.6 22.5-12.7 30.6L223.2 402.4c-8.7 8.7-20.5 13.6-32.8 13.6c-25.6 0-46.4-20.8-46.4-46.4l0-33.6-96 0c-26.5 0-48-21.5-48-48l0-64c0-26.5 21.5-48 48-48l96 0 0-33.6c0-25.6 20.8-46.4 46.4-46.4c12.3 0 24.1 4.9 32.8 13.6L339.3 225.4c8.1 8.1 12.7 19.1 12.7 30.6zm-8 176l80 0c22.1 0 40-17.9 40-40l0-272c0-22.1-17.9-40-40-40l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l80 0c48.6 0 88 39.4 88 88l0 272c0 48.6-39.4 88-88 88l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"/></svg>');
    background-size: auto 1rem;
    background-repeat: no-repeat;
    background-position: 0.75rem 50%;
    padding-left: 2.25rem;
}

.btn-tertiary {
    border: 1px solid #999DA1;
    color: #0064C8;
    background-color: #fff;
}

.btn-tertiary:hover {
    color: #0246A1;
    border: 1px solid #0246A1;
}

.btn-tertiary:focus {
    border: 1px solid transparent;
}

/*-- BUTTONS END --*/


/*-- LOCALE SWITCH START --*/

#kc-locale-dropdown.open #kc-locale-list {
    display: block;
}

#kc-locale-dropdown a {
    color: #1E232D;
    font-size: 1rem;
    text-decoration: none;
}

#kc-current-locale-link {
    font-weight: 600;
    padding: 0.5rem 0 0.5rem 1rem;
}

button#kc-current-locale-link::after {
    font-family: 'Font Awesome 6 Pro';
    font-style: normal;
    content: "\f078";
}

#kc-locale-dropdown:hover a#kc-current-locale-link {
    color: #0064c8;
    text-decoration: none;
}

#kc-locale ul a:hover {
    background-color: #0064c8;
    color: #fff;
}

#kc-locale ul {
    top: 100%;
}

/*-- LOCALE SWITCH END --*/

/*-- MESSAGES / ERRORS START --*/

/* INFO */
#kc-info,
.alert-info,
.alert-error,
.alert-warning,
.alert-success {
    margin: 0 0 1rem 0;
    border: 1px solid #33B5E5;
    border-left: 3px solid #33B5E5;
    background-color: #f5faff;
    padding: 1rem 2rem 1rem 1rem;
    display: flex;
    border-radius: 0.25rem;
}

#kc-info::before {
    content: "\f05a";
    font-family: 'Font Awesome 6 Pro';
    font-size: 1rem;
    color: #33b5e5;
    margin-right: 1rem;
}

#kc-info-wrapper,
.kc-feedback-text {
    background-color: unset;
    padding: 0;
    text-align: left;
    font-size: 0.875rem;
    color: #1A1D20;
    font-weight: normal;
}

.pf-c-alert__icon span::before {
    font-size: 1rem;
}

/* ERROR */

.alert-error {
    border: 1px solid #FF3646;
    border-left: 3px solid #D2001E;
}

.alert-error .pf-c-alert__icon span::before {
    color: #FF3646;
}

.pf-c-alert__icon {
    margin-top: 0;
    margin-right: 1rem;
}

/* WARNING */

.alert-warning {
    border: 1px solid #ed7102;
    border-left: 3px solid #ed7102;
}

.alert-warning .pf-c-alert__icon span::before {
    color: #ED7102;
}

/* SUCCESS */
.alert-success {
    border: 1px solid #51AE32;
    border-left: 3px solid #1E8200;
}

.alert-success .pf-c-alert__icon span::before {
    color: #51AE32;
}

/*-- MESSAGES / ERRORS END --*/

/*-- SOCIAL LOGIN START --*/

.kc-social-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
}

#kc-social-providers h2 {
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    font-size: 1.2em;
    line-height: 40px;
    font-weight: 400;
    text-align: center;
    color: #1A1D20;
}

#kc-social-providers a {
    padding: 3.5px 10px;
    min-height: 32px;
    margin-bottom: 0.25rem;
    border: unset;
    --pf-c-button--after--BorderColor: unset;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.kc-social-icon-text {
    left: unset;
    top: unset;
}


.kc-social-provider-logo {
    width: auto;
    float: unset;
    margin-right: 0.5rem;
}

#kc-social-providers a i:before {
    color: #fff;
    font-size: 1rem;
}

.pf-c-button.pf-m-control:hover::after {
    border-bottom-width: 0;
}

/*-- TOOLTIP  --*/

/* totp - 2Faktor Auth START */
#kc-totp-secret-key {
    display: inline-block;
}

#kc-totp-settings {
    hyphens: auto;
}

#kc-totp-settings > li:first-child p,
#kc-totp-supported-apps,
#kc-totp-supported-apps li,
#kc-totp-settings > li:last-child p {
    display: inline;
}

#kc-totp-settings > li {
    margin-bottom: 1rem;
}

#kc-totp-settings > li:last-child {
    margin-bottom: unset;
}

ol#kc-totp-settings ul#kc-totp-supported-apps {
    margin: 0;
}

#kc-totp-supported-apps li:after {
    content: ",";
}

#kc-totp-supported-apps li:last-child:after {
    content: unset;
}

#kc-totp-secret-qr-code {
    left: -10px;
    position: relative;
}

#kc-totp-settings-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    justify-content: center;
}

#kc-totp-settings-form .form-group {
    width: 100%;
}

/* totp - 2Faktor Auth END */

/*-- MEDIA QUERIES START --*/
@media (min-width: 841px) {
    .login-pf body {
        background-image: url("../img/background.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
    }
}

@media (max-width: 840px) {

    .login-pf-page .card-pf,
    .rightContentContainer {
        max-height: unset;
        margin: 0 auto;
        position: unset;
        grid-column-start: 2;
        grid-column-end: 4;
    }

    .rightContentContainer {
        grid-row-start: 2;
    }

    .login-pf-page .card-pf {
        grid-row-start: 3;
    }

    .card-pf::before,
    .rightContentContainer::before,
    .card-pf::after,
    .rightContentContainer::after {
        background: unset;
    }

    #kc-locale {
        position: absolute;
        width: 200px;
        top: 20px;
        right: 20px;
        text-align: right;
        z-index: 9999;
    }

    #kc-header {
        margin-top: 4.125rem;
    }

    .scrollable {
        overflow-y: unset;
    }

    .footer-wrapper a {
        color: #0064C8;
    }

    .footer-wrapper a:hover {
        color: #0099d3;
        text-decoration: underline;
    }
}

@media (max-width: 767px) {
    #kc-header {
        text-align: center;
    }
}

/*-- MEDIA QUERIES END   --*/