/* @override
	http://extranet.swissqprint.com/de/css/login.css?v=2
	http://extranet.swissqprint.com/css/login.css?v=2
	https://dev.extranet.swissqprint.com/css/login.css?v=2
*/

@import url('../assets/admin/css/font-awesome.min.css');

html {
  color: #525252;
  font: var(--font-size--default) / 26px var(--font-family--default);
}

.flipbox-container {
  max-width: 450px;
  margin: var(--spacing--50) auto;
}

.register,
.forgot-password {
  display: none;
}

[id='login-wrapper'] {
  overflow: hidden;
  background-color: var(--color-primary--1) !important;
  box-shadow: 0 0 var(--spacing--10) rgb(80, 80, 80, 0.6);
  padding: var(--spacing--30) var(--spacing--50);

  header img {
    display: block;
    margin-block: var(--spacing--20) var(--spacing--80);
    margin-inline: auto;
    max-width: 130px;
  }

  h1 {
    color: var(--color-grayscale--1000);
    font: var(--font-weight--light) var(--font-size--h1)/40px var(--font-family--default);
    text-align: center;
  }

  h2 {
    color: var(--color-grayscale--1000);
    font: 18px/24px var(--font-family--default);
    margin-bottom: var(--spacing--20);
  }

  p {
    margin-bottom: 0;
    color: var(--color-grayscale--1000);
    letter-spacing: 0.03em;

    strong {
      font-weight: var(--font-weight--normal);
    }
  }

  a,
  a:hover {
    text-decoration: none;
    color: var(--color-grayscale--1000);
  }

  fieldset {
    margin-top: var(--spacing--20);
  }

  legend {
    all: unset;
    font: var(--font-weight--semi-bold) var(--font-size--default) / 25px var(--font-family--default);
    color: var(--color-grayscale--1000);
  }

  .title p {
    text-align: center;
    margin-block: var(--spacing--20) var(--spacing--20);
  }

  p.error {
    color: var(--color-grayscale--1000);
    margin-bottom: var(--spacing--20);
    text-align: center;
  }

  .title {
    min-height: 110px;
  }

  .loginForm {
    margin-bottom: var(--spacing--50);
  }
}


.clearfix {
  clear: both;
}

.displaynone {
  display: none !important;
}

.left {
  float: left;
}

.right {
  float: right;
}

.login-form-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing--10);
  font-weight: var(--font-weight--normal);
  letter-spacing: 1px;
  padding: 0;
}

label {
  font: var(--font-weight--semi-bold) var(--font-size--default) / 25px var(--font-family--default);
  color: var(--color-grayscale--1000);
  display: block;
  margin-block: var(--spacing--20) var(--spacing--10);

  &.error {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing--10);
    text-wrap: balance;
    padding: var(--spacing--10) 0;
    border-block: 1px solid var(--color-grayscale--1000);

    &::before {
      content: '⚠️';
    }
  }
}

input.textfield {
  color: var(--color-grayscale--100);
  font: var(--font-weight--light) var(--font-size--default) var(--font-family--default);
  background-color: var(--color-grayscale--1000);
  min-height: 50px;
  width: 100%;
  padding-left: var(--spacing--20);
  border-radius: 2px;
  border: none;
  margin-top: var(--spacing--10);
}

input.textfield::placeholder {
  color: var(--color-grayscale--500);
}

.usergroup-select {
  margin-bottom: 0;
}

.serialnumber-input {
  display: none;
  margin-bottom: 0;
}

small.form-text {
  color: white;
  display: block;
  padding: var(--spacing--5) 0;
}

.btn-sqp-grey {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: var(--spacing--5) var(--spacing--20);
  margin-block: var(--spacing--20);
  font: var(--font-weight--light) var(--font-size--default) var(--font-family--default);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 0 solid var(--color-grayscale--200);
  border-radius: 2px;
  user-select: none;
  color: var(--color-grayscale--1000);
  background-color: var(--color-grayscale--200);
}

.register__form {
  fieldset {
    margin-bottom: var(--spacing--40);
  }

  .accept-privacy-label {
    padding-top: 0;
    padding-left: 8px;
    font: var(--font-weight--normal) var(--font-size--default)/23px var(--font-family--default);
    display: inline-block;
    vertical-align: top;
    width: 90%;
    margin-top: -1px;
  }

  .accept-privacy-label a {
    padding-bottom: 2px;
    border-bottom: 1px solid var(--color-grayscale--1000);
  }

  .accept-privacy-label a:hover {
    opacity: .75;
  }

  .btn-sqp-grey {
    margin-top: var(--spacing--10);

    &:disabled {
      color: var(--color-grayscale--500) !important;
    }
  }
}

.password-reset__field-wrapper,
.register__field-wrapper.register__field-wrapper--password {
  display: flex;
  flex-wrap: wrap; /* required when displaying error messages */

  .error {
    flex: 1 1 100%;
  }

  input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1 0;

    &::-ms-reveal { /* Hide native Edge reveal toggle */
      display: none;
    }
  }
}

.password-reset__password-reveal,
.register__password-reveal {
  all: unset;
  margin-top: var(--spacing--10);
  border-radius: 0 2px 2px 0;
  background-color: var(--color-grayscale--1000);
  padding: var(--spacing--10);
  cursor: pointer;
  font-size: var(--font-size--icon-button);
  color: var(--color-grayscale--800);
  transition: color var(--transition-duration--200);

  :is([type='text']) ~ &,
  &:hover {
    color: var(--color-grayscale--250);
  }

  &:focus {
    outline: revert;
  }
}

.btn-sqp-grey:hover,
.btn-sqp-grey:focus,
.btn-sqp-grey:active,
.btn-sqp-grey.active {
  color: var(--color-grayscale--900) !important;
  background-color: var(--color-grayscale--200);
  border-color: var(--color-grayscale--200);
}

.btn-sqp-grey.disabled,
.btn-sqp-grey[disabled],
fieldset[disabled] .btn-sqp-grey,
.btn-sqp-grey.disabled:hover,
.btn-sqp-grey[disabled]:hover,
fieldset[disabled] .btn-sqp-grey:hover,
.btn-sqp-grey.disabled:focus,
.btn-sqp-grey[disabled]:focus,
fieldset[disabled] .btn-sqp-grey:focus,
.btn-sqp-grey.disabled:active,
.btn-sqp-grey[disabled]:active,
fieldset[disabled] .btn-sqp-grey:active,
.btn-sqp-grey.disabled.active,
.btn-sqp-grey[disabled].active,
fieldset[disabled] .btn-sqp-grey.active {
  background-color: var(--color-grayscale--200);
  border-color: var(--color-grayscale--200);
}