:root{
    --backgroundColor:#111827;
    --formColor:#1F2937;
    --textPrimary:#F9FAFB;
    --primary:#60A5FA;
    --error:#F87171;

}

#kc-header-wrapper::before{
    content: " ";
}

.pf-c-form-control[aria-invalid=true]{
    --pf-c-form-control--BorderBottomColor: var(--error) !important;
}

.login-pf body {
  background: var(--backgroundColor);
  background-size: cover;
  height: 100%;
   color: var(--textPrimary);
}

#kc-header-wrapper {
  background-image: url(../img/logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  height: 100px;
  width: auto;
  margin: 0 auto;
}

.login-pf {
  background: var(--backgroundColor);
}

a{
    color: #34D399;
}

input[type="checkbox"] {
accent-color: var(--primary) !important;
}

.card-pf {
  margin: 0 auto;
  max-width: 500px;
  background: var(--formColor);
  color: var(--textPrimary);
}

.pf-m-primary {
    background-color: var(--primary) !important;
}

.pf-c-button.pf-m-control:focus {
    --pf-c-button--m-control--after--BorderBottomColor:  var(--primary) !important;
}

.pf-c-form__helper-text.pf-m-error{
    --pf-c-form__helper-text--Color :var(--error)
}

@media (max-width: 767px) {
  .login-pf-page .card-pf {
    margin-left: 10px;
    margin-right: 15px;
    padding-top: 0;
    border-top: 0;
    box-shadow: 0 0;
  }}