.wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.logs {
  display: flex;
  flex-direction: column;

  .log {
    display: flex;
    flex-direction: column;
    background-color: rgb(0 0 0 / 1%);

    &:nth-child(2n + 1) .head {
      background-color: rgb(0 0 0 / 5%);
    }

    &:first-child .head {
      background-color: transparent;
      border-bottom: 1px solid #ddd;
    }

    &.flagged .head {
      background-color: rgb(255, 169, 169);
    }

    .head {
      display: grid;
      grid-template-columns: 0.5fr repeat(2, 1fr) 0.25fr;

      span {
        padding: 8px;
      }

      &.header {
        span {
          font-weight: bold;
        }
      }
    }

    .detail {
      display: grid;
      row-gap: 0.5rem;
      padding: 8px;
      background-color: rgb(0 0 0 / 2%);

      button {
        padding: 0 8px;
      }
    }
  }
}