.Row {
  display: flex;
  margin-top: 0;
}
.Row > :not(:first-child) {
  margin-left: var(--sl-spacing-large);
}
.Row > * {
  flex: 1;
}

:host {
  display: block;
}

:host([hidden]) {
  display: none;
}

.Row {
  align-items: center;
}

.RowWrapper, .TableHeadingWrapper {
  display: flex;
  align-items: center;
  padding: var(--sl-spacing-small) 0;
  border-bottom: 1px solid var(--sl-color-gray-300);
  width: 100%;
  justify-content: space-between;
}
.RowWrapper:last-child, .TableHeadingWrapper:last-child {
  border: 0;
}
.RowWrapper > *, .TableHeadingWrapper > * {
  flex: 1;
}
@media screen and (max-width: 500px) {
  .RowWrapper, .TableHeadingWrapper {
    flex-wrap: wrap;
  }
  .RowWrapper > *, .TableHeadingWrapper > * {
    flex: 1 1 50%;
  }
}

.Column {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.Column > :not(:first-child) {
  margin-top: var(--sl-spacing-xx-small);
}
.Column.nogap > :not(:first-child) {
  margin-top: 0;
}

.Text {
  color: var(--sl-color-gray-800);
  font-size: var(--sl-font-size-small);
  line-height: var(--sl-line-height-dense);
}

.Date {
  color: var(--sl-color-gray-500);
  font-size: var(--sl-font-size-x-small);
}

.Subtext {
  display: flex;
  align-items: center;
}
.Subtext > :not(:first-child) {
  margin-left: var(--sl-spacing-xx-small);
}
.Subtext > span {
  margin-top: 2px;
  font-size: var(--sl-font-size-x-small);
  line-height: var(--sl-line-height-dense);
  color: var(--sl-color-gray-500);
}

.IconContainer {
  display: flex;
}
.IconContainer > :not(:first-child) {
  margin-left: var(--sl-spacing-medium);
}

.AvatarContainer {
  display: flex;
  align-items: center;
}
.AvatarContainer > :not(:first-child) {
  margin-left: var(--sl-spacing-medium);
}

.Avatar::part(base) {
  width: 1.7rem;
  height: 1.7rem;
}
.Avatar::part(icon) {
  padding: 5px;
}

.IconStyles {
  font-size: var(--sl-font-size-large);
  min-width: 20px;
}

.PaginationButtons {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}
.PaginationButtons > :not(:first-child) {
  margin-left: 5px;
}

.ListCard {
  position: relative;
  box-sizing: border-box;
  background: var(--sl-color=white);
  width: 100%;
}
@media screen and (max-width: 500px) {
  .ListCard {
    max-width: initial;
  }
}

.RowContainer > :last-child {
  border: 0;
}

.Empty {
  display: inline-block;
  text-align: center;
  width: 100%;
  color: var(--sl-color-gray-600);
  font-size: var(--sl-font-size-small);
}

.TableHeading {
  font-size: var(--sl-font-size-small);
  font-weight: var(--sl-font-weight-semibold);
  color: var(--sl-color-gray-800);
}

.TableHeadingWrapper {
  padding-bottom: 0;
  border: none;
}
@media screen and (max-width: 500px) {
  .TableHeadingWrapper {
    display: none;
  }
}

@media screen and (max-width: 500px) {
  .Reward {
    margin-top: var(--sl-spacing-small);
  }
  .Reward > * {
    padding-left: var(--sl-spacing-xx-large);
  }
}