*{
    box-sizing: border-box;
} 
 body {
            font-family: 'Calibri', 'Gill Sans', 'Gill Sans MT','Trebuchet MS', sans-serif;
           
       }
        #wrapper {
            width:100%;
            text-align:center;
            margin : auto;
        }
       .thetittle{
        font-family: 'Arial', 'Verdana', 'Tahoma';
        }
        .theaddress{
            font-family: 'Arial', 'Verdana', 'Tahoma'; 
            font-size:10px;
            line-height:10px;
        }
        TABLE {FONT: 8PT TAHOMA;
            border-collapse:collapse;  
            box-align:"Center"; 
            border:1;
        }
        .contentdiv{
            position:static; /* Ensures it stays on top and fixed relative to the viewport */
            left: 50%; /* Moves the left edge of the div to the horizontal center of the viewport */
            width: 100%;
            height: auto;
            background-color: white;
            text-align: center;
        }
        @media print {
            .printnoshow {
                display: none;

            }
        }

        @media screen {
            .screennoshow {
                display: none;
            }
        }

        @media screen,
        print {
            .noshowall {
                display: none;
            }
        }
        @media print {
        #wrapper {
            position: absolute;
           /* left: 0;*/
            top: 0;
        }
    }
       
       @page {
        /* size: <%=pagewidth%> <%=pageheight%>;  width height */
      }
    h1, p, table {
        margin:auto;
    }
    TD {
        font-size: 10PT;
        padding-left: 2px;
        padding-right: 4px;
    }
    @media (max-width:302px){
    .companytitlediv {
        width:100%;
        text-align:center;
        margin:0 auto;
        display:inline-block;
        border:1px solid black;
    }
    .clientdiv {
        width:100%;
        text-align:center;
        margin:0 auto;
        display:inline-block;
        border:1px solid black;
    }
    .batch, .batch, .expiry, .tax, .discout, .hiddenonpos {
     display: none !important;
    }
   
}
    @media(min-width:500px){
    .companytitlediv {
        max-width:300px;
        text-align:left;
        margin-left:4px;
        border:1px solid black;
        float:inline-start
       
    }
    .clientdiv {
        max-width:300px;
        text-align:left;
        margin-right:4px;
        border:1px solid black;
        float:inline-end
    }
   
}

 .centered-on-top {
  position: fixed; /* Ensures it stays on top and fixed relative to the viewport */
  top: 22px; /* Moves the top edge of the div to the vertical center of the viewport */
  left: 50%; /* Moves the left edge of the div to the horizontal center of the viewport */
  transform: translate(-50%, -50%); /* Shifts the div back by half its own width and height to truly center it */
  z-index: 9999; /* Ensures it's on top of other elements (adjust value as needed) */
  /* Add other styling as desired, e.g., width, height, background-color, padding, etc. */
  width: 200px;
  height: auto;
  background-color: white;
  text-align: center;
}


 