/*** Allianz One Breakpoints and Mixins ***/
/*** NDBX One Breakpoints and Mixins ***/
.textinput__label {
  display: block;
  width: 100%;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: clip;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight);
  line-height: var(--line-height-xs);
  overflow: hidden;
  color: var(--label-color-resting);
  font-weight: var(--label-group-text-font-weight);
  line-height: var(--label-group-text-line-height);
}

.textinput__label--optional {
  font-weight: var(--font-weight-regular);
}

.has-error .textinput__label--optional {
  color: var(--base-error-color);
}

.has-info .textinput__label--optional {
  color: var(--info);
}

.has-success .textinput__label--optional {
  color: var(--semantic-color-information-attention-green);
}

.textinput__label--bottom {
  color: var(--hint-color-resting);
  margin: var(--text-input-hint-inset-all);
  letter-spacing: var(--hint-text-letter-spacing);
  line-height: var(--hint-text-line-height);
  font-weight: var(--hint-text-font-weight);
  font-size: var(--hint-text-font-size);
}

.has-positive .textinput__label--bottom {
  color: var(--semantic-color-signal-attention-positive);
}

.has-warning .textinput__label--bottom {
  color: var(--semantic-color-signal-attention-warning);
}

.has-critical .textinput__label--bottom {
  color: var(--semantic-color-signal-attention-critical);
}

.textinput__more-info {
  position: absolute;
  right: 0;
  color: var(--input-field-color-resting);
}

.textinput__field {
  background-color: var(--input-field-surface-resting);
  border-radius: 0;
  color: var(--input-field-color-resting);
  font-family: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-xs);
  letter-spacing: var(--input-label-letterspacing);
  height: var(--size-2m);
  width: 100%;
  display: block;
  border: 0;
  box-sizing: border-box;
  padding: var(--size-5xs);
  padding-bottom: var(--size-3xs) -var(--border-xs);
  margin-top: var(--margin-xs);
}

.has-error .textinput__field {
  font-weight: var(--font-weight-bold);
  border-bottom-color: var(--base-error-color);
  color: var(--base-error-color);
}

.has-info .textinput__field {
  border-bottom-color: var(--info);
  color: var(--info);
}

.has-success .textinput__field {
  border-bottom-color: var(--semantic-color-information-attention-green);
  color: var(--semantic-color-information-attention-green);
}

.textinput__field:focus {
  border-color: var(--semantic-color-border-secondary-active);
  outline-offset: 0;
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .textinput__field:focus {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.textinput__static-label {
  padding: 14px 16px 14px 16px;
  border: 1px solid var(--input-field-border-color-resting);
  border-radius: 8px;
  font-size: var(--input-field-text-font-size);
  line-height: var(--input-field-text-line-height);
  height: 52px;
}

.textinput__static-label:disabled {
  border-color: var(--input-field-border-color-disabled);
}

.textinput__static-label.has-error {
  border-color: var(--input-field-border-color-critical);
}

.textinput__field--floating.textinput__static-label ~ .textinput__label {
  font-size: var(--input-field-text-font-size) !important;
  line-height: var(--input-field-text-line-height) !important;
  transform: translate(0px, -12px) !important;
}

.textinput__label--floating {
  pointer-events: none;
  transform: translate(0px, var(--size-s));
  color: inherit;
  letter-spacing: var(--input-label-letterspacing);
}

.textinput__field--floating.is-filled ~ .textinput__label, .textinput__field--floating:not(:placeholder-shown) ~ .textinput__label, .textinput__field--floating.textinput__static-label ~ .textinput__label, .textinput__field--floating:focus ~ .textinput__label {
  text-overflow: ellipsis;
  font-size: var(--font-size-5xs);
  font-weight: var(--font-weight-bold);
  transform: translate(0px, 0px);
  line-height: var(--line-height-4xs);
  letter-spacing: var(--input-label-letterspacing);
}

.textinput__field--floating:focus ~ .textinput__label {
  color: var(--label-color-resting);
}

.has-error .textinput__field--floating:focus ~ .textinput__label {
  color: var(--base-error-color);
}

.has-info .textinput__field--floating:focus ~ .textinput__label {
  color: var(--info);
}

.has-success .textinput__field--floating:focus ~ .textinput__label {
  color: var(--semantic-color-information-attention-green);
}

.textinput__field--floating:focus ~ .textinput__label--bottom {
  color: var(--label-color-resting);
}

.has-error .textinput__field--floating:focus ~ .textinput__label--bottom {
  color: var(--base-error-color);
}

.has-info .textinput__field--floating:focus ~ .textinput__label--bottom {
  color: var(--info);
}

.has-success .textinput__field--floating:focus ~ .textinput__label--bottom {
  color: var(--semantic-color-information-attention-green);
}

.textinput__label--animating {
  transition: transform 0.15s ease-out, font-size 0.15s ease-out, line-height 0.15s ease-out;
}

@keyframes onAutoFillStart {
  /**/
}
.textinput__field:-webkit-autofill {
  animation-name: onAutoFillStart;
  transition: background-color 50000s ease-in-out 0s;
  outline: none;
  -webkit-text-fill-color: var(--input-field-color-resting);
}

.textinput__field:-webkit-autofill::first-line {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: var(--input-label-letterspacing);
}

.textinput__field:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--input-field-color-resting);
}

