/* Keycloak.v2 theme overrides - for existing content in template */
:root {
  /* Napier Continuum vars */
  --nc-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --nc-color-primary-blue: #3266d4;
  --nc-color-primary-blue-25: #3266d440;
  --nc-color-green: #0d7d07;
  --nc-color-green-25: #0d7d0740;
  --nc-color-error: #ef4444;
  --nc-color-error-25: #ef444440;
  --nc-color-warning: #943900;
  --nc-color-warning-25: #94390040;
  --nc-background-100: #f9f9f9;

  --nc-primary-button-gradient: linear-gradient(
    85deg,
    var(--nc-color-primary-blue) 0.38%,
    #3a188a 99.62%
  );
  --nc-primary-button-gradient--disabled: linear-gradient(
    85deg,
    #3266d480,
    #3a188a80
  );
  --nc-primary-button-gradient--hover: linear-gradient(
    85deg,
    #1a48a8 0.38%,
    #1e094f 99.62%
  );

  --nc-border-input: #e4e4e7;
  --nc-focus-outline: 3px solid #3266d480;

  --nc-radius: 4px;
  --nc-radius-rounded-sm: 4px;

  /* PatternFly vars */
  /* Anchor tags */
  --pf-v5-global--link--Color: var(--nc-color-primary-blue);
  --pf-v5-global--link--Color--hover: var(--nc-color-primary-blue);

  --pf-v5-c-form__helper-text--MarginTop--base: 12px;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2"),
    url("../fonts/inter/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* LAYOUT */
body,
html {
  /* General font - includes form labels and buttons */
  --pf-v5-global--FontFamily--text: var(--nc-font-sans);

  /* H1 header */
  --pf-v5-global--FontFamily--heading: var(--nc-font-sans);
}

#keycloak-bg {
  background-color: #f5f5f7;
}

#kc-header-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

.pf-v5-c-login__main {
  --pf-v5-c-login__main--MarginBottom: 0;

  --pf-v5-c-login__main-header--PaddingTop: 0;
  --pf-v5-c-login__main-header--PaddingBottom: 0;

  --pf-v5-c-login__main-footer--PaddingBottom: 0;

  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  width: 500px;
}

.pf-v5-c-login__main-body {
  padding-inline-start: 40px;
  padding-right: 40px;
  padding-inline-end: 40px;
  padding-block-end: 40px;

  box-shadow: none;
  border-radius: var(--nc-radius);
}

/* TYPOGRAPHY */
h1 {
  margin-bottom: 48px;

  line-height: 24px;
  font-size: 24px;
  font-weight: 600;

  text-align: center;
}

#kc-page-title {
  margin-top: 40px;
  margin-bottom: 48px;
}

/* FORMS PAGE */
.pf-v5-c-form__label,
.pf-v5-c-form__group-label {
  padding-block-end: 8px !important;
}

.pf-v5-c-form__label-text {
  --pf-v5-c-form__label-text--FontWeight: 500;
}

.pf-v5-c-login {
  --pf-v5-c-login--PaddingTop: 0px;
  --pf-v5-c-login--PaddingBottom: 0px;
}

.pf-v5-c-helper-text__item-text {
  color: var(--nc-color-error);
}

.pf-v5-c-button.pf-m-primary {
  background: var(--nc-primary-button-gradient);
  box-shadow: 0 1px 2px 0 #0000000d;
}

.pf-v5-c-button.pf-m-primary[disabled],
.pf-v5-c-button.pf-m-primary:disabled {
  background: var(--nc-primary-button-gradient--disabled);
  color: white;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--nc-primary-button-gradient--hover);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--after--BorderColor: #e4e4e7;
  --pf-v5-c-button--m-secondary--Color: #18181b;

  box-shadow: 0 1px 2px 0 #0000000d;
}

.pf-v5-c-button.pf-m-secondary:hover {
  --pf-v5-c-button--m-secondary--after--BorderColor: #e4e4e7;
  --pf-v5-c-button--m-secondary--Color: #18181b;
  --pf-v5-c-button--m-secondary--BackgroundColor: #e4e4e7;
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: #e4e4e7;

  box-shadow: 0 1px 2px 0 #0000000d;
}

.pf-v5-c-button.pf-m-secondary:focus {
  --pf-v5-c-button--after--BorderColor: #e4e4e7;

  box-shadow: 0 1px 2px 0 #0000000d;
}

.nc-form-control {
  width: 100%;
}

input {
  width: inherit;
  border-radius: var(--nc-radius);
  border: 1px solid var(--nc-border-input);

  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  background-color: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

:focus-visible {
  outline: var(--nc-focus-outline);
}

/* Hide error icon for username/password */
.pf-m-status i {
  display: none;
}

/* Password visibility toggle button */
.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--after--BorderWidth: 0px;

  border-radius: var(--nc-radius-rounded-sm) !important;
  margin-inline-start: 8px;
}

/* Clear blue bar along the bottom of the button */
.pf-v5-c-button.pf-m-control:after {
  border: none !important;
}

.pf-v5-c-button.pf-m-control:hover {
  background-color: #f4f4f5;
  border-radius: var(--nc-radius-rounded-sm) !important;
}

/* SSO login section  */
.pf-v5-c-login__main-footer-band {
  border-block-start: 0;
  padding-right: 40px;
  padding-left: 40px;
  padding-top: 0;
  padding-bottom: 0;
}

.pf-v5-c-login__main-footer-links {
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;
}

.pf-v5-c-login__main-footer-links-item {
  width: 100%;
  padding: 0;
  padding-bottom: 8px;
  margin: 0;
}

.pf-v5-c-login__main-footer-links a {
  display: block !important;
}

.pf-v5-c-login__main-footer-links a svg {
  width: 16px;
  height: 16px;

  vertical-align: middle;
  margin-right: 8px;
}

/* Responsive layout */
@media (min-width: 1200px) {
  .pf-v5-c-login__container {
    height: 100vh !important;
    grid-template-areas: none !important;
    grid-template-columns: 1fr 1fr !important;
    grid-column-gap: 78px;

    padding-inline-end: 0;
    padding-inline-start: 78px;
  }

  .pf-v5-c-login__main {
    align-self: center;
  }

  .nc-left-panel {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

.pf-v5-c-login__container {
  display: grid !important;
}

/* Responsive layout */
@media (max-width: 1200px) {
  .nc-right {
    display: none !important;
  }
}