@media screen {
    .page-header {
      height: 10mm;
      padding: 15px 0;
      box-sizing: border-box;
    }
  
    .page-footer {
      height: 10mm;
    }
    .page-heading-edit {
      display: none;
      align-items: center;
      background: #f2f2f2;
      padding: 10px 15px;
      box-sizing: border-box;
      max-height: 50px;
      border: 1px solid black;
      font-family: "Source Sans Pro";
    }
  
    .page-heading-text {
      flex-grow: 1;
      font-weight: 600;
      font-size: 4mm;
      line-height: 6mm;
      text-transform: uppercase;
      color: #28313b;
      flex-grow: 1;
      font-family: "Source Sans Pro";
    }
  
    .page-heading-edit-btn {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 5px 15px;
      background: #ffffff;
      border: 1px solid #d9d4d4;
      border-radius: 4px;
      flex-grow: 0;
      text-transform: uppercase;
      max-width: 88px;
      max-height: 30px;
      gap: 10px;
      cursor: pointer;
    }
  
    .page-heading-edit-btn p {
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      color: #28313b;
    }
  
    .miscellaneous_details {
      margin-top: 15px;
    }
  
    #watermark {
      width: 200px;
      height: 200px;
      position: absolute;
      top: 50%;
      left: 50%;
      opacity: 0.3;
      transform: translateX(-100px) translateY(-100px);
    }
  }
  
  @media print {
    html {
      background-color: initial;
    }
  
    body {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  
    #watermark {
      width: 200px;
      height: 200px;
      position: fixed;
      top: 50%;
      left: 50%;
      opacity: 0.5;
      transform: translateX(-100px) translateY(-100px);
    }
  
    .page-heading-edit {
      display: none;
      align-items: center;
      background: #f2f2f2;
      padding: 10px 15px;
      box-sizing: border-box;
      max-height: 50px;
      border-style: solid solid none solid;
      border-color: #28313b;
      border-width: 1px;
    }
  
    .page-heading-text {
      flex-grow: 1;
      font-weight: 600;
      font-size: 4mm;
      line-height: 6mm;
      text-transform: uppercase;
      color: #28313b;
      flex-grow: 1;
    }
  
    .page-heading-edit-btn {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 5px 15px;
      background: #ffffff;
      border: 1px solid #d9d4d4;
      border-radius: 4px;
      flex-grow: 0;
      text-transform: uppercase;
      max-width: 88px;
      max-height: 30px;
      gap: 10px;
    }
  
    .page-heading-edit-btn p {
      font-weight: 600;
      font-size: 14px;
      line-height: 20px;
      color: #28313b;
    }
  
    .page-header {
      width: 100%;
      position: fixed;
      top: 0;
    }
  
    .page-header,
    .page-header-space {
      height: 5mm;
    }
  }
  
  #page {
    font-style: normal;
    position: relative;
  }
  
  .bottom-content-container {
    margin-top: 15px;
  }
  
  .hide {
    display: none;
  }
  
  .items-table-header {
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: #000000;
    position: relative;
  }
  
  .items-table-total {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: #000000;
  }
  
  .items-table-info {
    cursor: grab;
  }
  
  /*-------- CSS for Layout 1 -------------*/
  #business-section-layout-one-container .sub-details-class {
    min-height: 12mm;
  }
  
  #business-section-layout-one-container .main-details-class {
    min-height: 12mm;
    line-height: 1;
  }
  
  #business-section-layout-one-container #company-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #000000;
  }
  
  #business-section-layout-one-container #company-address-content {
    display: flex;
    gap: 2mm;
    font-size: 12px;
    line-height: 1;
  }
  
  #business-section-layout-one-container .company-address-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-one-container .company-address {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-one-container #company-gst-number-content > span:first-child,
  #business-section-layout-one-container #company-mobile-number-content > span:first-child,
  #business-section-layout-one-container #company-pan-number-content > span:first-child,
  #business-section-layout-one-container #company-email-content > span:first-child {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  /*--------------------------------------------------**/
  
  /*-------- CSS for Layout 2 -------------*/
  
  #business-section-layout-two-container #company-details {
    border-width: 1px;
  }
  
  #business-section-layout-two-container #company-details-meta {
    padding-block: 4mm;
    gap: 5mm;
  }
  
  #business-section-layout-two-container #invoice-details-meta {
    border: 1px solid black;
    border-top: 0px;
  }
  
  #business-section-layout-two-container #invoice-main-details {
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15px;
    text-align: left;
  }
  
  #business-section-layout-two-container #invoice-main-details > div {
    min-width: 0;
    max-width: 50%;
  }
  
  #business-section-layout-two-container #company-contact-details {
    flex-direction: column;
    align-items: normal;
  }
  
  #business-section-layout-two-container #company-email-content {
    justify-content: normal;
    align-items: normal;
  }
  
  #business-section-layout-two-container #company-gst-number-content > span:first-child,
  #business-section-layout-two-container #company-mobile-number-content > span:first-child,
  #business-section-layout-two-container #company-pan-number-content > span:first-child,
  #business-section-layout-two-container #company-email-content > span:first-child {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-two-container #company-gst-number,
  #business-section-layout-two-container #company-mobile-number,
  #business-section-layout-two-container #company-pan-number,
  #business-section-layout-two-container #company-email {
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
    word-break: break-all;
  }
  
  #business-section-layout-two-container #company-email {
    width: 150px;
  }
  
  #business-section-layout-two-container #company-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1x;
    color: #000000;
  }
  
  #business-section-layout-two-container #company-address-content {
    display: flex;
    gap: 2mm;
    font-size: 12px;
    line-height: 1;
  }
  
  #business-section-layout-two-container .company-address-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-two-container .company-address {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #28313b;
  }
  
  .billto-address-group {
    display: flex;
    flex-direction: column;
    gap: 1mm;
    margin-top: 1mm;
  }
  
  #business-section-layout-two-container .title-bill-ship-to {
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-two-container #bill-to-company-name,
  #ship-to-company-name {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-two-container #bill-to,
  #business-section-layout-two-container #ship-to {
    padding-inline: 1mm;
  }
  
  #business-section-layout-two-container #company-mobile-number-content #company-mobile-number {
    margin-right: 10px;
  }
  
  /*--------------------------------------------*/
  /*-------- CSS for Layout 3 -------------*/
  #business-section-layout-three-container #company-details {
    border-width: 1px;
  }
  
  #business-section-layout-three-container #company-details-meta {
    padding-block: 4mm;
    gap: 5mm;
  }
  
  #business-section-layout-three-container #invoice-details-meta {
    border-right: 1px solid black;
    border-top: 0px;
    border-left: 0px;
  }
  
  #business-section-layout-three-container #invoice-main-details,
  #business-section-layout-three-container #invoice-sub-details {
    justify-content: space-between;
    box-sizing: border-box;
    padding: 15px;
    text-align: left;
  }
  
  #business-section-layout-three-container #invoice-main-details > div {
    min-width: 0;
    max-width: 50%;
  }
  
  #business-section-layout-three-container #company-contact-details {
    flex-direction: column;
    align-items: normal;
  }
  
  #business-section-layout-three-container #company-email-content {
    justify-content: normal;
    align-items: normal;
  }
  
  #business-section-layout-three-container #company-email {
    width: 150px;
  }
  
  #business-section-layout-three-container #company-gst-number-content > span:first-child,
  #business-section-layout-three-container #company-mobile-number-content > span:first-child,
  #business-section-layout-three-container #company-pan-number-content > span:first-child,
  #business-section-layout-three-container #company-email-content > span:first-child {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-three-container #company-gst-number,
  #business-section-layout-three-container #company-mobile-number,
  #business-section-layout-three-container #company-pan-number,
  #business-section-layout-three-container #company-email {
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
    word-break: break-all;
  }
  
  #business-section-layout-three-container #company-name {
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: #000000;
  }
  
  #business-section-layout-three-container #company-address-content {
    display: flex;
    gap: 2mm;
    font-size: 12px;
    line-height: 1;
  }
  
  #business-section-layout-three-container .company-address-label {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-three-container .company-address {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-three-container .billto-address-group {
    display: flex;
    flex-direction: column;
    gap: 1mm;
    margin-top: 1mm;
  }
  
  #business-section-layout-three-container .title-bill-ship-to {
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-three-container #bill-to-company-name,
  #ship-to-company-name {
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    color: #28313b;
  }
  
  #business-section-layout-three-container #bill-to,
  #business-section-layout-three-container #ship-to {
    padding-inline: 1mm;
  }
  
  #business-section-layout-three-container .address-invoice-group {
    display: flex;
  }
  
  #business-section-layout-three-container #company-mobile-number-content #company-mobile-number {
    margin-right: 10px;
  }
  /*--------------------------------------------*/
  
  svg {
    pointer-events: none;
  }
  
  .edit-svg {
    pointer-events: none;
  }
  
  /* UPI Details */
  #upi-details {
    display: block;
  }
  
  #upi-details-container {
    display: flex;
    justify-content: space-between;
  }
  
  .clone-table {
    border-right: 1px solid black;
    border-top: 1px solid black;
  }
  
  .draggable {
    display: inline-block;
    margin-right: -4px;
  }
  
  .placeholder {
    border: 2px dashed #cbd5e0;
    display: inline-block;
    margin-right: -4px;
    height: 100%;
  }
  
  .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    user-select: none;
    height: 640px;
  }
  
  .resizer:hover {
    border-right: 1px solid black;
    cursor: col-resize;
  }
  
  /**--- For Spacing setup ----*/
  #bill-to,
  #ship-to {
    position: relative;
  }
  
  #company-details {
    position: relative;
  }
  
  #invoice-details-meta {
    position: relative;
  }
  
  #amount-words-container {
    position: relative;
  }
  
  .spacing {
    border: 0.5px dashed #e5346c;
    background: rgba(255, 235, 242, 0.4);
    position: absolute;
    bottom: 0px;
  }
  
  .spacing-top {
    border: 0.5px dashed #e5346c;
    background: rgba(255, 235, 242, 0.4);
    position: absolute;
    top: 0px;
  }
  
  /** CSS for showing MArgins **/
  .margin-spacing-top {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    color: #fe6193;
    top: 0px;
    border: 0.5px dashed #e5346c;
    background: rgba(255, 235, 242, 0.4);
  }
  
  .margin-spacing-left {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    color: #fe6193;
    left: 0px;
    border: 0.5px dashed #e5346c;
    background: rgba(255, 235, 242, 0.4);
    top: 0px;
  }
  
  .margin-spacing-right {
    position: absolute;
    display: none;
    justify-content: center;
    align-items: center;
    color: #fe6193;
    right: 0px;
    border: 0.5px dashed #e5346c;
    background: rgba(255, 235, 242, 0.4);
    top: 0px;
  }
  
  .margin-spacing-bottom {
    position: absolute;
    bottom: 0px;
    display: none;
    justify-content: center;
    align-items: center;
    color: #fe6193;
    border: 0.5px dashed #e5346c;
    background: rgba(255, 235, 242, 0.4);
  }
  
  .margin-right-text {
    transform: rotate(90deg);
  }
  
  .margin-left-text {
    transform: rotate(-90deg);
  }
  
  /*** CSS for Section Header tags ---**/
  
  .item_table-tag,
  .party_details-tag,
  .business_details-tag,
  .invoice_details-tag,
  .miscellaneous_section-tag {
    padding: 0px 10px;
    align-items: center;
    position: relative;
    background-color: #3da3ed;
    border-radius: 4px 4px 0px 0px;
    font-family: Source Sans Pro;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    bottom: -20px;
    line-height: 18px;
    color: #fff;
    display: none;
    height: fit-content;
  }
  
  .party_details-tag {
    bottom: 0px;
  }
  
  .invoice_details-tag {
    bottom: 20px;
    left: 120px;
  }
  
  .miscellaneous_section-tag {
    top: 15px;
  }
  
  #business-section-layout-one-container .invoice_details-tag {
    position: absolute;
    left: 360px;
    top: -20px;
  }
  
  #business-section-layout-one-container .business_details-tag {
    position: absolute;
    top: 25px;
  }
  
  .business_details-tag {
    bottom: 0px;
  }
  
  #business-section-layout-three-container .address-invoice-group {
    border-top: 0px solid black;
  }
  
  #business-section-layout-three-container .invoice_details-tag {
    bottom: 0px;
    left: 410px;
  }
  
  #business-section-layout-two-container .invoice_details-tag {
    bottom: 0px;
    left: 0px;
  }
  
  .watermark-text {
    font-size: 500%;
    text-align: center;
  }
  
  /** Empty Header **/
  #company-header-container {
    display: inline-block;
    width: 100%;
    min-height: 25mm;
    max-height: 25mm;
  }
  
  #company-header-img {
    width: 100%;
    height: 162px;
  }
  
  .hoverClass {
    outline: 4px dashed #cbced0;
    background-color: #fafafa;
  }