.address { margin-left: 20px; margin-top: 0; padding-top: 0; } #totalAmountSIPO { display: flex; justify-content: flex-end; margin-right: 20px; } .d-flex { display: flex; } #totalGrossAmountContainer { display: flex; justify-content: flex-end; margin-top: 10px; margin-bottom: 20px; padding-right: 10px; } #totalGrossAmount { text-align: right; font-weight: bold; padding-right: 20px; } .justify-content-between { justify-content: space-between; } .align-items-center { align-items: center; } .po-details strong { flex: 0 0 120px; } .po-details span { flex: 1; text-align: left; } .modal-body .col-md-4 { margin-top: 20px; } #toLabel, #addressLabel { margin-right: 10px; } .nothingFollows { align-items: center; margin-top: 10px; } #poSIDRRemarks { display: inline-block; /* Ensure it behaves like a block for centering */ text-align: center; padding: 10px; margin: 0 auto; } .footer-row { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 15px; } .footer-column { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 15px; height: 200px; box-sizing: border-box; } .footer-span { text-decoration: underline; text-underline-position: under; display: block; margin-bottom: 5px; } .header, .footer { text-align: center; margin: 10px 0; } .content { margin: 10px; } .row { display: flex; margin-bottom: 10px; } .column { flex: 1; padding: 10px; margin-top: 10px; } .column span { margin-bottom: 5px; } .column strong { margin-top: 5px; } .table-container { margin-top: 20px; } table { width: 100%; border-collapse: collapse; } th, td { padding: 8px; text-align: left; } .img-fluid { margin-bottom: 5px; } #P-grossAmount-container { flex: 0 0 24%; text-align: center; } #P-ApAmount-container { flex: 1; } #shippingInstructionsContainer { display: none; /* Start hidden if you prefer */ transition: all 0.3s ease-in-out; }