/*
For Mobile devices: 320px-480px
For Tablets or iPad: 480px - 768px
For Laptop or small-size screen: 768px -1024px
For Desktop or large-size screen: 1024px -1200px
For Extra-large size device: 1200px and more
*/





@media screen and (min-height: 751px) and (max-height: 900px) {
  :root {
    --tbl-content-hight: 400px;
    --tbl-content-hight-with-footer:440px;
  }
 }


@media screen and (min-height: 651px) and (max-height: 750px) {
  :root {
    --tbl-content-hight: 400px;
    --tbl-content-hight-with-footer:430px;
  }
 }

@media screen and (min-height: 551px) and (max-height: 650px) {
  :root {
    --tbl-content-hight: 300px;
    --tbl-content-hight-with-footer:350px;
  }
 }

 @media screen and (min-height: 451px) and (max-height: 550px) {
  :root {
    --tbl-content-hight: 300px;
    --tbl-content-hight-with-footer:250px;
  }
 }

 @media screen and (min-height: 301px) and (max-height: 450px) {
  :root {
    --tbl-content-hight: 200px;
    --tbl-content-hight-with-footer:200px;
  }
 }





.s-table{
  position: relative;
  width: 100%;
  z-index: 1;
  margin: auto;
  overflow: auto;
  max-height: 100%;
}

.tableFixHead {
  height: var(--tbl-content-hight-with-footer) !important;
}


.s-table thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
  font-weight: 600;
}

.top-box-banner{
    margin-top: 0.2rem!important;
    margin-bottom: 0.5rem!important;
}

.redClr{
  color: red;
}

.sub-widget {
    padding-bottom: 0rem!important;
    padding-top: 0rem!important;
    margin-bottom: 0rem!important;
    min-height: 55px !important;
}

.default-nav li{
    margin-right: 1rem !important;
    padding: 0.3rem 0 0 !important;
}
.default-nav{
    padding-top: 0.2rem!important;
    padding-bottom: 0rem!important;
}



.tbl-td{
    padding-bottom: 0rem!important;
    padding-top: 0rem!important;
}

.scrollableTableHeight{
    height: 705px !important;
    margin-top: -2px !important;
}

.mx-height {
    
    max-height: 550px !important;
}



.sub-widget-1{
 
    min-height: 55px !important;
  
  }

  .sub-widget-h{
    min-height: 55px !important;
  }

  .bg-sub-widget {

    height: 55px !important;

}

.i-s-35{
    width: 33px !important;
    height: auto;
   }



   select{
    padding: 0.45rem 0.4rem 0.4rem 0.4rem !important;
   }

   .drp-download-statement{
       max-width: 160px !important;
       margin-top: 0.375rem!important;
   }

.activeBuyerStyl{
  min-width: 60px !important;
    max-width: 60px !important;
}

.buyerCodeStyl{
    min-width: 115px !important;
    max-width: 120px !important;
  }
  .buyerNameStyl{
    min-width: 130px !important;
    max-width: 125px !important;
  }
  .docNumberStyl{
    min-width: 135px !important;
    max-width: 160px !important;
  }
  .invoiceDateStyl{
    min-width: 120px !important;
    max-width: 150px !important;
  }
  .dueDateStyl{
    min-width: 125px !important;
    max-width: 150px !important;
  }
  .paidDateStyl{
    min-width: 125px !important;
    max-width: 150px !important;
  }
  .expandColumnStyl{
    min-width: 130px !important;
    max-width: 150px !important;
  }
  .paymentRecvDt{
    min-width: 155px !important;
    max-width: 160px !important; 
  }
  .invoiceAmtStyl{
    min-width: 120px !important;
    max-width: 140px !important;
  }
  .overdueAsPercentage{
    min-width: 145px !important;
    max-width: 150px !important;
  }
  .balanceAmtStyl{
    min-width: 120px !important;
    max-width: 120px !important;
  }
  .paidAmtStyl{
    min-width: 120px !important;
    max-width: 120px !important;
  }
  .statusStyl{
    min-width: 75px !important;
    max-width: 80px !important;
  }
  .overdueDaysStyl{
    min-width: 75px !important;
    max-width: 80px !important;
  }
  .actionStyl{
    min-width: 155px !important;
    max-width: 210px !important;
  }
  .actionClosedInvStyl{
    min-width: 85px !important;
    max-width: 90px !important;
  }
  .txnIdStyl{
    min-width: 160px !important;
    max-width: 165px !important;
  }
  .payRefStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .modeStyl{
    min-width: 95px !important;
    max-width: 110px !important;
  }
  .cashDiscountStyl{
    min-width: 105px !important;
    max-width: 110px !important;
  }
  .creditNoteStyl{
    min-width: 105px !important;
    max-width: 110px !important;
  }
  .deductionsStyl{
    min-width: 95px !important;
    max-width: 110px !important;
  }
  .postingNoStyl{
    min-width: 115px !important;
    max-width: 120px !important;
  }
  .postingDateStyl{
    min-width: 105px !important;
    max-width: 120px !important;
  }
  .commentsStyl{
    min-width: 185px !important;
    max-width: 190px !important;
  }
  
  .eMailStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  
  
  
  .mobileNoStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .telNoStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .branchStyl{
    min-width: 105px !important;
    max-width: 130px !important;
  }
  .addressStyl{
    min-width: 205px !important;
    max-width: 220px !important;
  }
  .cityStyl{
    min-width: 105px !important;
    max-width: 120px !important;
  }
  .stateStyl{
    min-width: 115px !important;
    max-width: 120px !important;
  }
  
  .activationStyl{
    min-width: 85px !important;
    max-width: 90px !important;
  }
  
  
  .sa_TxnStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_StatusStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  
  .sa_TxnDateStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_BuyerCodeStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_BuyeNameStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_TxnAmtStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_BalanceStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_DetailsStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_InvTotalStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_DNTotalStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_CNTotalStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_CDStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_DeductionsStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_PayRefStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_ModeStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .sa_CommentsStyl{
    min-width: 185px !important;
    max-width: 190px !important;
  }
  
  .divisionStyl{
    min-width: 95px !important;
    max-width: 100px !important;
  }

  
  .cNNumberStyl{
    min-width: 135px !important;
    max-width: 140px !important;
  }
  .invLinkStyl{
    min-width: 135px !important;
    max-width: 140px !important;
  }
  .cNDateStyl{
    min-width: 95px !important;
    max-width: 110px !important;
  }
  .cnstatusStyl{
    min-width: 80px !important;
    max-width: 85px !important;
  }
  
  .originalAmtStyl{
    min-width: 115px !important;
    max-width: 120px !important;
    text-align: center !important;
  }
  
  .amtUsedStyl{
    min-width: 115px !important;
    max-width: 120px !important;
    text-align: center !important;
  }
  
  .amtPendingStyl{
    min-width: 115px !important;
    max-width: 120px !important;
    text-align: center !important;
  }
  
  .statusStyl{
    min-width: 85px !important;
    max-width: 90px !important;
  }

  .ageStyl{
    min-width: 55px !important;
    max-width: 60px !important;
  }
  
  .tranIdStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }

  

  .totalNoInvStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .totalAmtStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .totalNoInvStyl{
    min-width: 80px !important;
    max-width: 85px !important;
  }
  .invDueAmtStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .overdueCountStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .overdueAmtStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .netOutstandingStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }
  .defaultStyl{
    min-width: 125px !important;
    max-width: 130px !important;
  }

