html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Basic table styles */
.table-wrapper table {
    width: 100%;
    border-collapse: collapse;
}

.table-wrapper th, .table-wrapper td {
    padding: 8px;
    border: 1px solid #ccc;
}

/* Responsive styles */
@media (max-width: 767px) {
    /* Hide table headers on smaller screens */
    .table-wrapper th {
        display: none;
    }

    /* Display table rows as blocks to create a mobile-friendly layout */
    .table-wrapper tr {
        display: block;
        margin-bottom: 10px;
    }

    /* Set width for individual table cells */
    .table-wrapper td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

/* Style for the entire table */
/*table {
    border-collapse: collapse;
    width: 100%;
}*/

    /* Style for table header (th) */
    /*table th {
        background-color: #f2f2f2;
        font-weight: bold;
        padding: 10px;
        text-align: left;
        border: 1px solid #ccc;
    }*/

    /* Style for table rows (tr) */
    /*table tr {
        background-color: #fff;
    }*/

    /* Style for table cells (td) */
    /*table td {
        padding: 8px;
        border: 1px solid #ccc;
    }*/

    /* Alternate row color */
    /*table tr:nth-child(even) {
        background-color: #f2f2f2;
    }*/

    /* Hover effect on rows */
    /*table tr:hover {
        background-color: #e6e6e6;
    }*/