@import url("https://fonts.googleapis.com/css?family=Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic");
@import url("https://fonts.googleapis.com/css?family=Inter:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic");

:root {
  --pel-body-body1-font-size: 0.8125rem;
  
  --pel-color-text-primary: #161B2D;
  --pel-color-text-secondary: #454958;
  --pel-color-text-tertiary: #6C717C;
  --pel-color-text-neutral-400: #8B909B;
  --pel-color-primary-500: #2063F0;
  --pel-color-primary-600: #174CCE;
  --pel-color-error-dark-600: #C41743;

  --pf-global--danger-color--100: var(--pel-color-error-dark-600);
  --pf-global--danger-color--200: var(--pel-color-error-dark-600);
}

input:focus {
  outline: none;
}

::-ms-reveal {
  display: none;
}

.pf-c-form-control {
  --pf-c-form-control--FontSize: var(--pf-global--FontSize--xs);
  --pf-c-form-control--Height: 2.5rem;
}

.pf-c-form-control[aria-invalid=true] {
  background-image: url("../img/error-icon.svg");
}

.pf-c-form__label {
  --pf-c-form__label-text--FontWeight: 700;
  --pf-c-form__label--LineHeight: 140%;
}

.login-pf-page .pf-m-primary {
  --pf-c-button--m-primary--BackgroundColor: var(--pel-color-primary-500);
  border-radius: 4px;
  padding: .75rem 1.5rem;
}

.login-pf body {
  font-family: "Inter", Helvetica, Arial, sans-serif;
  background: url("../img/background-image.png") no-repeat scroll center center / cover;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login-pf-page {
  background-color: white;
  width: 36rem;
  padding: 5rem 5rem 2rem;
  position: relative;
}

.login-pf-page #kc-locale {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1rem;
}

.login-pf-page .card-pf {
  /* base overwrites */
  padding: 0;
  margin: 0;
  box-shadow: none;
  border: none;
  max-width: initial;
}

.login-pf-page .login-pf-page-header {
  height: 6rem;
  background-image: url("data:image/svg+xml,%3Csvg width='79' height='46' viewBox='0 0 79 46' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.5054 12.4994H75.4119C78.1658 12.4994 79.3341 15.2199 77.4148 16.911L46.8717 41.7628C37.9424 48.9683 23.5888 43.4539 23.5888 32.7926V12.4994H23.5054Z' fill='%2331C7AD'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23.5054 32.0573C35.7727 31.9838 45.7868 23.3077 46.0372 12.4994H23.5054V32.0573Z' fill='%23005161'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.55902 12.4994C1.47416 12.4994 1.30726 12.4994 0.639648 12.4994V10.0731C0.639648 4.48509 5.81362 0 12.1559 0C18.4147 0 23.5887 4.48509 23.5887 10.0731V12.4994H2.55902Z' fill='%23195060'/%3E%3C/svg%3E");
  background-position: top center;
  background-repeat: no-repeat;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0 auto 2rem;
}

#kc-header-wrapper {
  /* Welcome to Pelico */

  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 130%;
  letter-spacing: -1px;
  color: var(--pel-color-text-primary);

  padding: 0;
  text-transform: initial;
}

.login-pf-page #kc-page-title {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-align: initial;
  line-height: 1.5rem;
  margin: 0;
  color: var(--pel-color-text-secondary);
}

.login-pf-page .pf-c-form-control {
  font-weight: 500;
  border: 1px solid var(--pel-color-text-neutral-400);
  border-radius: 2px;
}

.login-pf-page #password, .login-pf-page #password-new, .login-pf-page #password-confirm {
  border-radius: 2px 0px 0px 2px;
  border: 1px solid var(--pel-color-text-neutral-400);
  border-right: none;
}

.login-pf-page .pf-c-button.pf-m-control {
  /* show password button */
  --pf-c-button--m-control--BackgroundColor: white;
  border-radius: 0px 2px 2px 0px;
  border: 1px solid var(--pel-color-text-neutral-400);
  border-left: none;
}

.login-pf-page .pf-c-button.pf-m-control:after {
  border: none;
}

.login-pf-page .checkbox label {
  font-size: var(--pel-body-body1-font-size);
  font-weight: 500;
}

.login-pf-page a {
  font-size: var(--pel-body-body1-font-size);
  color: var(--pel-color-primary-600);
  font-weight: 500;
}

.login-pf-page .pf-c-button.pf-m-primary {
  font-size: var(--pel-body-body1-font-size);
  border: 1px solid var(--pel-color-primary-600);
}

.login-pf-page .card-pf p {
  font-size: var(--pel-body-body1-font-size);
  font-weight: 500;
}

.login-pf-page .pf-c-alert__title {
  max-width: 24rem;
}

.login-pf-page #kc-info {
  margin: 2rem -5rem -2rem;
}
