.logsString {
  display: flex;
  vertical-align: middle;
  align-items: flex-start;
  position: relative;
  gap: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
  font-family: $mono-font;
  font-size: $main-font-s;

  @include for-mobile {
    display: block;
    line-height: 1.5;

    .message {
      // float: left;
      display: flex;
      flex-direction: column;
    }
  }

  @include for-tablet {
    display: block;
    line-height: 1.5;

    .message {
      // float: left;
      display: flex;
      flex-direction: column;
    }
  }

  .onlogs,
  .meta {
    color: $active-color;
  }

  .status {
    vertical-align: middle;
    // margin-right: 12px;
    min-width: 68px;
    line-height: 130%;
    cursor: pointer;
    & :hover {
      transform: scale(1.02);
    }

    span {
      font-size: 18px;
      line-height: 50%;
    }

    &.chosenStatus {
      background-color: $active-transparent-color;
      border-radius: 6px;
    }
  }

  .time {
    width: 84px;
    min-width: 101px;
    margin-right: 8px;
    text-align: center;
    display: flex;
    @include for-tablet {
      margin: 0;
      width: 150px;
      // display: table-cell;
      position: absolute;
      left: 80px;
      top: 4px;
      justify-content: start;
      flex-direction: row-reverse;
    }
    @include for-mobile {
      margin: 0;
      width: 150px;
      // display: table-cell;
      position: absolute;
      left: 80px;
      top: 4px;
      justify-content: start;
      flex-direction: row-reverse;
    }
  }

  .shareLinkButtonThumb {
    margin-left: 4px;
    opacity: 0;
    cursor: pointer;
    @include for-tablet {
      margin: 0 4px 0 0;
    }
  }

  &:after {
    content: "";
    width: 100%;
    position: absolute;
    bottom: 0;

    z-index: 1;
  }
  .hidden {
    opacity: 0;
  }
  &:last-child {
    border-top: solid 1px $lines-color;
  }
  &.new {
    background-color: #4492db2c;
  }

  .log-Json {
    position: absolute;
    left: 12px;
    font-size: $main-font-xl;
    cursor: pointer;
  }
  pre {
    white-space: pre-wrap;
    word-break: break-all;
  }
}

.logsString:hover {
  .shareLinkButtonThumb {
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }
  }
}

.emptyLogsString {
  border-top: none !important;
}

.number {
  color: #f99157;
}

.string {
  color: #be998a;
}

.key {
  color: #6e1963;
}
