.table-fixed
{
 margin: 0 auto; /* centers the table */
  table-layout: fixed;
  width: 100%; /* optional, adjust as needed */
}
.table-fixed td, th {
  text-align: center;
  vertical-align: middle;
}
 
.table_padding {
  margin: 0 auto;
  width: 100%;
  border-collapse: collapse;
} 
/* Apply padding to cells */
.table_padding td,
.table_padding th {
  padding:0px 5px;
}

/* Row background colors: even and odd */
.table_padding tr:nth-child(even) {
  background-color: var(--secondary-light-color); /* light gray */
}

.table_padding tr:nth-child(odd) {
  background-color: var(--background-color); /* white */
}
 table {
   outline: none;
   width: 100%;
   border-collapse: collapse;
   font-family: Arial, sans-serif;
 }

 th {
   text-align: left;
   padding: 2px 2px;
   background-color: var(--layout-background-color);
   vertical-align: middle;
 }

 td {
   padding: 0px 0px;
   vertical-align: middle;
 }

 .selectable-table {
   border-collapse: collapse;
   width: 100%;
   outline: none;
   font-size: var(--font-sm);
   cursor: pointer;
   border-left: solid 4px transparent;
 }

 .selectable-table td {
   padding: 0px 0px;

 }

 .selectable-table tr.selected {
   border-left: solid 4px var(--secondary-color);
   color: var(--text-color);
   border-radius: var(--radius-sm);
   font-weight: 400;
   background-color: var(--primary-color);
 }
 @media only screen and (max-width: 768px) {

   /* table  */
   table {
     outline: none;
     width: 100%;
     border-collapse: collapse;
     font-family: Arial, sans-serif;

   }

   td {
     padding: 3px 1px;
     vertical-align: middle;
   }

   .selectable-table {
     border-collapse: collapse;
     width: 100%;
     outline: none;
     font-size: var(--font-sm);
     cursor: pointer;
     border-left: solid 4px transparent;
   }

   .selectable-table td {
     padding: 0px 10px;

   }

   .selectable-table tr.selected {
     border-left: solid 4px var(--secondary-color);
     color: var(--text-color);
     border-radius: var(--radius-sm);
     font-weight: 400;
     background-color: var(--primary-color);
   }
   select {
     outline: none;
     z-index: 10;
     border-radius: var(--radius-sm);
     width: calc(100% - 10px);
     font-size: var(--font-md);
     padding: 0px 2px;
     width: 100%;
     min-width: 100px;
     box-sizing: border-box;
   }
 }