.table-content {
  width: 100%;
  table-layout: fixed;
}

.table-content tr td {
  background-color: #fff;
  border-left: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: middle;
}

.table-content tr td:last-child {
  border-right: none;
}

.table-content tr {
  width: clamp(0px, calc(900 / var(--container-width-desktop) * 100vw), 900px);
}

.table-content tr:first-child {
  border-top: 1px solid rgba(0, 0, 0, 1);
}

.table-content .first-column {
  width: clamp(0px, calc(104 / var(--container-width-desktop) * 100vw), 104px);
  height: clamp(0px, calc(56 / var(--container-width-desktop) * 100vw), 56px);
  vertical-align: middle;
  text-align: center;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: clamp(14px, calc(16 / var(--container-width-desktop) * 100vw), 16px);
  background: #fff4f7;
  padding-left: clamp(0px, calc(40 / var(--container-width-desktop) * 100vw), 40px);
}

.table-content .second-column {
  width: clamp(0px, calc(623 / var(--container-width-desktop) * 100vw), 623px);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  height: clamp(0px, calc(56 / var(--container-width-desktop) * 100vw), 56px);
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: clamp(14px, calc(16 / var(--container-width-desktop) * 100vw), 16px);
  background: #fff4f7;
  padding-left: clamp(0px, calc(40 / var(--container-width-desktop) * 100vw), 40px);
  padding-right: clamp(0px, calc(40 / var(--container-width-desktop) * 100vw), 40px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.table-content .third-column {
  width: clamp(0px, calc(173 / var(--container-width-desktop) * 100vw), 173px);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  height: clamp(0px, calc(56 / var(--container-width-desktop) * 100vw), 56px);
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: 600;
  font-size: clamp(14px, calc(16 / var(--container-width-desktop) * 100vw), 16px);
  background: #fff4f7;
  padding-left: clamp(0px, calc(40 / var(--container-width-desktop) * 100vw), 40px);
  padding-right: clamp(0px, calc(40 / var(--container-width-desktop) * 100vw), 40px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.no-data {
  text-align: center;
  padding: calc(40 / var(--container-width-desktop) * 100vw)
    calc(20 / var(--container-width-desktop) * 100vw);
  font-size: calc(28 / var(--container-width-desktop) * 100vw);
  color: #666;
}

.table-content th.second-column,
.table-content th.third-column {
  text-align: center;
}

.table-content td.first-column,
.table-content td.second-column,
.table-content td.third-column {
  background: #fff;
  font-weight: 400;
  cursor: pointer;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(4px, calc(8 / var(--container-width-desktop) * 100vw), 8px);
  margin-top: clamp(0px, calc(40 / var(--container-width-desktop) * 100vw), 40px);
}

.pagination-button,
.pagination-number {
  background: none;
  border: none;
  cursor: pointer;
  font-size: clamp(14px, calc(16 / var(--container-width-desktop) * 100vw), 16px);
  color: #000;
  padding: clamp(4px, calc(8 / var(--container-width-desktop) * 100vw), 8px)
    clamp(8px, calc(12 / var(--container-width-desktop) * 100vw), 12px);
  transition: color 0.2s;
}

.pagination-button:hover,
.pagination-number:hover {
  color: #d26b86;
}

.pagination-number.active {
  background-color: #fff4f7;
  color: #d26b86;
  border-radius: 2px;
  border: 1px solid #d26b86;
}

.pagination-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.pagination-button i {
  font-size: clamp(21px, calc(24 / var(--container-width-desktop) * 100vw), 24px);
}

@media (max-width: 750px) {
  .table-content tr {
    width: calc(670 / var(--container-width-tablet) * 100vw);
  }

  .table-content tr {
    width: calc(640 / var(--container-width-tablet) * 100vw);
  }

  .table-content tr:first-child {
    border-top: 1px solid rgba(0, 0, 0, 1);
  }

  .table-content .first-column {
    width: 20%;
    height: calc(92 / var(--container-width-tablet) * 100vw);
    font-size: calc(28 / var(--container-width-tablet) * 100vw);
    text-align: center;
    padding: calc(40 / var(--container-width-tablet) * 100vw)
      calc(20 / var(--container-width-tablet) * 100vw);
  }

  .table-content .second-column {
    width: calc(393 / var(--container-width-tablet) * 100vw);
    height: calc(132 / var(--container-width-tablet) * 100vw);
    font-size: calc(28 / var(--container-width-tablet) * 100vw);
    padding: calc(40 / var(--container-width-tablet) * 100vw)
      calc(20 / var(--container-width-tablet) * 100vw);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .table-content .third-column {
    width: calc(185 / var(--container-width-tablet) * 100vw);
    height: calc(132 / var(--container-width-tablet) * 100vw);
    font-size: calc(28 / var(--container-width-tablet) * 100vw);
    padding: calc(40 / var(--container-width-tablet) * 100vw)
      calc(20 / var(--container-width-tablet) * 100vw);
  }
  .no-data {
    text-align: center;
    padding: calc(40 / var(--container-width-tablet) * 100vw)
      calc(20 / var(--container-width-tablet) * 100vw);
    font-size: calc(28 / var(--container-width-tablet) * 100vw);
    color: #666;
  }

  .pagination {
    gap: calc(8 / var(--container-width-tablet) * 100vw);
    margin-top: calc(80 / var(--container-width-tablet) * 100vw);
  }

  .pagination-button,
  .pagination-number {
    font-size: calc(28 / var(--container-width-tablet) * 100vw);
    padding: calc(8 / var(--container-width-tablet) * 100vw)
      calc(16 / var(--container-width-tablet) * 100vw);
  }

  .pagination-button i {
    font-size: calc(38 / var(--container-width-tablet) * 100vw);
  }
}