:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-30: #f4f4ff;
  --color-blue-40: #f0efff;
  --color-blue-50: #eae9ff;
  --color-blue-100: #cbc8ff;
  --color-blue-200: #a6a4ff;
  --color-blue-300: #7f7eff;
  --color-blue-400: #615eff;
  --color-blue-500: #433bfb;
  --color-blue-600: #3f30ee;
  --color-blue-700: #3622e1;
  --color-blue-800: #2e0ad7;
  --color-blue-900: #2800bd;
  --color-dark-blue-30: #f7f8fc;
  --color-dark-blue-40: #eff0f5;
  --color-dark-blue-50: #e6e7ef;
  --color-dark-blue-100: #c0c3d9;
  --color-dark-blue-200: #989dbf;
  --color-dark-blue-300: #989dbf;
  --color-dark-blue-400: #565c94;
  --color-dark-blue-500: #3b4283;
  --color-dark-blue-600: #353b7b;
  --color-dark-blue-700: #2d3270;
  --color-dark-blue-800: #262963;
  --color-dark-blue-900: #1a194d;
  --color-dark-blue-1000: #0a0a23;
  --color-grey-30: #fcfcfd;
  --color-grey-40: #fafafc;
  --color-grey-50: #f8f8fa;
  --color-grey-100: #e8e8ed;
  --color-grey-200: #d9d9e0;
  --color-grey-300: #afafc1;
  --color-grey-400: #8b8ba0;
  --color-grey-500: #717189;
  --color-grey-600: #595971;
  --color-grey-700: #494961;
  --color-grey-800: #35354a;
  --color-grey-900: #252536;
  --color-orange-50: #fae9e8;
  --color-orange-100: #fecbbf;
  --color-orange-200: #fea996;
  --color-orange-300: #fe866c;
  --color-orange-400: #ff6a4d;
  --color-orange-500: #ff4f31;
  --color-orange-600: #f4492d;
  --color-orange-700: #e64228;
  --color-orange-800: #d83c24;
  --color-orange-900: #bf2f1b;
  --color-green-30: #f4fcfd;
  --color-green-40: #f0fcfd;
  --color-green-50: #dcf6f8;
  --color-green-100: #a7e9ec;
  --color-green-200: #67dae1;
  --color-green-300: #00cbd6;
  --color-green-400: #00c0cd;
  --color-green-500: #00b5c7;
  --color-green-600: #00a5b5;
  --color-green-700: #00909b;
  --color-green-800: #007c84;
  --color-green-900: #005959;
  --color-red-30: #fff4f6;
  --color-red-40: #ffeff2;
  --color-red-50: #ffe4e8;
  --color-red-100: #ffbac6;
  --color-red-200: #ff8da1;
  --color-red-300: #ff5e7b;
  --color-red-400: #fb395f;
  --color-red-500: #f51a46;
  --color-red-600: #e51145;
  --color-red-700: #d00543;
  --color-red-800: #bc0042;
  --color-red-900: #99003f;
  --color-yellow-50: #fdf8e1;
  --color-yellow-100: #fbecb3;
  --color-yellow-200: #f9e081;
  --color-yellow-300: #f8d54e;
  --color-yellow-400: #f7ca26;
  --color-yellow-500: #f6c000;
  --color-yellow-600: #f6b300;
  --color-yellow-700: #f7a000;
  --color-yellow-800: #f79000;
  --color-yellow-900: #f77100;
  --color-overlay-background: rgba(26 25 77 / 50%);
  --box-shadow: 0 2px 4px rgba(26 25 77 / 12%);
  --box-shadow-left: -2px 0 10px rgba(26 25 77 / 12%);
  --box-shadow-right: 2px 0 10px rgba(26 25 77 / 12%);
  --box-shadow-raised: 0 10px 19px rgba(26 25 77 / 16%);
  --box-shadow-popup: 0 0 22px rgba(26 25 77 / 12%);
  --box-shadow-sidebar: 0 2px 4px rgba(26 25 77 / 5%);
  --box-shadow-inset: inset 0 1.5px 3px rgba(26 25 77 / 12%);

  --font-size-sm: 0.75rem;
  --font-size-md: 0.8125rem;
  --font-size-lg: 0.875rem;
  --font-size-xl: 1rem;

  --color-text: var(--color-dark-blue-900);

  --spacing-xs: 3px;
  --spacing-sm: 5px;
  --spacing-md: 10px;
  --spacing-lg: 15px;
  --spacing-xl: 20px;
  --spacing-2xl: 40px;
  --spacing-page-bottom-cloud: 88px;
  --spacing-intercom: 88px;

  --font-sans-serif: Inter, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans-serif);
  color: var(--color-text);
  background-color: var(--color-grey-40);
  accent-color: var(--color-blue-400);
}

