.rr-details strong {
    flex: 0 0 120px;
}

.rr-details span {
    flex: 1;
    text-align: left;
}

.footer-row {
    position: fixed;
    bottom: 3.7in;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center; 
    width: 100%;
    z-index: 100;
}
.rowSupplier {
    display: flex;
    position: fixed;
    top: 1in;
    margin-left:50px;
}
.address {
    display: flex;
    position: fixed;
    top: 1.2in;
    margin-left: 30px;
}
.rr-reference {
    flex: 1;
    text-align: left;
    float: right !important;
    margin-bottom:50px;
}

.footer-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    line-height: normal;
    margin-right: 15px;
}

/* Override any background color or borders on the header */
#RRDataTable thead tr {
    background-color: transparent !important;
    border: none !important;
}

#RRDataTable th {
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Target the table itself */
#RRDataTable {
    border-collapse: collapse;
    border: none !important;
    border-spacing: 0 !important;
    table-layout: fixed;
    margin-top: 200px !important;
}

/* For DataTables specific styling */
#RRDataTable.dataTable td {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

/* For Bootstrap tables */
#RRDataTable.table-bordered td,
#RRDataTable.table td {
    border: none !important;
}

/* Override any hr elements that might be in the rows */
#RRDataTable tr hr,
#RRDataTable td hr {
    display: none !important;
}

#RRDataTable colgroup col.qty {
    width: 10%;
}
#RRDataTable td:nth-child(1) {
    text-align: center !important;
    padding-right: 0;
}

#RRDataTable colgroup col.itemNo {
    width: 10%;
}

#RRDataTable td:nth-child(3) {
    text-align: center !important;
    padding-right: 0;
}
#RRDataTable colgroup col.uomName {
    width: 10%;
}

/* Then, target the actual cells in that column to adjust alignment and padding */
#RRDataTable td:nth-child(4) { /* assuming this is the 4th column */
    text-align: center !important;
    padding-right: 0;
    padding-left: 30px;
}

/**RR DR*/
#DRRRDataTable thead tr {
    background-color: transparent !important;
    border: none !important;
}

#DRRRDataTable th {
    height: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
}

/* Target the table itself */
#DRRRDataTable {
    border-collapse: collapse;
    border: none !important;
    border-spacing: 0 !important;
    table-layout: fixed;
    line-height: normal;
    padding: 3px 5px;
    height: 15px; 
    box-sizing: border-box;
}
th, td {
    font-family: Roman, sans-serif;
    line-height: normal;
    padding: 3px 5px;
    height: 20px; /* Ensure minimum row height */
    box-sizing: border-box; /* Ensure padding does not overflow */
}
/* For DataTables specific styling */
#DRRRDataTable.dataTable td {
        border-top: 0 !important;
        border-bottom: 0 !important;
}

    /* For Bootstrap tables */
#DRRRDataTable.table-bordered td,
#DRRRDataTable.table td {
        border: none !important;
}

/* Override any hr elements that might be in the rows */
#DRRRDataTable tr hr,
#DRRRDataTable td hr {
        display: none !important;
}

#DRRRDataTable colgroup col.qty {
        width: 10%;
}

#DRRRDataTable td:nth-child(1) {
        text-align: center !important;
        padding-right: 0;
}

#DRRRDataTable colgroup col.itemNo {
        width: 10%;
}

#DRRRDataTable td:nth-child(3) {
        text-align: center !important;
        padding-right: 0;
}

#DRRRDataTable colgroup col.uomName {
        width: 10%;
}

/* Then, target the actual cells in that column to adjust alignment and padding */
#DRRRDataTable td:nth-child(4) { /* assuming this is the 4th column */
        text-align: left !important;
        padding-right: 0;
        padding-left: 20px;
}


/* Custom CSS for RR */
.rr-modal-backdrop .modal-xl {
    /* Set specific width for the modal dialog */
    max-width: 1200px;
    width: 95%;
}

.rr-modal-backdrop .modal-content {
    /* Set specific height for the modal content */
    height: 100vh;
    max-height: 1000px;
}

.rr-modal-backdrop .modal-body {
    /* Ensure the modal body takes appropriate height */
    height: calc(100% - 100px); /* Subtract modal footer height */
  
    padding: 20px;
}

#printableSIDR {
    /* Make sure this container uses full available space */
    height: 100%;
    width: 100%;
}

#printableSIDR .content {
        /* Make content use full height */
        height: 100%;
        position: relative;
}

#RRContainer {
    /* Size for the container that holds your form content */
    min-height: 640px;
    position: relative;
    width: 100%;
    background-color: white;
}

/* Make modal appear properly centered */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
/* Adjust modal appearance on smaller screens */
@media (max-width: 992px) {
    .rr-modal-backdrop .modal-xl {
        width: 98%;
        margin: 10px auto;
    }

    .rr-modal-backdrop .modal-content {
        max-height: 100vh;
    }
}
/* Customized modal backdrop */
.rr-modal-backdrop {
    z-index: 1000; /* Set a lower z-index for the backdrop */
    background-color: rgba(193, 196, 210, 0.5); /* Customize the background color and opacity as needed */
}

.modal-backdrop {
    z-index: 1; /* Set a lower z-index for the backdrop */
    background-color: rgba(0, 0, 0, 0.5);
}