.tableParent{
    border-radius: 16px !important;
    /*overflow: hidden;*/
    min-width: 100%;
    /*height: 420px;*/
    overflow-x: auto;
    overflow-y: auto !important;
}

.tableParent table {
    border-radius: 16px;
    overflow: hidden;
    border-collapse: separate;
}
.table thead th {
    background-color: var(--colorBackgroundTableHead);
    font-weight: var(--fontWeight600);
    color: var(--colorHeadTableNewOrder);
    padding: 12px 15px;
    height: 58px;  
}

.tableParent tbody tr {
    height: 60px;     
}

.tableParent .status-badge{ 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    padding: 6px;
}
.tableParent .paid,
.tableParent .confirmed{
    background-color: var(--colorBackgroundNewOrderPaid);
    color: var(--colorStatusPaid);
}
.tableParent .awaiting{
     background-color: var(--colorStatusAwating);
     counter-reset: rgba(0, 0, 0, 0.7);
}
.tableParent .pending,
.tableParent .payAtCenter{
    background-color: var(--colorBackgroundNewOrderPending);
    color: var(--colorStatusPending);
}
.tableParent tbody .choose-btn img{
    width: 4px;
}
.tableParent tbody button{
    background: none;
}
.tableParent tbody .choose-btn {
    width: 28px;
    height: 28px;
    gap: 1px;
    border-radius: 6px;
    background-color: var(--ColorBackgroundBody);
}
.tableParent tbody .choose-btn:hover{
    background-color: var(--colorBackgroundNewOrderPending);
}
.tableParent thead {
  position: sticky;
  top: 0;
  z-index: 4;
}
.table.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--colorBackgroundRowOdd) !important;
}
.table.table-striped > tbody > tr:nth-of-type(even) > td{
  background-color: var(--colorBackgroundRowEven) !important; 
}
.new-Orders .tableParent table tbody tr:hover td,
.my-Orders  .tableParent table tbody tr:hover td,
.financial-table  .tableParent table tbody tr:hover td{ /*اhover on td table*/
    background-color: var(--colorBackgroundHeader) !important; 
}

.tableParent table {
  table-layout: fixed; /* to fix the column distribution for the size of each column */
  width: 100%;        
}
.tableParent table th{
    padding: 8px;
    background-color: var(--colorBackgroundRowEven);
}
.tableParent tbody tr{
  font-weight: var(--fontWeight400);
}
/***********************************/
/*Adjust table size and column size on all screens*/

.tableParent {
  overflow-x: auto;
}

.tableParent table {
  width: 100%;
  table-layout: fixed; /* Large screens */
  border-collapse: collapse;
}

.tableParent th,
.tableParent td {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0.5rem;
  min-width: 80px;
  max-width: 180px;
}

.tableParent th:last-child,
.tableParent td:last-child {
  width: 50px;
  overflow: visible;
}
@media screen and (min-width: 1500px){

  .tableParent th span{
    font-size: clamp(15px, 1.2vw, 1.3rem);
  }
  .tableParent tbody span{
    font-size: clamp(14px, 1vw, 1.2rem);
  }
  
}
@media (max-width: 1290px) {
  .tableParent table {
    table-layout: auto !important; /* Force auto layout on small screens */
    min-width: 600px; /* Adjust based on number of columns */
  }

  .tableParent th,
  .tableParent td {
    min-width: 130px; /* Keep ellipsis for small screens */
    max-width: 140px;
  }
}