:root {
  --base-200: #f0f0f0;
  --primary: #d4af37;
  --secondary: #d4af37;
}

.login-pf body {
  background: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-pf-page {
  padding: 0;
  margin-bottom: 100px;
}

#kc-header-wrapper {
  color: var(--primary);
  text-transform: none;
  font-weight: bold;
  letter-spacing: normal;
  font-size: xx-large;
  padding: 0;
}

.card-pf {
  box-shadow: none;
  border-width: 0px;
  border-radius: 20px;
  min-width: 500px;
}

@media (min-width: 1024px) {
  .login-pf body {
    background: url("../img/login-artwork.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: right;
  }

  .login-pf-page {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  .login-pf-page-header {
    margin: 0;
    width: auto;
    position: relative;
    left: 25%;
    transform: translateX(-50%);
  }

  .card-pf {
    margin: 0;
    width: auto;
    position: relative;
    left: 25%;
    transform: translateX(-50%);
  }
}

#kc-page-title {
  font-weight: bold;
  margin-bottom: 40px;
}

.pf-c-form-control {
  background-color: var(--base-200);
  border-radius: 10px;
  border: none;
}

.pf-c-form-control:not(textarea) {
  height: 50px;
}

.pf-c-form__label-text {
  font-weight: normal;
  font-size: medium;
  margin-bottom: 3px;
}

.pf-c-input-group {
  gap: 10px;
}

.pf-c-button.pf-m-control {
  background-color: var(--base-200);
  border-radius: 10px;
  border: none;
}

.pf-c-button::after {
  border: none;
}

.pf-c-button.pf-m-primary {
  background-color: var(--secondary);
  height: 50px;
  font-weight: bold;
  border-radius: 10px;
  padding-left: 30px;
  padding-right: 30px;
}

#kc-form-buttons {
  margin-top: 50px;
}

.btn-default {
  background-color: var(--base-200);
  background-image: none;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  margin-left: 10px;
}