body {
    font-family: 'Open Sans', sans-serif, Arial;
    display: none;
}

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

co-web-desktop-header .coa-fixed-header {
    height: calc(var(--ca-primary-header-row-height) + 40px);
    margin-bottom: 0 !important;
}

#kc-locale-dropdown {
    margin: 0 1em;
    height: 40px;
    line-height: 24px;
    position: relative;
    display: inline-block;
}

#kc-locale-dropdown a {
    display: block;
    overflow: hidden;
    pointer-events: none;
    text-decoration: none;
    text-transform: uppercase;
    width: 1.25em;
    max-width: 125em;
}

#kc-locale-dropdown > a {
    display: block;
    float: right;
    margin-right: 1em;
    /* for the after icon */
}

#kc-locale-dropdown > a:after {
    /* For ▲ and ▼ use \9650 and \9660  */
    display: inline-block;
    float: right;
    content: "\f0d7";
    font-family: Font Awesome\ 5 Free;
    font-weight: 900;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
}

#kc-locale-dropdown ul {
    background: var(--main-content-background-color);
    cursor: pointer;
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    min-height: 3em;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    padding: 0;
}

#kc-content {
    margin: -15px auto 48px auto; /*TODO remove nameless header class :) */
    width: 100%;
    float: left;
    clear: both;
    box-sizing: border-box;
}

#kc-content-wrapper {
    margin: 0 auto;
}

#kc-info-message {
    text-align: center;
    margin-top: calc(50vh - 200px + 32px);
    height: 200px;
    background: url(cody_logged-in.svg) 50% 50% no-repeat;
}

a {
    text-decoration: none;
    color: var(--link-color, var(--primary-color, #0072d0));
}

#kc-info-message a, #backToApplication {
    display: inline-block;
    padding: 8px 16px;
    text-decoration: none;
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-text-color);
    border: 1px solid var(--primary-button-border-color);
    font-weight: 600;
    height: 40px;
    line-height: 20px;
    min-height: 40px;
    max-height: 40px;
    min-width: 40px;
}

#kc-info-message a:hover, #backToApplication:hover {
    background-color: var(--primary-button-background-color-hover);
    color: var(--primary-button-text-color-hover);
    border-color: var(--primary-button-border-color-hover);
}

#kc-info-message img {
    width: 200px;
    height: auto;
    max-width: 80vw;
}

#kc-totp-secret-qr-code {
    width: auto;
    max-width: 80vw;
}

#kc-content ul {
    margin-bottom: 1em;
}

#kc-content form input, #kc-social-providers a[type="button"] {
    margin-bottom: 0.25em;
    border: 1px solid;
    height: 40px;
    padding: 2px 0.5em;
    width: 100%;
}

#kc-content form input[type='submit'] {
    border: 1px solid;
    background-color: var(--primary-button-background-color);
    color: var(--primary-button-text-color);
    border-color: var(--primary-button-border-color);
    padding: 2px 1em;
    margin-bottom: 15px;
    text-align: center;
}

#kc-content form input[type='submit']:hover {
    background-color: var(--primary-button-background-color-hover);
    color: var(--primary-button-text-color-hover);
    border-color: var(--primary-button-border-color-hover);
}

#kc-content form input[type='checkbox'] {
    height: 1em;
    width: 1em;
    padding: 0;
    margin-right: 10px;
    color: var(--text-color);
}

.login-pf-page {
    width: 100%;
}

.cody-active {
    display: none;
}

.sr-only {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.logged-in {
    text-align: center;
    margin-top: 50%;
}

#kc-form {
    box-sizing: border-box;
}

#welcome-panel {
    color: var(--text-color, #333);
}

#kc-form-wrapper input[type=password], #kc-form-wrapper input[type=text] {
    margin-bottom: 15px;
    background-color: var(--white, #fff);
    color: #555;
    display: inline-block;
    width: 100%;
    border-radius: 0;
    border-width: 0;
    padding: 6px 12px;
    height: 40px;
    font-size: 14px;
}

#kc-form-login .alert-error, #input-error, #input-error-username, #input-error-password, #input-error-firstname, #input-error-lastname,
#input-error-email, #input-error-gdpr, #input-error-userRules, #input-error-universityList,
#input-error-matriculationNumber, #input-error-firstName, #input-error-lastName, #input-error-birthDay,
#input-error-nationality, #input-error-dataCorrectConfirmation, #input-error-birthName , #input-error-gender {
    background: var(--brand-danger, #e51a49);
    color: var(--white, #fff);
    display: inline-block;
    width: 100%;
    padding: 0.5em;
    font-size: 12px;
    margin-bottom: 15px;
}

#kc-form-login .alert-error span {
    font-size: 12px;
}

