@media screen {
    .invoice-container {
        padding: 20px;
    }

    header, main, footer {
        margin: 10px 0;
    }

    img#logo {
        max-width: 100%;
        height: auto;
    }

    .table-responsive {
        overflow-x: auto;
    }

    .table {
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
    }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
        }

        .table tbody + tbody {
            border-top: 2px solid #dee2e6;
        }

    .table-sm td, .table-sm th {
        padding: 0.3rem;
    }

    .text-1 {
        font-size: 0.9rem;
    }

    .text-7 {
        font-size: 1.75rem;
    }

    .qr {
        margin-top: 20px;
        text-align: center;
    }
}

@media print {
    .invoice-container {
        width: 210mm;
        min-height: 297mm;
        padding: 20mm;
        margin: 0 auto;
        page-break-after: always;
    }

    header, main, footer {
        margin: 0 0 10mm;
    }

    .row {
        display: flex;
        flex-wrap: nowrap;
    }

    .col-sm-6, .col-sm-7, .col-sm-5, .col-sm-2, .col-3, .col-4, .col-2, .col-1 {
        float: left;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33333333%;
    }

    .col-2 {
        width: 16.66666667%;
    }

    .col-1 {
        width: 8.33333333%;
    }

    .table {
        width: 100%;
        margin-bottom: 1rem;
        color: #212529;
        border: 1px solid #dee2e6;
    }

        .table thead th {
            vertical-align: bottom;
            border-bottom: 2px solid #dee2e6;
        }

        .table tbody + tbody {
            border-top: 2px solid #dee2e6;
        }

    .table-sm td, .table-sm th {
        padding: 0.3rem;
    }

    .bg-light {
        background-color: #f8f9fa !important;
    }

    hr {
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }

    .text-1 {
        font-size: 0.9rem;
    }

    .text-7 {
        font-size: 1.75rem;
    }

    .text-end {
        text-align: right;
    }

    .text-center {
        text-align: center;
    }

    .text-sm-start {
        text-align: left;
    }

    .text-sm-end {
        text-align: right;
    }

    .align-items-center {
        align-items: center;
    }

    .gy-3 {
        gap: 1rem;
    }

    .mb-0 {
        margin-bottom: 0;
    }

    .mt-4 {
        margin-top: 1.5rem;
    }

    .order-sm-0 {
        order: 0;
    }

    .order-sm-1 {
        order: 1;
    }

    .qr {
        margin-top: 20px;
        text-align: center;
    }
}