:root {
  --primary-color--100: #ce004f;
  --primary-color--200: #a5003f;
  --background-color: #e2e3e9;
}

.pf-c-form-control {
  transition: all 0.3s ease-in-out;
  --pf-c-form-control--hover--BorderBottomColor: var(--pf-global--BorderColor--300);
  --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--300);
  --pf-global--primary-color--100: var(--primary-color--100);
  --pf-global--primary-color--200: var(--primary-color--200);
  --pf-c-form-control--invalid--BorderBottomWidth: 1px;
  --pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--BorderColor--100);
  --pf-c-form-control--focus--BorderBottomWidth: 1px;
}

.pf-c-button {
  --pf-global--primary-color--100: var(--primary-color--100);
  --pf-global--primary-color--200: var(--primary-color--200);
}

.pf-c-form-control:focus {
  border-color: var(--primary-color--100);
  outline: none;
}

#input-error {
  color: var(--pf-global--danger-color--100);
  display: block;
}

.login-pf {
  background: url(../img/background.png) no-repeat center / cover;
}

.login-pf body {
  background: none;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-pf-page {
  padding-top: 0px;
}

#kc-logo-wrapper {
  height: 100px;
  margin: 0 auto;
  background: url(../img/logo.jpg) no-repeat center / contain;
}

#kc-form-buttons {
  margin-top: 30px;
  display: flex;
}

#kc-form-buttons .btn-lg {
  flex: 1;
  padding-top: 10px;
}

#kc-form-wrapper {
  margin-top: 10px;
}

#kc-content-wrapper {
  margin-top: 20px;
}

#kc-page-title {
  color: var(--pf-global--palette--black-700);
  text-align: left;
  font-weight: 600;
}

.pf-c-form__label-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--pf-global--palette--black-600);
  text-align: center;
  margin-bottom: 10px;
}

.login-pf-settings {
  justify-content: flex-start !important;
}

.login-pf-settings a {
  font-weight: 600;
  outline: none;
  color: var(--primary-color--100);
}

.pf-c-alert {
  max-width: 100%;
  margin-bottom: 20px;
}

#kc-info-wrapper {
  font-size: 13px;
  color: var(--pf-global--palette--black-500);
}

@media (max-width: 767px) {
  :root {
    --background-color: white;
  }

  #kc-content {
    width: 100%;
  }
  .login-pf-page {
    width: 100%;
    padding: 10px 30px;
  }
  .login-pf-page .card-pf {
    box-shadow: none;
  }
}