/*
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)  {

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

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

    .order-table {
        border-bottom: 1px solid #333;

    }

    .order-table .r-tr {
        border-top: 1px solid #333;

    }

    .order-table .r-td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 28%;
        height: auto;
        font-weight: 500;
        text-align: left !important;
    }

    .order-table .r-td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 10px;
        left: 6px;
        width: 28%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        color: #000;
        font-size: 14px;
    }


    /*
    Label the data
    */
    /*.order-table .r-td:nth-of-type(1):before { content: "First Name"; }*/
    /*.order-table .r-td:nth-of-type(2):before { content: "Last Name"; }*/
    /*.order-table .r-td:nth-of-type(3):before { content: "Job Title"; }*/
    /*.order-table .r-td:nth-of-type(4):before { content: "Favorite Color"; }*/
    /*.order-table .r-td:nth-of-type(5):before { content: "Wars of Trek?"; }*/
    /*.order-table .r-td:nth-of-type(6):before { content: "Secret Alias"; }*/

    /* Force table to not be like tables anymore */
    .wish-table, .r-thead, .r-tbody, .r-th, .r-td, .r-tr {
        display: block !important;
    }

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

    .wish-table {
        border-bottom: 1px solid #333 !important;

    }

    .wish-table .r-tr {
        border-top: 1px solid #333 !important;

    }

    .wish-table .r-td {
        /* Behave  like a "row" */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        position: relative !important;
        padding-left: 28% !important;
        height: auto !important;
        font-weight: 500 !important;
        text-align: left !important;
    }

    .wish-table .r-td:before {
        /* Now like a table header */
        position: absolute !important;
        /* Top/left values mimic padding */
        top: 10px !important;
        left: 6px !important;
        width: 28% !important;
        padding-right: 10px !important;
        white-space: nowrap !important;
        text-align: left !important;
        color: #000 !important;
        font-size: 14px !important;
    }

    /*.mypage_table_type .wish-table  td {*/
    /*    height: auto !important;*/
    /*}*/
}

@media screen and (max-width: 768px) {
    .a-table-responsive {
        width: 100%;
        margin-bottom: 15px;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;

    }
    .a-table-responsive:last-child > table {
        margin-bottom: 0;
    }
    .a-table-responsive > table {
        min-width: 450px;
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .a-table-responsive > table::-webkit-scrollbar {
        width: 3px;
    }
    .a-table-responsive > table::-webkit-scrollbar-thumb {
        background: #a9a9a9;
    }
}