:root {
  --primary-color: #2A4E5C;
  --secondary-color: #FF6600;
}

a {
  color: var(--primary-color);
}

.required {
  color: var(--secondary-color);
}

.login-pf body {
  background-image: none!important;
}

@media (max-width: 1024px) {
  .login-pf body .login-pf-page {
    background: #22222e;
    background: linear-gradient(90deg, rgba(34, 34, 46, 1) 0%, rgba(43, 76, 93, 1) 100%);
  }
}

.login-pf body .pf-c-form-control,
.login-pf body .pf-c-form-control:focus {
  border: 1px solid #CCC;
  border-radius: 6px;
  padding: 16px;
  height: auto;
}

.login-pf body .pf-c-form-control:focus,
.login-pf body .pf-c-form-control:focus-visible {
  border-color: var(--secondary-color);
  outline: none;
}

.login-pf body .pf-c-button.pf-m-primary {
  background-color: var(--primary-color);
  border-radius: 20px;
  font-size: 25px;
}

.login-pf body .login-pf-page {
  display: grid;
  height: 100%;
  align-items: center;
  justify-content: start;
  grid-template-rows: 1fr;
  grid-template-columns: min-content;
  grid-template-areas:
    "aside login"
}

@media (max-width: 1024px) {
  .login-pf body .login-pf-page {
    justify-content: center;
  }
}

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

#kc-header-wrapper {
  grid-area: aside;
  min-width: 800px;
  width: 100%;
}

@media (max-width: 1400px) {
  #kc-header-wrapper {
    min-width: 600px;
  }
}

div.card-pf {
  grid-area: login;
  width: 100%;
}

#kc-header {
  height: 100%;
  display: block;
  margin: 0;
}

@media (max-width: 1024px) {
  #kc-header {
    display: none;
  }
}

#kc-header-wrapper {
  background: url('../img//bg-roxy-login.png') no-repeat;
  height: 100%;
  background-size: cover;
  margin: 0;
  padding: 0;
  border-radius: 0 10% 10% 0;
}

.kc-logo-img span {
  display: none;
}

.login-pf-page .card-pf {
  position: relative;
  margin-left: 50px;
  box-shadow: none;
  padding: 0;
  justify-items: start;
  border: none;
  font-size: 16px;
  max-width: 420px;
  width: 100%;
}

@media (max-width: 1024px) {
  .login-pf-page .card-pf {
    margin-left: 0;
    padding: 80px 40px 40px 40px;
  }
}

@media (max-width: 480px) {
  .login-pf-page .card-pf {
    width: 90%;
    left: 5%;
  }
}

.login-pf-page .card-pf::before {
  content: '';
  background: url('../img/logo-roxy.svg') no-repeat;
  height: 50px;
  width: 200px;
  display: block;
  position: absolute;
  top: -15%;
}

@media (max-width: 1024px) {
  .login-pf-page .card-pf::before {
    top: 5%;
    left: 40px;
  }
}

#kc-info-wrapper {
  background-color: transparent;
}