@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500&display=swap");

:root {
  --pf-v5-global--FontFamily--text: 'Heebo','RedHatText',helvetica,arial,sans-serif;
  --pf-v5-global--FontFamily--heading: 'Heebo','RedHatDisplay',helvetica,arial,sans-serif;
  --pf-v5-global--FontWeight--bold: 500;

  --pf-v5-global--primary-color--100: #ee3f5f;
  --pf-v5-global--primary-color--100--active: #d73451;
  --pf-v5-global--primary-color--100--hover: #f85774;

  --pf-v5-global--link--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--primary-color--100--hover);
  --pf-v5-global--link--Color--visited: var(--pf-v5-global--link--Color);

  --pf-v5-global--link--Color--dark: var(--pf-v5-global--link--Color);
  --pf-v5-global--link--Color--dark--hover: var(--pf-v5-global--link--Color--hover);

  --pf-v5-global--link--Color--light: var(--pf-v5-global--link--Color);
  --pf-v5-global--link--Color--light--hover: var(--pf-v5-global--link--Color--hover);

  --keycloak-bg-logo-url: url("../img/bg.webp");
  --keycloak-card-top-color: var(--pf-v5-global--primary-color--100);
}

.pf-v5-c-button {
  --pf-v5-c-button--active--after--BorderWidth: 0;
  --pf-v5-c-button--after--BorderRadius: 48px;
  --pf-v5-c-button--after--BorderWidth: 0;
  --pf-v5-c-button--focus--after--BorderWidth: 0;
  --pf-v5-c-button--hover--after--BorderWidth: 0;
}

.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--primary-color--100--active);
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100--active);
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100--hover);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--pf-v5-global--primary-color--100--active);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--pf-v5-global--primary-color--100--active);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--pf-v5-global--primary-color--100--hover);

  padding: 16px 24px;
  border-radius: var(--pf-v5-c-button--after--BorderRadius);
}

.pf-v5-c-button.pf-m-secondary {
  /* --pf-v5-c-button--BackgroundColor: #f4f4f4; */
  --pf-v5-c-button--m-secondary--BackgroundColor: #f4f4f4;
  --pf-v5-c-button--m-secondary--active--BackgroundColor: #e0e0e0;
  --pf-v5-c-button--m-secondary--active--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--focus--BackgroundColor: #f4f4f4;
  --pf-v5-c-button--m-secondary--focus--Color: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: #f4f4f4;
  --pf-v5-c-button--m-secondary--hover--Color: var(--pf-v5-global--primary-color--100);


  padding: 16px 24px;
  border-radius: var(--pf-v5-c-button--after--BorderRadius);
}

.pf-v5-c-form-control {
  --pf-v5-global--primary-color--100: inherit;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);

}

.pf-v5-c-login__main {
  border-radius: 40px;
}

.pf-v5-c-login__main-header {
  border-top: none;
}

@media (min-width: 768px) {
  div.pf-v5-c-login__main-header {
    grid-template-columns: 1fr 30%;
  }
}

.pf-v5-c-login__container {
  justify-content: end;
}

#kc-header-wrapper {
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.66);
}