/* prometo */
@font-face {
    font-family: 'prometo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://static.formulastudent.de/dist/prometo/WebStaticFonts/Prometo_W_Rg.woff2') format('woff2');
}
/* Font Awesome 5 */
@font-face {
    font-family: 'Font Awesome 5 Duotone';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://static.formulastudent.de/fsg/fa/fa-duotone-900.woff2') format('woff2');
}
:root {
    color-scheme: light dark;

    --fsg_yellow_gold:  #FDD315; /* rgb(253,211,21) */
    --fsg_red:          #E40E1B; /* rgb(228,14,27)  */
    --fsg_black:        #1D1D1B; /* rgb(29,29,27)   */
    --fsg_green_cv:     #76B82A; /* rgb(118,184,42) */
    --fsg_yellow_ev:    #FFDD00; /* rgb(0,136,182)  */
    --fsg_cyan_dvc:     #0088B6; /* rgb(253,211,21) */
    --fsg_cyan_dve:     #5FC4E1; /* rgb(95,196,225) */
    --fsg_blue_judge:   #0069B4; /* rgb(0,105,180)  */

    --kc_header_background: #b3b3b3;
    --kc_header_background_dark :#393e44;
    --lc_subnav_current--after--BorderColor: var(--fsg_yellow_gold);

    --pf-v5-global--BackgroundColor--dark-100: var(--kc_header_background);
    --pf-v5-global--palette--black-1000: var(--kc_header_background_dark);
    --pf-v5-global--active-color--400: var(--lc_subnav_current--after--BorderColor);

    --pf-v5-global--link--Color: var(--fsg_green_cv);
    --pf-v5-global--Color--200: var(--fsg_green_cv);
    --pf-v5-global--FontFamily--heading--sans-serif: prometo, RedHatDisplay, Overpass, overpass, helvetica, arial, sans-serif;
    --pf-v5-global--FontFamily--redhatfont--heading--sans-serif: prometo, RedHatDisplay, Overpass, overpass, helvetica, arial, sans-serif;
    --pf-v5-global--link--Color: var(--fsg_green_cv);
    --pf-v5-global--Transition:all 250ms ease-in-out;
    --pf-v5-global--danger-color--100: var(--fsg_red);
}

