.invoice-slip { font-size: 13px; line-height: 20px; }

.invoice-header {
  padding: 10px 0;
  margin: 0 0 20px;
}

#lab-logo {
  float: left;
  margin-top: 8px;
}

#lab-logo img {
  height: 70px;
}

.lab-detail {
  float: right;
  text-align: right;
}


/*.details {
  margin-bottom: 50px;
}*/

.client {
  padding-left: 6px;
  border-left: 6px solid #0685af;
  float: left;
}

.client .to {
  color: #777777;
}

h2.name {
  font-size: 1.4em;
  font-weight: normal;
  margin: 0;
}



.invoice h1 {
  color: #0685af;
  font-size: 2.4em;
  line-height: 1em;
  font-weight: normal;
  margin: 0  0 10px 0;
}

#invoice .date {
  /*font-size: 1.1em;*/
  color: #777777;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 20px;
}

.invoice-table th,
.invoice-table td {
  padding: 20px;
  background: #EEEEEE;
  text-align: center;
  border-bottom: 1px solid #FFFFFF;
}

.invoice-table th {
  white-space: nowrap;        
  font-weight: normal;
}

.invoice-table td {
  text-align: right;
}

.invoice-table td h3{
  color: #00a651;
  font-size: 1.2em;
  font-weight: normal;
  margin: 0 0 0.2em 0;
}

.invoice-table  .no {
  color: #FFFFFF;
  font-size: 1.6em;
  background: #00a651;
}

.invoice-table .desc {
  text-align: left;
}

.invoice-table .unit {
  background: #DDDDDD;
}

.invoice-table .qty {
}

.invoice-table .total {
  background: #00a651;
  color: #FFFFFF;
}

.invoice-table td.unit,
.invoice-table td.qty,
.invoice-table td.total {
  font-size: 1.2em;
}

.invoice-table tbody tr:last-child td {
  border: none;
}

.invoice-table tfoot td {
  padding: 10px 20px;
  background: #FFFFFF;
  border-bottom: none;
  font-size: 1.2em;
  white-space: nowrap; 
  border-top: 1px solid #AAAAAA; 
}

.invoice-table tfoot tr:first-child td {
  border-top: none; 
}

.invoice-table tfoot tr:last-child td {
  color: #00a651;
  font-size: 1.4em;
  border-top: 1px solid #00a651; 

}

.invoice-table tfoot tr td:first-child {
  border: none;
}

#thanks{
  font-size: 2em;
  margin-bottom: 50px;
}

#notices{
  padding-left: 6px;
  border-left: 6px solid #0685af;  
  margin-bottom: 50px;
}

#notices .notice {
  font-size: 1.2em;
}






/* ==================================== Responsive Style ============================ */
@media (max-width:767px) {
  #lab-logo { margin: 0; }
  .invoice { border-left: 6px solid #0685af;  padding-left: 6px; }
  .detailing { margin: 3px 0; }
  .invoice-header { margin: 20px 0 30px; background: #f4f6f6; border-bottom: none !important; box-shadow: 0px 0px 5px #cac8c8; }
  .invoice-table .total { color: #6d8190 }




  /* Force table to not be like tables anymore */
    .invoice-table table, 
    .invoice-table thead, 
    .invoice-table tbody, 
    .invoice-table th, 
    .invoice-table td, 
    .invoice-table tr {
      display: block;
    }

    .invoice-table .no { color: #0685af; }

    /* Hide table headers (but not display: none;, for accessibility) */
    .invoice-table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    .invoice-table tbody tr {
      margin: 0 0 1rem 0;
      box-shadow: 0px 0px 5px #cac8c8;
    }
      
    .invoice-table tbody td {
      /* Behave  like a "row" */
      border: none !important;
      position: relative;
      padding: 5px 5px 5px 50% !important;
      font-size: 11px !important;
      line-height: normal;
      text-align: left;
      background: #fbfbfb  !important;
    }

    .invoice-table tbody td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 0;
      left: 6px;
      width: 45%;
      padding-right: 10px;
      padding-top: 8px;
      padding-bottom: 8px !important;
      font-weight: bold;
    }

    /*
    Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
    */
    .invoice-table tbody td:nth-of-type(1):before { content: "#"; }
    .invoice-table tbody td:nth-of-type(2):before { content: "Booking Services"; }
    .invoice-table tbody td:nth-of-type(3):before { content: "Amount Before Discount"; }
    .invoice-table tbody td:nth-of-type(4):before { content: "Discount Offered(%)"; }
    .invoice-table tbody td:nth-of-type(5):before { content: "You Saved"; }


    .invoice-table tfoot { position: fixed; width: 100%; background: #f00; bottom: 0; left: 0; box-shadow: 0px 2px 10px #3a3a3a; }
    .invoice-table tfoot tr { margin: 0; display: inline-flex; width: 100% !important; }
    .invoice-table tfoot tr td:first-child { display: none; }
    .invoice-table tfoot tr td { width: 100%; font-size: 12px; padding: 4px 15px; background: #00a651; color: #fff; }
    .invoice-table tfoot tr:last-child td { color: #fff; font-size: 1.2em; }
    .invoice-table tfoot tr:last-child td, .invoice-table tfoot tr td { border-color: #037d3f; }

    #thanks { margin-bottom: 20px; }
    #notices { margin-bottom: 100px; }

}