.tr-table__wrapper table {
  width: 100%;
  font-size: 12px;
}

.tr-table__wrapper th:hover .drag-icon {
    visibility: visible;
}

.tr-table__wrapper table thead {
  height: 32px;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--bgOpacityColor);
}

.tr-table__wrapper .drag-icon {
  visibility: hidden;
  display: inline-flex;
  cursor: move;
  margin-left: 4px;
  box-sizing: border-box;
  margin: 0px;
  min-width: 0px;
  font-size: 12px;
  width: 1em;
  height: 1em;
  margin-left: 3px;
  color: var(--color-icon-3);
}

.tr-table__wrapper table tbody tr:not(.no-hover-bg, .tr-table__row--null):hover {
  background: var(--color-neutral-2);
  cursor: pointer;
}

.tr-table__wrapper table tbody tr.tr-table__row--null:hover {
  background: transparent;
}

.tr-table__wrapper .tr-table__row--text-null {
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: var(--color-text-2);
}
.tr-table__wrapper thead th:first-child .tr-table__header-wrapper,
.tr-table__wrapper table tbody tr td:first-child > .tr-table__cell {
  padding: 0;
}
.tr-table__wrapper .tr-table__header-wrapper {
  padding: 0 8px;
  min-width: max-content;
}
.tr-table__wrapper .tr-table__cell {
  min-height: 52px;
  display: flex;
  padding: 0 8px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.tr-table__wrapper .tr-table__expand-wrapper {
  color: var(--color-icon-3);
}

.tr-table__wrapper .tr-table__expand-wrapper:hover {
  color: var(--color-text-1);
}

.tr-table__expand {
  width: 30px;
}

.tr-table__wrapper td.tr-table__expand {
  text-align: center;
}

.tr-trade__sub-table {
  padding-left: 30px;
}
.tr-table__expand-wrapper .expanded:before {
  display: block;
  transform: rotate(-180deg);
  transition: transform 0.2s ease-in-out;
}

.trade-react-table__tip--underline {
  text-decoration: underline dotted var(--color-text-3);
  text-underline-offset: 2px;
}

.tr-table__sub-row {
  padding-left: 8px;
  box-sizing: border-box;
  min-height: 72px;
}

.tr-table__wrapper thead .tr-table__header {
  height: 32px;
  color: var(--color-text-2);
  background-color: var(--color-bg-2);
}
.tr-table__wrapper thead .tr-table__header th {
  font-weight: 400;
  border-bottom: 1px solid var(--color-divider-2);
}
.tr-table__wrapper thead .tr-table__header th:last-child {
  padding-right: 16px;
}
.tr-table__wrapper thead .tr-table__header th:first-child {
  padding-left: 16px;
}
html[lang='ar'] .tr-table__wrapper thead .tr-table__header th:last-child {
  padding-right: 0;
  padding-left: 16px;
}
html[lang='ar'] .tr-table__wrapper thead .tr-table__header th:first-child {
  padding-left: 0;
  padding-right: 16px;
}

.tr-table__wrapper thead .tr-table__header th:last-child[draggable="true"] {
  padding-right: 1px;
}

.tr-table__wrapper tbody tr td:first-child {
  padding-left: 16px;
}
.tr-table__wrapper tbody tr td:last-child {
  padding-right: 16px;
}
html[lang='ar'] .tr-table__wrapper tbody tr td:first-child {
  padding-left: 0;
  padding-right: 16px;
}
html[lang='ar'] .tr-table__wrapper tbody tr td:last-child {
  padding-left: 16px;
  padding-right: 0;
}
.tr-table__sub-table .tr-table__cell {
  min-height: 40px;
}

.tr-table__wrapper .no-hover-bg table tbody tr:hover {
  background: none;
}

.tr-table__row--expand * {
  background-color: var(--color-bg-3);
}

.tr-table__cell .loading-page-wrapper {
  min-width: 24px;
}