@media print {
  html, body {
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-size: 10pt;  /* Smaller font size to ensure more content fits */
  }
  .container, .invoice {
      width: 100%;
      max-width: 100%;  /* Override any max-width set */
      box-sizing: border-box;  /* Include padding and border in the element's width */
  }
  textarea, input[type="text"], .table {
      width: 100%;  /* Ensure form elements do not overflow */
      box-sizing: border-box;  /* Include padding and border in the width */
  }
  nav, .btn, header, footer, .non-printable {
      display: none;  /* Hide non-essential elements */
  }
}

@media print {
  textarea {
        /* Adjust height based on content */
       /* Set a minimum height */
      overflow: visible;  /* Allow content to expand outside the box if necessary */
      white-space: pre-wrap;  /* Maintain whitespace formatting */
      word-wrap: break-word;  /* Prevent long text strings from overflowing */
  }
}


body {
    background-color: #f5f5f5;
  }

  .img-fluid {
    border-radius: 20px;
  }
  
  .invoice {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
  }
  #print-button {
    background-color: #007bff;
  
  }

  #myTextarea {
    background-color: #fff;
  }
  table input[type="text"],
  table input[type="number"],
  table textarea {
    background-color: #fff;
  }

  tr {
    background-color: #f5f5f5;
  }

  th {
    background-color: #f5f5f5;
  }
  
  td {
    background-color: white!important;
    min-height: fit-content!important;
  }


  #signature-pad {
    background-color: white;
  }
  
  
  input[type="text"],
input[type="number"],
textarea {
  background-color: #fff;
}

input[type="text"],
input[type="number"],
textarea {
  background-color: #fff;
}



  #print-button:hover,
#print-button:focus {
  background-color: #0069d9;
}

  
  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  

textarea {
    overflow: hidden;
    resize: none;
    border: none;
}


body { 
    
    font-family: sans-serif; 

}
canvas { 
    
    border: .25px solid #000; 

}

.input {
    width:100%;
    height: 100%;
}

.input,
.textarea {
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;
}

.input-wrap {
  position: relative;
  width: 100%;
}
.input-wrap .input {
  position: absolute;
  width: 100%;
  left: 0;
}
.width-machine {
  /*   Sort of a magic number to add extra space for number spinner */
  padding: 0 1rem;
}

.editable-input {
  border: 1px solid #ccc;
  padding: 5px;
  min-height: 20px;
  overflow: hidden;
  word-wrap: break-word;
}

.textarea {
  display: block;
  width: 100%;
  overflow: hidden;
  resize: both;
  min-height: 40px;
  line-height: 20px;
}

.textarea[contenteditable]:empty::before {
  content: "Placeholder still possible";
  color: gray;
}

.invoice {
    background: transparent;
    padding: 20px
    
}

span.input {
    min-width: 100%;
}
.pt-3-half {
    padding-top: 1.4rem;
  }

.invoice-company {
    font-size: 20px
}

.invoice-header {
    margin: 0 -20px;
    background: #f0f3f4;
    padding: 20px
}

address {
    line-height: normal;
}

.invoice-date,
.invoice-from,
.invoice-to {
    display: table-cell;
    width: 50%;
}

.invoice-to2 {
    display: table-cell;
    width: 100%
}

.invoice-from,
.invoice-to {
    padding-right: 20px;
}

.invoice-date .date,
.invoice-from strong,
.invoice-to strong {
    font-size: 16px;
    font-weight: 600
}

.invoice-date {
    text-align: right;
    padding-left: 20px
}

.invoice-price {
    background: #f0f3f4;
    display: table;
    width: 100%
}

.invoice-price .invoice-price-left,
.invoice-price .invoice-price-right {
    display: table-cell;
    padding: 20px;
    font-size: 20px;
    font-weight: 600;
    width: 75%;
    position: relative;
    vertical-align: middle
}

.invoice-price .invoice-price-left .sub-price {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px
}

.invoice-price small {
    font-size: 12px;
    font-weight: 400;
    display: block
}

.invoice-price .invoice-price-row {
    display: table;
    float: left
}

.invoice-price .invoice-price-right {
    width: 25%;
    background: #2d353c;
    color: #fff;
    font-size: 28px;
    text-align: right;
    vertical-align: bottom;
    font-weight: 300
}

.invoice-price .invoice-price-right small {
    display: block;
    opacity: .6;
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px
}

.invoice-footer {
    border-top: 1px solid #ddd;
    padding-top: 10px;
    font-size: 10px
}
#print-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;


}

#print-button:hover {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color:none!important;

}


.invoice-note {
    color: #999;
    font-size: 85%;
    
}


.notes {
    width:100%;
}

.invoice>div:not(.invoice-footer) {
    margin-bottom: 20px
}

.btn.btn-white, .btn.btn-white.disabled, .btn.btn-white.disabled:focus, .btn.btn-white.disabled:hover, .btn.btn-white[disabled], .btn.btn-white[disabled]:focus, .btn.btn-white[disabled]:hover {
    color: #2d353c;
    background: #fff;
    border-color: #d9dfe3;
    
}

textarea {
  width: 100%;
  overflow: hidden; /* Hide overflow to make it look clean */
  resize: none; /* Prevent manual resizing by users */
  box-sizing: border-box;
  padding: 6px; /* Optional, adjust padding as needed */
  font-size: inherit; /* Ensure the font size matches other elements */
  line-height: 1.5; /* Maintain proper line height for readability */
}


input {
    background-color: transparent;
    border-color: transparent;
    width:100%;
    
}