.l-form {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: var(--td-text-color-primary);
  font-size: var(--td-font-size-body-medium);
  font-family: var(--td-font-family);
  list-style: none;
  font: var(--td-font-body-medium);
}
.l-form:not(.l-form-inline) .l-form__item:last-of-type {
  margin: 0;
}
.l-form__item {
  margin-bottom: 24px;
}
.l-form__item.l-form__item-with-help {
  margin-bottom: 4px;
}
.l-form__item.l-form__item-with-extra {
  margin-bottom: 24px;
}
.l-form__label {
  float: left;
  padding-right: 24px;
  vertical-align: middle;
  line-height: 32px;
  color: var(--td-text-color-primary);
  box-sizing: border-box;
  white-space: nowrap;
}
.l-form__label--top {
  float: none;
  min-height: 32px;
}
.l-form__label--left {
  text-align: left;
}
.l-form__label--right {
  text-align: right;
}
.l-form__label--required label::before {
  display: inline-block;
  margin-right: 4px;
  color: var(--td-error-color);
  line-height: 22px;
  content: '*';
}
.l-form__label--colon label::after {
  content: ':';
  position: relative;
  margin: 0 8px 0 2px;
}
.l-form__controls {
  min-height: 32px;
  display: flow-root;
  position: relative;
}
.l-form__controls-content {
  display: flex;
  align-items: center;
  min-height: 32px;
}
.l-form__controls .l-form__item {
  margin-bottom: 0;
  margin-right: 24px;
}
.l-form__controls.l-is-success .l-form__status .l-icon {
  color: var(--td-success-color);
}
.l-form__controls.l-is-success .l-input__extra {
  color: var(--td-success-color);
}
.l-form__controls.l-form--success-border.l-is-success .l-input__extra {
  color: var(--td-success-color);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-input,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-radio-button,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-cascader,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-textarea__inner {
  border-color: var(--td-success-color);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-input--focused,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select--focused,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-radio-button--focused,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-cascader--focused,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-textarea__inner--focused {
  box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-input .l-icon,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select .l-icon,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-radio-button .l-icon,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-cascader .l-icon,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-textarea__inner .l-icon,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-input .l-fake-arrow,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select .l-fake-arrow,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-radio-button .l-fake-arrow,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-cascader .l-fake-arrow,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-textarea__inner .l-fake-arrow {
  color: var(--td-success-color);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-cascader .l-input,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select .l-input {
  box-shadow: none;
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select > .l-select__right-icon:not(.l-select__right-icon-clear) {
  color: var(--td-success-color);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-textarea__inner.l-is-focused {
  box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-cascader.l-is-active,
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-select.l-is-active {
  box-shadow: 0 0 0 2px var(--td-success-color-focus);
}
.l-form__controls.l-form--success-border.l-is-success .l-form__controls-content .l-form__status .l-icon {
  color: var(--td-success-color);
}
.l-form__status {
  display: flex;
  margin-left: 8px;
}
.l-form__status > .l-icon {
  font-size: 20px;
}
.l-form__status-without-icon {
  width: 25px;
  height: 25px;
}
.l-form__status button {
  width: 32px;
}
.l-form__status button + button {
  margin-left: 8px;
}
.l-form-inline {
  display: flex;
  flex-wrap: wrap;
  row-gap: 16px;
}
.l-form-inline .l-form__item {
  margin: 0;
  min-width: 200px;
  display: inline-block;
  margin-right: 24px;
}
.l-input__extra,
.l-input__help {
  margin: 0;
  width: 100%;
  height: auto;
  min-height: 20px;
  font: var(--td-font-body-small);
  color: var(--td-text-color-placeholder);
}
.l-input__extra {
  position: absolute;
  bottom: -20px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.l-is-warning .l-input__extra {
  color: var(--td-warning-color);
}
.l-is-warning .l-form__controls-content .l-input,
.l-is-warning .l-form__controls-content .l-select,
.l-is-warning .l-form__controls-content .l-radio-button,
.l-is-warning .l-form__controls-content .l-cascader,
.l-is-warning .l-form__controls-content .l-textarea__inner {
  border-color: var(--td-warning-color);
}
.l-is-warning .l-form__controls-content .l-input--focused,
.l-is-warning .l-form__controls-content .l-select--focused,
.l-is-warning .l-form__controls-content .l-radio-button--focused,
.l-is-warning .l-form__controls-content .l-cascader--focused,
.l-is-warning .l-form__controls-content .l-textarea__inner--focused {
  box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.l-is-warning .l-form__controls-content .l-input .l-icon,
.l-is-warning .l-form__controls-content .l-select .l-icon,
.l-is-warning .l-form__controls-content .l-radio-button .l-icon,
.l-is-warning .l-form__controls-content .l-cascader .l-icon,
.l-is-warning .l-form__controls-content .l-textarea__inner .l-icon,
.l-is-warning .l-form__controls-content .l-input .l-fake-arrow,
.l-is-warning .l-form__controls-content .l-select .l-fake-arrow,
.l-is-warning .l-form__controls-content .l-radio-button .l-fake-arrow,
.l-is-warning .l-form__controls-content .l-cascader .l-fake-arrow,
.l-is-warning .l-form__controls-content .l-textarea__inner .l-fake-arrow {
  color: var(--td-warning-color);
}
.l-is-warning .l-form__controls-content .l-cascader .l-input,
.l-is-warning .l-form__controls-content .l-select .l-input {
  box-shadow: none;
}
.l-is-warning .l-form__controls-content .l-select > .l-select__right-icon:not(.l-select__right-icon-clear) {
  color: var(--td-warning-color);
}
.l-is-warning .l-form__controls-content .l-textarea__inner.l-is-focused {
  box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.l-is-warning .l-form__controls-content .l-cascader.l-is-active,
.l-is-warning .l-form__controls-content .l-select.l-is-active {
  box-shadow: 0 0 0 2px var(--td-warning-color-focus);
}
.l-is-warning .l-form__controls-content .l-form__status .l-icon {
  color: var(--td-warning-color);
}
.l-is-error .l-input__extra {
  color: var(--td-error-color);
}
.l-is-error .l-form__controls-content .l-input,
.l-is-error .l-form__controls-content .l-select,
.l-is-error .l-form__controls-content .l-radio-button,
.l-is-error .l-form__controls-content .l-cascader,
.l-is-error .l-form__controls-content .l-textarea__inner {
  border-color: var(--td-error-color);
}
.l-is-error .l-form__controls-content .l-input--focused,
.l-is-error .l-form__controls-content .l-select--focused,
.l-is-error .l-form__controls-content .l-radio-button--focused,
.l-is-error .l-form__controls-content .l-cascader--focused,
.l-is-error .l-form__controls-content .l-textarea__inner--focused {
  box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.l-is-error .l-form__controls-content .l-input .l-icon,
.l-is-error .l-form__controls-content .l-select .l-icon,
.l-is-error .l-form__controls-content .l-radio-button .l-icon,
.l-is-error .l-form__controls-content .l-cascader .l-icon,
.l-is-error .l-form__controls-content .l-textarea__inner .l-icon,
.l-is-error .l-form__controls-content .l-input .l-fake-arrow,
.l-is-error .l-form__controls-content .l-select .l-fake-arrow,
.l-is-error .l-form__controls-content .l-radio-button .l-fake-arrow,
.l-is-error .l-form__controls-content .l-cascader .l-fake-arrow,
.l-is-error .l-form__controls-content .l-textarea__inner .l-fake-arrow {
  color: var(--td-error-color);
}
.l-is-error .l-form__controls-content .l-cascader .l-input,
.l-is-error .l-form__controls-content .l-select .l-input {
  box-shadow: none;
}
.l-is-error .l-form__controls-content .l-select > .l-select__right-icon:not(.l-select__right-icon-clear) {
  color: var(--td-error-color);
}
.l-is-error .l-form__controls-content .l-textarea__inner.l-is-focused {
  box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.l-is-error .l-form__controls-content .l-cascader.l-is-active,
.l-is-error .l-form__controls-content .l-select.l-is-active {
  box-shadow: 0 0 0 2px var(--td-error-color-focus);
}
.l-is-error .l-form__controls-content .l-form__status .l-icon {
  color: var(--td-error-color);
}