.login-right-column #kc-form-wrapper button[data-password-toggle] {
    display: none;
}

/*.desktop-footer {*/
/*    background-color: var(--footer-background-color);*/
/*    min-height: 49px;*/
/*    padding-bottom: 15px;*/
/*    padding-top: 15px;*/
/*    color: var(--footer-text-color);*/
/*    clear: both;*/
/*    text-align: center;*/
/*}*/

/*.desktop-footer a {*/
/*    color: var(--footer-link-text-color);*/
/*}*/

/*.desktop-footer a:hover {*/
/*    color: var(--primary-dark-color);*/
/*}*/

/* Styles for login page */

.login-desktop {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: calc(100vh - 129px);
}

.login-desktop .login-right-column {
    background-color: var(--login-background-color);
    color: var(--login-text-color);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
}

.login-desktop .login-right-column h2.panel-heading.lead {
    color: var(--login-text-color);
}

.mat-icon-button.matSuffix {
    color: #737373;
    position: relative;
    float: right;
    top: -43px;
    right: 1em;
    border: none;
}

.login-desktop .login-right-column .ca-button {
    background-color: var(--login-background-color);
    color: var(--login-text-color);
    border-color: var(--login-text-color);
    width: 100%;
}

.login-desktop .login-right-column .ca-button:hover {
    background-color: var(--login-button-background-hover);
    color: var(--login-button-color-hover);
}

.login-desktop .login-right-column input[type='submit']#kc-login {
    background-color: var(--login-text-color);
    color: var(--login-button-color);
    font-weight: 600;
}

.login-desktop .login-right-column input[type='submit']:hover#kc-login {
    background-color: var(--primary-button-background-color-hover);
    color: var(--primary-button-text-color-hover);
    border-color: var(--primary-button-text-color-hover);
    cursor: pointer;
}

.login-desktop .login-right-column #kc-continue,
.login-desktop .login-right-column #kc-continue-sp {
    background-color: var(--login-background-color);
    color: var(--login-text-color);
    border: 1px solid var(--login-text-color);
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    padding: 9px 12px;
    text-decoration: none;
    text-align: center;
    width: 100%;
    white-space: nowrap;
}

.login-desktop .login-right-column #kc-continue-sp {
    display: none;
}

.login-desktop .login-right-column #kc-continue:hover,
.login-desktop .login-right-column #kc-continue-sp:hover{
    background-color: var(--primary-button-background-color-hover);
    color: var(--primary-button-text-color-hover);
    border-color: var(--primary-button-text-color-hover);
}

.login-desktop .login-right-column #kc-social-providers h2 {
    color: var(--login-text-color);
    font-size: 21px;
    font-weight: 300;
    margin-bottom: 1em;
}

.login-desktop .login-right-column #kc-social-providers hr {
    visibility: hidden;
}

.login-desktop .login-right-column #kc-social-providers ul {
    padding: 0;
}

.login-desktop .login-right-column #kc-social-providers li {
    list-style: none;
}

.login-desktop .login-right-column #kc-social-providers li a {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--login-text-color, var(--primary-button-text-color, var(--white, #fff)));
    color: var(--login-button-color, var(--login-background-color, var(--primary-color, #0072d0)));
    font-weight: 600;
}

.login-desktop .login-right-column #kc-social-providers li a:hover {
    background-color: var(--primary-button-background-color-hover);
    color: var(--primary-button-text-color-hover);
    border-color: var(--primary-button-border-color-hover);
}

.login-desktop .login-right-column #kc-social-providers li a span {
    display: inline-block;
    line-height: 32px;
}

.login-desktop .login-left-column {
    background-color: var(--main-content-background-color);
    display: flex;
    flex: 4;
    flex-direction: column;
    justify-content: left;
    align-items: stretch;
}

.login-desktop .login-left-column .login-page-content {
    background-image: var(--login-background-image);
    background-size: var(--login-background-image-size);
    background-repeat: no-repeat;
    background-position: bottom right;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 129px);
    height: auto;
}

.login-desktop .login-left-column .login-page-content .welcome-panel {
    margin: 2em;
}

@media (max-width: 767px) {
    .login-desktop .login-left-column .login-page-content .welcome-panel {
        margin: 0 1em;
    }

    .login-desktop .login-left-column .login-page-content .welcome-panel .lead {
        margin: 1em 0;
    }
}

@media (max-width: 767px) {
    .login-desktop .login-left-column {
        order: 1;
        width: 100%;
        min-width: 100%;
    }

    .login-desktop .login-left-column .login-page-content {
        height: auto;
        min-height: auto;
        background: none;
    }

    .login-desktop .login-right-column {
        order: 0;
        width: 100%;
    }
}

