body{
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    /* margin: 2rem; */
}

/* Table styles */
th{
    text-align: center;
    text-transform: uppercase;
    background-color: #f8f9fa;
    /* font-size: 13px; */
}

.table-header {
    /* background-color: #868686; */
    color: #000;
    font-weight: bold;
}

.table-header th {
    white-space: nowrap; /* Prevent text wrapping */
    width: auto; /* Adjust width to fit content */
    padding: 0 !important;
}


.table-header th:first-child,
.table-header th:nth-child(2),
.table-header th:nth-child(3),
.table-header th:nth-child(4),
.table-header th:nth-child(5),
.table-header th:nth-child(6) {
    width: 16.6%;
    vertical-align:middle;
    border: 3px solid #000;
}


tbody td:nth-child(2), tbody td:nth-child(3) {
    text-align: center;
}

tbody td:nth-child(3) span span {
    width: 100%;
    text-align: center;
}

.table-bordered > tbody > tr > td{
    font-weight: 600;
    font-size: 12px;
    vertical-align: middle;
}

.table-bordered > tbody > tr > td,
.table-bordered > thead > tr > th {
    padding: 0 0.5rem;
    height: fit-content;
    border: 2px solid #000;
    padding: 1px 2px;
    /* padding: 0 2px; */
}

.table-bordered > thead > tr > th {
    font-size: 13px;
}


.table-bordered > tbody{
    font-size: 14px;
}

.table-bordered > thead,
.table-bordered > tbody,
.table-bordered > tfoot {
    /* 
.table-bordered > tbody > tr */
    border: 3px solid #000;
}

.table-bordered .bar-col {
    
    border-top: 0 !important;
    border-bottom: 0 !important;
}


.bar{
    background-color: green;
    position: absolute;
    /* right: 0; */
    left: 103%;
    /*100% is 16.6% of all table width*/
    /* 130% is 1 col of the righ col */
    /* add the value inside the calc to automatically set the width */
    
    /* width: calc(1*101%);  */

    /* calc(3*103%); */
    /* max-width: calc(3*104%); */
    max-width: calc(3*103%);

    padding: 0;
    height: 10px;
    font-weight: bold;
}

.td-bar{
    position: relative;
    display: flex;
    align-items: center;
    /* border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important; */
    border: 0;
    height: 20px;
}

.parenthetical-text{
    font-size: 9px;
    font-weight: 100;
}

.text-center{
    text-align: center;
}

/* Document header details */
.document-header-details .field-wrapper{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.document-header-details .title h1{
    color: #868686;
    font-weight: 700;
    margin-bottom: 0;
    position: relative;
}

.document-header-details .title .sub{
    font-size: 18px !important;
    position: absolute;
    top: 20px;
}

.document-header-details .field-wrapper .field-name{
    text-transform: uppercase;
    font-weight: bold;
}

.document-header-details .field-wrapper .field-address{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.document-header-details .logo img{
    width: 150px;
}

.document-header-details{
    font-size: 13px;
}

/* Notes */
.table-notes h4{
    font-weight: 700;
    margin-top: 20px;
}

.table-notes ul {
    padding: 0 0 0 15px;
}

.pdf-viewer{
    height: 94vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* PDF Pages */
.page-address{
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 30px;
}

.page-title{
    text-align: center;
    width: 100%;
    margin-bottom: 30px;
    font-size: 26px;
    text-decoration: underline;
}

.secondary-font-color{
    color: #689f38;
}

.full-page {
    min-height: 100vh;   /* Ensure it takes the full height of the page */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.page-content {
    flex-grow: 1;       /* Pushes the footer to the bottom */
}
.page-footer {
    width: 90%;
    margin: 0 auto;     /* Center the disclaimer */
}
.text-justify{
    text-align: justify;
}
.user-details-header{
    width: 200px
}

.table-header{
    /* background-color: #c0c0c0; */
    font-weight: bold;
}

.table-footer{
    font-size: 10px;
}

@page {
    size: A4;
    margin: 20px;
    box-shadow: initial;
    -webkit-print-color-adjust: exact; 
}

.pdf-container {
    width: 100% !important;
    /* max-width: 210mm !important; */
    margin: 0 auto !important;
    /* padding: 10px !important; */
}

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body {
        width: initial;
        height: initial;
        margin: 0;
        padding: 0;
        overflow: hidden;
        -webkit-print-color-adjust: exact; 
        -webkit-box-shadow: initial;
        box-shadow: initial;
    }

    .page-break {
        page-break-before: always;
        display: block;
        clear: both;
        height: 0;
        margin: 0;
        padding: 0;
        border: none;
    }

    .user-details-header{
        outline: none;
        text-align: right;
        border: none;
    }

    .user-details-header::-webkit-calendar-picker-indicator {
        display: none;
        -webkit-appearance: none;
    }

    textarea{
        display: none !important;
    }

    /* textarea,
    input {
        display: block !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    textarea:focus,
    input:focus {
        outline: none !important;
        box-shadow: none !important;
    } */

    #userData__address_span{
        display: block !important;
        white-space: pre-wrap;
    }
   
    .table-footer{
        font-size: 10px;
    }

    table{
        page-break-inside: avoid !important;
        border-collapse: collapse !important;
    }

    .table-bordered > tbody > tr > td {
        font-size: 11px;
    }    
}