.field {
  
  display: grid;
  gap: var(--field-spacing-padding-assistive-text);
}.field input,
.field select,
.field textarea {
  width: 100%;
}.field label,
.field input {
  transition: 0.2s all;
  touch-action: manipulation;
}.field__header {
  
  
  display: none;
  
  visibility: hidden;
}.field__header.field__header--show {
  
  display: flex;
  
  visibility: visible;
}.field__outline {
  
  min-width: 0;
  position: relative;
  transition: 0.2s all;
}.field__system-icon {
  
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 var(--field-spacing-padding-horizontal);
}.field__system-icon.right {
  right: 0;
  left: auto;
}.field__label {
  
  position: absolute;
  left: var(--field-spacing-padding-horizontal);
  top: var(--field-spacing-padding-vertical);
  max-width: 66.66%;
  
  font-family: var(--field-default-font-label-body-font-face);
  line-height: var(--field-default-font-label-body-line-height);
  font-size: var(--field-default-font-label-body-font-size);
  text-transform: var(--field-default-font-label-body-text-case);
  letter-spacing: var(--field-default-font-label-body-letter-spacing);
  font-weight: var(--field-default-font-label-body-font-weight);
  -webkit-text-decoration: var(--field-default-font-label-body-text-decoration);
          text-decoration: var(--field-default-font-label-body-text-decoration);
  
  pointer-events: none;
  touch-action: manipulation;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}.field__label.field__label--has-left-icon {
  margin-left: 25px;
}.field__label {
  
  font-family: var(--field-populated-font-label-tiny-font-face);
  line-height: var(--field-populated-font-label-tiny-line-height);
  font-size: var(--field-populated-font-label-tiny-font-size);
  text-transform: var(--field-populated-font-label-tiny-text-case);
  letter-spacing: var(--field-populated-font-label-tiny-letter-spacing);
  font-weight: var(--field-populated-font-label-tiny-font-weight);
  -webkit-text-decoration: var(--field-populated-font-label-tiny-text-decoration);
          text-decoration: var(--field-populated-font-label-tiny-text-decoration);
  
  top: var(--field-populated-spacing-label-tiny-vertical);
  color: var(--field-onlight-default-color-label-body);
}.field__label.field__label--is-empty {
  
  font-family: var(--field-default-font-label-body-font-face);
  line-height: var(--field-default-font-label-body-line-height);
  font-size: var(--field-default-font-label-body-font-size);
  text-transform: var(--field-default-font-label-body-text-case);
  letter-spacing: var(--field-default-font-label-body-letter-spacing);
  font-weight: var(--field-default-font-label-body-font-weight);
  -webkit-text-decoration: var(--field-default-font-label-body-text-decoration);
          text-decoration: var(--field-default-font-label-body-text-decoration);
  
  top: 50%;
  transform: translate(0, -50%);
}.field__label.field__label--ui-focus {
  
  font-family: var(--field-populated-font-label-tiny-font-face);
  line-height: var(--field-populated-font-label-tiny-line-height);
  font-size: var(--field-populated-font-label-tiny-font-size);
  text-transform: var(--field-populated-font-label-tiny-text-case);
  letter-spacing: var(--field-populated-font-label-tiny-letter-spacing);
  font-weight: var(--field-populated-font-label-tiny-font-weight);
  -webkit-text-decoration: var(--field-populated-font-label-tiny-text-decoration);
          text-decoration: var(--field-populated-font-label-tiny-text-decoration);
  
  top: var(--field-populated-spacing-label-tiny-vertical);
  color: var(--field-onlight-default-color-label-body);
  transform: translate(0, 0);
}.field__label {
  
  
  color: var(--field-onlight-default-color-label-body);
}.field__label:hover {
  
  
  color: var(--field-onlight-hover-color-label-body);
}.field__label:disabled {
  
  
  color: var(--field-onlight-disabled-color-label-body);
  pointer-events: none;
}.field__label.field__label--has-error {
  
  
  color: var(--field-onlight-error-color-label-body);
}.field__label.field__label--background-dark {
  
  
  color: var(--field-ondark-default-color-label-body);
}.field__label.field__label--background-dark:hover {
  
  
  color: var(--field-ondark-hover-color-label-body);
}.field__label.field__label--background-dark:disabled {
  
  
  color: var(--field-ondark-disabled-color-label-body);
  pointer-events: none;
}.field__label.field__label--background-dark.field__label--has-error {
  
  
  color: var(--field-ondark-error-color-label-body);
}.field__input {
  
  border: var(--field-border) solid var(--field-onlight-default-color-border);
  border-radius: var(--field-radius-top) var(--field-radius-top) var(--field-radius-bottom) var(--field-radius-bottom);
  outline-offset: var(--field-tabfocus-spacing-padding);
  outline: var(--field-focus-border) solid transparent;
  box-sizing: border-box;
  
  font-family: var(--field-default-font-label-body-font-face);
  line-height: var(--field-default-font-label-body-line-height);
  font-size: var(--field-default-font-label-body-font-size);
  text-transform: var(--field-default-font-label-body-text-case);
  letter-spacing: var(--field-default-font-label-body-letter-spacing);
  font-weight: var(--field-default-font-label-body-font-weight);
  -webkit-text-decoration: var(--field-default-font-label-body-text-decoration);
          text-decoration: var(--field-default-font-label-body-text-decoration);
  
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
  padding: var(--field-spacing-padding-vertical) var(--field-spacing-padding-horizontal);
  background-color: transparent;
}.field__input.field__input--has-left-icon {
  padding-left: calc(var(--field-spacing-padding-horizontal) + 25px);
}.field__input.field__input--has-right-icon {
  padding-right: calc(var(--field-spacing-padding-horizontal) + 25px);
}.field__input:disabled {
  border: 0;
}.field__input::-moz-placeholder {
  opacity: 0;
  -moz-transition: inherit;
  transition: inherit;
}.field__input::placeholder {
  opacity: 0;
  transition: inherit;
}.field__input::input-placeholder {
  opacity: 0;
  transition: inherit;
}.field__input:input-placeholder {
  color: transparent;
  transition: inherit;
}.field__input {
  padding-top: var(--field-populated-spacing-label-body-vertical);
  padding-bottom: var(--field-populated-spacing-padding-vertical);
  height: 56px;
  
  
  background-color: var(--field-onlight-default-color-fill);
  color: var(--field-onlight-default-populated-color-label-body);
  border-color: var(--field-onlight-default-color-border);
}.field__input, .field__input:placeholder {
  color: var(--field-onlight-default-populated-color-label-body);
}.field__input:hover {
  
  
  background-color: var(--field-onlight-hover-color-fill);
  color: var(--field-onlight-hover-populated-color-label-body);
  border-color: var(--field-onlight-hover-color-border);
}.field__input:hover, .field__input:hover:placeholder {
  color: var(--field-onlight-hover-populated-color-label-body);
}.field__input:focus {
  
  
  background-color: var(--field-onlight-focus-color-fill);
  color: var(--field-onlight-focus-populated-color-label-body);
  border-color: var(--field-onlight-focus-color-border);
}.field__input:focus, .field__input:focus:placeholder {
  color: var(--field-onlight-focus-populated-color-label-body);
}.field__input:focus-visible {
  outline: var(--field-focus-border) solid var(--field-onlight-tabfocus-color-border);
  
  background-color: var(--field-onlight-tabfocus-color-fill);
  color: var(--field-onlight-tabfocus-populated-color-label-body);
  border-color: var(--field-onlight-tabfocus-color-border);
}.field__input:focus-visible, .field__input:focus-visible:placeholder {
  color: var(--field-onlight-tabfocus-populated-color-label-body);
}.field__input:disabled {
  
  pointer-events: none;
  
  background-color: var(--field-onlight-disabled-color-fill);
  color: var(--field-onlight-disabled-populated-color-label-body);
  border-color: var(--field-onlight-disabled-color-border);
}.field__input:disabled, .field__input:disabled:placeholder {
  color: var(--field-onlight-disabled-populated-color-label-body);
}.field__input.field__input--has-error {
  
  
  background-color: var(--field-onlight-error-color-fill);
  color: var(--field-onlight-error-populated-color-label-body);
  border-color: var(--field-onlight-error-color-border);
}.field__input.field__input--has-error, .field__input.field__input--has-error:placeholder {
  color: var(--field-onlight-error-populated-color-label-body);
}.field__input.field__input--background-dark {
  
  
  background-color: var(--field-ondark-default-color-fill);
  color: var(--field-ondark-default-populated-color-label-body);
  border-color: var(--field-ondark-default-color-border);
}.field__input.field__input--background-dark, .field__input.field__input--background-dark:placeholder {
  color: var(--field-ondark-default-populated-color-label-body);
}.field__input.field__input--background-dark:hover {
  
  
  background-color: var(--field-ondark-hover-color-fill);
  color: var(--field-ondark-hover-populated-color-label-body);
  border-color: var(--field-ondark-hover-color-border);
}.field__input.field__input--background-dark:hover, .field__input.field__input--background-dark:hover:placeholder {
  color: var(--field-ondark-hover-populated-color-label-body);
}.field__input.field__input--background-dark:focus {
  
  
  background-color: var(--field-ondark-focus-color-fill);
  color: var(--field-ondark-focus-populated-color-label-body);
  border-color: var(--field-ondark-focus-color-border);
}.field__input.field__input--background-dark:focus, .field__input.field__input--background-dark:focus:placeholder {
  color: var(--field-ondark-focus-populated-color-label-body);
}.field__input.field__input--background-dark:focus-visible {
  outline: var(--field-focus-border) solid var(--field-ondark-tabfocus-color-border);
  
  background-color: var(--field-ondark-tabfocus-color-fill);
  color: var(--field-ondark-tabfocus-populated-color-label-body);
  border-color: var(--field-ondark-tabfocus-color-border);
}.field__input.field__input--background-dark:focus-visible, .field__input.field__input--background-dark:focus-visible:placeholder {
  color: var(--field-ondark-tabfocus-populated-color-label-body);
}.field__input.field__input--background-dark:disabled {
  
  pointer-events: none;
  
  background-color: var(--field-ondark-disabled-color-fill);
  color: var(--field-ondark-disabled-populated-color-label-body);
  border-color: var(--field-ondark-disabled-color-border);
}.field__input.field__input--background-dark:disabled, .field__input.field__input--background-dark:disabled:placeholder {
  color: var(--field-ondark-disabled-populated-color-label-body);
}.field__input.field__input--background-dark.field__input--has-error {
  
  
  background-color: var(--field-ondark-error-color-fill);
  color: var(--field-ondark-error-populated-color-label-body);
  border-color: var(--field-ondark-error-color-border);
}.field__input.field__input--background-dark.field__input--has-error, .field__input.field__input--background-dark.field__input--has-error:placeholder {
  color: var(--field-ondark-error-populated-color-label-body);
}.field__password-toggle {
  
  position: absolute;
  right: var(--field-spacing-padding-horizontal);
  top: 50%;
  transform: translateY(-50%);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--password-status-typography-font-face);
  font-weight: var(--password-status-typography-font-weight);
  letter-spacing: var(--password-status-typography-letter-spacing);
  text-transform: var(--password-status-typography-text-case);
  font-size: var(--password-status-typography-font-size);
  
  
  color: var(--password-status-onlight-default-color-text);
  border-color: var(--password-status-onlight-default-color-underline);
}.field__password-toggle:hover {
  
  
  color: var(--password-status-onlight-hover-color-text);
  border-color: var(--password-status-onlight-hover-color-underline);
}.field__password-toggle.field__password-toggle--ui-disabled {
  
  
  color: var(--password-status-onlight-disabled-color-text);
  border-color: var(--password-status-onlight-disabled-color-underline);
  pointer-events: none;
}.field__password-toggle.field__password-toggle--has-error {
  
  
  color: var(--password-status-onlight-color-text);
  border-color: var(--password-status-onlight-color-underline);
}.field__password-toggle.field__password-toggle--background-dark {
  
  
  color: var(--password-status-ondark-default-color-text);
  border-color: var(--password-status-ondark-default-color-underline);
}.field__password-toggle.field__password-toggle--background-dark:hover {
  
  
  color: var(--password-status-ondark-hover-color-text);
  border-color: var(--password-status-ondark-hover-color-underline);
}.field__password-toggle.field__password-toggle--background-dark.field__password-toggle--ui-disabled {
  
  
  color: var(--password-status-ondark-disabled-color-text);
  border-color: var(--password-status-ondark-disabled-color-underline);
  pointer-events: none;
}.field__password-toggle.field__password-toggle--background-dark.field__password-toggle--has-error {
  
  
  color: var(--password-status-ondark-color-text);
  border-color: var(--password-status-ondark-color-underline);
}.field__footer {
  
  
  display: none;
  
  visibility: hidden;
}.field__footer.field__footer--show {
  
  display: flex;
  
  visibility: visible;
}