/* reset */

            *
            {
                border: 0;
                box-sizing: content-box;
                color: inherit;
                font-family: inherit;
                font-size: inherit;
                font-style: inherit;
                font-weight: inherit;
                line-height: inherit;
                list-style: none;
                margin: 0;
                padding: 0;
                text-decoration: none;
                vertical-align: top;
            }

             .adjust-page-zoom {
               zoom: 0.60;
               padding: 0;
             }

            /* heading */

            h1,h2,h3 { font: bold 100% sans-serif; letter-spacing: 0.2em; text-align: center; text-transform: uppercase; }
            h4 {margin-bottom: 10px;margin-top: 20px}
            header h1 { clear: both; background: #005BBB; color: #FFF; margin: 0 0 1em;   padding: 0.8rem 0.2rem 0.8rem 0; }

            /* table */

            table { font-size: 75%; table-layout: fixed;width: 100%}
            table { border-collapse: separate; border-spacing: 0; }
            th, td { border-width: 1px;  padding: 1.3em 1em; position: relative; text-align: left; }
            th, td { border-style: solid; }
            th { background: none; border-color: #000; border-right: 1px #000 solid; color: #005BBB; font-weight: bold;}

            table { page-break-inside:auto }
            tr    { page-break-inside:avoid; page-break-after:auto }

            /* page */

            html { font: 16px/1 'Arial', sans-serif; overflow: auto; }
            html { background: #999; cursor: default; }

            section { position: relative; box-sizing: border-box;  min-height: 328mm; margin: 20px auto 0; padding: 15mm 10mm; width: 210mm;}
            section { background: #FFF; border-radius: 1px; box-shadow: 0 0 1in -0.25in rgba(0, 0, 0, 0.5); }

            strong { font-weight: bold;}

            /* header */

            header { margin: 0 0 3em; padding-top: 7mm; }
            header:after { clear: both; content: ""; display: table; }

            header address { float: left; font-style: normal; margin: 0 1em 1em 0; }
            header address p { margin: 0 0 0.25em; }
            header span, header img { display: block; float: right; }
            header span { margin: 0 0 1em 1em; max-height: 25%; max-width: 60%; position: relative; }
            header img { float: left; margin: 0 0 1.2em 0; max-height: 100%; max-width: 100%; width: 30%;}

            /* infos invoice */

            .infos-invoice { display: block; margin: 1em 0; font-size: 0.9em; line-height: 1.2em;}
            .infos-invoice strong { font-weight: bold;}

            /* content infos */

            .content-infos { float: right; display: inline-block; width: 25%;}
            .content-infos { float: right; display: inline-block; width: 25%;}
            .bloc-infos { margin: 0 0 1em 0;}
            .bloc-infos address { padding: 0.5rem; background: #D8D8D8; font-size: 0.8em; }
            .bloc-infos h1 { display: block;   width: 100%; margin: 0.5em 0; text-align: left; color: #fb5928; text-transform: uppercase; letter-spacing: 0;}
            .bloc-infos strong { margin: 0.5em 0; color: #005BBB; font-weight: bold;}
            .bloc-infos p { color: #005BBB; font-size: 0.9em;}

            /* article */

            article { display: inline-block; width: 72%;}
            article, article address, table.meta, table.inventory { margin: 0 0 3em; }
            article address p { margin: 0 0 0.25em; }
            article:after { clear: both; content: ""; display: table; }

            article address { float: left; font-weight: bold; }


            /* table meta & balance */

            .content-tab-invoice { display: flex; margin: 0 0 1em 0;}
            .tg { float: left;}
            .tg tbody { width: 100%;}

            table.meta, table.balance { display: inline-block; width: 36%; }
            table.meta:after, table.balance:after { clear: both; content: ""; display: table; }

            .balance  { background: #005BBB; border: solid 1px #005BBB; color: #ffffff; font-weight: bold; font-size: 1.2em; text-align: center;}
            .balance span  { position: absolute; bottom: 10px; width: 100%; left: 0px; line-height: 25px;}


            /* table meta */

            table.meta th { width: 40%; }
            table.meta td { width: 60%; }

            /* table items */

            table.inventory { clear: both; width: 100%; }
            table.inventory th { font-weight: bold; text-align: center; }

            table.inventory th:nth-child(1) { width: 60%; }
            table.inventory td:nth-child(2) { text-align: right; width: 12%; }
            table.inventory td:nth-child(3) { text-align: right; width: 12%; }
            table.inventory td:nth-child(4) { text-align: right; width: 12%; }

            /* table balance */

            table.balance th, table.balance td { width: 50%; }
            table.balance td { text-align: right; }

            /* aside */

            aside { position: absolute; bottom: 0; left: 0; width: 200mm; padding: 1em; border: 1px solid #0052B7; color: #0052B7; text-align: center;}
            aside h2 { border: none; border-width: 0 0 1px; margin: 0 0 1em; }
            aside p { font-size: 0.8em;}

            /* details */
            section.details { page-break-before:always;}
            .mention { padding-top: 2em; width: 100%; font-size: 0.8em; font-style: italic; clear: both;}
            .details h1 { clear: both; background: #005BBB; color: #FFF; margin: 0 0 1em;   padding: 0.8rem 0.2rem 0.8rem 0; }
            .details h2 { margin: 20px 0; color: #fb5928;}
            .details th, .details td { padding: 0.5em;}

            /* chargeConsumptions */

            table.chargeConsumptions th:nth-child(1) { width: 20%; }
            table.chargeConsumptions th:nth-child(2) { width: 20%; }
            table.chargeConsumptions th:nth-child(3) { width: 20%; }

            table.fixedParts th:nth-child(1), table.reactivationCosts th:nth-child(1), table.entryCosts th:nth-child(1), table.mediaOrders th:nth-child(1), table.invoiceCancellations th:nth-child(1), table.bonus th:nth-child(1), table.penalties th:nth-child(1), table.credits th:nth-child(1), table.otpCode th:nth-child(1) { width: 20% }
            table.fixedParts th:nth-child(3), table.reactivationCosts th:nth-child(3), table.entryCosts th:nth-child(3), table.invoiceCancellations th:nth-child(3), table.mediaOrders th:nth-child(4), table.bonus th:nth-child(3), table.penalties th:nth-child(3), table.otpCode th:nth-child(3) { width: 20% }


            table.credits th:nth-child(2) { width: 20%;}
            table.credits th:nth-child(4) { width: 20%;}

            @media print {
                * { -webkit-print-color-adjust: exact; }
                html { background: none; padding: 0; }
                body { box-shadow: none; margin: 0; }
                span:empty { display: none; }
                section { background: none; box-shadow: none; }
            }

            @page { margin: 0; }


 table {
   border-collapse: collapse;
 }

 table, th, td {
   border: 1px solid black;
 }