.trans__container {
  width: 70vw;
  max-width: 1200px;
}

.trans__content {
  height: 60vh;
}

.custom-wg {
  display: flex;
  align-items: center;

  .caption {
    width: 250px;
    font-size: var(--caption-font-size);
    font-weight: var(--caption-font-weight);
    color: var(--color-gray-222);
  }

  .value {
    max-width: 450px;
    margin-left: 5px;

    ::ng-deep {
      .mat-select-placeholder {
        color: var(--color-text-subtlest);
      }

      .mat-select-value {
        width: auto;
        max-width: none;
      }
    }
  }
}

.examples__container {
  margin-top: 30px;
  margin-bottom: 30px;
  padding: 15px;

  background-color: rgb(225 244 250);
  border: 1px solid var(--color-gray-888);
  border-radius: 2px;
}

.hint {
  padding: 5px 15px;
  background: #ffeae3;
  border: 1px solid #b07676;
}

:host ::ng-deep {
  .inline-edit-wrap .caption {
    width: 250px !important;
  }
}

.field-select {
  flex: 1 0;
}