.roboto-light {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}


 body {
     font-family: Roboto !important;
     margin: 30px;
     padding: 0;
     background: #fff;
     color: #030303;
     font-size: 16px;
 }

 .invoice-box {
     border: 2px solid #031564;
     padding: 30px;
     width: 900px;
     margin: auto;
     border-radius: 15px;
 }

 .header {
     display: flex;
     justify-content: space-between;
     align-items: start;
 }

 .logo {
     display: flex;
     gap: 10px;
 }

 .logo img {
     object-fit: contain;
     width: 150px;
 }

 .logo h1 {
     color: #0B5FAA;
     margin: 0;
     font-size: 30px;
     line-height: 1;
 }

 .company-info {
     font-size: 13px;
     margin-top: 8px;
 }

 .invoice-info {
     text-align: right;
     font-size: 14px;
 }

 .invoice-info b {
     color: #0B1A66;
 }

 .sold-to {
     margin: 10px 0 5px;
     font-size: 18px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     font-size: 20px;
     font-weight: bold;
 }

 .sold-to b {
     color: #031564;
 }

 .table {
     width: 100%;
     border-collapse: collapse;
     font-size: 15px;
 }

 .table th {
     background: #67dfb9;
     color: #031564;
     padding: 10px;
     text-align: left;
     font-weight: bold !important;
 }

 .table td {
     padding: 10px;
 }

 .amounts {
     font-size: 16px;
     width: 100%;
 }

 .amounts td {
     padding: 4px 0;
 }

 .amounts td:last-child {
     text-align: right;
 }

 .total {
     font-weight: bold;
     font-size: 18px;
 }

 .footer {
     font-size: 12px;
     color: #031564;
 }

 .bold-blue {
     color: #0B1A66;
     font-weight: bold;
     text-align: right;
 }

 .bold {
     font-weight: bold;
     font-size: 16px;
 }

 .td-flex {
     display: flex;
     justify-content: space-between;
 }

 .event_name {
     font-size: 18px;
 }