/* light */
:root {
  --defi-color-brand-900: #04091A;
  --defi-color-brand-700: #8D93A6;
  --defi-color-brand-600: #565D73;

  --defi-card-dep-bg: #F2F7FF;
  --defi-trans-bg: #EEF1FA;
  --defi-button-bg: #2354E6;
  --defi-market-bg: #ffffff;
  --defi-scroll-thumb-bg: #E6E9F2;
}

/* 暗黑模式 */
:root .classic-dark {
  --defi-color-brand-900: #ffffff;
  --defi-color-brand-700: #606880;
  --defi-color-brand-600: #989FB3;

  --defi-card-dep-bg: #141C33;
  --defi-trans-bg: #292F40;
  --defi-button-bg: #3366FF;
  --defi-market-bg: #292f40;
  --defi-scroll-thumb-bg: #474F66;
}

.defi-transaction-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
}
.defi-trans-box { height: 20px; }
.defi-transaction-icon_active { position: relative; }
.defi-transaction-icon_active::after {
  content: '';
  display: block;
  height: 8px;
  width: 8px;
  position: absolute;
  top: -3px;
  right: 0;
  background-color: #17E5A1;
  border-radius: 50%;
}
.defi-transaction-icon:active {
  transform: translateY(1px);
}

.defi-transaction-icon span {
  background-color: var(--defi-trans-bg);
  border-radius: 4px;
  font-size: 12px;
  color: var(--defi-color-brand-900);
  padding: 6px 8px;
  margin-left: 3px;
}

.defi-tansaction-content {
  padding: 24px 16px;
}
.defi-pad24 { padding: 0 24px; }
.web3-700-text { color: var(--defi-color-brand-700); }

.defi-transaction-in {
  display: flex;
  flex-direction: column;
}
.defi-transaction-in_title {
  font-size: 16px;
  color: var(--defi-color-brand-900);
}
.defi-transaction-in_subtitle {
  font-size: 12px;
  padding: 30px 24px 8px 24px;
  color: var(--defi-button-bg);
}
.defi-transaction-in_history {
  font-size: 12px;
  padding: 24px 24px 8px 24px;
  color: var(--defi-color-brand-700);
}

/* Item */
.defi-transaction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-radius: 4px;
  transition: background-color 200ms ease-in-out;
}
.defi-transaction-item:hover {
  background-color: var(--defi-card-dep-bg);
  transition: background-color 200ms ease-in-out;
}
.defi-transaction-item:hover .defi-transaction-item_left_title {
  color: var(--defi-button-bg);
  transition: color 200ms ease-in-out;
}
.defi-transaction-item_left {
  display: flex;
  flex-direction: column;
}
.defi-transaction-item_left_title {
  font-size: 16px;
  line-height: 28px;
  color: var(--defi-color-brand-600);
  transition: color 200ms ease-in-out;
  display: flex;
  align-items: center;
}
.defi-item-processing__title {
  color: var(--defi-color-brand-900) !important;
}
.defi-transaction-item_left_time {
  line-height: 18px;
  color: var(--defi-color-brand-700);
  font-size: 14px;
}

.defi-none-transaction {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 400px;
}

.defi-trans-item_chainName {
  margin-left: 5px;
  color: var(--defi-button-bg);
  border: 1px solid var(--defi-button-bg);
  padding: 0px 10px;
  border-radius: 5px;
  font-size: 12px;
  height: 20px;
  line-height: 17px;
}