.salesorders-table {
    border-collapse: separate;
    width: 90%;

    .collapse-table-mobile-header {
        font-weight: var(--font-bold);

        @media (width >= 80rem), print {
            display: none;
        }
    }

    & > thead {
        display: none;
        font-size: larger;

        & > tr > th {
            padding: 1rem 0;

            &.orders-table-custno-header {
                text-align: left;
            }

            &.orders-table-date-header {
                text-align: center;
            }

            &.orders-table-total-header {
                text-align: right;
            }
        }

        @media (width >= 80rem), print {
            display: revert;
        }
    }

    & > tbody > tr {
        display: flex;
        flex-direction: column;

        margin: 1rem 0;
        padding: 1rem;
        border: 1px solid var(--clr-card-border);
        border-radius: 0.75rem;

        box-shadow: var(--shadow-mid);

        & > td.orders-table-custno-row {
            font-size: larger;
            text-align: center;

            & > a {
                font-weight: var(--font-bold);
                text-decoration: underline;

                @media (width >= 80rem), print {
                    text-decoration: none;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }

            @media (width >= 80rem), print {
                padding: 1rem 0;
                font-size: revert;
                text-align: left;
            }
        }

        & > td.orders-table-date-row {
            padding: 0.5rem 0;
            border: 1px solid var(--clr-black);
            border-bottom: 0;
            border-top-left-radius: 0.75rem;
            border-top-right-radius: 0.75rem;

            background-color: var(--clr-gray-light);

            & > div {
                display: flex;
                flex-direction: column;
                text-align: center;
            }

            @media (width >= 80rem), print {
                padding: revert;
                border: revert;
                background-color: revert;
            }
        }

        & > td.orders-table-total-row {
            padding: 0.5rem 0;
            border: 1px solid var(--clr-black);
            border-top: 0;
            border-bottom-right-radius: 0.75rem;
            border-bottom-left-radius: 0.75rem;

            & > div {
                justify-content: center;
                text-align: center;

                @media (width >= 80rem), print {
                    text-align: right;
                }
            }

            @media (width >= 80rem), print {
                padding: revert;
                border: revert;
                background-color: revert;
            }
        }

        @media (width >= 80rem), print {
            display: table-row;
            border: revert;
            border-top: 1px solid var(--clr-black);
            box-shadow: none;
        }
    }

    @media (width >= 80rem), print {
        border-collapse: collapse;
    }
}