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: 100%; 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: 40px 50px 40px 80px; min-height: 1078px; } #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:10px; width: 80%; } #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; } 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: 0px; } #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) */ .align-right{ text-align:right !important; } .text-b{ font-weight:bold; } .t-footer > td{ border-top:1px solid #333; border-bottom:1px solid #333 !important; margin-top:-1px; } .ibcl_issue_date{ float:right; } .font-14-bold { font-size: 14px; font-weight: 500; line-height: 20px; } .font-12-bold { font-size: 14px; font-weight: 500; line-height: 20px; } .font-12 { font-size: 14px; line-height: 20px; } .font-10 { font-size: 10px; line-height: 20px; } .font-10-bold { font-size: 10px; line-height: 20px; font-weight: 500; } .percent { font-size: 10px; line-height: 20px; color: rgba(0, 0, 0, 0.5); } .item-name { font-size: 14px; line-height: 20px; font-weight: 500; } .item-desc { font-size: 10px; line-height: 20px; color: rgba(0, 0, 0, 0.5); } .party-address-title { font-size: 14px; line-height: 20px; font-weight: 500; } .party-name { font-size: 13px; line-height: 15px; font-weight: 500; } .party-address { font-size: 14px; line-height: 14px; } .inv-detail { font-size: 14px; line-height: 20px; font-weight: 500; } .extra-detail { font-size: 14px; line-height: 20px; } .company-address, .gst-details, .party-address { font-size: 13px; font-weight: normal; line-height: 16px; } .logo { width: 100px; height: 100px; } .company-name { font-size: 16px; line-height: 20px; font-weight: 500; } .signature { height: 61px; width: 114px; margin-left: auto; } .signature img { width: 100%; } .column-20 { width: 20%; display: table-cell; vertical-align: top; } .column-25 { width: 25%; display: table-cell; vertical-align: top; } .column-30 { width: 30%; display: table-cell; vertical-align: top; } .column-33 { width: 33.33%; display: table-cell; vertical-align: top; } .column-35 { width: 35%; display: table-cell; vertical-align: top; } .column-40 { width: 40%; display: table-cell; vertical-align: top; } .column-45 { width: 45%; display: table-cell; vertical-align: top; } .column-50 { width: 50%; display: table-cell; vertical-align: top; } .column-55 { width: 55%; display: table-cell; vertical-align: top; } .column-60 { width: 60%; display: table-cell; vertical-align: top; } .column-70 { width: 70%; display: table-cell; vertical-align: top; } .column-75 { width: 75%; display: table-cell; vertical-align: top; } .column-80 { width: 80%; display: table-cell; vertical-align: top; } .column-90 { width: 80%; display: table-cell; vertical-align: top; } .column-100 { width: 100%; display: table-cell; vertical-align: top; } .container { width: 100% !important; max-width:inherit !important; margin: auto; line-height: 16px; } @media print { .page { margin: 1rem; } .container { width: 100% !important; max-width: 100% !important; margin: auto; line-height: 16px; } } .table { display: table; } .row { display: table-row; } .table-cell { display: table-cell; } .table-header { display: table-cell; height: 30px; vertical-align: middle; padding-left: 5px; padding-right: 5px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; } .table-row-cell, .table-amt-cell { display: table-cell; height: 49px; padding-left: 5px; padding-right: 5px; font-size: 14px; line-height: 20px; text-align: center; } .multi-row-header { display: table-cell; height: 49px; vertical-align: middle; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; } .multi-row-cell { display: table-cell; height: 49px; vertical-align: middle; font-size: 14px; line-height: 20px; text-align: right; } .hsn .multi-row-cell { vertical-align: middle; } .hsn .table-row-cell { vertical-align: middle; } .table-amt-cell { height: 30px; } .padding-top-5 { padding-top: 5px; } .padding-right-5 { padding-right: 5px; } .padding-left-5 { padding-left: 5px; } .padding-5-exclude-bt { padding-top: 5px; padding-left: 5px; padding-right: 5px; } .padding-5-exclude-tp { padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } .padding-5 { padding: 5px; } .padding-bottom-10 { padding-bottom: 10px; } .padding-left-10 { padding-left: 10px; } .padding-top-10 { padding-top: 10px; } .padding-10 { padding: 10px; } .border-top-1 { border-top: 1px solid black; } .border-bottom-1 { border-bottom: 1px solid black; } .border-left-1 { border-left: 1px solid black; } .border-right-1 { border-right: 1px solid black; } .border-1 { border: 1px solid black; } .border-exclude-top { border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } .border-exclude-bottom { border-right: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; } .border-sides { border-right: 1px solid black; border-left: 1px solid black; } .ht-24 { height: 24px; } .ht-25 { height: 25px; } .ht-30 { height: 30px; } .ht-49 { height: 49px; } .ht-81 { height: 81px; } .width-10 { width: 10%; } .width-20 { width: 20%; } .width-25 { width: 25%; } .width-33 { width: 33.33%; } .width-40 { width: 40%; } .width-45 { width: 45%; } .width-50 { width: 50%; } .width-55 { width: 55%; } .width-75 { width: 75%; } .width-80 { width: 80%; } .width-100 { width: 100%; } .wdt-30 { width: 60px; } .wdt-59 { width: 59px; } .wdt-71 { width: 71px; } .wdt-78 { width: 150px; } .wdt-79 { width: 150px; } .wdt-80 { width: 80px; } .wdt-86 { width: 86px; } .wdt-91 { width: 91px; } .wdt-180 { width:230px; } .wdt-103 { width: 103px; } .wdt-153 { width: 153px; } .wdt-195 { width: 195px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .vertical-middle { vertical-align: middle; } .bold { font-weight: bold; } .italic { font-style: italic; } .grey { color: #000000; } .grey-bg { background: #e2e2e2; } .green { color: #407400; } .green-bg { background: #dff0ca; } .blue { color: #0b6a9f; } .blue-bg { background: #cfeaf9; } .violet { color: #840bb2; } .violet-bg { background: #e9ccf4; } .pink { color: #c11111; } .pink-bg { background: #f4cccc; } .rich-blue { color: #0c87c0; } .rich-blue-bg { background: #e6f4fa; } .gold { color: #cd9d23; } .gold-bg { background: #f1e7cf; } .orange { color: #bf6200; } .orange-bg { background: #f9e5cf; } .margin-top-5 { margin-top: 5px; } .margin-auto { margin-left: auto; margin-right: auto; } .pdf-signature img { width: 100px; height: 50px; } table { table-layout: fixed; width: 101%; } #items::-webkit-scrollbar-track { width: 2px; } #items::-webkit-scrollbar { width: 2px; } .h-scr {overflow: scroll; width:100%; margin: auto; } @media print { *{ margin: 0; padding: 0; } body html { width: 100%; min-width:100%; } .font-14-bold { font-size: 14px; font-weight: 500; line-height: 20px; } .font-12-bold { font-size: 14px; font-weight: 500; line-height: 20px; } .font-12 { font-size: 14px; line-height: 20px; } .font-10 { font-size: 10px; line-height: 20px; } .font-10-bold { font-size: 10px; line-height: 20px; font-weight: 500; } .percent { font-size: 10px; line-height: 20px; color: rgba(0, 0, 0, 0.5); } .item-name { font-size: 14px; line-height: 20px; font-weight: 500; } .item-desc { font-size: 10px; line-height: 20px; color: rgba(0, 0, 0, 0.5); } .party-address-title { font-size: 14px; line-height: 20px; font-weight: 500; } .party-name { font-size: 13px; line-height: 15px; font-weight: 500; } .party-address { font-size: 14px; line-height: 14px; } .inv-detail { font-size: 14px; line-height: 20px; font-weight: 500; } .extra-detail { font-size: 14px; line-height: 20px; } .company-address, .gst-details, .party-address { font-size: 13px; font-weight: normal; line-height: 16px; } .logo { width: 100px; height: 100px; } .company-name { font-size: 16px; line-height: 20px; font-weight: 500; } .signature { height: 61px; width: 114px; margin-left: auto; } .signature img { width: 100%; } .column-20 { width: 20%; display: table-cell; vertical-align: top; } .column-25 { width: 25%; display: table-cell; vertical-align: top; } .column-30 { width: 30%; display: table-cell; vertical-align: top; } .column-33 { width: 33.33%; display: table-cell; vertical-align: top; } .column-35 { width: 35%; display: table-cell; vertical-align: top; } .column-40 { width: 40%; display: table-cell; vertical-align: top; } .column-45 { width: 45%; display: table-cell; vertical-align: top; } .column-50 { width: 50%; display: table-cell; vertical-align: top; } .column-55 { width: 55%; display: table-cell; vertical-align: top; } .column-60 { width: 60%; display: table-cell; vertical-align: top; } .column-70 { width: 70%; display: table-cell; vertical-align: top; } .column-75 { width: 75%; display: table-cell; vertical-align: top; } .column-80 { width: 80%; display: table-cell; vertical-align: top; } .column-90 { width: 80%; display: table-cell; vertical-align: top; } .column-100 { width: 100%; display: table-cell; vertical-align: top; } .container { display: table; border-collapse: collapse; width: 100%; max-width: inherit; margin: auto; } .table { display: table; } .row { display: table-row; } .table-cell { display: table-cell; } .table-header { display: table-cell; height: 30px; vertical-align: middle; padding-left: 5px; padding-right: 5px; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; } .table-row-cell, .table-amt-cell { display: table-cell; height: 49px; padding-left: 5px; padding-right: 5px; font-size: 14px; line-height: 20px; text-align: center; } .multi-row-header { display: table-cell; height: 49px; vertical-align: middle; text-align: center; font-size: 14px; line-height: 20px; font-weight: 500; } .multi-row-cell { display: table-cell; height: 49px; vertical-align: middle; font-size: 14px; line-height: 20px; text-align: right; } .hsn .multi-row-cell { vertical-align: middle; } .hsn .table-row-cell { vertical-align: middle; } .table-amt-cell { height: 30px; } .padding-top-5 { padding-top: 5px; } .padding-right-5 { padding-right: 5px; } .padding-left-5 { padding-left: 5px; } .padding-5-exclude-bt { padding-top: 5px; padding-left: 5px; padding-right: 5px; } .padding-5-exclude-tp { padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } .padding-5 { padding: 5px; } .padding-bottom-10 { padding-bottom: 10px; } .padding-left-10 { padding-left: 10px; } .padding-top-10 { padding-top: 10px; } .padding-10 { padding: 10px; } .border-top-1 { border-top: 1px solid black; } .border-bottom-1 { border-bottom: 1px solid black; } .border-left-1 { border-left: 1px solid black; } .border-right-1 { border-right: 1px solid black; } .border-1 { border: 1px solid black; } .border-exclude-top { border-right: 1px solid black; border-bottom: 1px solid black; border-left: 1px solid black; } .border-exclude-bottom { border-right: 1px solid black; border-left: 1px solid black; border-top: 1px solid black; } .border-sides { border-right: 1px solid black; border-left: 1px solid black; } .ht-24 { height: 24px; } .ht-25 { height: 25px; } .ht-30 { height: 30px; } .ht-49 { height: 49px; } .ht-81 { height: 81px; } .width-10 { width: 10%; } .width-20 { width: 20%; } .width-25 { width: 25%; } .width-33 { width: 33.33%; } .width-40 { width: 40%; } .width-45 { width: 45%; } .width-50 { width: 50%; } .width-55 { width: 55%; } .width-75 { width: 75%; } .width-80 { width: 80%; } .width-100 { width: 100%; } .wdt-30 { width: 60px; } .wdt-59 { width: 59px; } .wdt-71 { width: 150px; } .wdt-78 { width: 150px; } .wdt-79 { width: 79px; } .wdt-80 { width: 80px; } .wdt-86 { width: 86px; } .wdt-91 { width: 91px; } .wdt-180 { width: 180px; } .wdt-103 { width: 103px; } .wdt-153 { width: 153px; } .wdt-195 { width: 195px; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .vertical-middle { vertical-align: middle; } .bold { font-weight: bold; } .italic { font-style: italic; } .grey { color: #000000; } .grey-bg { background: #e2e2e2; } .green { color: #407400; } .green-bg { background: #dff0ca; } .blue { color: #0b6a9f; } .blue-bg { background: #cfeaf9; } .violet { color: #840bb2; } .violet-bg { background: #e9ccf4; } .pink { color: #c11111; } .pink-bg { background: #f4cccc; } .rich-blue { color: #0c87c0; } .rich-blue-bg { background: #e6f4fa; } .gold { color: #cd9d23; } .gold-bg { background: #f1e7cf; } .orange { color: #bf6200; } .orange-bg { background: #f9e5cf; } .margin-top-5 { margin-top: 5px; } .margin-auto { margin-left: auto; margin-right: auto; } .pdf-signature img { width: 100px; height: 50px; } table { table-layout: fixed; width: 101%; } #items::-webkit-scrollbar-track { width: 2px; } #items::-webkit-scrollbar { width: 2px; } .h-scr {overflow: inherit; height: auto; width: 100%; } .pagepre { height: auto; overflow-y: inherit; } } .page-header, .page-footer { background:white; } /* #items { height: calc(100vh - 713px); } */ @media print { .p-10 { padding: 10px !important; } .bor-bt { border-bottom: rgb(83, 83, 83) solid 1px; } .container .tbltxt td { font-size: 13px; line-height: 23px; } .bor-rt { border-right: rgb(83, 83, 83) solid 1px; } .p-10 { padding: 5px; } } .bor-bt { border-bottom: rgb(83, 83, 83) solid 1px; } .bor-tp { border-top: rgb(83, 83, 83) solid 1px; } .bor-lt { border-left: rgb(83, 83, 83) solid 1px; } .container .tbltxt td { font-size: 13px; line-height: 23px; } .bor-rt { border-right: rgb(83, 83, 83) solid 1px; } .p-10 { padding: 10px; } .padding1 { margin: 1in; }