/* From Include Files=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#== */

/* body{
    font-family: 'Ubuntu', 'Baloo Da 2';
} */
.cursor{   
    cursor: pointer;
}
.footerdiv{
    text-align:center; font-size:20px; margin-top: 150px;
}
.hr-red{
    border: 1px solid red;
}
.hr-orange{
    border: 1px solid orange;
}




/* purchase new page >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

.buttondivFirstPart {
  display: flex;
  flex-direction: row;
  flex: 1;
  justify-content: flex-start;
}
.buttondivSecondPart {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  max-width: 50%;
  background-color: #c2c2e3a1;
}
@media (max-width: 768px) {
    .buttondivFirstPart {
        flex-direction: column; 
        width: 100%;
        justify-content: flex-start;
    }
    .buttondivSecondPart {
      flex-direction: column-reverse; 
      justify-content: flex-end;
    }
}
@media (max-width: 480px) {
    .buttondivFirstPart {
        flex-direction: column;
        width: 100%;
    }
    .buttondivSecondPart {
      flex-direction: column-reverse;
      width: 100%;
      max-width: 100%;
    }
}
.input-group-saleprice, .input-group-costing {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.inside-input-group-saleprice label, .inside-input-group-costing label {
  font-size: 75%;
  margin-bottom: 0 !important;
}

/* .inside-input-group-saleprice, .inside-input-group-costing {
  max-width: 33%;
} */
/* .input-group-saleprice .form-control, .input-group-costing .form-control {
  display: flex;
  margin-bottom: 5px;
} */

/* purchase new page <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<   */



th {
    cursor: pointer;
    white-space: nowrap;
    background: #8A2EFF;
    color: white;
    position: sticky;
    text-align: center;
}

td {
    white-space: nowrap;
}

.amountword {
     white-space: break-speaces;
}

.normal {
     white-space: normal;
}

#tdmiddle td {
    vertical-align: middle;
}

#last_Inv_Price, #BuyInfo {
    background-color: yellow;
}

.last_Inv_Price, .BuyInfo {
    background-color: yellow;
}
 
.bg-y {
    background-color: yellow;
}
.bg-w {
    background-color: #ffffff;
}
.bg-c1 {
    background-color: #ff000036;
}
.yellow{
    background-color: yellow;
}
#ProdInfo{
    background-color: white;
}
.bg1{
    background-color: #33F9FF;
}
.bg2{
    background-color: #F7DC6F;
}
.bg3{
    background-color: #F7E46F;
}
.bg4{
    background-color: #DBF6F1;
}
.bg5{
    background-color: #F3F3B4;
}
.tc-red{
    color: red;
}
.f-10{
    font-size: 10px;
}
.f-15{
    font-size: 15px;
}
.f-17{
    font-size: 17px;
}
.f-20{
    font-size: 20px;
}
.f-25{
    font-size: 25px;
}

.checkbox1{
    color: white;
    background-color: #2B89E7;
    font-weight: bold;
    font-size: 17px;         
}

.checkbox2{
    color: white;
    background-color: #8CBFF3;
    font-size: 17px;         
}

#part_4{
  margin-top: 10px;
}

table.floatThead-table {
    border-top: none;
    border-bottom: none;
    background-color: #fff;
}

.overflow-x-auto{
    overflow-x: auto;
}

.redbutton {
    color: #fff;
    background-color: #e44209;
    border-color: #e44209;
}

input[type=checkbox] {
    /* Double-sized Checkboxes */
    transform: scale(2);
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
    padding: 10px;
}

td.CurrentStock {
    background-color: #ffd1b3;
}
.prod_newstyle td.CurrentStock {
    background-color: #ffffff;
}
.label_prod_munit, .label_prod_munitprice {
    background-color: #f500008f; 
}
.label_prod_punit, .label_prod_paks_p, .label_prod_punitprice {
    background-color: #00f5d58f;
}
.label_prod_sunit, .label_prod_paks_s, .label_prod_sunitprice {
    background-color: #00f5158f;
}
.label_prod_alarm {
    background-color: #eff5008f;
}

@media only screen and (max-width: 768px) {
    .desktop_only {
        display: none;
    }

}
@media only screen and (min-width: 600px) {
    .mobile_only {
        display: none;
    }
}

