.grid-container{
    height: 100vh;
    border: 0;
    display: grid;
    grid-template-columns: 20% 30% 40% 10%;
    grid-template-rows: 30px 105px 675px 5px 40px;
    }
.grid-item {
    background-color:rgb(157, 211, 160);
    padding: 2px;
    font-size: small;        
}

.item-1{
    grid-column: 1/5;
    font-size: small;
    border-bottom: 2px solid black;
}
.item-2{
    grid-row-start: 3;
    grid-row-end: 5;
    font-size: small;
    background-color: red;
    border-right: 1px solid black;      
}
.item-3{
    grid-column: 2/4;
    background-color: burlywood;
    line-height : 5px;
}
.item-4{
   grid-column: 4;
    background-color: blue;
    line-height : 15px;
}
.item-5{
   grid-column: 2/5;
    background-color: yellow;
    line-height : 15px;
    height: fit-content;
}
.item-6{
    grid-column:2/4;
    background-color: brown;
    line-height : 15px;
}
.item-7{
    grid-column: 4;
    background-color:aqua;
    line-height : 15px;
}
.item-8{
    grid-column: 1/1;
    background-color: greenyellow;
    line-height : 5px;
    border-top: 1px solid black;
}
.item-9{
    grid-column: 2/5;
    background-color:blueviolet;
    line-height : 5px;
    border-top: 1px solid black;
}
.item-10{
    grid-column: 1;
    grid-row: 2;
    background-color: green;
    border-right: 1px solid black;
}
ul.no-bullets {
   list-style-type: none; /* Remove bullets */
}
.billToNote
   {
   white-space: normal;
    overflow-wrap: break-word;
    height: 50px; 
    width: 8vw;
    line-height : 12px;
    font-weight: bold;
    padding: 0;
    margin: 18px;
    text-align: left;

   }
   .shipNameNote{
    white-space: normal;
    overflow-wrap: break-word;
    height: 40px; 
    width: 8vw;
    line-height : 12px;
    font-weight: bold;
    padding: 0;
    margin: 18px;
    text-align: left;
   }
   .numBERsDis{
    overflow-wrap: break-word;
    line-height : 10px;
    font-weight: bold;
    width: 49vw;
    height: 1cm;
    padding: 0;
   }
   .mvtDetailsNote{
    overflow-wrap: break-word;
    line-height : 10px;
    font-weight: bold;
    width: 26vw;
    height: 1cm;
    padding: 0;
   }
    .inVoiceHeader
   {
   white-space: normal;
    overflow-wrap: break-word;
    height: 5px; 
    width: 12vw;
    line-height : 12px;
    font-weight: bold;
    font-size:  large;
    padding: 0;
    text-align: right ;
    align-items: stretch;
    margin-top: -8px;
    margin-bottom: 15px;
    margin-right: 0;
    margin-left: 0;
 }
.Note   {       
width: 13px;       
text-indent: -8px; 
height: 12px;      
padding: 6px 10px 6px 8px;       
background-color: var(--GrayExtraLight); 
}
.label{
   display:inline-block;
}  
.magbox1grt
{
    z-index: 4;
  margin-top: -15px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: 0;
  font-weight: bold;
}
.magbox2cob
{
  z-index: 1;
  margin-top: -15px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: 0;
  font-weight: bold;
}
.magbox3fdbt
{
  z-index: 1;
  margin-top: -15px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: 0;
  font-weight: bold;
}
.magbox4cTon
{
  z-index: 1;
  margin-top: -14px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: 0;
  font-weight: bold;
}
.magbox5Vol
{
  z-index: 1;
  margin-top: -14px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: 0px;
  font-weight: bold;
}
.magbox6ETA
{
  z-index: 1;
  margin-top: -15px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: 0;
  font-weight: bold;
}
.magbox7ETD
{
    z-index: 1;
  margin-top: -16px;
  margin-bottom: 0;
  margin-right: 3px;
  margin-left: px;
  font-weight: bold;
}
.magboxgrt
{
    margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 35px;
  font-weight: bold;
}
.magboxcob
{
    margin-top: 10px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 35px;
  font-weight: bold;
}
.magboxfdbt
{
    margin-top: 10px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 35px;
  font-weight: bold;
}
.magboxcton
{
    margin-top: 10px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 35px;
  font-weight: bold;
}
.amtStmtNote{
    overflow-wrap: break-word;
    line-height : 10px;
    font-weight: bold;
    width: 23vw;
    height: 1cm;
    padding: 0;
    font-size: 12px;
    margin-top: -13px;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    font-weight: bold;
}
.amtStmt23{
    overflow-wrap: break-word;
    line-height : 10px;
    font-weight: bold;
    width: 23vw;
    height: 1cm;
    padding: 0;
    font-size: 13px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    font-weight: bold;
}
.selectBox
{
         z-index: 8;
    margin-top: -190px;
  margin-bottom: 10px;
  margin-right: 0;
  margin-left: 0;
  font-weight: bold;
}
.selectBox1
{
    margin-top: 28px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 200px;
  font-weight: bold;
}
.selectBox2
{
     z-index: 8;
    margin-top: -38px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 388px;
  font-weight: bold;
}

.selectBox3
{
     z-index: 1;
    margin-top: 20px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 360px;
  font-weight: bold;
}
.actionButtons
{
    margin-top: 408px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  font-weight: bold;
}
.bottomSignature1
{
    margin-top: 80px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  font-weight: bold;
    font-size: 12px;
}
.bottomSignature2
{
   z-index: 4;
  margin-top: -28px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 180px;
  font-weight: bold;
  font-size: 12px;
}
.smmyDetails{
    z-index: 4;
  margin-top: -114px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 340px;
  font-weight: bold;
  font-size: 13px;
}
.smmyDetails2{
   margin-top: 2px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 345px;
  font-weight: bold;
  font-size: 13px;
  align-items: right;
}
.smmyDetails3{
    z-index: 4;
  margin-top: -1px;
      width: 7vw;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 349px;
  font-weight: bold;
  font-size: 13px;
  align-items: right;
}
.magbox1Ctonnage{
  z-index: 4;
  margin-top: -18px;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 250px;
  font-weight: bold;
}
.magbox1InvNo{
  z-index: 1;
  margin-top: -14px;
  margin-bottom: 0;
  margin-right: 1px;
  margin-left: 0;
  font-weight: bold;
  font-size: 12px;
}
.magbox1InvDate{
  z-index: 1;
  margin-top: -14px;
  margin-bottom: 0;
  margin-right: 2px;
  margin-left: 0;
  font-weight: bold;
}

.ui-datepicker{
    margin-top: 300px;
}


@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack items vertically on smaller screens */
    }

    .left, .right {
        flex: 100%; /* Each takes full width */
    }
}