1/**
  2 * Invoice Style Sheet
  3 *
  4 * Contains styling specific to the view invoice page.
  5 *
  6 * @project   WHMCS
  7 * @version   1.0
  8 * @author    WHMCS Limited <development@whmcs.com>
  9 * @copyright Copyright (c) WHMCS Limited 2005-2015
 10 * @license   http://www.whmcs.com/license/
 11 * @link      http://www.whmcs.com/
 12 */
 13
 14body {
 15    background-color: #efefef;
 16}
 17
 18/* Container Responsive Behaviour */
 19
 20@media print {
 21    html, body {
 22        width: 750px;
 23    }
 24}
 25
 26.invoice-container {
 27    margin: 15px auto;
 28    padding: 70px;
 29    max-width: 850px;
 30    background-color: #fff;
 31    border: 1px solid #ccc;
 32    -moz-border-radius: 6px;
 33    -webkit-border-radius: 6px;
 34    -o-border-radius: 6px;
 35    border-radius: 6px;
 36}
 37
 38@media (max-width: 895px) {
 39    .invoice-container {
 40        margin: 15px;
 41    }
 42}
 43@media (max-width: 767px) {
 44    .invoice-container {
 45        padding: 45px 45px 70px 45px;
 46    }
 47}
 48
 49@media (max-width: 499px) {
 50    .invoice-header {
 51        text-align: center;
 52    }
 53}
 54
 55.invoice-col {
 56    position: relative;
 57    min-height: 1px;
 58    padding-right: 15px;
 59    padding-left: 15px;
 60}
 61
 62@media (min-width: 500px) {
 63    .invoice-col {
 64        float: left;
 65        width: 50%;
 66    }
 67    .invoice-col.right {
 68        float: right;
 69        text-align: right;
 70    }
 71}
 72
 73/* Invoice Status Formatting */
 74
 75.invoice-container .invoice-status {
 76    margin: 20px 0 0 0;
 77    text-transform: uppercase;
 78    font-size: 24px;
 79    font-weight: bold;
 80}
 81
 82/* Invoice Status Colors */
 83
 84.draft {
 85    color: #888;
 86}
 87.unpaid {
 88    color: #cc0000;
 89}
 90.paid {
 91    color: #779500;
 92}
 93.refunded {
 94    color: #224488;
 95}
 96.cancelled {
 97    color: #888;
 98}
 99.collections {
100    color: #ffcc00;
101}
102
103/* Payment Button Formatting */
104
105.invoice-container .payment-btn-container {
106    margin-top: 5px;
107    text-align: center;
108}
109.invoice-container .payment-btn-container table {
110    margin: 0 auto;
111}
112
113/* Text Formatting */
114
115.invoice-container .small-text {
116    font-size: 0.9em;
117}
118
119/* Invoice Items Table Formatting */
120
121.invoice-container td.total-row {
122    background-color: #f8f8f8;
123}
124.invoice-container td.no-line {
125    border: 0;
126}
127.invoice-container .invoice-header img {
128    max-width: 100%;
129}
130
131/* Overlay */
132
133#fullpage-overlay {
134    display: table;
135    position: fixed;
136    z-index: 1000;
137    top: 0;
138    left: 0;
139    width: 100%;
140    height: 100%;
141    background-color: black;
142    background-color: rgba(0, 0, 0, 0.8);
143    color: #fff;
144}
145#fullpage-overlay .outer-wrapper {
146    position: relative;
147    height: 100%;
148}
149#fullpage-overlay .inner-wrapper {
150    position: absolute;
151    top: 50%;
152    left: 50%;
153    height: 30%;
154    width: 50%;
155    margin: -3% 0 0 -25%;
156    text-align: center;
157}
158#fullpage-overlay .msg {
159    display: inline-block;
160    padding: 20px;
161    max-width: 400px;
162}
163