/* CSS for Button-74*/
.button-74 {
    background-color: #fbeee0;
    border: 2px solid #422800;
    border-radius: 30px;
    box-shadow: #422800 4px 4px 0 0;
    color: #422800;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    font-size: 18px;
    padding: 0 18px;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.button-74:hover {
    background-color: #fff;
}

.button-74:active {
    box-shadow: #422800 2px 2px 0 0;
    transform: translate(2px, 2px);
}

@media (min-width: 768px) {
    .button-74 {
        min-width: 120px;
        padding: 0 25px;
    }
}

@media only screen and (max-width: 768px) {
    body{
        font-size: 125% !important;
    }
    th {
        position: sticky;
        top: 0px;
    }
    .checkBoxes {
        /* overflow-x: auto; */
        display: flex;
        flex-direction: row;
        justify-content: space-between!important;
        align-items: flex-start;
    }
}

@media only screen and (max-width: 512px) {
    .checkBoxes {
        /* overflow-x: auto; */
        display: flex;
        flex-direction: column;
        justify-content: space-between!important;
    }
}

@media only screen and (max-width: 992px) {
    .extraDiv{display:none;}
}


.moreInfo:hover{
    cursor: pointer;
}






/* END of From Include Files=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#== */








































.b_sale_new{background-color:#0000003b;}
.b_sale_new_edit{background-color:#ff000063;}
.b_sale_return{background-color:#0080004f;}
.b_sale_return_edit{background-color:#0080004f;}
.b_purchase_new{background-color:#0080004f;}
.b_purchase_new_edit{background-color:#0080004f;}
.b_purchase_return{background-color:#ff000063}
.b_purchase_return_edit{background-color:#ff000063;}


@media (max-width: 768px) {
  .b_collection, .b_payment{
    .form-group{
      margin-bottom: 5px !important;
    }
  }
}


.margin, .totalMargin{
  background-color: #9d9b9b !important;
}




/* .container {
  margin-top:30px;
  padding-top: 20px; 
} */
.b_person_details .container {
  margin-top:30px;
  padding-top: 10px;
} 

.borderless table {
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
    border-bottom-style: none;
}










/* common styling for all tables, on click of any tr the border (top & bottom) will be blue */
tr {
  transition: transform 0.2s, box-shadow 0.2s, border 0.2s;
}
.clickedTr {
  transform: scaleY(1.05);
  box-shadow: 0 4px 10px rgba(0, 0, 255, 0.3);
}
.clickedTr td {
  background-color: rgba(233, 245, 69, 0.656) !important; /* Light blue background */
  transition: background-color 0.3s ease;
  font-size: 120% !important;
}
/* common styling for all tables, on click of any tr the border (top & bottom) will be blue */








.div-fromTo{
  text-align: center;
 }
@media (max-width: 600px) {
 /* #from-to{
  display: none;
 } */
 .div-fromTo{
  text-align: left;
 }
}





/* style for products.php page =======================================*/
tr.red-row {
  background-color: #fb2c2c !important;
}
tr.red-row td.ProductName {
  color: #f5f1f1 !important;
}
tr.red-row td.ProductName a {
  color: #f5f1f1 !important;
}


/* body.b_products tr.red-row {
  background-color: #fb2c2c !important;
} */

/* Ensure td in red-row inherits the tr's background */
body.b_products tr.red-row td {
  background-color: inherit !important;
}
/* stikcy header and sticky name column on products.php page */
    .prodTable th {
      position: sticky;
      top: -1px;
      z-index: 1050;
    }
    #prodTable th.ProductName{
      z-index: 1060;
    }
    @media (min-width: 769px) {
      #prodTable .ProductName {
          z-index: 1040;
          position: sticky;
          left: -2px;
      }

      /* tr:nth-child(odd) td.ProductName {
        background-color: #f0f0f0;
      } */
      tr:nth-child(odd) td.ProductName {
        background-color: inherit;
      }
      .prod_newstyle tr:nth-child(odd) td.ProductName {
        background-color: #ffffff;
      }
      /* tr:nth-child(even) td.ProductName {
          background-color: #ffffff;
      } */
      tr:nth-child(even) td.ProductName {
        background-color: inherit;
      }
    }

    /* stikcy header and sticky name column on person_list.php page */
    .stickyHeader th, .personTable th {
      position: sticky;
      top: -1px;
      z-index: 1050;
    }
    .prod_newstyle .stickyHeader th {
      position: sticky !important;
      top: -1px !important;
      z-index: 1050 !important;
    }
    .personTable th.Person-Name {
      z-index: 1060;
    }
    @media (min-width: 769px) {
      .personTable td.tdp_name, .personTable th.Person-Name {
          position: sticky;
          left: -2px;
      }
      .personTable td.tdp_name {
        z-index: 1040;
      }
      tr:nth-child(odd) td.tdp_name {
        background-color: #f0f0f0;
      }
      tr:nth-child(even) td.tdp_name {
        background-color: #ffffff;
      }
    }





































.personName{ 
  background-color:#f7f68d !important;
  /* height: calc(1.5em + 1rem + 20px); */
}

.personName:focus {
 background-color:#f7f68d !important;
}

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


#colHide:hover,
#colHide_2:hover,
#colHide_3:hover {
    cursor: pointer;
}
/* #colHide,
#colHide_2,
#colHide_3 {
    background-color: #ff5d5d;
    color: blue;
    font-style: italic;
} */

#submenu h2 {
  margin: 0;
  color: black;
}
.inside-submenu {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* center h3 horizontally */
    padding: 5px 10px;
}

.inside-submenu h3, .inside-submenu h2 {
    margin: 0;
    flex: 1;
    text-align: center;
}

#clicked-Item {
    position: absolute;
    right: 10px;
    font-size: 135%;
    background-color: #d0d05b;
    color: black;
}

#content-header center h2 {
  margin: 0;
  color: black;
}











.updbtn{
  background-repeat:no-repeat;
  cursor:pointer;
  overflow: hidden;
  outline:none;
}
.addBtn{
  background-color: orange;
}
.removeBtn {
  align-self: flex-start;
  margin-top: 10px;
}
.bookBtn{
  background-color: green;
}










/* topline styling starts========================== */
  .topLine{
    margin-left: 10px;
    max-width: 996px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 2px; 
  }
  .topLine h2{
    flex-shrink: 0; 
    white-space: nowrap;
  }
  .topLine input{
    flex-grow: 1;
    flex-shrink: 1; 
    min-width: 0;
  }



.toggleCheckboxDiv {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 5px;
    align-content: center;
    margin-right: 0.5rem;
  }


  @media (max-width: 768px) {
    #acountType{
      display:none;
    }
    
    .toggleCheckboxDiv{
      justify-content:center;
      margin-bottom: 5px;
      margin-left: 0.5rem;
    }
    .b_sale_return .toggleCheckboxDiv,
    .b_sale_return_edit .toggleCheckboxDiv,
    .b_purchase_return .toggleCheckboxDiv,
    .b_purchase_return_edit .toggleCheckboxDiv{
      margin-bottom: 0px;
    }
  }

  @media (max-width: 480px) {
    .toggleCheckboxDiv{
      justify-content:flex-start;
      width: 95%;
    }
    .b_sale_return .toggleCheckboxDiv,
    .b_sale_return_edit .toggleCheckboxDiv,
    .b_purchase_return .toggleCheckboxDiv,
    .b_purchase_return_edit .toggleCheckboxDiv{
      justify-content:flex-start;
      width: auto;
    }
  }

  /* END of topline styling starts========================== */






















/* ============================for sale_quick buttondiv styling */
/* Flexbox for infoArea and buttondiv */
body.b_sale_quick .buttondiv_main {
  display: flex;
  white-space: wrap;
  justify-content: space-between;
 }
 body.b_sale_quick .buttondiv1 {
  display: flex;
  flex-direction: row;
 }
 body.b_sale_quick .buttondiv2 {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 5px;
 }
 /* Small Screens (Tablets) ================================================================*/
@media (max-width: 768px) {
  body.b_sale_quick .buttondiv1 {
    display: flex;
    flex-direction: column;
    flex: 1;
   }
}
/* Phone Screens ================================================================*/
@media (max-width: 480px) {
  body.b_sale_quick .buttondiv1 {
    display: flex;
    flex-direction: column;
    flex: 1;
   }
  body.b_sale_quick .buttondiv2 {
    display: flex;
    flex-direction: column;
    align-items: unset;
   }
}

/* =============================================for sale_quick buttondiv styling ENDs*/


























/* ============================================================== */


.buttondiv_main1 {
  display: flex;
  flex-wrap: nowrap; /* Don't wrap to new lines */
  align-items: flex-start;
  gap: 10px;
  overflow: hidden; /* Hide overflow just in case */
}

.buttondiv11,
.buttondiv33 {
  flex: 0 0 auto; /* Fixed size – no shrink or grow */
  display: flex;
  align-items: center;
  white-space: nowrap; /* Keep in one line */
}

.buttondiv33 {
  gap: 10px;
  flex-direction: row-reverse;
}

.buttondiv22 {
  flex: 1 1 auto; /* Flexible, takes remaining space */
  display: flex;
  justify-content: flex-start;
  min-width: 0; /* <== VERY IMPORTANT: lets it shrink properly */
  overflow: hidden; /* Prevents it from overflowing */
}


@media (max-width: 768px) {
  .buttondiv_main1 {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }

  .buttondiv11 {
    width: fit-content;
  }
  .buttondiv33 {
    width: fit-content;
  }

  .buttondiv22 {
    width: 100%;
    order: 3;
  }
}

/* Phone Screens ================================================================*/
@media (max-width: 480px) {
  .buttondiv_main1 {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }

  .buttondiv11 {
    width: fit-content;
  }
  .buttondiv33 {
    width: fit-content;
  }

  .buttondiv22 {
    width: 100%;
    order: 3;
  }
}
@media (max-width: 405px) {
  .buttondiv_main1 {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
  }

  .buttondiv11 {
    width: fit-content;
    order: 2;
  }
  .buttondiv33 {
    width: fit-content;
    width: 100%;
  }

  .buttondiv22 {
    width: 100%;
    order: 3;
  }
}




















/* for butondivs and hiddendivs and arrow buttons from style css file  */

.material-symbols-outlined {
  position: relative;
  /* top: 10px; */
  cursor: pointer; 
  font-size: 35px !important;
  font-variation-settings:
  'FILL' 1,
  'wght' 700,
  'GRAD' 200,
  'opsz' 48
}
.delete-link {
  font-size: 24px !important;
}
















/* ============================styling for buttondDiv */
/*Base Styles for bigger screens =======================*/

.buttondiv {
  display: flex;
  width: 100%;
  flex-direction: row;
}


.arrow-1 {
  align-self: flex-start;
  margin: 5px;
}
.arrow-2 {
  align-self: flex-end;
  margin: 5px;
}

.infoDiv {
  font-size: 10pt;
  flex: 1;
  word-wrap: break-word;
}

.button-group {
  display: flex;
  flex-direction: column;
}
.input-group {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-content: flex-end;
}
body.b_sale_new_edit .input-group {
  align-content: flex-start;
}








/* Small Screens (Tablets) ============================================*/
@media (max-width: 768px) {
    .buttondiv {
        flex-direction: row; 
    }
    .button-group {
        flex-direction: row-reverse; 
        width: 100%;
    }
    .input-group {
        flex-direction: column;
    }
    .input-group-saleprice, .input-group-costing {
      flex-direction: row;
      display: flex;
    }
    body.b_sale_new .input-group-saleprice,
    body.b_sale_new_edit .input-group-saleprice,
    .input-group-costing {
      flex-direction: column-reverse;
      display: flex;
    }
    body.b_purchase_new .input-group-saleprice, .input-group-costing {
      flex-direction: row;
    }
    .input-group-saleprice .form-control, .input-group-costing .form-control {
        width: 100%; /* Make inputs 100% width */
    }
    .removeBtn {
      align-self: center;
    }
}



/* Phone Screens ==========================================*/
@media (max-width: 480px) {
    .buttondiv {
        flex-direction: column;
    }
    .button-group {
        flex-direction: row; 
        justify-content: space-between;
        width: 100%;
    }
    body.b_sale_new .button-group,
    body.b_sale_new_edit .button-group {
      flex-direction: row; 
      justify-content: space-between;
      width: auto !important;
  }
  .input-group {
      flex-direction: column; /* Stack inputs vertically */
  }
  .input-group-saleprice, .input-group-costing {
      display: flex;
      flex-direction: row;
  }
  body.b_sale_new .input-group-saleprice,
  body.b_sale_new_edit .input-group-saleprice,
  .input-group-costing {
    display: flex;
    flex-direction: row;
  }
  body.b_sale_new .input-group-saleprice,
  body.b_sale_new_edit .input-group-saleprice {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .input-group-saleprice .form-control, .input-group-costing .form-control {
      width: 100%; 
      margin-bottom: 5px;
  }
  .removeBtn {
      align-self: center;
      margin-top: 10px;
  }
}









/* This part is for sale_quick when screen is 480px or less make tables like lists */
/* @media (max-width: 480px) {
  body.b_sale_quick .prodTable {
    width: 100%;
    border-collapse: collapse;
  }

  body.b_sale_quick .prodTable thead {
    display: none;
  }

  body.b_sale_quick .prodTable tr {
    display: block;
    border: 1px solid #ccc;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background: #f9f9f9;
    white-space: nowrap;
    overflow-x: auto;
  }

  body.b_sale_quick .prodTable td {
    display: inline;
    padding: 0 5px;
    border: none;
    text-align: left;
  }

  body.b_sale_quick .prodTable td input {
    width: fit-content;
    min-width: 1ch;
    padding: 2px 4px;
  }
  body.b_sale_quick .prodTable td select {
    width: 40%;
    padding: 2px 4px;
  }

  body.b_sale_quick .prodTable td:nth-child(1)::after {
    content: "\A";
    white-space: pre;
  }

  body.b_sale_quick .prodTable td:nth-child(2)::after {
    content: "\A";
    white-space: pre;
  }

  body.b_sale_quick .prodTable td:nth-child(3)::after {
    content: "";
  }

  body.b_sale_quick .prodTable td:nth-child(4)::after {
    content: "\A";
    white-space: pre;
  }

  body.b_sale_quick .prodTable td:nth-child(5) {
    display: none;
  }

  body.b_sale_quick .prodTable td:nth-child(6)::before {
    content: "Price: ";
    font-weight: bold;
  }

  body.b_sale_quick .prodTable td:nth-child(6)::after {
    content: " Taka\A";
    white-space: pre;
  }
} */
/* End Of This part is for sale_quick when screen is 480px or less make tables like lists */











/* style for invoiceheader */

.invoiceHeader{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10%;
}
.invoiceHeader1, .invoiceHeader2{
  flex-grow:1;
}
@media (max-width: 468px) {
  .invoiceHeader {
      flex-direction: column; 
      align-items: center; 
      gap: 5px;
  }
}

.submitButtons {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5px;
  margin-top: 75px;
}
@media (max-width: 530px) {
  .submitButtons {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
  }
  
  .submitButtons :nth-child(1),
  .submitButtons :nth-child(2),
  .submitButtons :nth-child(4) {
    flex-grow: 1;
  }
  
  .submitButtons :nth-child(3) {
    width: 100%;
  }
}

#acountType{
  font-size: 150%;
  font-weight: bolder;
}


























/* sale_new.php ===================== buttonsDiv */

  body.b_sale_new .buttonsDiv {
    display: flex;
    /* flex-wrap: wrap; */
    align-items:  flex-start;
    width: 100%;
  }

  body.b_sale_new .buttondiv_LeftArrow {
    order: 1;
  }

  body.b_sale_new .buttondiv_info {
    order: 2;
    width: fit-content;
    margin-top: 4px;
    flex-shrink: 0;
    max-width: 550px;
  }

  body.b_sale_new .buttondiv_buttons {
    order: 3;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: fit-content;
  }

  body.b_sale_new .buttondiv_RightArrow {
    order: 4;
  }

  @media (max-width: 768px) {
    body.b_sale_new .buttonsDiv {
      display: flex;
      flex-wrap: wrap;
      align-items:  flex-start;
      width: 100%;
    }
    
    body.b_sale_new .buttondiv_LeftArrow {
      order: 1;
    }
    
    body.b_sale_new .buttondiv_info {
      order: 4;
      width: 100%;
      margin-top: 4px;
      max-width: 100%;
    }
    
    body.b_sale_new .buttondiv_buttons {
      order: 2;
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: fit-content;
    }
    
    body.b_sale_new .buttondiv_RightArrow {
      order: 3;
    }
  }

  @media (max-width: 425px) {
    body.b_sale_new .buttonsDiv {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 100%;
      /* position: relative; */
    }

    body.b_sale_new .buttondiv_LeftArrow {
      order: 1;
      /* flex: 1; */
      /* text-align: left; */
    }
    body.b_sale_new .buttondiv_info {
      order: 4;
      width: fit-content;
      margin-top: 4px;
    }

    body.b_sale_new .buttondiv_buttons {
      order: 2;
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: fit-content;
    }

    body.b_sale_new .buttondiv_RightArrow {
      order: 3;
      /* flex: 1; */
      /* text-align: right; */
    }
  }

  @media (max-width: 390px) {
    body.b_sale_new .buttonsDiv {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 100%;
      /* position: relative; */
    }

    body.b_sale_new .buttondiv_LeftArrow {
      order: 1;
      /* flex: 1; */
      /* text-align: left; */
    }
    body.b_sale_new .buttondiv_info {
      order: 4;
      width: fit-content;
      margin-top: 4px;
    }

    body.b_sale_new .buttondiv_buttons {
      order: 3;
      margin-left: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      width: fit-content;
    }

    body.b_sale_new .buttondiv_RightArrow {
      order: 2;
      flex: 1;
      text-align: right;
    }
  }
/* sale_new.php ===================== buttonsDiv ENDs */















/* sale_new_edit.php ===================== buttonsDiv */

body.b_sale_new_edit .buttonsDiv {
  display: flex;
  /* flex-wrap: wrap; */
  align-items:  flex-start;
  width: 100%;
}

body.b_sale_new_edit .buttondiv_LeftArrow {
  order: 1;
}

body.b_sale_new_edit .buttondiv_info {
  order: 2;
  width: fit-content;
  margin-top: 4px;
  flex-shrink: 0;
  max-width: 560px;
}

body.b_sale_new_edit .buttondiv_buttons {
  order: 3;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: fit-content;
}

body.b_sale_new_edit .buttondiv_RightArrow {
  order: 4;
}

/* body.b_sale_new_edit .selectedProd {
  background-color: #89bcef !important;
} */


@media (max-width: 768px) {
  body.b_sale_new_edit .buttonsDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
  }

  body.b_sale_new_edit .buttondiv_LeftArrow {
    order: 1;
    /* flex: 1; */
    /* text-align: left; */
  }
  body.b_sale_new_edit .buttondiv_info {
    order: 4;
    width: 100%;
    margin-top: 4px;
    max-width: 100%;
  }

  body.b_sale_new_edit .buttondiv_buttons {
    order: 2;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: fit-content;
  }

  body.b_sale_new_edit .buttondiv_RightArrow {
    order: 3;
    /* flex: 1; */
    /* text-align: right; */
  }
}

@media (max-width: 510px) {
  body.b_sale_new_edit .buttonsDiv {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
  }

  body.b_sale_new_edit .buttondiv_LeftArrow {
    order: 1;
    /* flex: 1; */
    /* text-align: left; */
  }
  body.b_sale_new_edit .buttondiv_info {
    order: 4;
    width: 100%;
    margin-top: 4px;
  }

  body.b_sale_new_edit .buttondiv_buttons {
    order: 3;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 100%;
  }

  body.b_sale_new_edit .buttondiv_RightArrow {
    order: 2;
    /* flex: 1; */
    /* text-align: right; */
    margin-left: auto;
  }
}



/* sale_return.php & sale_return_edit.php & purchase_return.php & purchase_return_edit.php ===================== buttonsDiv  STARTS*/

body.b_sale_return .buttonsDiv,
body.b_sale_return_edit .buttonsDiv,
body.b_purchase_return .buttonsDiv,
body.b_purchase_return_edit .buttonsDiv {
  display: flex;
  /* flex-wrap: wrap; */
  align-items:  flex-start;
  width: 100%;
}

body.b_sale_return .buttondiv_LeftArrow,
body.b_sale_return_edit .buttondiv_LeftArrow,
body.b_purchase_return .buttondiv_LeftArrow,
body.b_purchase_return_edit .buttondiv_LeftArrow {
  order: 1;
}

body.b_sale_return .buttondiv_info,
body.b_sale_return_edit .buttondiv_info,
body.b_purchase_return .buttondiv_info,
body.b_purchase_return_edit .buttondiv_info {
  order: 2;
  width: fit-content;
  margin-top: 4px;
  flex-shrink: 0;
  max-width: 560px;
}

body.b_sale_return .buttondiv_buttons,
body.b_sale_return_edit .buttondiv_buttons,
body.b_purchase_return .buttondiv_buttons,
body.b_purchase_return_edit .buttondiv_buttons {
  order: 3;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: fit-content;
}

body.b_sale_return .buttondiv_RightArrow,
body.b_sale_return_edit .buttondiv_RightArrow,
body.b_purchase_return .buttondiv_RightArrow,
body.b_purchase_return_edit .buttondiv_RightArrow {
  order: 4;
}

@media (max-width: 768px) {
  body.b_sale_return .buttonsDiv,
  body.b_sale_return_edit .buttonsDiv,
  body.b_purchase_return .buttonsDiv,
  body.b_purchase_return_edit .buttonsDiv {
    display: flex;
    flex-wrap: wrap;
    align-items:  flex-start;
    width: 100%;
  }
  
  body.b_sale_return .buttondiv_LeftArrow,
  body.b_sale_return_edit .buttondiv_LeftArrow,
  body.b_purchase_return .buttondiv_LeftArrow,
  body.b_purchase_return_edit .buttondiv_LeftArrow {
    order: 1;
  }
  
  body.b_sale_return .buttondiv_info,
  body.b_sale_return_edit .buttondiv_info,
  body.b_purchase_return .buttondiv_info,
  body.b_purchase_return_edit .buttondiv_info {
    order: 4;
    width: 100%;
    margin-top: 4px;
    /* flex-shrink: 0; */
    max-width: 100%;
  }
  
  body.b_sale_return .buttondiv_buttons,
  body.b_sale_return_edit .buttondiv_buttons,
  body.b_purchase_return .buttondiv_buttons,
  body.b_purchase_return_edit .buttondiv_buttons {
    order: 2;
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: fit-content;
  }
  
  body.b_sale_return .buttondiv_RightArrow,
  body.b_sale_return_edit .buttondiv_RightArrow,
  body.b_purchase_return .buttondiv_RightArrow,
  body.b_purchase_return_edit .buttondiv_RightArrow {
    order: 3;
  }
}


/* sale_return.php & sale_return_edit.php & purchase_return.php ################################# buttonsDiv  ENDS*/






/* style for date and product selection on differet pages >>>>>>>>>>>>>>>>>>>>>>>>>>*/

.content-header-form {
  margin: 5px;
  text-align: center;
}

  .sp_payment_list .form-container,
  .sp_invoice_list .form-container,
  .sp_item_date .form-container,
  .timeline .form-container,
  .sold_stock_category .form-container,
  .report .form-container {
    flex-wrap: nowrap;
  }
  .sp_payment_list .date-container,
  .sp_invoice_list .date-container,
  .sp_item_date .date-container,
  .timeline .date-container,
  .sold_stock_category .date-container,
  .report .date-container{
    width: 75%;
  }
  .sp_payment_list .item-container,
  .sp_invoice_list .item-container,
  .sp_item_date .item-container,
  .timeline .item-container,
  .sold_stock_category .item-container,
  .report .item-container {
    width:25%;
    justify-content: center;
  }
  .quick_prod .item-container{
    width:75%;
    justify-content: center;
  }
  .quick_prod_iframe .item-container{
    width:75%;
    /* justify-content: center; */
  }
  @media (max-width: 426px) {
    .sp_payment_list .form-container,
    .sp_invoice_list .form-container,
    .sp_item_date .form-container,
    .timeline .form-container,
    .sold_stock_category .form-container,
    .report .form-container {
      gap: 5px;
    }
    .quick_prod .item-container,
    .quick_prod_iframe .item-container {
      width: 95%;
    }
    .sp_payment_list .submit_buttton,
    .sp_invoice_list .submit_buttton,
    .sp_item_date .submit_buttton,
    .timeline .submit_buttton,
    .sold_stock_category .submit_buttton,
    .report .submit_buttton {
      width:100%;
      justify-content: center;
    }
  }


/* and for other pages */



.form-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 95%;
  margin:auto;
  max-width: 900px;
}
.form-container label {
  margin-bottom: 0rem !important;
}
.date-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  width: 49%;
}
.from_date, .to_date {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  width: 50%;
}
.from_date label, .to_date label {
  align-items: center;
  width: 25%;
}
.to_date input {
  background-color: rgb(49, 44, 44);
  color: white;
}
.from_date input, .to_date input {
  text-align: center;
  align-items: center;
  width: 75%;
}
.item-container {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  width: 49%;
}
.product_name {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  /* gap: 5px; */
  flex-grow: 1;
  width: 75%;
}
.product_name label{
  width: 25%;
}
.product_name input{
  width: 75%;
}
.submit_buttton {
  align-self: center;
  width: 25%;
}

