/* Region field */
.ui-form-row {
  flex-wrap: wrap;
  position: relative;
  margin-bottom: 0;
  padding-bottom: var(--kt-ui-field-bottom-height);
}

/* Endregion */
/* Region label */
.ui-form-row .ui-form-label {
  display: flex;
  align-items: center;
  text-wrap: balance;
}

.ui-form-row.ui-form-row-line .ui-form-label {
  width: var(--kt-ui-field-label-width);
}

.ui-form-line > .ui-form-row .ui-form-label,
.ui-form-row-line .ui-form-label {
  margin-right: 0;
  margin-bottom: var(--kt-ui-field-label-offset-mobile);
}

.ui-ctl-label-text {
  margin-left: 0;
  font-size: var(--kt-ui-field-label-font-size);
  color: var(--kt-ui-field-label-color);
}

.ui-form-label-asterisk {
  line-height: 17px;
  color: var(--kt-ui-field-asterisk-color);
}

/* Endregion */
/* Region content */
.ui-form-row.ui-form-row-line .ui-form-content {
  width: auto;
}

/* Endregion */
/* Region bottom */
.ui-form-field-bottom {
  line-height: var(--kt-ui-field-bottom-height);
  position: absolute;
  bottom: 0;
  left: 0;
}

.ui-form-row.ui-form-row-line .ui-form-field-bottom {
  left: calc(var(--kt-ui-field-label-width) + var(--kt-ui-field-label-offset));
}

/* Endregion */
/* Region error */
.ui-form-field-error {
  font-size: var(--kt-ui-field-error-font-size);
  font-weight: var(--kt-ui-field-error-font-weight);
  color: var(--kt-ui-field-error-color);
}

.ui-form-field-error.--error-text-with-icon {
  position: relative;
  box-sizing: border-box;
  padding-left: 24px;
}

.ui-form-field-error.--error-text-with-icon::before {
  content: "";
  width: var(--kt-ui-control-error-icon-size);
  height: var(--kt-ui-control-error-icon-size);
  position: absolute;
  top: 50%;
  left: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  -webkit-mask: var(--kt-ui-control-error-icon) no-repeat 50% 50%;
          mask: var(--kt-ui-control-error-icon) no-repeat 50% 50%;
  -webkit-mask-size: var(--kt-ui-control-error-icon-size);
          mask-size: var(--kt-ui-control-error-icon-size);
  background-color: var(--kt-ui-control-error-icon-color);
}

/* Endregion */
@container kt-ui-form (min-width: 576px) {
  .ui-form-row {
    flex-wrap: nowrap;
  }
  .ui-form-line > .ui-form-row .ui-form-label,
  .ui-form-row-line .ui-form-label {
    margin-right: var(--kt-ui-field-label-offset);
    margin-bottom: 0;
  }
}