/* Styles for kc-error-message */
#kc-error-message {
    text-align: center;
    margin-top: calc(50vh - 200px + 32px);
    height: 200px;
    background: url(cody_logged-in.svg) 50% 50% no-repeat;
}

#kc-error-message {
    padding-top: 200px; / height-of-image /
}

#kc-error-message .instruction {
    padding-top: unset;
}

#kc-info-message .instruction {
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--login-text-color);
    font-size: 15px;
    position: relative;
    top: 224px;
}

#instruction1 {
    background: url(cody_logged-in.svg) 50% 0% no-repeat;
    background-size: 6em auto;
    display: block;
    text-align: center;
    text-decoration: none;
    font-weight: 400;
    font-size: 15px;
    margin: 10px;
    line-height: 1.5em;
    padding-top: 7em;
    position: relative;
    top: calc(50vh - 100px);
}

#kc-update-profile-form,
#kc-idp-review-profile-form {
    flex-direction: column;
    max-width: 80vw;
    margin-left: auto;
    margin-right: auto;
}

form#kc-update-profile-form input,
form#kc-idp-review-profile-form input {
    border: 1px solid #bdc3c7;
}

@media (max-width: 767px) {
    #kc-update-profile-form,
    #kc-idp-review-profile-form {
        max-width: 100vw;
        padding: 1em 2em;
    }
    #universityList {
        max-width: 100%;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 1280px) {
    #kc-update-profile-form,
    #kc-idp-review-profile-form {
        max-width: 30em;
    }
    #kc-idp-review-profile-form {
        max-width: 50vw;
    }
}


#kc-idp-review-profile-form > div {
    /*float: left;*/
    padding: 20px;
    margin: 1em;
    /*display: block;*/
    border: 1px solid var(--panel-border-color, var(--off-white));
    background-color: var(--panel-background-color);
}

#kc-idp-review-profile-form > div:first-child {
    background: transparent;
    border-width: 0;
}

#kc-idp-review-profile-form > div:last-child {
    /*clear: both;*/
    /*width: 100%;*/
    text-align: right;
    border-width: 0;
    background: transparent;
    padding: 0;
}

#kc-idp-review-profile-form > div:last-child input[type='submit'] {
    width: 10em;
}

#kc-idp-review-profile-form > div > div:first-child label:first-child {
    margin-bottom: 1em;
    font-size: 1.2em;
    display: inline-block;
}

.declaration-of-consent input[type='checkbox'] {
    margin-bottom: 1em;
    display: inline-block;
}

#kc-update-profile-form #kc-form-buttons,
#kc-idp-review-profile-form #kc-form-buttons {
    margin-top: 1em;
}

#kc-form-login hr {
    display: none;
}

#kc-attempted-username {
    display: block;
    padding-right: 100px;
}

.kc-login-tooltip {
    display: inline;
}

.profileDescriptionPanel {
    margin: 1em 0;
    background-color: transparent;
    border: 1px solid red;
    float: left;

}

.profileDescriptionPanel:before {
    content: "\f05a";
    font-family: "Font Awesome 5 Free";
    color: var(--brand-info-color, var(--text-color));
    font-weight: 900;
    margin-right: .5em;
}

#reset-login .kc-login-tooltip, #reset-login .kc-tooltip-text {
    background-color: transparent;
}

#login-right-column a#reset-login {
    color: var(--login-text-color);
}

/* spezifische regeln für das kc-idp-review-profile-form */
#kc-content #kc-idp-review-profile-form div > div > label {
    margin-top: .5em;
    display: inline-block;
}

#kc-content #kc-idp-review-profile-form select,
#kc-content #kc-idp-review-profile-form input[type="text"] {
    height: 2em;
    padding: 2px .4em;
    border-color: var(--border-color, #74777F);
}

#kc-content #kc-idp-review-profile-form input[readonly] {
    color: var(--disabled-color, darkgrey);
    border-color: var(--disabled-color, darkgrey);
    cursor: not-allowed;
}

#kc-content #kc-idp-review-profile-form input[type="text"] {
    border-width: 0px 0px 1px 0px;
}

#kc-content #kc-idp-review-profile-form select {
    padding: 2px;
}

.login-desktop .toggle-password-button {
    position: relative;
    margin-bottom: -40px;
    background: transparent;
}

.login-desktop .toggle-password-button:hover {
    cursor: pointer;
}

#login-button {
    display: none;
}

.lead {
    font-size: 21px;
    font-weight: 300;
    margin-bottom: 1em;
}

.lead a {
    font-size: inherit;
}

html *,
html *:before,
html *:after {
    box-sizing: inherit;
}

coa-desktop-menu-button, coa-desktop-fbsp {
    display: none !important;
}
co-web-desktop-footer {
    position: fixed !important;
}