$primary: ocyancolor("primary_color");
$secondary: ocyancolor("secondary_color");
$info: ocyancolor("info_color");
$success: ocyancolor("success_color");
$danger: ocyancolor("danger_color");
$warning: ocyancolor("warning_color");
$font-size-regular: 14px;
$font-size-small: 12px;

body {
  font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
  text-align: center;
  font-size: $font-size-regular;
  color: #777;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;

  h1 {
    font-weight: bold;
    margin-bottom: 0px;
    padding-bottom: 0px;
    color: #000000;
  }

  h3 {
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 20px;
    color: #555;
  }

  a {
    color: $primary
  }

  address {
    font-style: normal;
    font-size: $font-size-regular;
    margin-bottom: 7px;
  }

  .invoice-box {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px 15px;
    font-size: $font-size-small;
    line-height: 24px;
    color: #2d2d2d;

    table {
      width: 100%;
      line-height: inherit;
      text-align: left;
      border-collapse: collapse;

      .invoice_header{
        text-align:left;
        margin-top: 0;
      }

      td {
        padding: 2px 0;
        vertical-align: top;
      }

      .heading {
        td {
          background: $primary;
          color: #fff;
          font-weight: bold;
          padding: 5px 0px;
          margin: 0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          border: 2px solid $primary;

          small {
            margin-right: 10px;
          }
        }

        td:first-child {
          text-align: left;
          padding: 5px 10px;
          min-width: 40% !important;
        }
      }

      .item {
        td {
          padding: 7px;
        }

        .last {
          padding-bottom: 10px;
        }
      }

      .top {
        table {
          img {
            max-width: 400px;
            max-height: 300px;
            margin-right: auto;
            display: block;
          }
        }
      }

      .item {
        td {
          border-bottom: 1px solid #eee;
          &:first-child{
            text-align:left;
          }
        }
        th{
          &:first-child{
            text-align:left;
          }
        }
        &.last{
          td{
            border-bottom: none;
          }
        }
      }
    }

    table.address-table {
      font-size: $font-size-regular;
      table-layout: fixed;
      margin-bottom: 2px;
      text-align:right;
      tr {
          &.header {
              td {
                  &:first-child {
                      vertical-align: bottom;
                  }
                  padding-bottom: 20px;
                  h1.invoice {
                      text-align: left;
                      font-size: 40px;
                      color: $primary;
                  }

              }
              border-bottom: 1px solid $primary;
          }
      }
    }

    table.order-info-table {
      font-size: $font-size-regular;
      table-layout: fixed;
      margin-bottom: 10px;
      th, td {
          &.p-12 {
              padding: 0px 12px;
          }
      }
    }

    .total.space-under {
      td {
        &:nth-child(3), &:nth-child(2) {
          font-weight: bold;
        }
      }
    }

    .space-under {
      & > div {
        padding-bottom: 1em;
      }
    }

    th.normal {
      font-weight: normal;
      padding-left: 10px;
    }

    .first-total {
      th {
        padding-left: 10px;
      }
    }
  }

  .option-list {
    padding-left: 7px;
    list-style: none;
    margin: 5px 0;

    li {
      font-size: $font-size-small;
    }
  }

  .text-right{
    text-align:right;
  }
  .text-center{
    text-align:center;
  }
  .text-left{
    text-align:left;
  }
  .mt-20 {
    margin-top: 20px;
  }
  .d-block {
    display: block;
  }

  .underline {
    text-decoration: underline;
  }

  .primary-color {
    color: $primary;
  }
  .company-info{
    max-width:400px;
  }
  .footer .rich-text p {
      text-align: justify;
  }
}
