:root {
  /* COLORS */
  --kyp-color-primary-200: #b8ccff;
  --kyp-color-primary-300: #8da9ff;
  --kyp-color-primary-700: #211af3;
  --kyp-color-primary-800: #1310c3;
  --kyp-color-primary-900: #171898;
  --kyp-color-primary: var(--kyp-color-primary-700);
  --kyp-color-primary-rgb: 33, 26, 243;
  --kyp-color-secondary-300: #9db8a5;
  --kyp-color-secondary-800: #3d5e4a;
  --kyp-color-secondary-900: #25372d;
  --kyp-color-secondary: var(--kyp-color-secondary-900);
  --kyp-color-secondary-rgb: 37, 55, 45;
  --kyp-color-tertiary-50: #f0f2ff;
  --kyp-color-tertiary-200: #c7cbf1;
  --kyp-color-tertiary-300: #b5b9ec;
  --kyp-color-tertiary: var(--kyp-color-tertiary-50);
  --kyp-color-tertiary-rgb: 240, 242, 255;
  --kyp-color-neutral-50: #fff;
  --kyp-color-neutral-500: #6d6d6d;
  --kyp-color-accent-200: #c7cbf1;
  --kyp-color-accent-300: #b5b9ec;
  --kyp-color-accent: var(--kyp-color-accent-200);
  --kyp-color-accent-rgb: 199, 203, 241;
  --kyp-color-cta-200: #ffcda8;
  --kyp-color-cta-300: #ffa971;
  --kyp-color-cta-400: #ff7a38;
  --kyp-color-cta-500: #fe5611;
  --kyp-color-cta-600: #ef3b07;
  --kyp-color-cta: var(--kyp-color-cta-400);
  --kyp-color-cta-rgb: 255, 122, 56;
  --kyp-color-grey-50: #f0f2ff;
  --kyp-color-error-100: #ffe1e1;
  --kyp-color-error-600: #f00;
  --kyp-color-error-700: #d70000;
  --kyp-color-error: var(--kyp-color-error-600);
  --kyp-color-error-rgb: 255, 0, 0;
  --kyp-font-color-base: var(--kyp-color-secondary);
  --kyp-font-color-primary: var(--kyp-color-primary);
  --kyp-font-color-light: var(--kyp-color-tertiary);
  /* UTILITIES */
  --kyp-color-cta-button-disabled: var(--kyp-color-cta-200);
  --kyp-font-family-headings: "Aeonik", arial, sans-serif;
  --kyp-font-family-body: "SpaceGrotesk", arial, sans-serif;
  --kyp-font-family-button: "SpaceGrotesk", arial, sans-serif;
  --kyp-subtle-box-shadow: 0px 8px 20px 0px rgb(0 0 0 / 15%);
  --kyp-font-size-head1: 3rem;
  --kyp-font-size-head2: 2rem;
  --kyp-font-size-button-1: 1rem;
  --kyp-font-size-button-2: 0.875rem;
  --kyp-font-size-body1: 1rem;
  --kyp-font-size-body2: 0.875rem;
  --kyp-transition: 0.2s ease-in-out;
  --icon-base-color: currentcolor;
  --icon-primary-color: currentcolor;
  --icon-secondary-color: currentcolor;
  --icon-tertiary-color: currentcolor;
}

:root {
  --kyp-button-background-color: var(--kyp-color-primary-700);
  --kyp-button-color: var(--kyp-color-tertiary-50);
}

:root {
  --kyp-space-xs: 0.25rem;
  --kyp-space-sm: 0.5rem;
  --kyp-space-md: 1rem;
  --kyp-space-lg: 1.5rem;
  --kyp-space-xl: 2rem;
  --kyp-space-2xl: 2.5rem;
  --kyp-space-3xl: 3rem;
  --kyp-space-4xl: 3.5rem;
  --kyp-space-5xl: 4rem;
  --kyp-border-radius-sm: 0.25rem;
  --kyp-border-radius-md: 0.5rem;
  --kyp-border-radius-lg: 0.75rem;
  --kyp-border-radius-xl: 1rem;
}

