.fg-fade-truncated-text-container {
  position: relative;

  display: flex;
}

.fg-fade-truncated-text-container:after {
  position: absolute;
  top: 0;

  width: 40px;
  height: 100%;

  content: "";
  pointer-events: none;
}

.fg-fade-truncated-text-container.light-colored-fade:after {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .6) 37%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 1) 100%);
}

.fg-fade-truncated-text-container.dark-colored-fade:after {
  background-image: linear-gradient(to right, rgba(45, 47, 49, 0) 30%, rgba(45, 47, 49, .6) 37%, rgba(45, 47, 49, .9) 50%, rgba(45, 47, 49, 1) 100%);
}

.fg-fade-truncated-text,
.fg-fade-truncated-additional-text {
  display: inline-block;
  overflow: hidden;

  font-family: 'AzoSans-Regular';
  text-overflow: clip;
  white-space: nowrap;
}

.fg-fade-truncated-text--clickable {
  cursor: pointer;
}

.fg-fade-truncated-text--overflow-shown {
  overflow: visible;
}

.fg-fade-truncated-additional-text {
  margin-left: 5px;
}