Watermark Layering Fix

<style>
body {
      font-family: "DejaVu Sans", "DejaVu Sans Mono", "DejaVu", sans-serif, monospace;
      font-size:11px;
    }
    @page { 
  		margin: 480px 50px 100px 50px;
  	} 
    #header {
  		position: fixed; 
  		left: 0;
  		top: -460px;
  		right: 0;
  		height: 400px; 
  		text-align: center;
  	}
    #footer { 
  		position: fixed; 
  		left: 0;
  		bottom:0;
  		right: 0;
  		height: 100px; 
  		font-size:11px; 
  		text-align: center;
  	} 
  	#content { 
  		font-size:10px;
  	}

    .logo img {
      max-width:160px;
    }

   #header > table > tr > td{
        width: 100%!important;
        display: block;
    }

    #patient-details {
        text-align: left;
        font-size: 12px;
    }
    #patient-details > div,
    #after_cont > div{
        padding: 2px 0;
    }

    #after_cont{
        text-align:center;
    }
    #after_cont{
        margin-top:20px;
        font-size: 12px;
    }
    #mtab-1 td,th,
    #mtab-2 td,th{
        border:1px solid #999;
    }
      
    #watermark{
		  position:fixed;
		  font-family: 'arial';
		  font-size:120px;
		  bottom:50%;
		  color:lightgrey;
		  left:0%;
		  text-align:center;
		  opacity:0.8;
		  transform: rotate(-50deg);
		  transform-origin: 50% 50%;
		  z-index: -1000%;
	  }
</style>

For Use at PostMyMeds Only

[[PDFLOGO]]
[[PDFCOMPANYNAME]]
[[PDFREGISTEREDADDRESS]]
[[PDFCOMPANYDETAILS]]

Patient Name: [[BILLING_FNAME]] [[BILLING_LNAME]]
Patient DOB: [[BILLING_DOB]]
Patient Address:
[[PDFBILLINGADDRESS]]
Date Issued: [[ORDER_DATE]]

[[ORDERINFOHEADER]]
[[MEDICATION_INFO]]

Prescriber Name: [[PRESCRIBER_NAME]]
Prescriber Registration Number: [[PRESCRIBER_REG_NUM]]
[[PRESCRIBER_SIGN]]

[[PDFLOGO]]
[[PDFCOMPANYNAME]]

watermark showing above text

### Updated Watermark CSS

#watermark {
    position: fixed;
    font-family: 'Arial', sans-serif;
    font-size: 120px;
    bottom: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    color: lightgrey;
    opacity: 0.1; /* Reduced opacity for a softer effect */
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    z-index: -1; /* Ensure the watermark stays behind other elements */
    pointer-events: none; /* Prevent the watermark from interfering with any clickable elements */
}

### Explanation of Changes:
1. **z-index**: Changed to `-1` to ensure the watermark stays behind all other content.
2. **opacity**: Adjusted to `0.1` for a more subtle watermark effect. Adjust as needed.
3. **pointer-events**: Set to `none` so that the watermark does not interfere with any links or interactive elements on the PDF.

### Placement Fix:
If the watermark still appears above your text, ensure that no other elements have a `z-index` higher than `-1`. Also, confirm that your HTML elements are being rendered in the expected stacking order.

This should ensure your watermark appears behind the content in your generated PDF. Let me know if you encounter any further issues!

### Updated Watermark CSS for Better Clarity

#watermark {
    position: fixed;
    font-family: 'Arial', sans-serif;
    font-size: 80px; /* Adjust font size to be smaller for better clarity */
    bottom: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(192, 192, 192, 0.15); /* Use rgba for better opacity control */
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: -1;
    pointer-events: none;
    opacity: 1; /* Keep opacity at full for clarity; adjust color for transparency */
    -webkit-print-color-adjust: exact; /* Ensure proper color rendering in print */
}

### Additional Recommendations:
1. **Reduce the Font Size**: Sometimes, very large fonts can appear pixelated. Try reducing the font size to something like `80px` or `100px`.
2. **Use `rgba()` Colors**: Instead of using the `opacity` property, use `rgba()` to set the transparency. This often results in better rendering in PDFs.
3. **Print Color Adjustment**: Adding `-webkit-print-color-adjust: exact;` can improve color accuracy in some PDF generators.
4. **Font Choice**: If `Arial` is causing issues, you might want to try a different sans-serif font like `"DejaVu Sans"` which often renders more clearly in PDFs.

### Example of How It Looks:
The adjustments above should reduce blur and increase the sharpness of your watermark text in the generated PDF. Adjust the font size and color opacity as needed for the best visual effect.

Let me know if these adjustments resolve the blur issue!

### Adjusted Watermark CSS for Optimal Clarity and Readability

#watermark {
    position: fixed;
    font-family: 'Arial', sans-serif;
    font-size: 100px; /* Adjust for desired size */
    bottom: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    color: rgba(128, 128, 128, 0.1); /* Soft grey color with low opacity */
    transform: rotate(-45deg);
    transform-origin: center;
    z-index: -1;
    pointer-events: none;
    -webkit-print-color-adjust: exact; /* Ensure consistent color in PDF */
}

### Key Adjustments:
1. **Use `rgba()` for Color**: Instead of using the `opacity` property, we're using `rgba(128, 128, 128, 0.1)`. This ensures the text is transparent but still clear, with `0.1` being a subtle level of transparency. Adjust this value as needed (e.g., `0.2` or `0.3` for more visibility).
2. **Reduced Font Size**: A slightly smaller font size may appear sharper. Adjust the size (`100px` here) as needed for your design.
3. **Color Tuning**: Using a mid-grey color like `rgba(128, 128, 128, 0.1)` provides a softer, less intrusive watermark. You can darken this value for higher contrast.

### Explanation:
– Using `rgba()` helps avoid the blurriness that comes from reducing the `opacity` of a fully opaque color.
– The `-webkit-print-color-adjust: exact;` ensures better consistency when rendering PDFs.

This should help the watermark remain visible but subtle, without the blurriness. Adjust the `rgba` opacity value to get the perfect balance for your needs.