.table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Poppins", "sans-serif";
}

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

    .table thead {
        background-color: #D9D9D9;
        font-size: 12px;
    }

    .table td {
        font-size: 12px;
        font-family: "Poppins", "sans-serif";
    }







/*
	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
@media only screen and (max-width:1024px) {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    tr {
        margin: 0 0 1rem 0;
    }

        tr:nth-child(odd) {
            background: #ccc;
        }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }


}