/* Stacked Table (List View) approach as it generally provides the best mobile experience for comparative data. */


    .table-responsive {
        overflow-x: auto; /* For wider tables on desktop */
    }

    .table-responsive table {
        width: auto;
        border-collapse: collapse;
    }

    /* Style for the header row (th elements) */
    .table-responsive th {
        padding: 8px;
        border: 2px solid black;
        text-align: left;
        color: black; /* Set the header text color to blue */
        font-weight:bold;
    }

    .table-responsive td {
        padding: 8px;
        border: 2px solid black;
        text-align: left;
    }

    /* Style for the labels in the stacked view (from data-label) */
    @media (max-width: 600px) {
        .table-responsive thead {
            display: none;
        }

        .table-responsive tr {
            display: block;
            margin-bottom: 10px;
            border: 10px solid #ccc;
        }

        .table-responsive td {
            display: block;
            text-align: left;
            padding-left: 50%;
            position: relative;
            border: none;
        }

        .table-responsive td::before {
            content: attr(data-label); /* Get the header text */
            position: absolute;
            left: 0;
            padding-left: 10px;
            font-weight: bold;
            text-align: left;
            color: black; /* Set the label color to blue in stacked view */
        }
    }

    /* Style for the first column labels (Aspect) in both views */
    /* .table-responsive th:first-child, */
    .table-responsive td:first-child {
        color: green;
        font-weight: bold;
    }