vuefilemanager/public/css/oasis-invoice.css

* {
    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
}