.table {
  overflow-x: auto !important;
  border-collapse: collapse;
  width: 100%;
  max-width: 100% !important;
  border: var(--table-border);
  padding: 0px !important;
  background-color: var(--table-background-color);
  color: var(--table-color);
  direction: var(--direction);
  float: var(--float);
}

.table tr {
  border-bottom: var(--table-border);
  transition: all 0.1s ease;
}

.table.hover tr:hover {
  background-color: var(--table-hover-background-color);
}

.table td {
  border: var(--table-border);
  padding: 5px;
  vertical-align: middle;
  min-width: 100px;
  word-break: break-all;
}

.table td div,
.table td p,
.table td label,
.table td h1,
.table td h2,
.table td h3,
.table td span,
.table td b {
  color: var(--table-color);
}

.table th {
  background-color: var(--navbar-background-color) !important;
  color: var(--table-th-color) !important;
  border: var(--table-border);
  padding: 5px !important;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}
table td.center {
  display: table-cell !important;
}
.table.center {
  display: table !important;
}

.table.center * {
  text-align: center !important;
}

.table input {
  font-size: 13px !important;
}

.table tr i-list {
  min-width: 300px !important;
}

.grid {
  width: 95vw;
  max-height: 500px;
  overflow: scroll;
}

.table.border-none,
.table.border-none tr,
.table.border-none th,
.table.border-none td {
  border: none !important;
}

@media screen and (max-width: 768px

/*mobile*/) {
  .table {
    display: block !important;
  }
}