body {
  background-color: var(--bg-lifted);
}

/* Container Responsive Behaviour */

@media print {
  html, body {
    width: 750px;
  }
}

.invoice-container {
  margin: 15px auto;
  padding: 70px;
  max-width: 850px;
  background-color: #fff;
  border: 1px solid #ccc;
  -moz-border-radius: var(--rounding-sm);
  -webkit-border-radius: var(--rounding-sm);
  -o-border-radius: var(--rounding-sm);
  border-radius: var(--rounding-sm);
}

@media (max-width: 895px) {
  .invoice-container {
    margin: 15px;
  }
}
@media (max-width: 767px) {
  .invoice-container {
    padding: 45px 45px 70px 45px;
  }
}

@media (max-width: 499px) {
  .invoice-header {
    text-align: center;
  }
}

.invoice-col {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 500px) {
  .invoice-col {
    float: left;
    width: 50%;
  }
  .invoice-col.right {
    float: right;
    text-align: right;
  }
}

/* Invoice Status Formatting */

.invoice-container .invoice-status {
  margin: 20px 0 0 0;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: bold;
}

/* Invoice Status Colors */

.draft {
  color: #888;
}
.unpaid {
  color: #cc0000;
}
.paid {
  color: #779500;
}
.refunded {
  color: #224488;
}
.cancelled {
  color: #888;
}
.collections {
  color: #ffcc00;
}

/* Payment Button Formatting */

.invoice-container .payment-btn-container {
  margin-top: 5px;
  text-align: center;
}
.invoice-container .payment-btn-container table {
  margin: 0 auto;
}

/* Text Formatting */

.invoice-container .small-text {
  font-size: 0.9em;
}

/* Invoice Items Table Formatting */

.invoice-container td.total-row {
  background-color: #f8f8f8;
}
.invoice-container td.no-line {
  border: 0;
}
.invoice-container .invoice-header img {
  max-width: 100%;
}

/* Overlay */

#fullpage-overlay {
  display: table;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
#fullpage-overlay .outer-wrapper {
  position: relative;
  height: 100%;
}
#fullpage-overlay .inner-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 30%;
  width: 50%;
  margin: -3% 0 0 -25%;
  text-align: center;
}
#fullpage-overlay .msg {
  display: inline-block;
  padding: 20px;
  max-width: 400px;
}