.rating-vgood{
  
  filter: invert(22%) sepia(55%) saturate(4183%) hue-rotate(96deg) brightness(99%) contrast(108%);
  text-decoration: none;
}
.rating-good{

  filter: invert(100%) sepia(50%) saturate(1705%) hue-rotate(347deg) brightness(96%) contrast(93%);
  text-decoration: none;
}
.rating-fair{
  
  filter: invert(84%) sepia(29%) saturate(3978%) hue-rotate(329deg) brightness(101%) contrast(95%);
  text-decoration: none;
}
.rating-bad{
 
  filter: invert(14%) sepia(62%) saturate(5670%) hue-rotate(355deg) brightness(116%) contrast(121%);
  text-decoration: none;
}


.active-buyer{
  color:#008000;
  filter: invert(27%) sepia(85%) saturate(1113%) hue-rotate(87deg) brightness(104%) contrast(108%);
  text-decoration: none;
}

.inactive-buyer{
  color:#ff0000;
  filter: invert(18%) sepia(94%) saturate(6252%) hue-rotate(357deg) brightness(100%) contrast(114%);
  text-decoration: none;
}

.suspended-buyer{
  color:#bbbb35;
  filter: invert(69%) sepia(67%) saturate(422%) hue-rotate(18deg) brightness(91%) contrast(93%);
  text-decoration: none;
}


.progress-vgood{
  background-color: green;

}
.progress-good{
  background-color: rgb(238, 236, 129);

}
.progress-fair{
  background-color: rgb(248, 162, 64);

}
.progress-bad{
  background-color: red;
 
}

.maxUsage{
  border-radius: 0rem !important;
  height: 20px !important;
}




/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:  var(--bs-primary);
  -webkit-transition: .4s;
  transition: .4s;
  height: 20px;
  width: 36px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #0caa6e;
}

input:focus + .slider {
  box-shadow: 0 0 1px #0caa6e;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 22px;
}

.slider.round:before {
  border-radius: 50%;
}

  .form-check .form-check-input{
    transform:scale(1.3)
    }


    .subcard{
  
      border: 1px solid #48525e;
      padding: 5px;
      border-radius: 10px;
      box-shadow: 0 0 2px #505151;
    }

    .parent-card-app-dynamic{
   
      border: 1px solid #c2c4c6 !important;
      padding: 5px;
      border-radius: 10px;
 
    }

    .summary-card{
   
      border: 1px solid #dadada;
      margin: auto;
      padding: 5px;
      border-radius: 10px;
   
    }

    .border-select{
      border: 1px solid #dadada;
      border-radius: 10px;
    }

    .sub-card-content{
      border-radius: 0.5rem;
      margin-left: 2px;
    
    }

    .margin2{
      background-color: pink;
      margin-left: 50px;
  
    }

    .warn-icon{
      font-size: 20px;
      margin-right: 5px;
    }
    .childless-title{
      padding-inline-start: 30px;
    }

    .topMarginForFileUploadBtn{
      margin-top: 7.5rem !important;
    }
    .topMarginForFileUploadCheckBtn{
      margin-top: 6.8rem !important;
    }

.displayGap{
  display: grid;
  grid-template-columns: repeat(2, auto);
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.new-line-element {
  display: block;
  width: 100%;
  height: 0px !important;
}