/********************************** 1200px ************************************/

@media (min-width: 0px) and (max-width: 1200px) {

    /* orderdetail cards */

    .orderdetail-cards-container .card-checkout.summary,
    .orderdetail-cards-container .card-checkout.summary:hover {
        flex: 1 1 40%;
    }

}





/********************************* 768px ***********************************/

@media (min-width: 0px) and (max-width: 768px) {

    .overview-menu {
        display: none;
    }

    .overview-menu-wrapper {
        display: none;
    }

    h2 {
        font-size: 20px;
        line-height: 26px;
    }

    .datatable-pagination {
        flex-direction: column;
    }

    .dt-layout-row:not(.dt-layout-table) {
        flex-direction: column;
    }

    .dt-layout-row:not(.dt-layout-table) .dt-layout-cell {
        flex-direction: column;
    }

    .dt-layout-row:not(.dt-layout-table) .dt-layout-cell:not(:last-child) {
        margin-bottom: 8px;
    }

    /* orderdetail - table with products */

    #orderItems .shoppingcart-product-quantity {
        margin-top: 0;
    }


    /* my devices - table */

    table#devices,
    table#devices thead,
    table#devices tbody,
    table#devices th,
    table#devices td,
    table#devices tr {
        display: block;
    }

    table#devices thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table#devices tbody tr {
        padding: 16px 0;
        /* remove whitespace */
        font-size: 0;
    }

    table#devices td {
        /* reset font size */
        font-size: 14px;
        padding: 8px 0;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: right;
    }

    table#devices td:before {
        content: attr(data-title);
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        padding: 8px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        color: #74838A;
    }


}



/********************************** 480px **********************************/
@media (min-width: 0px) and (max-width: 480px) {

    .mfa-step {
        flex-direction: column;
    }

    /* datatable filter */

    .datatable-filter.search,
    .datatable-filter.status,
    .datatable-filter.placedBy {
        flex-basis: 100%;
    }

    .datatable-filters .submit {
        flex: 1;
    }


    /* orderdetail cards */

    .orderdetail-cards-container .card-checkout.summary,
    .orderdetail-cards-container .card-checkout.summary:hover {
        flex: 1 1 90%;
    }


    /* my welding certificates - table */

    table#weldingcertificates,
    table#weldingcertificates thead,
    table#weldingcertificates tbody,
    table#weldingcertificates th,
    table#weldingcertificates td,
    table#weldingcertificates tr {
        display: block;
    }

    table#weldingcertificates thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table#weldingcertificates tbody tr {
        padding: 16px 0 16px 32px;
        position: relative;
        /* remove whitespace */
        font-size: 0;
    }

    table#weldingcertificates td.select-certificate {
        position: absolute;
        left: 0;
        top: 24px;
        padding: 0;
    }

    table#weldingcertificates td:not(.select-certificate) {
        /* reset font size */
        font-size: 14px;
        padding: 8px 0;
        position: relative;
        padding-left: 50%;
        white-space: normal;
        text-align: right !important;
    }

    table#weldingcertificates td:not(.select-certificate):before {
        content: attr(data-title);
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        padding: 8px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        color: #74838A;
    }

}

.pointer {
    cursor: pointer;
}