.login-pf body {
  background: url("../img/keycloak-bg.png") no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  background-image: none;
  background-color: #fff;
}

.btn-primary {
  background-color: #00aeef;
  background-image: linear-gradient(to bottom,#39a5dc 0,#00aeef 100%);
  background-repeat: repeat-x;
  border-color: #00659c;
  color: #fff;
}

.alert-error {
  background-color: #ffffff;
  border-color: #cc0000;
  color: #333333;
}

#kc-locale ul {
  display: none;
  position: absolute;
  background-color: #fff;
  list-style: none;
  right: 0;
  top: 20px;
  min-width: 100px;
  padding: 2px 0;
  border: solid 1px #bbb;
}

#kc-locale:hover ul {
  display: block;
  margin: 0;
}

#kc-locale ul li a {
  display: block;
  padding: 5px 14px;
  color: #000 !important;
  text-decoration: none;
  line-height: 20px;
}

#kc-locale ul li a:hover {
  color: #4d5258;
  background-color: #d4edfa;
}

#kc-locale-dropdown a {
  color: #4d5258;
  background: 0 0;
  padding: 0 15px 0 0;
  font-weight: 300;
}

#kc-locale-dropdown a:hover {
  text-decoration: none;
}

a#kc-current-locale-link {
  display: block;
  padding: 0 5px;
}

a#kc-current-locale-link::after {
  content: "\2c5";
  margin-left: 4px;
}

.login-pf .container {
  padding-top: 40px;
}

.login-pf a:hover {
  color: #0099d3;
}

#kc-logo {
  width: 100%;
}

#kc-login {
  font-size: 16px;
  border-radius: 18px;
  width: 123px;
  height: 36px;
  margin: 0 auto;
  border-color: transparent;
}

#username,
#password {
  border: none;
  border-bottom: 1px solid #7c99bf;
  box-shadow: none;
}

#kc-logo-wrapper {
  background-image: url(../img/keycloak-logo-2.png);
  background-repeat: no-repeat;
  height: 63px;
  width: 300px;
  margin: 62px auto 0;
}

div.kc-logo-text {
  height: 63px;
  width: 300px;
  margin: 0 auto;
}

div.kc-logo-text span {
  display: none;
}

#kc-header {
  color: #ededed;
  overflow: visible;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  margin: 0px 0px 53px 0px;
}

#kc-header:before {
  content: "";
  display: block;
  width: 180px;
  height: 65px;
  background-image: url("data:image/svg+xml,%3Csvg width='58' height='32' viewBox='0 0 58 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M58 26.6753V33.0333L48.0781 24.8175L38.1562 33.0333V26.6753L48.0781 18.4595L58 26.6753Z' fill='%2300AEEF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29 7.61593C30.8371 7.61593 32.3247 6.12838 32.3247 4.2913C32.3247 2.45631 30.835 0.968755 29 0.966675C27.163 0.966675 25.6754 2.45631 25.6754 4.2913C25.6754 6.12838 27.163 7.61593 29 7.61593ZM0 10.847H5.11801V14.3048H5.20747C5.68599 13.2271 6.5161 12.2763 7.6999 11.4524C8.88163 10.6285 10.2818 10.2187 11.8983 10.2187C13.3048 10.2187 14.5073 10.4662 15.5122 10.9593C16.515 11.4524 17.3388 12.1036 17.9817 12.9129C18.6246 13.7222 19.0968 14.648 19.3944 15.6966C19.6939 16.7452 19.8458 17.8229 19.8458 18.9297V32.3988H14.4573V20.4568C14.4573 19.8285 14.4137 19.1689 14.3221 18.4803C14.2327 17.7917 14.0371 17.1717 13.7396 16.6183C13.44 16.0628 13.028 15.6071 12.5058 15.2472C11.9816 14.8873 11.2846 14.7084 10.4191 14.7084C9.54946 14.7084 8.80257 14.8811 8.17426 15.2243C7.54387 15.5697 7.02791 16.0108 6.62429 16.5496C6.22067 17.0885 5.91276 17.7105 5.70471 18.4116C5.49458 19.1169 5.39056 19.8264 5.39056 20.5442V32.3967H0V10.847ZM48.0781 18.4593L51.9166 21.6383L58 16.6014V10.2434L48.0781 18.4593ZM44.2375 21.6383L38.1563 16.6014V10.2434L48.0781 18.4593L44.2375 21.6383ZM31.6942 10.847H26.3057V32.3967H31.6942V10.847Z' fill='%23ED1846'/%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#kc-header-wrapper {
  display: none;
  font-size: 29px;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.2em;
  padding: 62px 10px 20px;
  white-space: normal;
}

