/* Generic Styling, for Desktops/Laptops */
.responsiveTable table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #9D9B9B;
}

.responsiveTable th {
    background: #D6D6D6;
    color: black;
    /* background: #6BA6DB;
           color: white;*/
    font-weight: bold;
    border: 1px solid #9D9B9B;
}

.responsiveTable td, th {
    padding: 6px 18px 6px 18px;
}

.responsiveTable tr {
    border: 1px solid #9D9B9B;
}

.screenLeftMobileRight {
    text-align: left;
}

.screenRightMobileRight {
    text-align: right;
}

.screenCenterMobileRight {
    text-align: center;
}

.screenCenterMobileLeft {
    text-align: center;
}

.screenRightMobileLeft {
    text-align: right;
}



/* 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: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {

    /*hide on mobile view for any cells with this class */
    .mobileHideCell {
        display: none;
    }

    /*on mobile view bold the text within cells with this class */
    .mobileBoldCell {
        font-weight: bold;
        background: #c9c9c9 !important;
        border: 1px solid black !important;
        text-align: left !important;
    }

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

        /* Zebra striping */
        .responsiveTable tr:nth-of-type(even) {
            background: #efefef;
        }

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

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

        /* Now like a table header */
        .responsiveTable td:before {
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
            content: attr(data-title);
            font-weight: bold;
        }

        /* Rich: Modified class to shorten the left margin to only 30% */
        .responsiveTable td.width-35 {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #ccc;
            position: relative;
            padding-left: 35%;
        }

        .responsiveTable td.width-30:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 6px;
            left: 6px;
            width: 30%;
            padding-right: 10px;
            white-space: nowrap;
            content: attr(data-title);
        }

    .screenCenterMobileRight {
        text-align: right;
    }

    .screenLeftMobileRight {
        text-align: right;
    }

    .screenCenterMobileLeft {
        text-align: left;
    }

    .screenRightMobileLeft {
        text-align: left;
    }
}