@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

      .br1{
        border: 1px solid #eee;
      }
      .main-box {
          min-height: 300px;
          max-width: 1000px;
          margin: auto;
          padding: 30px;
          border-radius: 10px;
          font-size: 16px;
          line-height: 24px;
          font-family: 'DM Sans', sans-serif;
          color: #181818;
      }

      .invoice-box {
          min-height: 300px;
          max-width: 1000px;
          margin: auto;
          padding: 30px;
          border-radius: 10px;
          line-height: 24px;
          color: #181818;
      }
      
      .invoice-box table {
          width: 100%;
          line-height: inherit;
          text-align: left;
      }

      .pwf{
        text-align: center;
        padding: 200px 0 0;
      }
      
      .invoice-box table td {
          padding: 5px;
          vertical-align: top;
      }
      
      .invoice-box table tr td:nth-child(2) {
          text-align: right;
      }
      
      .invoice-box table tr.top table td {
          padding-bottom: 20px;
      }
      
      .invoice-box table tr.top table td.title {
          font-size: 45px;
          line-height: 45px;
          color: #333;
      }
      
      .invoice-box table tr.information table td {
          padding-bottom: 40px;
      }
      
      .invoice-box table tr.heading td {
          background: #fafafa;
          border-bottom: 1px solid #f1f1f1;
          font-weight: bold;
      }
      
      .invoice-box table tr.details td {
          padding-bottom: 20px;
      }
      
      .invoice-box table tr.item td{
          border-bottom: 1px solid #eee;
      }
      
      .invoice-box table tr.item.last td {
          border-bottom: none;
      }
      
      .invoice-box table tr.total td:nth-child(2) {
          border-top: 2px solid #eee;
          font-weight: bold;
      }

      .brd-30{
        border-radius: 30px;
      }

      .p-10{
        padding: 10px;
      }
      
      @media only screen and (max-width: 600px) {
          .invoice-box table tr.top table td {
              width: 100%;
              display: block;
              text-align: center;
          }
          
          .invoice-box table tr.information table td {
              width: 100%;
              display: block;
              text-align: center;
          }
      }
      
      /** RTL **/
      .rtl {
          direction: rtl;
          font-family: 'DM Sans', sans-serif;
      }
      
      .rtl table {
          text-align: right;
      }
      
      .rtl table tr td:nth-child(2) {
          text-align: left;
      }

      .w-40{
        width: 80px !important;
      }