.textfield {
  position: relative;
  margin-top: var(--size-m);
}

.textfield.no-margin {
  margin-top: 0;
}

.textfield--inverted,
.theme--inverted .textfield {
  text-align: left;
}

.textfield--inverted .textinput__label,
.textfield--inverted .textinput__field,
.theme--inverted .textfield .textinput__label,
.theme--inverted .textfield .textinput__field {
  color: var(--negative);
  border-color: var(--negative);
}

.textfield--inverted .textinput__label.has-error,
.textfield--inverted .textinput__field.has-error,
.theme--inverted .textfield .textinput__label.has-error,
.theme--inverted .textfield .textinput__field.has-error {
  color: var(--base-error-color);
  border-color: var(--input-field-border-color-critical);
}

.textfield--inverted .textinput__label.has-error ~ .textinput__label,
.textfield--inverted .textinput__field.has-error ~ .textinput__label,
.theme--inverted .textfield .textinput__label.has-error ~ .textinput__label,
.theme--inverted .textfield .textinput__field.has-error ~ .textinput__label {
  color: var(--negative);
}

.textfield--inverted .textinput__label.has-error:focus ~ .textinput__label,
.textfield--inverted .textinput__field.has-error:focus ~ .textinput__label,
.theme--inverted .textfield .textinput__label.has-error:focus ~ .textinput__label,
.theme--inverted .textfield .textinput__field.has-error:focus ~ .textinput__label {
  color: var(--base-error-color);
}

.textfield--inverted .textinput__field--floating:focus ~ .textinput__label,
.textfield--inverted .textinput__field:focus ~ .textinput__label--bottom,
.theme--inverted .textfield .textinput__field--floating:focus ~ .textinput__label,
.theme--inverted .textfield .textinput__field:focus ~ .textinput__label--bottom {
  color: var(--negative);
}

.textfield--inverted .textinput__label--bottom,
.theme--inverted .textfield .textinput__label--bottom {
  color: var(--negative);
}

[dir=rtl] .textfield--inverted,
[dir=rtl] .theme--inverted .textfield {
  text-align: right;
}

.textfield.textfield--center {
  text-align: center;
}

.textfield.textfield--center .textinput__field {
  text-align: center;
}

.textfield--prefix-suffix {
  display: block;
}

.textfield--prefix-suffix .textfield__prefix-suffix-division {
  display: flex;
}

.textfield--prefix-suffix .textfield__input-division {
  flex: 1;
}

.textfield--prefix-suffix .textfield__prefix,
.textfield--prefix-suffix .textfield__suffix {
  height: var(--size-2m);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-xs);
  letter-spacing: var(--input-label-letterspacing);
}

.textfield--prefix-suffix .textfield__prefix {
  padding-right: var(--size-2xs);
}

