swissdata-login {
  background: var(--aurelia-ux--swissdata-login-background, var(--aurelia-ux--design-primary));
  color: var(--aurelia-ux--swissdata-login-foreground, var(--aurelia-ux--design-primary-foreground));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

swissdata-login .swissdata-login-step {
  padding: 20px;
  min-width: 320px;
}

swissdata-login .swissdata-login-step h2 {
  text-align: center;
  color: var(--aurelia-ux--swissdata-login-foreground, var(--aurelia-ux--design-primary-foreground));
}

swissdata-login .ux-login-alternate-section {
  margin: 40px 0;
}

swissdata-login ux-spinner-line {
  margin-top: 10px;
  margin-bottom: 0;
  min-height: 3px;
}

swissdata-login form {
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  max-width: 500px;
  margin: 0 auto;
}

swissdata-login p {
  text-align: center;
  width: 100%;
}

swissdata-login a {
  cursor: pointer;
  padding: 10px;
}

swissdata-login .form-info {
  margin-top: 20px;
  margin-bottom: 20px;
}

swissdata-login form .input-container {
  background-color: var(--aurelia-ux--swissdata-login-input-background, var(--aurelia-ux--design-primary-dark));
  color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
  border: var(--aurelia-ux--swissdata-login-input-border, none);
  border-radius: var(--aurelia-ux--swissdata-login-input-border-radius, 0);
  width: 100%;
  margin: 5px 0;
  text-align: left;
  display: flex;
  align-content: center;
  align-items: center;
  padding: 5px;
}

swissdata-login .input-top-info {
  font-size: 0.7rem;
  margin-top: 5px;
}

swissdata-login .input-bottom-info {
  font-size: 0.9rem;
  margin-bottom: 5px;
}

swissdata-login .input-bottom-info .error-text {
  color: var(--ux-swatch--red-p200);
}

swissdata-login form input {
  background-color: transparent;
  color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
  border: none;
  border-radius: 0;
  padding: 5px 5px 5px 5px;
  width: 100%;
  text-align: left;
}

swissdata-login form ux-icon {
  border-right: 1px solid var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
  min-width: 33px;
  margin-right: 8px;
}

swissdata-login ux-button {
  margin-top: 15px;
  width: 100%;
}
swissdata-login ux-button > button.raised,
swissdata-login ux-button > button.ux-button--raised {
  background-color: var(--aurelia-ux--swissdata-login-button-background, var(--aurelia-ux--design-primary-foreground))!important;
  color: var(--aurelia-ux--swissdata-login-button-foreground, var(--aurelia-ux--design-primary))!important;
  justify-content: center;
}

swissdata-login ux-button > button.outline,
swissdata-login ux-button > button.ux-button--outline {
  border-color: var(--aurelia-ux--swissdata-login-button-background, var(--aurelia-ux--design-primary-foreground))!important;
  color: var(--aurelia-ux--swissdata-login-button-background, var(--aurelia-ux--design-primary-foreground))!important;
  justify-content: center;
}


swissdata-login ux-button .ux-button--disabled {
  opacity: 0.5;
}

swissdata-login ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
  opacity: 0.6;
}

swissdata-login ::-moz-placeholder { /* Mozilla Firefox 19+ */
 color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
 opacity: 0.6;
}
swissdata-login :-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
 opacity: 0.6;
}
swissdata-login ::-ms-input-placeholder { /* Microsoft Edge */
 color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
 opacity: 0.6;
}

swissdata-login ::placeholder { /* Most modern browsers support this now. */
 color: var(--aurelia-ux--swissdata-login-input-foreground, var(--aurelia-ux--design-primary-dark-foreground));
 opacity: 0.6;
}

swissdata-login .login-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

swissdata-login .login-buttons > span {
  font-size: 80%;
  cursor: pointer;
}

swissdata-login .login-buttons > span:hover {
  text-decoration: underline;
}

swissdata-login #double-auth-validation-code,
swissdata-login #double-auth-validation-code::placeholder {
  letter-spacing: 2.6px;
  text-align: center;
}