:root {
  /* corporate design base color +12 LCh lightness */
  --fhg-color-100: #43b899;
  /* corporate design base color (FhG color code 28) */
  --fhg-color-200: #12977a;
  /* corporate design base color -5 LCh lightness */
  --fhg-color-300: #008a6e;
  /* corporate design base color -10 LCh lightness */
  --fhg-color-400: #007d61;
  /* custom button text color */
  --fhg-color-btn-foreground: #fff;
}

body {
  /* Global color settings */
  --pf-global--primary-color--100: var(--fhg-color-400);
  --pf-global--link--Color: var(--fhg-color-100);
}

#kc-username {
  /* Change username info alignment */
  margin-top: 5px;
  margin-bottom: -15px;
}

#kc-attempted-username {
  /* Change username info button */
  font-size: 18px;
  padding-left: 6px;
  padding-right: 0;
  cursor: pointer;
}

.kc-login-tooltip .kc-tooltip-text {
  /* Move 'restart login' tooltip to the correct position */
  top: 0;
  left: 100%;
  margin-left: 15px;
}

#kc-select-try-another-way-form {
  /* increase 'other login method' spacing */
  margin-top: 3px;
}

.select-auth-box-icon {
  /* Decrease spacing for authmethod icon box */
  margin-left: 2rem;
  min-width: 40px;
}

.kc-social-item {
  /* Make upstream IDP buttons more visible */
  background-color: #eee !important;
}

.kc-social-provider-name {
  /* remove social provider top margin */
  top: unset;
}

.select-auth-box-icon {
  /* reduce login method logo spacing */
  flex: 0 0 1em;
}

.fhg-login-separator-wrapper {
  /* Custom upstream IDP header */
  display: flex;
  flex-direction: row;
}

.fhg-login-separator-line {
  /* Custom upstream IDP header */
  background-color: rgb(219,219,219);
  height: 1px;
  margin-top: 0.8em;
  flex-shrink: 1;
  flex-grow: 1;
}

.fhg-login-separator-text {
  /* Custom upstream IDP header */
  margin: 0 18px;
}

#kc-form-login div.form-group:last-of-type,
#kc-x509-login-info div.form-group:last-of-type {
  /* no bottom spacing at smartcard login page */
  margin-bottom: 2px;
}

#fhg-help-wrapper {
  /* Style fhg help text wrapper */
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.fhg-help-text {
  /* Style fhg help text links */
  margin: 0px 20px;
}

#kc-info {
  /* fix info message banner spacing */
  margin-bottom: 0;
}

#kc-social-providers {
  margin-top: 25px;
}

.login-pf body {
  /* Change page bg color and add a bit of top padding */
  background: #eee;
  height: 100%;
  padding-top: 100px;
}

#kc-header {
  /* Remove realm name text header */
  display: none;
}

#kc-locale ul li a:hover {
  /* Style locale drowpdown */
  background-color: #ddd;
}

.login-pf-header::before {
  /* Add FhG logo above login card header */
  content: ' ';
  background: url(../img/fhg_logo.png) no-repeat;
  background-position: center;
  background-size: contain;
  padding-top: 48px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.pf-c-tile {
  /* Tile styles */
  --pf-c-tile--m-selected__title--Color: var(--fhg-color-400);
  --pf-c-tile--m-selected__icon--Color: var(--fhg-color-400);
  --pf-c-tile--hover__title--Color: var(--fhg-color-200);
  --pf-c-tile--hover__icon--Color: var(--fhg-color-200);
  --pf-c-tile--hover--before--BorderColor: var(--fhg-color-200);
}

.pf-c-tile.pf-m-selected,
.pf-c-tile:focus {
  /* Tile styles */
  --pf-c-tile__title--Color: var(--fhg-color-400);
  --pf-c-tile__icon--Color: var(--fhg-color-400);
  --pf-c-tile--before--BorderColor: var(--fhg-color-200);
}

.pf-c-button {
  /* Unified button styles */
  font-size: 14px;
  border: 1px solid transparent;
}

.pf-c-button.pf-m-control::after {
  /* Button styles: No bottom line */
  --pf-c-button--after--BorderWidth: 0;
  --pf-c-button--after--BorderColor: transparent;
}

.pf-c-button.pf-m-control:hover::after, .pf-c-button.pf-m-control.pf-m-hover::after {
  /* Button styles: No bottom line */
  border: 1px solid;
  border-color: rgba(160, 160, 160, 0.5);
}

.pf-c-button.pf-m-control[aria-controls="password"] {
  /* Style show password button */
  border-color: var(--pf-global--BorderColor--100);
}

.pf-c-button.pf-m-control:hover[aria-controls="password"] {
  /* Style hovered show password button */
  border-color: var(--fhg-color-100);
}

.pf-c-button.pf-m-control[aria-controls="password"][aria-label="Hide password"] {
  /* Style active show password button */
  background-color: #FFE5B4
}

.pf-m-primary {
  /* FhG colored button */
  color: var(--fhg-color-btn-foreground);
  background-color: var(--fhg-color-200);
  background-image: linear-gradient(to bottom, var(--fhg-color-100) 0, var(--fhg-color-200) 100%);
  background-repeat: repeat-x;
  border-color: var(--fhg-color-400);
}

.pf-m-primary.active, .pf-m-primary:active, .pf-m-primary:focus, .pf-m-primary:hover {
  /* FhG colored hoverbutton (base non-hover version above) */
  color: var(--fhg-color-btn-foreground);
  background-color: var(--fhg-color-400) !important;
  background-image: none;
  background-repeat: repeat-x;
  border-color: var(--fhg-color-300) !important;
}

.pf-c-form-control,
.pf-c-form-control[aria-invalid="true"] {
  /* style input fields */
  border: 1px solid #bbb;
  border-bottom-width: 1px !important;
}

.pf-c-form-control:hover,
.pf-c-form-control:hover[aria-invalid="true"] {
  /* style hovered input fields */
  border-color: var(--fhg-color-100);
}

.pf-c-form-control:focus,
.pf-c-form-control:focus[aria-invalid="true"] {
  /* style focused input fields */
  outline: 0;
  border-color: var(--fhg-color-200);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 1px var(--fhg-color-200);
}

.login-pf a {
  /* FhG colors also for secondary buttons and links */
  color: var(--fhg-color-200);
}

.login-pf a:hover {
  /* FhG colors also for secondary buttons and links */
  color: var(--fhg-color-400);
}

#kc-totp-supported-apps {
  /* Remove authenticator app list */
  display: none;
}

.pf-c-form__label-text {
  /* increase margin for text labels */
  margin-bottom: 4px;
}

/* IE10/11 does not support css variables. work around that misery. */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  #kc-content::before {
    content: "Warning: You are using an outdated browser or client to access Fraunhofer SSO. Site elements may look odd and security will be limited.";
  }

  .pf-m-primary {
    color: #fff !important;
    background-color: #12977a !important;
  }
}

@media (min-width: 768px) {
  body .card-pf {
    /* Pretty borders for desktop */
    box-shadow: 0px 0px 3px #888;
    border-radius: 3px;
    border: none;
  }
}

@media (max-width: 767px) {
  .login-pf body {
    /* Change bg color and reduce top padding on mobile */
    padding-top: 20px;
    background: #fff;
  }

  .login-pf-header::before {
    /* Reduce image height for logo when on mobile */
    padding-top: 40px;
  }
}