.textfield--prefix-suffix .textfield__suffix {
  padding-left: var(--size-2xs);
}

.textfield--prefix-suffix.is-focus .textfield__prefix,
.textfield--prefix-suffix.is-focus .textfield__suffix {
  transition: color 0.2s ease, outline 0.2s ease;
  border-radius: 4px;
  outline: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  outline-offset: 2px;
}

.theme--inverted .textfield--prefix-suffix.is-focus .textfield__prefix,
.theme--inverted .textfield--prefix-suffix.is-focus .textfield__suffix {
  outline-color: var(--semantic-color-border-focus-inverse);
}

.textfield--prefix-suffix.has-error .textfield__prefix,
.textfield--prefix-suffix.has-error .textfield__suffix {
  color: var(--base-error-color);
  font-weight: var(--font-weight-bold);
}

.textfield--prefix-suffix.has-error:not(.is-focus) .textfield__prefix,
.textfield--prefix-suffix.has-error:not(.is-focus) .textfield__suffix {
  border-color: var(--base-error-color);
}

.textfield--prefix-suffix.has-info .textfield__prefix,
.textfield--prefix-suffix.has-info .textfield__suffix {
  color: var(--info);
}

.textfield--prefix-suffix.has-info:not(.is-focus) .textfield__prefix,
.textfield--prefix-suffix.has-info:not(.is-focus) .textfield__suffix {
  border-color: var(--info);
}

.textfield--prefix-suffix.has-success .textfield__prefix,
.textfield--prefix-suffix.has-success .textfield__suffix {
  color: var(--semantic-color-information-attention-green);
}

.textfield--prefix-suffix.has-success:not(.is-focus) .textfield__prefix,
.textfield--prefix-suffix.has-success:not(.is-focus) .textfield__suffix {
  border-color: var(--semantic-color-information-attention-green);
}

.textfield--prefix-suffix.textfield--inverted .textfield__prefix,
.textfield--prefix-suffix.textfield--inverted .textfield__suffix {
  color: var(--negative);
  border-color: var(--negative);
}

.textfield[disabled] {
  cursor: not-allowed;
}

.textfield[disabled] .textinput__field,
.textfield[disabled] .textfield__prefix,
.textfield[disabled] .textfield__suffix {
  color: var(--input-field-color-disabled);
  pointer-events: none;
}

.textfield[disabled] .textinput__label,
.textfield[disabled] .textinput__label--bottom {
  color: var(--label-color-disabled);
}

.textfield[disabled].textfield--inverted .textinput__field,
.textfield[disabled].textfield--inverted .textfield__prefix,
.textfield[disabled].textfield--inverted .textfield__suffix,
.textfield[disabled].textfield--inverted .textinput__label,
.textfield[disabled].textfield--inverted .textinput__label--bottom {
  color: rgba(var(--negative), 0.5) !important;
}

.textfield[disabled].textfield--inverted .textinput__field,
.textfield[disabled].textfield--inverted .textfield__prefix,
.textfield[disabled].textfield--inverted .textfield__suffix {
  border-bottom-color: rgba(var(--negative), 0.5) !important;
}

input.textinput__field[readonly] {
  border-color: var(--input-field-border-color-readonly);
}

input.textinput__field[readonly] .textinput__field,
input.textinput__field[readonly] .textfield__prefix,
input.textinput__field[readonly] .textfield__suffix {
  color: var(--input-field-color-readonly);
}

one-textfield {
  display: block;
  height: auto;
  min-height: calc(var(--size-2m) + var(--font-size-3xs));
}

.textfield.has-error .textinput__field {
  border-color: var(--input-field-border-color-critical);
}

.textinput__error-message {
  color: var(--semantic-color-signal-attention-critical);
  margin-top: var(--semantic-spacing-static-100);
}

.textinput__error-message::before {
  content: "\e918";
  font-family: "Allianz Icons";
  color: var(--indicator-surface-critical);
  font-size: var(--semantic-text-body-m-font-size);
  margin-right: var(--semantic-spacing-static-100);
  vertical-align: text-bottom;
}