table{width:100%; border-collapse: collapse;}
thead {
   
    text-align: left;
}

th, td {
      padding: 5px 10px;color: hsl(var(--color-5)) !important;
}
th{color: var(--input-color) !important;}

th {
    font-weight: bold;
    text-transform: uppercase;
   
}

tr {
    background-color: hsl(var(--color-4));
    border-top: 5px solid hsl(var(--color));
    transition: background-color 0.3s;
    
    
}
tr.draggable{ transition: all 0.3s ease;}

tbody tr:hover {
    background-color: hsl(var(--color-6));
}

td {
    font-size: 14px;
}

td .flex-center{justify-content: start;}

td.center {
    text-align: center;
}

tr td:first-child,tr th:first-child{border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
tr td:last-child,tr th:last-child{border-top-right-radius: 10px;border-bottom-right-radius: 10px;}

td,th{color:hsl(var(--color-1))}

tr.dragging {
    opacity: 0.5;
    transform: rotate(2deg) scale(1.02);
  }
  
  tr.placeholder {
    background: #f0f0f0;
    border: 2px dashed #999;
  }