@font-face {
  font-family: Aeonik;
  src: local("Aeonik-Regular"), local("Aeonik Regular"), url("../fonts/Aeonik/Aeonik-Regular.woff2") format("woff2"), url("../fonts/Aeonik/Aeonik-Regular.woff") format("woff"), url("../fonts/Aeonik/Aeonik-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: Aeonik;
  src: local("Aeonik-Bold"), local("Aeonik Bold"), url("../fonts/Aeonik/Aeonik-Bold.woff2") format("woff2"), url("../fonts/Aeonik/Aeonik-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: Aeonik;
  src: local("Aeonik-Black"), local("Aeonik Black"), url("../fonts/Aeonik/Aeonik-Black.woff2") format("woff2"), url("../fonts/Aeonik/Aeonik-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: SpaceGrotesk;
  src: local("SpaceGrotesk-Regular"), local("SpaceGrotesk Regular"), url("../fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: SpaceGrotesk;
  src: local("SpaceGrotesk-Bold"), local("SpaceGrotesk Bold"), url("../fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: SpaceGrotesk;
  src: local("SpaceGrotesk-Light"), local("SpaceGrotesk Light"), url("../fonts/SpaceGrotesk/SpaceGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: SpaceGrotesk;
  src: local("SpaceGrotesk-Medium"), local("SpaceGrotesk Medium"), url("../fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
@font-face {
  font-family: SpaceGrotesk;
  src: local("SpaceGrotesk-SemiBold"), local("SpaceGrotesk SemiBold"), url("../fonts/SpaceGrotesk/SpaceGrotesk-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF; /* Latin glyphs */
}
:root {
  --kyp-form-input-bg: var(--kyp-color-tertiary-50);
  --kyp-form-input-color: var(--kyp-color-secondary-900);
  --kyp-form-input-outline: none;
  --kyp-form-input-padding-h: var(--kyp-space-md);
  --kyp-form-input-padding-v: 0.75rem;
  --kyp-form-input-border-radius: var(--kyp-border-radius-sm);
  --kyp-form-input-font-size: var(--kyp-font-size-body1);
  --kyp-form-input-line-height: 1.5rem;
  --kyp-form-input-font-family: var(--kyp-font-family-body);
  --kyp-form-header-line-height: 2rem;
  --font-size-l: 2rem;
  --kyp-button-gap: var(--kyp-space-sm);
  --kyp-button-height: 2rem;
  --kyp-button-outline: none;
  --kyp-button-padding: var(--kyp-space-sm) var(--kyp-space-md);
  --kyp-button-box-shadow: none;
  --kyp-button-outline-offset: 0;
  --font-size-m: 1rem;
}

body {
  background: #f0f2ff !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

label {
  font-size: var(--font-size-s);
  font-family: var(--kyp-font-family-body);
  font-weight: 700;
  font-variant-numeric: slashed-zero;
  line-height: var(--font-line-height-xs);
  color: var(--kyp-color-secondary-900);
}

.kc-logo-text {
  display: none;
}

.login-pf-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}

#kc-page-title {
  color: var(--kyp-color-primary-700);
  font-size: var(--font-size-l) !important;
  font-family: var(--kyp-font-family-headings), serif;
  font-weight: 900 !important;
  margin-bottom: 4rem;
  margin-top: 0;
}

#kc-form-login {
  margin: 0 auto;
  width: 20.5rem;
  box-sizing: border-box;
  flex-shrink: 0;
  background: white;
  border-radius: var(--kyp-border-radius-xl);
  text-align: center;
  padding: var(--kyp-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--kyp-space-md);
  justify-content: space-between;
}

[data-password-toggle] {
  background: var(--kyp-color-tertiary-50) !important;
  border-radius: var(--kyp-form-input-border-radius);
  box-shadow: none !important;
  --pf-c-button--after--BorderColor: var(--kyp-color-tertiary-50) !important;
}

.alert-error {
  display: none !important;
}

.pf-c-form-control {
  border: 1px solid var(--kyp-form-input-border-color);
  height: auto;
  color: var(--kyp-form-input-color);
  font-size: var(--font-size-s);
  font-family: var(--kyp-font-family-body);
  font-weight: 400;
  font-variant-numeric: slashed-zero;
  line-height: var(--font-line-height-xs);
  padding: var(--kyp-form-input-padding-v) var(--kyp-form-input-padding-h);
  border-radius: var(--kyp-form-input-border-radius);
  background-color: var(--kyp-form-input-bg);
  box-shadow: none !important;
  box-sizing: border-box;
  transition: background 0.2s ease;
  outline-offset: var(--kyp-form-input-outline-offset);
  outline: var(--kyp-form-input-outline);
  caret-color: var(--kyp-color-primary-700);
  height: 3rem !important;
  font-size: 1rem;
  font-family: var(--kyp-font-family-body), serif;
  font-weight: 500;
  padding-block: 0 !important;
  line-height: 1.5rem;
  border-color: transparent;
  color: var(--kyp-form-input-color);
}
.pf-c-form-control:hover:not(:disabled) {
  --kyp-form-input-border-color: var(--kyp-color-primary-300);
  cursor: pointer;
}
.pf-c-form-control:active:not(:disabled) {
  --kyp-form-input-border-color: var(--kyp-color-primary-700);
}
.pf-c-form-control:focus:not(:disabled) {
  --kyp-form-input-border-color: var(--kyp-color-primary-700);
  --kyp-form-input-outline: 2px solid var(--kyp-color-primary-200);
}
.pf-c-form-control:invalid:not(.pf-c-form-control:active, .pf-c-form-control:focus), .pf-c-form-control.error {
  --kyp-form-input-border-color: var(--kyp-color-error-600);
  --kyp-form-input-color: var(--kyp-color-error-700);
}
.pf-c-form-control::placeholder {
  color: var(--kyp-color-tertiary-300) !important;
}
.pf-c-form-control:disabled {
  user-select: none;
  --kyp-form-input-bg: var(--kyp-color-tertiary-50);
  --kyp-form-input-color: var(--kyp-color-tertiary-300);
  --kyp-form-input-border-color: var(--kyp-color-tertiary-300);
}
.pf-c-form-control::placeholder {
  color: var(--kyp-color-secondary);
  font-weight: 400;
}
.pf-c-form-control:focus {
  border: 2px solid var(--kyp-color-primary-700) !important;
  color: var(--kyp-color-primary-700);
}
.pf-c-form-control input:focus {
  color: var(--kyp-color-primary-700) !important;
}
.pf-c-form-control input:invalid {
  border: 2px solid red;
  color: red;
}

#kc-login {
  height: 3rem !important;
  text-transform: uppercase;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kyp-button-gap);
  padding: var(--kyp-button-padding);
  background-color: var(--kyp-button-background-color);
  border: var(--kyp-button-border);
  border-radius: var(--kyp-border-radius-sm);
  color: var(--kyp-button-color);
  line-height: 1rem;
  outline: var(--kyp-button-outline);
  outline-offset: var(--kyp-button-outline-offset);
  box-shadow: var(--kyp-button-box-shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-size: var(--font-size-s);
  font-family: var(--kyp-font-family-body);
  font-weight: 700;
  font-variant-numeric: slashed-zero;
  --kyp-button-background-color: var(--kyp-color-cta);
  --kyp-button-color: var(--kyp-color-neutral-50);
  font-size: var(--font-size-m);
  font-family: SpaceGrotesk, sans-serif;
  font-weight: 300;
}
#kc-login:disabled {
  --kyp-button-background-color: var(--kyp-color-tertiary-50);
  --kyp-button-color: var(--kyp-color-accent-300);
  cursor: not-allowed;
}
#kc-login:not(:disabled):focus {
  --kyp-button-outline: 2px solid var(--kyp-color-primary-200);
}
#kc-login:not(:disabled):hover {
  --kyp-button-background-color: var(--kyp-color-primary-800);
  cursor: pointer;
}
#kc-login:not(:disabled):active {
  --kyp-button-background-color: var(--kyp-color-primary-900);
  --kyp-button-outline: none;
}
#kc-login:disabled {
  --kyp-button-background-color: var(--kyp-color-cta-300);
}
#kc-login:not(:disabled):focus {
  --kyp-button-outline: 2px solid rgb(var(--kyp-color-cta-rgb), 0.2);
}
#kc-login:not(:disabled):hover {
  --kyp-button-background-color: var(--kyp-color-cta-500);
  --kyp-button-color: white;
}
#kc-login:not(:disabled):active {
  --kyp-button-outline: none;
  --kyp-button-background-color: var(--kyp-color-cta-600);
}
#kc-login:disabled {
  color: var(--kyp-color-tertiary-50);
  background: var(--kyp-color-cta-300);
}

