/*  If you make changes in this file you need to update the version query param for custom.css
 *  in the theme.properties for the styles property, this is to tell browsers that they need to refresh this file.
 */

@media (min-width: 768px) {
    .body-wrapper {
        min-height: 100%;
        padding-bottom: 40px;
    }
}

html.login-pf {
    background: #e6e6e6 url(../img/keycloak-bg.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
}

.login-pf body, body {
    background: none;
}

.login-pf-page .login-pf-page-header {
    margin-bottom: 20px;
}

h1 {
    margin-top: 0;
}

#kc-page-title {
    display: none;
}

.login-pf a {
    color: #363636;
}

.login-pf a:hover {
    color: #363636;
}

#kc-header-wrapper {
    font-size: 29px;
    text-transform: uppercase;
    letter-spacing: 3px;
    line-height: 1.2em;
    padding: 160px 10px 0;
    white-space: normal;
    display: flex;
    justify-content: center;
}

#kc-info-wrapper {
    font-size: 12px;
}

#kc-registration > div {
    margin-bottom: 5px;
}


#kc-registration > div:last-of-type {
    margin-bottom: 0;
}

#kc-registration > div a.kc-registration-link {
    margin: 0;
    text-decoration: revert;
    font-weight: 600;
    text-decoration: none;
}

#kc-registration > div a.kc-registration-link:hover {
    text-decoration: underline;
}

.list-unstyled {
    margin: 0;
}

.card-pf form.form-actions .pf-c-button {
    float: right;
    margin-left: 10px;
}

.login-pf-page .login-pf-brand {
    margin-top: 20px;
    max-width: 360px;
    width: 40%;
}

.card-pf {
    background: #fff;
    margin: 0 auto;
    padding: 20px 40px;
    max-width: 500px;
    border-top: 0;
    box-shadow: 0 0 0;
}

.pf-c-form-control:focus {
    border-color: #fbcb09 !important;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(251 203 9 / 60%) !important;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(251 203 9 / 60%) !important;
}

@media (max-width: 767px) {
    html.login-pf {
        background: #fff;
    }

    .login-pf-page .card-pf {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-top: 0;
    }

    .card-pf.login-pf-accounts {
        max-width: none;
    }

    #kc-locale-dropdown, #kc-registration, #kc-info, div.form-group, .pf-c-button, .alert {
        font-size: 14px;
    }

    .pf-m-primary {
        padding: 10px 0;
    }

    #kc-registration a {
        line-height: 1.8em;
    }

    input.pf-c-form-control {
        font-size: 16px;
    }
}

.login-pf-page .login-pf-signup {
    font-size: 15px;
    color: #72767b;
    text-align: left;
}

.login-pf-signup .tippy-content {
    padding: 9px 14px;
}

.login-pf-signup .tippy-content a {
    margin-left: 0;
    font-size: 16px;
}

#kc-content-wrapper .row {
    margin-left: 0;
    margin-right: 0;
}

@media (min-width: 768px) {
    .login-pf-page .login-pf-social-section:first-of-type {
        padding-right: 39px;
        border-right: 1px solid #d1d1d1;
        margin-right: -1px;
    }

    .login-pf-page .login-pf-social-section:last-of-type {
        padding-left: 40px;
    }

    .login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
        margin-bottom: 0;
    }
}

.login-pf-page .login-pf-social-link {
    margin-bottom: 25px;
}

.login-pf-page .login-pf-social-link a {
    padding: 2px 0;
}

.login-pf-page.login-pf-page-accounts {
    margin-left: auto;
    margin-right: auto;
}

.login-pf-page .pf-m-primary {
    margin-top: 0;
}

@media (min-width: 768px) {
    #kc-header-logo-container {
        width: 100%;
        height: 60px;
        background: url(../img/logo_desktop_weiß.svg) no-repeat center center;
        background-size: 400px;
    }
}

@media (max-width: 767px) {
    #kc-header-logo-container {
        background-size: 400px;
        width: 100%;
        height: 120px;
        background: url(../img/logo_mobile_grau.svg) no-repeat center center;
        background-size: 300px;
    }

    #kc-header-wrapper {
        font-size: 16px;
        font-weight: bold;
        padding: 20px 0 0 0;
        color: #72767b;
        letter-spacing: 0;
    }

    div.kc-logo-text {
        margin: 0;
        width: 100%;
        background-size: 50%;
    }

}

.pf-c-alert__title {
    font-size: 14px;
}


.sch-button-primary {
    background-color: var(--primary-color) !important;
    border: none !important;
    padding: 10px !important;
    font-weight: bold !important;
    min-width: 50px !important;
    color: var(--neutral-12) !important;
    border-radius: 4px !important;
}

.sch-button-primary:disabled {
    background-color: var(--surface-2) !important;
    color: var(--on-disabled) !important;
}

.sch-button-primary:focus-visible {
    outline: 3px solid var(--neutral-12) !important;
    outline-offset: -3px !important;
}

