.content-box-list {
  border-top: 1px solid $color-blue-300;
  padding-top: $margin-double;

  @include breakpoint(sm) {
    .text,
    .customer-rating,
    .content-box-footer {
      margin-left: $margin-triple;
      margin-right: $margin-triple;
    }
  }
}

.content-box {
  @include breakpoint(md) {
    padding: $margin-normal 0 0;
  }

  .rating-score {
    margin-bottom: $margin-half;
    color: $color-grey;
  }

  strong {
    color: $color-link-blue;
    margin-left: $margin-half;
  }

  .text {
    margin-bottom: $margin-normal;
  }

  &:not(:last-child) {
    border-bottom: 1px solid $color-blue-300;
    margin-bottom: $margin-double;
  }
}

.content-box-footer {
  @extend %flexbox-row;
  justify-content: space-between;
  padding-bottom: $margin-triple;

  .byline {
    color: $color-grey;
  }
}

.tui-tip-text {
  @include font-size(16);

  @include breakpoint(sm) {
    @include font-size(18);
  }
}

.tui-tip-quote {
  @include font-size(16);
  margin-bottom: 0;
  font-weight: bold;
  font-style: italic;

  &::before {
    content: '"';
    @include font-size(36);
    margin-right: $margin-normal;
    vertical-align: middle;
  }

  @include breakpoint(sm) {
    @include font-size(24);
    font-weight: normal;

    &::before {
      @include font-size(36);
      font-weight: bold;
      margin-right: $margin-double;
      vertical-align: top;
    }
  }
}

.tui-reported-tip-button {
  display: none;
}

.tui-report-tip-button {
  color: $color-link-blue;
  cursor: pointer;
}

.report-message {
  background: $color-blue-100;
  padding: $margin-normal $margin-double;
}

.sorting-wrapper {
  @extend %flexbox-row;

  span {
    margin-left: auto;
  }
}

.tips-sorting {
  margin-bottom: $margin-double;
}

.tip-sorting {
  @include breakpoint(sm) {
    max-width: 250px;
  }
}