@media (max-width: 555px) {
  .from_date label,
  .to_date label,
  .product_name label {
      display: none;
  }
  .from_date input, .to_date input, .product_name input {
    width: 100%;
  }
  .form-container, .date-container, .item-container{
    gap:5px;
  }
}
@media (max-width: 426px) {
  .form-container {
    flex-wrap: wrap;
    gap:1px;
  }
  .date-container, .item-container {
    width: 100%;
  }
  .item-container {
    gap: 5px;
  }
  .submit_buttton input{
    width: 100%;
  }
}

/* END OF  style for date and product selection on differet pages ##################################*/


.hiddenCol1,
.hiddenCol0,
.hiddenCol2,
.hiddenCol3,
.hiddenCol4,
.hiddenCol5,
.hiddenCol6,
.hiddenCol7,
.hiddenCol8,
.hiddenCol9,
.hiddenCol10,
.hiddenCol11,
.hiddenCol12,
.hiddenCol13,
.hiddenCol14,
.hiddenCol15,
.hiddenCol_2,
.hiddenCol_3 {
    display: none;
}



.btm_links {
  text-align: center;
    background-color: #DAF7A6;
    font-size: 120%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 20px;
}


















         /* Style the tab */
        .tab {
            margin-top: 20px;
            padding-left: 10px;
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #bababa;
        }
        .content-header .tab {
            padding-left: 0px;
        }

        /* Style the buttons that are used to open the tab content */
        .tab button {
          background-color: inherit;
          float: left;
          border: none;
          outline: none;
          cursor: pointer;
          padding: 12px 14px;
          transition: 0.3s;
        }
        .content-header .tab button {
          padding: 6px 6px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
        background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
        background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
        }
        .tab button.active {
            background-color: #0000ff52;
        }
        
        @media only screen and (max-width: 751px)  {
            .tab button {
                /* background-color: #b08484; */
                float: left;
                border: none;
                outline: none;
                cursor: pointer;
                padding: 0% 3%;
                transition: 0.3s;
            }
            .content-header .tab button {
              padding: 0% 0%;
            }
        }

        .book-header {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: space-between;
        }
        .book-header2{
          display: flex;
          flex-wrap: nowrap;
          flex-direction: row;
          justify-content: end;
          flex-grow: 1;
          gap: 5px;
        }









        /* new style for responsive modal */

        @media (min-width: 768px) {
            .modal-dialog {
                max-width: 65%;
                margin: 1.75rem auto;
            }
        }
        /* Ensure responsive alignment of labels and inputs */
        .modal-body .form-group {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            margin-bottom: 1rem;
            justify-content: center;
        }
        /* Labels occupy a fixed width, inputs take remaining space */
        .modal-body .form-group label {
            flex: 0 0 40%; 
            max-width: 40%;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }
        /* Inputs and selects occupy the remaining width */
        .modal-body .form-group .form-control,
        .modal-body .form-group select {
            flex: 1;
            max-width: 60%;
        }

        .smsModal .modal-body .form-group label {
            /* flex: 0 0 25%;  */
            max-width: 25%;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }
        .smsModal .modal-body .form-group .form-control,
        .smsModal .modal-body .form-group select {
            flex: 1;
            max-width: 75%;
        }
        /* For small screens: stack labels and inputs vertically */
        @media (max-width: 768px) {
            .modal-body .form-group {
                flex-direction: column;
                align-items: center;
            }
            .modal-content{
                width: 90%;
            }

            .modal-body .form-group label {
                flex: 0 0 auto;
                max-width: 100%;
                text-align: left; /* Align text to the left */
                padding-right: 0;
            }

            .modal-body .form-group .form-control,
            .modal-body .form-group select {
                /* flex: 0 0 100%; */
                max-width: 100%;
            }
        }














      .modaliniFrame .modal-dialog {
          max-width: 65%;
          margin: 1.75rem auto;
          height: 90%;
      }
      .modaliniFrame .modal-content{
          width: 100% !important;
          height: 95%; 
      }
      .modaliniFrame .modal-body, .modaliniFrame #iFramePendingInvoices {
          height: 100%; 
      }
      @media (max-width: 1020px) {
          .modaliniFrame .modal-dialog {
              max-width: 90%;
              margin: 1.75rem auto;
          }
      }
      @media (max-width: 768px) {
          .modaliniFrame .modal-dialog {
              max-width: 90%;
              margin: 1.75rem auto;
          }
      }
      @media (max-width: 576px) {
          .modaliniFrame .modal-dialog {
              max-width: 90%;
              margin: 1.75rem auto;
          }
      }

        /* END of new style for responsive modal */




        .floatingRefreshButton {
          position: fixed;
          top: 10px; /* distance from bottom */
          right: 10px;  /* distance from right */
          /* padding: 10px 20px; */
          font-size: 20px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 20%;
          box-shadow: 0 4px 6px rgba(0,0,0,0.3);
          cursor: pointer;
          z-index: 9999; /* stay above other elements */
      }



      .name-link {
        font-size:105%;
      }
      .name-link, .edit-link, .updPrice-link, .zero-link, .delete-link {
        cursor: pointer;
      }