@media (prefers-color-scheme: light) {
    :root {
        --text-color:           #2e2f3e;
        --text-h1:              var(--fsg_blue_judge);
        --background-color:     #f0f0f0;
        --background-color2:    white;
        --background-color3:    lightgray;
    }   
}
@media (prefers-color-scheme: dark) {
    :root {
        --text-color:           white;
        --text-h1:              var(--fsg_yellow_gold);
        --background-color:     #26292d;
        --background-color2:    #393e44;
        --background-color3:    var(--fsg_black);
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.pf-v5-c-title {
  font-size: 100%;
  font-family: prometo, sans-serif;
  font-weight: 400;
  color: var(--text-h1);
}
.pf-v5-c-content a {
    color: var(--fsg_green_cv, limegreen);
    text-decoration: underline;
}
.pf-v5-c-button {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--fsg_blue_judge, blue);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--fsg_red, red);
}
.pf-v5-c-button.pf-v5-m-link {
    color: var(--fsg_green_cv, limegreen);
    text-decoration: underline;
}
.pf-v5-c-dropdown__toggle.pf-v5-m-plain:not(.pf-v5-m-text) svg {
    color: var(--fsg_green_cv, limegreen);
    height: 1.2em;
}
.pf-v5-l-toolbar__item.pf-v5-m-mobile,
.pf-v5-c-data-list__item-action.pf-v5-m-hidden-on-lg {
    display: none;
}
.pf-v5-c-page__header-tools {
    display: flex;
    flex-direction: column-reverse;
}
.pf-v5-c-page__header-tools .pf-v5-m-icons,
.pf-v5-c-data-list__item-action.pf-v5-m-visible-on-lg.pf-v5-m-hidden {
    display: block;
    visibility: visible;
}
.pf-v5-l-toolbar {
    align-self: flex-end;
}
.pf-v5-l-split.pf-v5-m-gutter.pf-v5-u-mb-lg {
    flex-wrap: wrap;
}
button#landingSignOutButton,
button#signOutButton{
  padding: 1px 10px 1px 10px;
  background-color: var(--fsg_red, red);
    color: white;
}
button#landingSignInButton,
button#signInButton {
  background-color: var(--fsg_green_cv, limegreen);
    color: white;
    font-weight: bold;
}
.brand {
  height: 30px;
}
a#landingReferrerLink,
a#referrerLink{
    color: black;
    text-decoration: underline;
}
a#landingReferrerLink:hover,
a#referrerLink:hover {
    color: white;
}
.pf-v5-c-nav__link.pf-v5-m-current::after, 
.pf-v5-c-nav__link.pf-v5-m-current:hover::after, 
.pf-v5-c-nav__item.pf-v5-m-current:not(.pf-v5-m-expanded) 
.pf-v5-c-nav__link::after {
    border-color: var(--fsg_yellow_ev, yellow);
}
div#apple-idp-username {
    font-size: smaller;
    word-wrap: break-word;
    width: 170px;
}
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderBottomColor: var(--fsg_blue_judge, blue);
}
.pf-v5-c-data-list__item {
    background-color: #f9f9f969;
}
.pf-v5-c-data-list__item {
    --pf-v5-c-data-list__item--BorderBottomWidth: 1px;
    --pf-v5-c-data-list__item--BorderBottomColor: var(--pf-v5-global--BorderColor--100);
}
.pf-v5-c-data-list {
    --pf-v5-c-data-list--BorderTopColor: var(--pf-v5-global--BorderColor--100);
    --pf-v5-c-data-list--BorderTopWidth: 1px;
}
ul[aria-label="user credential"] div.pf-v5-c-data-list__cell:first-child {
    color: var(--fsg_green_cv, limegreen);
    font-weight: bold;
}
ul[aria-label="user credential"] div.pf-v5-c-data-list__cell:nth-last-child(2) {
    font-size: 14px;
}

.pf-v5-c-menu-toggle:before {
    border-style: hidden;
}
.pf-v5-c-menu-toggle:after {
    border-block-end: unset;
}
.pf-v5-c-masthead__content {
    grid-column: 3;
}
.pf-v5-c-page__main-section.pf-m-light {
   background-color: unset;
}

/* Reorder the "Signing in" page: show Passkeys (passwordless) first.
   Keycloak hard-codes the section order in CredentialTypeMetadata.Category
   (basic=1, two-factor=2, passwordless=3) and it is not configurable, so we
   flip it purely visually. Each category renders as a <section> whose title
   carries a stable id="${category}-categ-title" (SigningIn.tsx). We turn the
   surrounding content section into a flex column and pull passwordless to the
   top. Degrades gracefully: if the markup changes on a KC upgrade the :has()
   selectors simply stop matching and the default order returns. */
.pf-v5-c-page__main-section:has(> section > [id="passwordless-categ-title"]) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.pf-v5-c-page__main-section > section:has(> [id="passwordless-categ-title"]) {
    order: -1;
}

@media screen and (max-width: 768px) {
    .pf-v5-c-data-list__item-content {
        display: flow !important;
    }
    .pf-v5-c-data-list__cell {
        padding-block-start: 0 !important;
        padding-block-end: 0 !important;
    }
    .pf-v5-c-data-list__item-action {
        margin-inline-start: 0 !important;
        padding-block-start: 0.5em !important;
        padding-block-end: 0.5em !important;
    }
    ul.pf-v5-c-data-list {
        border-top: none;
    }
    .pf-v5-c-data-list__item {
        padding: 10px !important;;
    }

    ul[aria-label="user credential"] div.pf-v5-c-data-list__cell:nth-last-child(2) {
        font-size: 12px;
    }
}

@media screen and (max-width: 430px) {
    ul[aria-label="user credential"] div.pf-v5-c-data-list__cell:nth-last-child(2) {
        font-size: 10px;
    }
}