.fieldInput {
  padding-right: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  &:focus {
    border-color: #ccc;
  }
}

.errorMessage {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;

  &.show {
    opacity: 1;
  }
}

.validField {
  div input {
    border-style: solid;
    border-color: #28c081;

    &:focus {
      border-style: solid;
      border-color: #28c081;
    }
  }

  div svg {
    &:nth-of-type(1) {
      visibility: visible;
    }
  }
}

.closeIcon {
  position: absolute;
}

.invalidField {
  div input {
    border-style: solid;
    border-color: #ec9081;

    &:focus {
      border-style: solid;
      border-color: #ec9081;
    }
  }
  div svg {
    &:last-child {
      visibility: visible;
    }
  }
}

.break {
  word-break: break-all;
}