#kc-content {
  width: 100%;
}

#kc-info {
  padding-bottom: 200px;
  margin-bottom: -200px;
}

#kc-info-wrapper {
  font-size: 13px;
}

#kc-form-options span {
  display: block;
}

#kc-form-options .checkbox {
  margin-top: 0;
  color: #72767b;
}

#kc-terms-text {
  margin-bottom: 20px;
}

#kc-registration {
  margin-bottom: 15px;
}

/* TOTP */

ol#kc-totp-settings {
  margin: 0;
  padding-left: 20px;
}

ul#kc-totp-supported-apps {
  margin-bottom: 10px;
}

#kc-totp-secret-qr-code {
  max-width: 150px;
  max-height: 150px;
}

#kc-totp-secret-key {
  background-color: #fff;
  color: #333333;
  font-size: 16px;
  padding: 10px 0;
}

/* OAuth */

#kc-oauth h3 {
  margin-top: 0;
}

#kc-oauth ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#kc-oauth ul li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  padding: 10px 0;
}

#kc-oauth ul li:first-of-type {
  border-top: 0;
}

#kc-oauth .kc-role {
  display: inline-block;
  width: 50%;
}

/* Code */
#kc-code textarea {
  width: 100%;
  height: 8em;
}

/* Social */

#kc-social-providers ul {
  padding: 0;
}

#kc-social-providers li {
  display: block;
}

#kc-social-providers li:first-of-type {
  margin-top: 0;
}

.zocial,
a.zocial {
  width: 100%;
  font-weight: normal;
  font-size: 14px;
  text-shadow: none;
  border: 0;
  background: #f5f5f5;
  color: #72767b;
  border-radius: 0;
  white-space: normal;
}
.zocial:before {
  border-right: 0;
  margin-right: 0;
}
.zocial span:before {
  padding: 7px 10px;
  font-size: 14px;
}
.zocial:hover {
  background: #ededed !important;
}

.zocial.facebook,
.zocial.github,
.zocial.google,
.zocial.microsoft,
.zocial.stackoverflow,
.zocial.linkedin,
.zocial.twitter {
  background-image: none;
  border: 0;

  box-shadow: none;
  text-shadow: none;
}

/* Copy of zocial windows classes to be used for microsoft's social provider button */
.zocial.microsoft:before {
  content: "\f15d";
}
.zocial.stackoverflow:before {
  color: inherit;
}

@media (min-width: 768px) {
  #kc-container-wrapper {
    position: absolute;
    width: 100%;
  }

  .login-pf .container {
    padding-right: 80px;
  }

  #kc-locale {
    position: relative;
    text-align: right;
    z-index: 9999;
  }
}

@media (max-width: 767px) {
  .login-pf body {
    background: white;
  }

  #kc-header {
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    text-align: left;
  }

  #kc-header:before {
    width: 160px;
    height: 55px;
  }

  #kc-header-wrapper {
    font-size: 16px;
    font-weight: bold;
    padding: 20px 60px 0 0;
    color: #72767b;
    letter-spacing: 0;
  }

  div.kc-logo-text {
    margin: 0;
    width: 150px;
    height: 32px;
    background-size: 100%;
  }

  #kc-form {
    float: none;
  }

  #kc-info-wrapper {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 15px;
    padding-top: 15px;
    padding-left: 0px;
    padding-right: 15px;
  }

  #kc-social-providers li {
    display: block;
    margin-right: 5px;
  }

  .login-pf .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  #kc-locale {
    position: absolute;
    width: 200px;
    top: 20px;
    right: 20px;
    text-align: right;
    z-index: 9999;
  }

  #kc-logo-wrapper {
    background-size: 100px 21px;
    height: 21px;
    width: 100px;
    margin: 20px 0 0 20px;
  }
}

@media (min-height: 646px) {
  #kc-container-wrapper {
    bottom: 12%;
  }
}

@media (max-height: 645px) {
  #kc-container-wrapper {
    padding-top: 50px;
    top: 20%;
  }
}

.card-pf form.form-actions .btn {
  float: right;
  margin-left: 10px;
}

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

.login-pf-page .login-pf-brand {
  margin-top: 20px;
  max-width: 360px;
  width: 40%;
}

.card-pf {
  background: #fff;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 500px;
  border-top: 0;
  box-shadow: 0px 2px 50px #2196f330;
}