#maincontainer {
  min-width: unset;
}

#rebrandedLogin {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kyp-color-tertiary-50);
}

#rebrandedLogin .project-form {
  z-index: 1;
}

.error-message {
  color: red !important;
  font-size: 14px;
  font-family: var(--kyp-font-family-body), sans-serif;
  font-weight: 300;
  line-height: 1rem;
}

.invalid-form {
  color: red;
  --kyp-form-input-outline: 2px solid red !important;
}

.card-pf {
  background: transparent;
  margin: 0 auto;
  box-shadow: none;
}

.login-btn {
  width: 100%;
  margin-top: 1.5rem;
}

.form-horizontal .form-group {
  margin: 0;
}

.kyp-logo {
  margin-bottom: 1rem;
}

#kc-current-locale-link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kyp-button-gap);
  height: var(--kyp-button-height);
  padding: var(--kyp-button-padding);
  background-color: var(--kyp-button-background-color);
  border: var(--kyp-button-border);
  border-radius: var(--kyp-border-radius-sm);
  color: var(--kyp-button-color);
  line-height: 1rem;
  outline: var(--kyp-button-outline);
  outline-offset: var(--kyp-button-outline-offset);
  box-shadow: var(--kyp-button-box-shadow);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-size: var(--font-size-s);
  font-family: var(--kyp-font-family-body);
  font-weight: 700;
  font-variant-numeric: slashed-zero;
}
#kc-current-locale-link:disabled {
  --kyp-button-background-color: var(--kyp-color-tertiary-50);
  --kyp-button-color: var(--kyp-color-accent-300);
  cursor: not-allowed;
}
#kc-current-locale-link:not(:disabled):focus {
  --kyp-button-outline: 2px solid var(--kyp-color-primary-200);
}
#kc-current-locale-link:not(:disabled):hover {
  --kyp-button-background-color: var(--kyp-color-primary-800);
  cursor: pointer;
}
#kc-current-locale-link:not(:disabled):active {
  --kyp-button-background-color: var(--kyp-color-primary-900);
  --kyp-button-outline: none;
}

