/* =========================
   TABLE WRAPPER
========================= */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 15px;
}

/* =========================
   ACTUAL TABLE (Excel output)
========================= */
.table-responsive table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px; /* ensures scroll on small screens */
}

/* =========================
   CELL STYLING
========================= */
.table-responsive th,
.table-responsive td {
  padding: 6px;
  text-align: center;
  font-size: 15px;
  font-family: "Times New Roman";
  line-height: 1.2em;
  font-weight: 600;
  border: 1px solid black;
  white-space: nowrap;
}

/* =========================
   HEADER
========================= */
.table-responsive th {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

/* =========================
   ROW EFFECTS
========================= */
.table-responsive tr:hover {
  background-color: coral;
}

.table-responsive tr:nth-child(1) {
  color: blue;
}


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

  .table-responsive table {
    min-width: 700px;
  }

  .table-responsive th,
  .table-responsive td {
    font-size: 12px;
    padding: 4px;
  }
}

/* =========================
   TABLET
========================= */
@media (min-width: 769px) and (max-width: 1024px) {

  .table-responsive table {
    min-width: 900px;
  }

  .table-responsive th,
  .table-responsive td {
    font-size: 14px;
  }
}

/* =========================
   DESKTOP
========================= */
@media (min-width: 1025px) {
  .table-responsive table {
    width: 100%;
  }
}