/*
  FTL template styles for the login flow, with overruled classnames via theme.properties.
  https://github.com/keycloak/keycloak/tree/main/themes/src/main/resources/theme/base/login
*/

.aw-header {
  display: none;
}

.aw-login__layout {
  font-size: 14px;
  font-family: IBM Plex Sans, sans-serif;
  font-weight: 500;

  display: flex;
  align-items: start;
  justify-content: center;
  height: 100%;
  padding: 32px;
  background-image: url(../img/background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-y: auto;
}

/*#kc-form-wrapper {*/
.aw-login__form {
  color: var(--aw-color-primary-90);
  display: flex;
  max-width: 500px;
  flex-direction: column;
  justify-content: center;
  padding: 48px 48px;
  margin: auto;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
}

.aw-login__form .pf-c-form-control[type="text"] {
  /* form max width minus 2 * padding */
  width: calc(500px - 2 * 48px);
}

.aw-login-form__header {
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: Objectivity Bold, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  color: #034259;
}

.aw-login-form__header h1 {
  margin: 0 0 28px;
  font-size: 20px;
  color: var(--aw-color-primary-60);
}

.aw-login-form__header::before {
  content: "";
  display: block;
  background-image: url(../svg/nedap-logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  margin-bottom: 3rem;
  width: 108px;
  height: 62px;
}

.aw-login__password-hints {
  margin-bottom: 28px;
}

.aw-login__password-hints li::before {
  content: "";
  -webkit-mask: url("../svg/circle.svg") no-repeat 50% 50%;
  mask: url("../svg/circle.svg") no-repeat 50% 50%;
  -webkit-mask-size: 10px;
  mask-size: 10px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  background-color: var(--aw-color-primary-60);

  margin-right: 6px;
}

.aw-login__password-hints li.--pass {
  color: var(--aw-color-success);
}

.aw-login__password-hints li.--fail {
  color: var(--aw-color-danger);
}

.aw-login__password-hints li.--pass::before {
  -webkit-mask: url("../svg/check.svg") no-repeat 50% 50%;
  mask: url("../svg/check.svg") no-repeat 50% 50%;
  -webkit-mask-size: 12px;
  mask-size: 12px;
  background-color: var(--aw-color-success);
}

.aw-login__password-hints li.--fail::before {
  -webkit-mask: url("../svg/xmark.svg") no-repeat 50% 50%;
  mask: url("../svg/xmark.svg") no-repeat 50% 50%;
  -webkit-mask-size: 12px;
  mask-size: 12px;
  background-color: var(--aw-color-danger);
}

#passwords-do-not-match {
  visibility: hidden;
}
  .--nomatch #passwords-do-not-match {
    visibility: visible;
  }

.aw-form-options {
  text-align: center;
  margin: 16px 0 0;
}

.aw-form-options a {
  color: var(--aw-color-grey-50);
}

.aw-toggle-password {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  right: 7px;
  top: 13px;
  -webkit-mask: url("../svg/eye.svg") no-repeat 50% 50%;
  mask: url("../svg/eye.svg") no-repeat 50% 50%;
  -webkit-mask-size: 20px;
  mask-size: 20px;
  background-color: var(--aw-color-grey-50);
}
  input:focus + .aw-toggle-password {
    background-color: var(--aw-color-primary-50);
  }

  input[aria-invalid="true"] + .aw-toggle-password {
    background-color: var(--aw-color-danger);
  }

  .aw-toggle-password.--active {
    -webkit-mask: url("../svg/eye-slash.svg") no-repeat 50% 50%;
    mask: url("../svg/eye-slash.svg") no-repeat 50% 50%;
  }

.aw-password-strength {
  position: relative;
  display: block;
  margin: 4px 0;
  padding: 0;
}
  .aw-password-strength__label,
  .aw-password-strength__indicator {
    transition: all 0.3s ease-in-out;
    position: absolute;
    left: 0;
    top: 0;
  }

  .aw-password-strength__label {
    color: var(--aw-color-grey-50);
    font-size: 11px;
    top: 4px;
    opacity: 0;
  }
    .form-group:focus-within .aw-password-strength__label {
      opacity: 1;
    }

  .aw-password-strength__indicator {
    list-style: none;
    display: inline-flex;
    margin: 0;
    padding: 0;
    height: 6px;
    width: 0;
    border-radius: 3px;
  }

  .strength-1 .aw-password-strength__indicator { width: 20%; background: var(--aw-color-strength-1); }
  .strength-2 .aw-password-strength__indicator { width: 40%; background: var(--aw-color-strength-2); }
  .strength-3 .aw-password-strength__indicator { width: 60%; background: var(--aw-color-strength-3); }
  .strength-4 .aw-password-strength__indicator { width: 80%; background: var(--aw-color-strength-4); }
  .strength-5 .aw-password-strength__indicator { width: 100%; background: var(--aw-color-strength-5); }

.alert-warning {
  padding: 8px 12px;
  margin-bottom: 1rem;
  box-shadow: 0 1px 5px #00000026, 0 1px 2px #0000000f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pf-c-alert__icon {
  font-size: 1rem;
}

#kc-form-buttons {
  min-height: unset;
}

/* -----------------------------------------------------------------------------
               styling for login-config-totp.ftl / login-otp.ftl
----------------------------------------------------------------------------- */

ol#kc-totp-settings {
  margin-left: 1rem;
}

ol#kc-totp-settings > li {
  padding-left: 0.3rem;
}

ol#kc-totp-settings > li:not(:last-child) {
  margin-bottom: 1rem;
}

ol#kc-totp-settings > li > p:first-child {
  font-weight: 600;
}

ol#kc-totp-settings > li > ul {
  list-style: disc;
  margin-left: 2rem;
}

#kc-totp-secret-qr-code {
  width: calc(246px / 1.2);
  /* center the qr code relative to the page, correcting 20px for the list indent */
  margin: 0 calc((100% - 246px / 1.2 - 20px) / 2);
  display: block;
  border-radius: 12px;
  box-shadow: 0 1px 5px #00000026, 0 1px 2px #0000000f;
}

#kc-totp-secret-qr-code + br + p {
  text-align: center;
  /* center this p relative to the page, correcting 20px for the list indent */
  margin-right: 20px;
}

#kc-totp-secret-key {
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  margin: 10px 0;
}

#kc-totp-settings-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#kc-totp-settings-form > .form-group {
  min-height: unset;
}

#kc-totp-settings-form > .form-group input#totp,
#kc-otp-login-form > .form-group input#otp {
  padding: 6px 16px;
  width: 100%;
  box-shadow: 0 1px 5px #00000026, 0 1px 2px #0000000f;
  text-align: center;
}

#kc-totp-settings-form > .form-group input#totp::placeholder,
#kc-otp-login-form > .form-group input#totp::placeholder {
  color: var(--aw-color-grey-50);
}

.pf-c-button.pf-m-control {
  color: var(--aw-color-primary-50);
}
.hr-with-text {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 28px 0;
  color: var(--aw-color-grey-40);
}
.hr-with-text::before,
.hr-with-text::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--aw-color-grey-40);
}
.hr-with-text::before {
  margin-right: .5em;
}
.hr-with-text::after {
  margin-left: .5em;
}