.sch-button-primary:not(:disabled):hover {
    color: var(--neutral-12) !important;
    background-color: var(--container-hover-emphasized) !important;
}

.sch-button-primary:not(:disabled):active {
    color: var(--neutral-12) !important;
    background-color: var(--container-active-emphasized) !important;
}

.sch-button-secondary {
    font-weight: bold !important;
    border-radius: 4px !important;
    padding: 8px !important;
    border: 2px solid var(--line-enabled-hard) !important;
    color: var(--on-enabled-subdued) !important;
    background-color: transparent !important;
}

.sch-button-secondary:focus-visible {
    color: var(--on-enabled-emphasized) !important;
    outline: 3px solid var(--neutral-12) !important;
    outline-offset: -3px !important;
}

.sch-button-secondary:disabled {
    color: var(--on-disabled) !important;
    border-color: var(--line-disabled) !important;
}

.sch-button-secondary:not(:disabled):hover {
    background: var(--neutral-83-4) !important;
    color: var(--on-hover) !important;
    border-color: var(--line-hover) !important;
}

.sch-button-secondary:not(:disabled):active {
    color: var(--on-active) !important;
    background-color: var(--container-active-subdued) !important;
    border-color: var(--line-active) !important;
}

.sch-checkbox, input[type="checkbox"] {
    accent-color: var(--primary-color) !important;
    cursor: pointer;
}

.kc-recovery-codes-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kc-recovery-codes-actions button {
    color: var(--on-enabled-subdued) !important;
    height: 40px;
    padding: 8px 16px !important;
}

.kc-recovery-codes-actions button:hover {
    background-color: var(--container-hover-subdued);
    color: var(--on-focus) !important;
    border: none;
}

.kc-recovery-codes-actions button:active {
    background-color: var(--container-active-subdued);
    color: var(--on-active) !important;
    border: none;
}

/* The user should not be able to reset the login, because this page is only displayed when the user either changes their password or activates MFA.
 * This could lead to a weird state, where the user is logged in with one user in keycloak and with another in the portal
 */
#reset-login, .kc-login-tooltip {
    display: none !important;
}

:root, .pf-c-form-control {
    --pf-global--BorderColor--100: #fbcb09 !important;
    --pf-global--primary-color--100: #f9b500 !important;
    --pf-global--primary-color--200: #f9b500 !important;
    --pf-global--active-color--100: #fbcb09 !important;
}

:root {
    --yellow-36: #8A3F1F;
    --yellow-44: #A55023;
    --yellow-52: #BF6325;
    --yellow-60: #D87825;
    --yellow-68: #EF8E22;
    --yellow-77-8: #FAB400; /* primary */
    --yellow-80: #FBBC1D;
    --yellow-82: #FBC437;
    --yellow-84: #FCCB4F;
    --yellow-89: #FDDD8A;
    --yellow-92: #FDE6AB;

    --neutral-12: #201F1F;
    --neutral-20: #313030;
    --neutral-36: #555454;
    --neutral-42: #646363;
    --neutral-52: #7D7C7C;
    --neutral-60: #919090;
    --neutral-68-5: #A8A7A7;
    --neutral-76-3: #BDBCBC;
    --neutral-83-4: #D0D0D0; /* default */
    --neutral-90-2: #E3E3E3;
    --neutral-94: #EEEEEE;
    --neutral-100: #FFFFFF;

    --primary-color: var(--yellow-77-8);

    --on-emphasized: var(--neutral-20);
    --on-disabled: var(--neutral-68-5);
    --on-enabled-emphasized: var(--neutral-12);
    --on-enabled-subdued: var(--neutral-42);
    --on-focus: var(--neutral-12);
    --on-hover: var(--neutral-12);
    --on-active: var(--neutral-12);

    --line-hard: var(--neutral-68-5);
    --line-medium: var(--neutral-76-3);
    --line-soft: var(--neutral-83-4);

    --line-enabled-hard: var(--neutral-42);
    --line-enabled-soft: var(--neutral-76-3);
    --line-hover: var(--neutral-12);
    --line-active: var(--neutral-12);
    --line-focus: var(--neutral-12);
    --line-disabled: var(--neutral-76-3);
    --line-selected-emphasized: var(--yellow-60);
    --line-selected-subdued: var(--neutral-12);

    --container-enabled-emphasized: var(--yellow-77-8);
    --container-hover-emphasized: var(--yellow-68);
    --container-active-emphasized: var(--yellow-60);
    --container-disabled-emphasized: var(--neutral-90-2);

    --container-enabled-subdued: var(--neutral-83-4);
    --container-hover-subdued: var(--yellow-92);
    --container-active-subdued: var(--yellow-84);
    --container-disabled-subdued: var(--neutral-90-2);

    --surface-0: var(--neutral-94);
    --surface-1: var(--neutral-100);
    --surface-2: var(--neutral-90-2);
}