element where you may change * something like the font or the background of the invoice */ html, body { /* MOVE ALONG, NOTHING TO CHANGE HERE! */ } /** * IMPORTANT NOTICE: DON'T USE '!important' otherwise this may lead to broken print layout. * Some browsers may require '!important' in oder to work properly but be careful with it. */ .clearfix { display: block; clear: both; } .x-hidden { display: none !important; } .hidden { display: none; } b, strong, .bold { font-weight: bold; } #container { font: normal 13px/1.4em 'Open Sans', Sans-serif; margin: 0 auto; /* min-height: 1158px; */ position: relative; } .left-stripes { position: absolute; top: 0; left: 0; bottom: 0; width: 100px; } .left-stripes .circle { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #415472; width: 30px; height: 30px; position: absolute; left: 33%; } .left-stripes .circle.c-upper { top: 440px; } .left-stripes .circle.c-lower { top: 690px; } .right-invoice { padding: 30px 30px 30px 30px; /* min-height: 820px; */ } #memo .company-info { float: right; } #memo .company-info div { font-size: 28px; text-transform: uppercase; min-width: 20px; line-height: 1em; } #memo .company-info span { font-size: 12px; color: #858585; display: inline-block; min-width: 20px; } #memo .logo { float: left; } #memo .logo img { /*width: 200px; */ margin-bottom:0px; width: 60%; } #memo:after { content: ''; display: block; clear: both; } #invoice-title-number { margin: 0px 0 10px 0; display: inline-block; float: right; text-align: right; } #invoice-title-number .title-top { font-size: 10px; margin: 0px 0px; } #invoice-title-number .title-top span { display: inline-block; min-width: 20px; } #invoice-title-number .title-top #number { text-align: right; float: right; } #invoice-title-number .title-top:after { content: ''; display: block; clear: both; } #invoice-title-number #title { display: inline-block; background: #415472; color: white; font-size: 20px; padding: 7px 18px; /* font-family: Sanchez, Serif; */ line-height: 1em; } #client-info { float: left; text-align: left; margin-top: 0px; min-width: 220px; } #client-info .client-name { font-weight: bold; font-size: 15px; text-transform: uppercase; margin: 0px 0; } #client-info > div { margin-bottom: 3px; min-width: 20px; } #client-info span { display: block; min-width: 20px; } #client-info > span { text-transform: uppercase; color: #858585; font-size: 15px; } table { /* table-layout: fixed; */ width: 100% !important; /* max-width: 1200px !important;*/ } table th, table td { vertical-align: top; word-break: keep-all; word-wrap: break-word; } #invoice-info { float: left; margin-top: 10px; } #invoice-info div { margin-bottom: 3px; } #invoice-info div span { display: inline-block; min-width: 20px; min-height: 18px; } #invoice-info div span:first-child { font-weight: bold; text-transform: uppercase; margin-right: 10px; } #invoice-info:after { content: ''; display: block; clear: both; } .currency { margin-top: 20px; text-align: right; color: #858585; font-style: italic; font-size: 12px; } .currency span { display: inline-block; min-width: 20px; } #items { margin-top: 5px; } #items .first-cell, #items table th:first-child, #items table td:first-child { width: 18px; text-align: right; } #items table { border-collapse: separate; width: 100%; } #items table th { /* font-family: Sanchez, Serif; */ font-weight: 600; font-size: 12px; text-transform: uppercase; padding: 5px 3px; text-align: right; color: #333; border-top: 1px solid #333; border-bottom: 1px solid #333; } #items table th:nth-child(2) { /* width: 30%; */ text-align: left; } #items table th:last-child { text-align: right; } #items table td { padding: 10px 3px; text-align: right; border-bottom: 1px solid #ddd; } #items table td:first-child { text-align: left; } #items table td:nth-child(2) { text-align: left; } #sums { float: right; margin-top: 30px; } #sums table tr th, #sums table tr td { min-width: 100px; padding: 8px 3px; text-align: right; } #sums table tr th { padding-right: 25px; } #sums table tr.amount-total td { background: #415472; color: white; /* font-family: Sanchez, Serif; */ font-size: 15px; line-height: 1em; padding: 7px 15px !important; } #sums table tr.due-amount th, #sums table tr.due-amount td { font-weight: bold; } #terms { margin-top: 60px; } #terms > span { font-weight: bold; display: inline-block; min-width: 20px; text-transform: uppercase; } #terms > div { min-height: 50px; min-width: 50px; } .payment-info { font-size: 12px; color: #858585; margin-top: 30px; } .payment-info div { min-width: 20px; } .payment-info div:first-child { font-weight: bold; } .ib_invoicebus_fineprint { text-align: left !important; padding-left: 130px !important; width: auto !important; } /** * If the printed invoice is not looking as expected you may tune up * the print styles (you can use !important to override styles) */ @media print { table { /* table-layout: fixed; */ width: 100% !important; /* background-color: red; */ /* max-width: 1200px !important;*/ } /* Here goes your print styles */ } .align-right{ text-align:right !important; } .text-b{ font-weight:bold; } .t-footer > td{ border-top:1px solid rgb(153, 153, 153); border-bottom:1px solid rgb(153, 153, 153) !important; margin-top:-1px; } .ibcl_issue_date{ float:right; }