.table-data-container {
    margin:10px;
    overflow:hidden;
}
.table-data {
    width: 100%;
    position: relative;
    background-color: #FFF;
    border-radius:3px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    /* border:1px solid #CCC; */
}
.table-three-dots-separator {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="7" height="6"%3E%3Ccircle cx="3" cy="3" r="3" fill="orange" /%3E%3C/svg%3E');
    background-repeat: repeat-x;
    width:6px;
    height:8px;
}
.table-data-container--mobile {
    margin-top:10px;
    overflow:hidden;
}
.table-data--mobile {
    width: 100%;
    position: relative;
    background-color: #FFF;
    border-radius:3px;
    margin-bottom:20px;
    
    /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); */
}

.table-data--mobile tr td {
  padding:4px;
  border-bottom:1px solid #EFEFEF;
}

.table-data--mobile tr:first-child td {
  border-top:1px solid #CCC;
}
/* .table-data--mobile tr:last-child td {
  border-bottom:1px solid #DBDBDB;
} */
.table-data--mobile tr td:nth-child(1) {
  font-weight:500;
}

.table-data thead tr th {
    position: sticky;
    top: 0;
    padding:0;
    margin:0;
    background-color: var(--body-background-color);

    text-align: left;
    
}
.table-data thead tr th:nth-child(1) {
    border-top-left-radius: 10px;
}
.table-data thead tr th:last-child {
    border-top-right-radius: 10px;
}

.table-data thead tr th > div {
  width:100%;
  height:100%;
  border-bottom:1px solid #BBB;
  text-align:left;
  padding:8px 6px 8px 6px;
  font-weight: 500;


  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-data tbody tr {
  cursor: pointer;
  transition: background-color 0.3s;
}
.table-data tbody tr:hover {
    background-color: #EFEFEF;
}

.table-data tbody tr td {
  /* width:100%;
  height:100%; */
  border-bottom:1px solid #DBDBDB;
  text-align: left;
  padding:4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-data tfoot th {
  position: sticky;
  bottom: 0;
  padding:0;
  margin:0;
  background-color: #FFF;
}

.table-data tfoot th div {
  width:100%;
  height:100%;

  text-align: left;
  padding: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
    /* box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); */
}


.overflow-cell {
  max-width: 150px; /* Set a maximum width for the cell */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}