/* BASE / DESKTOP */
.table-wrapper {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #ACACAC;
  overflow: hidden;
  font-family: Roboto, sans-serif;
}

.table-scroll {
  width: 100%;
  overflow: hidden;
}

.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* HEADING cells - Desktop */
.custom-table thead th {
  height: 72px;
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
  background: #EEE;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  border-bottom: 1px solid #ACACAC;
  border-right: 1px solid #ACACAC;
}

.custom-table thead th:first-child {
  border-right: none;
  box-shadow: 1px 0 0 0 #ACACAC;
}

.custom-table thead th:last-child {
  border-right: none;
}

/* BODY cells - Desktop */
.custom-table tbody td {
  height: 70px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  background: #FFF;
  border-bottom: 1px solid #ACACAC;
  border-right: 1px solid #ACACAC;
}

.custom-table tbody td:first-child {
  border-right: none;
  box-shadow: 1px 0 0 0 #ACACAC;
}

.custom-table tbody td:last-child {
  border-right: none;
}

.custom-table tbody tr:last-child td {
  border-bottom: none;
}

/* Sticky first column - Desktop */
.custom-table thead th:first-child,
.custom-table tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
}

.custom-table thead th:first-child {
  background: #EEE;
  z-index: 6;
}

.custom-table tbody td:first-child {
  background: #FFF;
}

/* 📱 MOBILE ONLY */
@media (max-width: 768px) {

  .table-wrapper {
    overflow: visible;
    border: none;
    border-radius: 0;
  }

  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid #ACACAC;
    background:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 0 100%,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size:
      40px 100%,
      40px 100%,
      14px 100%,
      14px 100%;
    background-position:
      0 0,
      100% 0,
      0 0,
      100% 0;
    background-attachment: local, local, scroll, scroll;
  }

  .custom-table {
    min-width: 480px;
  }

  /* HEADING cells - Mobile */
  .custom-table thead th {
    height: 50px;
  }

  /* BODY cells - Mobile */
  .custom-table tbody td {
    height: 60px;
  }

  /* Sticky first column - Mobile */
  .custom-table thead th:first-child,
  .custom-table tbody td:first-child {
    box-shadow:
      1px 0 0 0 #ACACAC,
      4px 0 8px rgba(0, 0, 0, 0.12);
  }

  .custom-table thead th:first-child {
    background: #EEE;
  }

  .custom-table tbody td:first-child {
    background: #FFF;
  }
}