@font-face {
    font-family: 'Styrene';
    src: url(https://media.creatively.life/commons/hostedasset/IE3gdQ5jSq2bBpjS5Ib8eQ.woff2) format("woff2"),
     url(https://media.creatively.life/commons/hostedasset/TapRoV10REOacgb3R5jLlw.woff) format("woff");
    font-weight: 900;
    font-style: normal;
   }
   @font-face {
     font-family: 'Riposte';
     src: url(https://api.creatively.life/static/fonts/Riposte-Lazer.89bafb79d3c1.woff2) format("woff2"),
         url(https://api.creatively.life/static/fonts/Riposte-Lazer.8f0fca12222f.woff) format("woff");
     font-weight: 100;
     font-style: normal;
     font-stretch: normal;
    }
    @font-face {
     font-family: 'Riposte';
     src: url(https://api.creatively.life/static/fonts/Riposte-Lazer.89bafb79d3c1.woff2) format("woff2"),
         url(https://api.creatively.life/static/fonts/Riposte-Lazer.8f0fca12222f.woff) format("woff");
     font-weight: 300;
     font-style: normal;
     font-stretch: normal;
    }
   @font-face {
    font-family: 'Riposte';
    src: url(https://media.creatively.life/commons/hostedasset/uAPFcFqCS5mGxCm84RN3Qg.woff2) format("woff2"),
     url(https://media.creatively.life/commons/hostedasset/GoSM8YaBQzW50PvBpUggFg.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
   }
   @page
   {
     size: none;
     margin: 20mm 0mm 0mm;
   }
   @page:first{
       size: none;
       margin: 0mm;
   }
   .w-100 {
       width: 100%;
   }
   .w-50 {
       width: 50%
   }
   @media screen {
    body {
     margin: 0;
     padding: 0;
     background-color: #fffffe;
     font-weight: 400;
     font-family: 'Riposte', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, RobotoDraft, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    }
    .root {
      font-family: 'Riposte', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, RobotoDraft, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      font-size: 20px;
      width: 100%;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      color-scheme: light only;
    }
    .header {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     height: 150px;
     border-bottom: 1px solid #e7e7e7;
    }
    .logo {
     display: flex;
     align-items: center;
     justify-content: center;
     border-right: 1px solid #e7e7e7;
     padding: 0px 30px;
    }
    .logo > svg {
     height: 100%;
     width: 100%;
     max-width: 379px;
     max-height: 71px;
    }
    .invoice-number {
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 45px;
     font-weight: 900;
     font-family: 'Styrene', sans-serif;
     padding: 0 30px;
    }
    .content {
     padding: 77px 66px 30px;
    }
    .content-header {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     margin-bottom: 27px;
     align-items: flex-start;
     gap: 20px;
    }
    .invoice-heading {
     font-size: 56px;
     line-height: 100%;
     font-weight: 300 !important;
    }
    .invoice-description {
     font-size: 16px;
     line-height: 150%;
     /* font-weight: 100; */
     margin-top: 17px;
    }
    .person-wrapper {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
    }
    .person-wrapper > * {
        margin-bottom: 23px;
    }
    .person-wrapper:last-child {
        margin-bottom: 0;
    }
    .person {
     display: flex;
     align-items: flex-start;
     max-width: 198px;
     width: 100%;
    }
    .person-invoice-date-wrapper {
        display: flex;
        align-items: flex-start;
        width: 100%;
        justify-content: flex-end;
    }
    .profile-image {
     width: 38px;
     height: 38px;
     overflow: hidden;
     border-radius: 8px;
     min-width: 38px;
     margin-top: 4px;
    }
    .line {
     border: 1px solid #e7e7e7;
    }
    .content-List-wrapper {
     padding: 41px 0 49px;
    }
    p {
     margin: 0;
    }
    ul, li {
     list-style-type: none;
     padding: 0;
     margin: 0;
    }
    .list {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     align-items: center;
    }
    .list-description {
     /* font-weight: 100; */
    }
    .list-amount {
     /* font-weight: 100; */
     margin-left: auto;
    }
    .invoice-items {
     margin-bottom: 22px;
    }
    .invoice-items:last-child {
     margin-bottom: 0;
    }
    .content-footer {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-gap: 72px;
     margin-top: 22px;
    }
    .notes-description {
     margin-top: 6px;
    }
    .figure {
     display: flex;
     justify-content: space-between;
     /* font-weight: 100; */
    }
    .figure-list-wrapper {
     margin-top: 13px;
    }
    .figure-list {
     margin-bottom: 4px
    }
    .figure-list:last-child {
     margin-bottom: 0px
    }
    .font-12 {
     font-size: 12px;
    }
    .font-16 {
     font-size: 16px;
    }
    .font-18 {
     font-size: 19px;
    }
    .font-22 {
     font-size: 22px;
    }
    .font-13 {
     font-size: 13px;
    }
    .pad-left {
        padding-left: 35px;
    }
    .pad-right {
        padding-right: 35px;
    }
    .approved-wrapper {
        display: flex;
        flex-direction: row;
        gap: 40px;
    }
    .m-l-20 {
        margin-left: 20px;
    }
    .m-b-10 {
        margin-bottom: 20px;
    }
    .b-s-15 {
        border-spacing: 15px;;
    }
   }
   @media print {
     body {
       margin: 0mm;
       padding: 0mm;
       font-weight: 300;
       background-color: #fffffe;
       font-family: 'Riposte', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, RobotoDraft, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
     }
     .root {
       font-family: 'Riposte', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Roboto, RobotoDraft, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
       font-size: 5mm;
       width: 100%;
       -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
       color-scheme: light only;
     }
     .header {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      height: 40mm;
      border-bottom: 1px solid #e7e7e7;
     }
     .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 0.2mm solid #e7e7e7;
      padding: 0mm 8mm;
     }
     .logo > svg {
      height: 100%;
      width: 100%;
      max-width: 100mm;
      max-height: 19mm;
     }
     .invoice-number {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 33pt;
      font-weight: 900;
      font-family: 'Styrene', sans-serif;
      padding: 0 8mm;
     }
     .content {
      padding: 20mm 17mm 8mm;
     }
     .content-header {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: 7mm;
      align-items: flex-start;
      gap: 5mm;
     }
     .invoice-heading {
      font-size: 42pt;
      line-height: 100%;
      font-weight: 300 !important;
     }
     .invoice-description {
      font-size: 12pt;
      line-height: 150%;
      /* font-weight: 100; */
      margin-top: 4mm;
     }
     .person-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
     }
     .person-wrapper > * {
        margin-bottom: 6mm;
    }
    .person-wrapper:last-child {
        margin-bottom: 0;
    }
     .person {
      display: flex;
      align-items: flex-start;
      max-width: 53mm;
      width: 100%;
     }
     .person-invoice-date-wrapper {
        display: flex;
        align-items: flex-start;
        width: 100%;
        justify-content: flex-end;
    }
     .profile-image {
      width:10mm;
      height:10mm;
      overflow: hidden;
      border-radius: 2mm;
      min-width: 10mm;
      margin-top: 1mm;
     }
     .line {
      border: 0.2mm solid #e7e7e7;
     }
     .content-List-wrapper {
      padding: 11mm 0mm 13mm;
     }
     p {
      margin: 0mm;
     }
     ul, li {
      list-style-type: none;
      padding: 0mm;
      margin: 0mm;
     }
     .list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
     }
     .list-description {
      /* font-weight: 100; */
     }
     .list-amount {
      /* font-weight: 100; */
      margin-left: auto;
     }
     .invoice-items {
      margin-bottom: 6mm;
     }
     .invoice-items:last-child {
      margin-bottom: 0mm;
     }
     .content-footer {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 19mm;
      margin-top: 6mm;
     }
     .notes-description {
      margin-top: 2mm;
     }
     .figure {
      display: flex;
      justify-content: space-between;
      /* font-weight: 100; */
     }
     .figure-list-wrapper {
      margin-top: 3mm;
     }
     .figure-list {
      margin-bottom: 1mm
     }
     .figure-list:last-child {
      margin-bottom: 0mm
     }
     .font-12 {
      font-size: 9pt;
     }
     .font-16 {
      font-size: 12pt;
     }
     .font-18 {
      font-size: 13pt;
     }
     .font-22 {
      font-size: 16pt;
     }
     .font-13 {
      font-size: 10pt;
     }
     .pad-left {
        padding-left: 10mm;
    }
    .pad-right {
        padding-right: 10mm;
    }
    .approved-wrapper {
        display: flex;
        flex-direction: row;
        gap: 10mm;
    }
    .m-l-20 {
        margin-left: 5mm;
    }
    .m-b-10 {
        margin-bottom: 5mm;
    }
    .b-s-15 {
        border-spacing: 4mm;
    }
   }