input {
  font-family: var(--font-sans-serif);
}

#kc-header,
#kc-page-title {
  display: none;
}

.ab-login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-bottom: 20vh;
}

.ab-login-page a:link,
.ab-login-page a:visited {
  color: var(--color-grey-400);
}

.ab-alert {
  max-width: 410px;
  margin-block: var(--spacing-xl);
  background: var(--color-yellow-100);
  font-size: var(--font-size-lg);
  padding: var(--spacing-lg);
  border-radius: 6px;
  line-height: 1.5;
}

.ab-form-card {
  background: var(--color-white) url(../img/airbyte-logo.svg);
  background-repeat: no-repeat;
  background-position: center 60px;
  box-shadow: var(--box-shadow);
  border-radius: 10px;
  padding: 150px 20px 20px;
  width: 410px;
}

.ab-form-group {
  display: block;
}

.ab-form-group {
  margin-top: var(--spacing-xl);
}

.ab-form-group:first-child {
  margin-top: 0;
}

.ab-form-group label {
  display: block;
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
}

.ab-input {
  outline: none;
  width: 100%;
  padding: 7px 8px;
  font-size: var(--font-size-lg);
  background: var(--color-grey-50);
  border: 1px solid var(--color-grey-50);
  color: var(--color-text);
  border-radius: 4px;
}

.ab-input[aria-invalid='true'] {
  border: 1px solid var(--color-red-100);
}

.ab-input:hover {
  border: 1px solid var(--color-grey-100);
}

.ab-input[aria-invalid='true']:hover {
  border: 1px solid var(--color-red-300);
}

.ab-input:focus {
  border: 1px solid var(--color-blue-400);
}

.ab-input__error-message {
  color: var(--color-red-400);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-sm);
}

#kc-form-buttons {
  display: flex;
  align-items: flex-end;
}

#kc-form-buttons input[type='submit'] {
  font-size: var(--font-size-xl);
  outline: none;
  border: none;
  width: auto;
  color: var(--color-white);
  background-color: var(--color-blue-400);
  padding: 10px 14px;
  border-radius: 6px;
  transition: background-color 0.2s ease-in;
  cursor: pointer;
  margin-left: auto;
}

#kc-form #kc-login:hover {
  background-color: var(--color-blue-500);
  transition: background-color 0.2s ease-in;
}

#kc-social-providers hr {
  margin: var(--spacing-xl) 0;
  border-top: 1px solid var(--color-grey-100);
  color: var(--color-grey-100);
}

#kc-social-providers h4 {
  text-align: center;
  font-size: var(--font-size-lg);
  font-weight: 400;
  margin: var(--spacing-lg);
}

#kc-social-providers ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin: 0;
  padding: 0;
}

#kc-social-providers ul li {
  list-style: none;
}

#kc-social-providers ul a {
  display: block;
  padding: 10px 14px;
  text-align: center;
  border-radius: 8px;
  border: 1px solid var(--color-grey-300);
  font-size: var(--font-size-xl);
  font-weight: 400;
  text-decoration: none;
  color: var(--color-text);
}

[data-password-toggle] {
  display: none;
}