/*tablet*/
@media (max-width: 840px) {
  .login-pf-page .card-pf {
    max-width: none;
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px 20px 30px 20px;
  }
}

.login-pf-page {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0;
}

/*login page card settings*/
.login-pf-page .card-pf {
  padding: 53px 40px 68px;
  max-width: 480px;
  width: 100%;
  height: auto;
}
/**/

@media (max-width: 767px) {
  .login-pf-page .card-pf {
    padding: 40px 35px 55px;
    height: auto;
  }
  .card-pf.login-pf-accounts {
    max-width: none;
  }
}

.login-pf-page .login-pf-signup {
  font-size: 15px;
  color: #72767b;
}
#kc-content-wrapper .row {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 768px) {
  .login-pf-page .login-pf-social-section:first-of-type {
    padding-right: 39px;
    border-right: 1px solid #d1d1d1;
    margin-right: -1px;
  }
  .login-pf-page .login-pf-social-section:last-of-type {
    padding-left: 40px;
  }
  .login-pf-page .login-pf-social-section .login-pf-social-link:last-of-type {
    margin-bottom: 0;
  }
}

.login-pf-page .login-pf-social-link {
  margin-bottom: 25px;
}
.login-pf-page .login-pf-social-link a {
  padding: 2px 0;
}

.login-pf-page.login-pf-page-accounts {
  margin-left: auto;
  margin-right: auto;
}

.login-pf-page .btn-primary {
  margin-top: 0;
}

#kc-form-login div.form-group:last-of-type,
#kc-register-form div.form-group:last-of-type,
#kc-update-profile-form div.form-group:last-of-type {
  margin-bottom: 0px;
}

#kc-form-login .form-group:nth-child(2) {
  padding-top: 40px;
}

#kc-form-login .form-group {
  margin-bottom: 0;
}

#kc-form-login .form-group label {
  font-size: 14px;
  color: #97aac3;
  font-weight: 600;
  margin-bottom: 0;
}

#kc-back {
  margin-top: 5px;
}

form#kc-select-back-form div.login-pf-social-section {
  padding-left: 0px;
  border-left: 0px;
}

/* Social google button */

.kc-social-section {
  text-align: center;
}

.kc-social-section h4 {
  color: #9BA8C1;
  margin: 16px 0px;
  font-size: 14px;
}

.kc-social-links {
  color: #8C9BB5;
}

.pf-c-button {
  align-items: center;
  box-sizing: border-box;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px #50A6E126;
  font-size: 16px;
  display: flex;
  margin: 0 auto;
  width: max-content;
  padding: 5px 15px 5px 15px;
  border: solid 1px #DBDFEC;
}

.pf-c-button:hover {
  text-decoration: none;
  background-color: #F3F3F9;
}

#social-google {
  color: #8C9BB5;
}

.kc-social-provider-logo {
  margin-right: 8px;
}

.cu-google{
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.83 8.17996C15.83 7.65329 15.7833 7.15329 15.7033 6.66663H8.17V9.67329H12.4833C12.29 10.66 11.7233 11.4933 10.8833 12.06V14.06H13.4567C14.9633 12.6666 15.83 10.6133 15.83 8.17996Z' fill='%234285F4'/%3E%3Cpath d='M8.17 15.9999C10.33 15.9999 12.1367 15.2799 13.4567 14.0599L10.8833 12.0599C10.1633 12.5399 9.25 12.8333 8.17 12.8333C6.08333 12.8333 4.31667 11.4266 3.68333 9.52661H1.03V11.5866C2.34333 14.1999 5.04333 15.9999 8.17 15.9999Z' fill='%2334A853'/%3E%3Cpath d='M3.68333 9.52666C3.51666 9.04666 3.43 8.53333 3.43 7.99999C3.43 7.46666 3.52333 6.95333 3.68333 6.47333V4.41333H1.03C0.483331 5.49333 0.169998 6.70666 0.169998 7.99999C0.169998 9.29333 0.483331 10.5067 1.03 11.5867L3.68333 9.52666Z' fill='%23FBBC05'/%3E%3Cpath d='M8.17 3.16667C9.35 3.16667 10.4033 3.57334 11.2367 4.36667L13.5167 2.08667C12.1367 0.793334 10.33 0 8.17 0C5.04333 0 2.34333 1.8 1.03 4.41334L3.68333 6.47334C4.31667 4.57334 6.08333 3.16667 8.17 3.16667Z' fill='%23EA4335'/%3E%3C/svg%3E");
}