.mle-input-component {
  --inactive-color: rgba(0, 0, 0, 0.5);
  --active-color: rgba(0, 0, 0, 1);
  position: relative;
  padding-top: 20px;
}

.mle-input-component label {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
}

.mle-input-component label textarea {
  text-transform: inherit;
  font-family: inherit;
}

.mle-input-component label input,
.mle-input-component label textarea,
.mle-input-component select {
  background: none;
  border: none;
  border-bottom: 1px solid var(--inactive-color);
  padding: 10px;
  width: 100%;
  font-size: 14px;
}

.mle-input-component select {
  padding-left: 7px;
}

.mle-input-component label input:focus,
.mle-input-component label textarea:focus {
  border-color: var(--active-color);
  outline: 0;
}

.mle-input-component label .proper-label {
  position: absolute;
  pointer-events: none;
  font-size: 14px;
  padding: 10px;
  color: var(--inactive-color);
  transition: 0.2s all ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.mle-input-component label input:not(:placeholder-shown)~.proper-label,
.mle-input-component label textarea:not(:placeholder-shown)~.proper-label,
.mle-input-component label select~.proper-label {
  top: 0px;
  font-size: 12px;
  color: var(--active-color)
}

.mle-input-component .field-error {
  font-size: 11px;
  margin-top: 5px;
  color: red;
}

.mle-input-component .field-comment {
  font-size: 13px;
  margin-top: 5px;
  color: #fe8b24;
}