.container {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  font-family: 'Roboto Condensed';
}

.header {
  background: #2C3E50;
  color: white;
  padding: 5px 16px;
  font-size: 16px;
  font-family: 'Roboto Condensed';

}

.filters {
  display: flex;
  gap: 20px;
  padding: 4px;
}

.gameSelect {
  padding: 7px 5px 5px 5px;
  min-width: 200px;
}

.submitBtn {
  background: #0088cc;
  font-family: 'Roboto Condensed';
  color: white;
  border: none;
  padding: 8px 71px;
  cursor: pointer;
  margin-left: 13px;
}

.tableControls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 15px;


  border-radius: 6px;
}

.entriesControl,
.radioGroup,
.totalSection,
.searchControl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.entriesSelect,
.searchInput {
  padding: 6px;

  min-width: 100px;
}

.radioGroup {
  display: flex;
  gap: 20px;
}

.radioSection {
  margin-right: 5px;
}

.totalSection {
  display: flex;
  gap: 20px;
  font-size: 16px;
}

.tableWrapper {
  /* padding: 0 15px; */
  /* margin-top: 15px; */
  border: 1px solid rgb(212, 197, 197);
}

.table {
  width: 100%;
  border-collapse: collapse;

}

.table th,
.table td {
  border: 1px solid #ddd;
  padding: 0px 8px;
  text-align: left;
}

.table th {
  background: #2C3E50;
  color: white;
  font-weight: 500;
  border: 1px solid #4a5a6a;
}

.backRow {
  background-color: #7fc1e8;
}

.layRow {
  background-color: #ffb6c1;
}

@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    gap: 10px;
  }

  .gameSelect {
    width: 100%;
    border: 1px solid #ddd;
  }

  .submitBtn {
    width: 100%;
    margin-left: 0;
  }

  .tableControls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "entries radios"
      "totals search";
    gap: 15px 5px;
    align-items: center;
    padding: 10px;
    padding-top: 2px;
  }

  .entriesControl {
    grid-area: entries;
    justify-self: start;
    width: auto;
    margin: 0;
    font-size: 12px;
  }

  .radioGroup {
    grid-area: radios;
    justify-self: end;
    width: auto;
    margin: 0;
    gap: 5px;
    font-size: 12px;
    position: relative;
    left: -4rem;
  }

  .totalSection {
    grid-area: totals;
    justify-self: start;
    /* flex-direction: column; */
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    width: auto;
    margin: 0;
    font-size: 12;
    color: black;

  }

  .entriesSelect,
  .searchInput {
    padding: 9px;

    min-width: 100px;
  }

  .searchControl {
    grid-area: search;
    justify-self: end;
    width: auto;
    margin: 0;
    font-size: 12px;
    color: black;
  }

  .searchInput {
    width: 120px;
  }

  .tableWrapper {
    overflow-x: auto;
  }

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

.table th {


  font-size: 13px;

}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
  margin-top: 10px;
}

.pageBtn {
  padding: 8px 16px;
  background-color: #2C3E50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Roboto Condensed';
}

.pageBtn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.pageInfo {
  font-family: 'Roboto Condensed';
  font-weight: 500;
}