* { outline: 0; margin: 0; padding: 0; box-sizing: border-box; color: #1b2539 } *, b, body, h1, h2, h3, h4, html, p, span, strong { font-family: Nunito, serif } html { font-size: 100% } .row { display: -webkit-flex; -webkit-flex-wrap: nowrap; width: 100% } .row.spaces { margin: 0 -15px } .row.spaces div[class^=col-] { padding: 0 15px } .row div[class^=col-] { -webkit-flex-grow: 1 } .row div[class^=col-].align-right { text-align: right } .row .col-left, .row .col-right { width: 49% } .row.align-center div[class^=col-] { -webkit-align-self: center } .row.align-bottom div[class^=col-] { -webkit-align-self: flex-end } .invoice-header .col-left, .invoice-header .col-right { display: inline-block } .invoice-header .logo { margin-bottom: 5px; display: block; width: 260px } .invoice-header .email, .invoice-header .phone { display: block; font-size: .7em; font-weight: 400; margin-bottom: 2px } .invoice-header h1 { line-height: 1; padding-bottom: 5px; font-size: 1.6em } .invoice-header h2 { color: #bc30fd; font-weight: 600; font-size: 1.1em } .invoice-header h4 { color: #1b2539; font-weight: 600; font-size: .7em } .supplier { float: right; max-width: 600px } .supplier .box { background: #f4f5f6; border-radius: 15px; padding: 20px } .supplier .dates { margin-top: 10px } .supplier .dates p { text-align: right; font-size: .9em } .special-wrapper { padding-bottom: 20px; border-bottom: 1px dashed #d8d8d8; margin: 0 -5px 25px } .special-wrapper .special-item { background: #f4f5f6; border-radius: 8px; display: inline-block; width: 20.9%; margin: 0 5px } .special-wrapper .special-item:first-child { width: 31.5% } .special-wrapper .special-item .padding { padding: 10px 15px } .special-wrapper b { color: #bc30fd; font-size: .9em; font-weight: 600; margin-bottom: 5px; display: block } .special-wrapper span { font-size: 1em; font-weight: 600; word-break: break-word; overflow-wrap: break-word; width: 100%; display: block } .table { table-layout: fixed; border-collapse: collapse; width: 100% } .table .table-row:nth-child(2n) { background-color: #f4f5f6; border-radius: 12px } .table .table-row .table-cell { text-align: left; word-break: break-word; padding: 5px } .table .table-row .table-cell a, .table .table-row .table-cell span { word-break: break-word } .table .table-row .table-cell:first-child { width: 280px; padding-left: 15px; padding-right: 15px } .table .table-row .table-cell:last-child { text-align: right; padding-right: 15px } .table tbody .table-row { padding: 5px 0 } .table thead { background-color: #fff !important; padding-bottom: 15px; border-bottom: 0 } .table thead .table-cell span { color: #bc30fd; font-weight: 600; font-size: .9em; white-space: nowrap } .table .table-cell { word-break: break-all } .table .table-cell a, .table .table-cell span { vertical-align: middle; font-weight: 600; font-size: .9em } .summary { max-width: 300px; margin: 15px 0 10px auto; text-align: right } .summary li { padding: 2px 0; display: block } .summary li b, .summary li span { white-space: nowrap } .summary li .col-full { width: 50%; display: inline-block } .summary span { font-size: 1em } .summary b { font-size: 1.3em; font-weight: 600 } .notes { padding-top: 20px; border-top: 1px dashed #d8d8d8 } .invoice-author { display: -webkit-flex; -webkit-justify-content: space-between; -webkit-align-items: flex-end; padding-bottom: 25px } .invoice-author .sign { text-align: right } .invoice-author img { max-height: 125px; display: block; margin: 0 0 0 auto } .invoice-footer { padding-top: 15px; border-top: 1px dashed #d8d8d8; text-align: center } .invoice-footer p { font-size: 1em } .invoice-footer a, h3 { color: #bc30fd } h3 { font-weight: 600; padding-bottom: 8px } h3, p, span { font-size: 1em } p, span { font-weight: 600; padding-bottom: 4px; color: #1b2539 } .highlight { color: #bc30fd } header, section { border-bottom: 1px dashed #d8d8d8; padding-bottom: 10px; margin-bottom: 20px } .address, .number { display: block; font-weight: 600 } .content-box { padding-bottom: 15px } .thank-you { text-align: center; font-size: 22px; margin-top: 20px; margin-bottom: 60px } footer .stamp { max-width: 200px; display: block; margin: 0 0 0 auto } footer div { align-self: flex-end } footer h3 { display: inline-block }