.pf-c-dropdown__menu-item {
  box-sizing: border-box;
  padding: var(--kyp-space-sm);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 6rem;
  white-space: nowrap;
  height: var(--kyp-space-xl);
  font-family: var(--kyp-font-family-body), serif;
  font-size: 14px;
}

.pf-c-dropdown__menu-item:focus {
  border: none;
  outline: none;
  background: var(--kyp-color-tertiary-50);
}

#language-switch1 {
  display: none;
  position: absolute;
  padding: var(--kyp-space-sm);
  top: 38px;
  right: 0;
  background: white;
  border-radius: var(--kyp-border-radius-sm);
  width: fit-content;
  z-index: 5000;
  box-shadow: 0px 7.143px 17.857px 0px rgba(0, 0, 0, 0.15);
}

.input-color {
  --kyp-form-input-color:var(--kyp-color-secondary-900);
}


.top-nav {
  --header-horizontal-padding: var(--kyp-space-md);
  --header-height: 2.375rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--kyp-color-primary);
  height: var(--header-height);
  padding: 0 var(--header-horizontal-padding);
  width: 100%;
}

.plan-logo {
  height: 1rem;
}

.kc-lang {
  position: relative;
  display: inline-flex;
}

.local-item {
  &:hover {
    border: none;
    outline: none;
    background: var(--kyp-color-tertiary-50);
    color: var(--kyp-color-primary-800);
    font-weight: 900 !important;

    .pf-c-dropdown__menu-item {
      font-weight: 700;
    }


  }
}

/* Toggle button */
.kc-lang-btn {
  --font-size-s: 1rem;

  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kyp-button-gap);
  height: var(--kyp-button-height);
  padding: var(--kyp-button-padding);

  background-color: var(--kyp-button-background-color);
  border: var(--kyp-button-border);
  border-radius: var(--kyp-border-radius-sm);
  box-shadow: var(--kyp-button-box-shadow);

  color: var(--kyp-button-color);
  font-size: var(--font-size-s);
  font-family: var(--kyp-font-family-headings), sans-serif !important;
  font-weight: 700;
  font-variant-numeric: slashed-zero;
  line-height: 1rem;

  cursor: pointer;
  outline: var(--kyp-button-outline);
  outline-offset: var(--kyp-button-outline-offset);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Active / selected state */
.kc-lang-btn:active,
.kc-lang-btn.selected {

  color: var(--kyp-color-primary);
  font-weight: 700;
}


.kc-locale-selected {
  background-color: rgba(255, 255, 255, 0.1);
}

.kc-locale-selected-link {
  display: flex;
  font-weight: 600;
  cursor: default;




  .pf-c-dropdown__menu-item {

    font-weight: 700;
    color: var(--kyp-color-primary-900) !important;
  }
}


.kc-locale-selected-link:hover {
  text-decoration: none;
  cursor: pointer;
  color: var(--kyp-color-primary-900);
  .pf-c-dropdown__menu-item {
    font-weight: 700;
    color: var(--kyp-color-secondary) !important;
  }
}


.pf-c-dropdown__menu-item:hover {
  font-weight: 700;
  color: var(--kyp-color-secondary) !important;
  letter-spacing: 0px;

}

.margin-item-left {
  padding-left: 2.15rem;
}

.hidden {
  /*visibility: hidden;*/
  display: none;
}

.login-pf-page-header {
  display: none;
}

.alert-success  {
  display: none !important;
}