:root {
  --trading-UpText: #229c92;
  --trading-DownText: #eb455f;
  --trading-Subtle: #0e2826;
  --trading-InputBorder: #173535;

  /* buy button */
  --button-buy-bg: transparent;
  --button-buy-color: #ffffff;
  --button-buy-border: 1px solid rgba(33, 156, 146, 1);
  --button-buy-padding: 0;
  --button-buy-content-bg: rgba(33, 156, 146, 0.5);
  --button-buy-hover-bg: transparent;
  --button-buy-hover-opacity: 1;
  --button-buy-hover-filter: brightness(1);

  /* sell button */
  --button-sell-bg: transparent;
  --button-sell-color: #ffffff;
  --button-sell-border: 1px solid rgba(235, 68, 95, 1);
  --button-sell-padding: 0;
  --button-sell-content-bg: rgba(235, 68, 95, 0.5);
  --button-sell-hover-bg: transparent;
  --button-sell-hover-opacity: 1;
  --button-sell-hover-filter: brightness(1);
}

.bg-trading-background {
  background-color: #0e1f1f;
}

.border-balance-divider {
  border-color: #153030;
}

.gradient-border-bottom {
  border-bottom: none !important;
}

.gradient-border-bottom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(25, 198, 146, 0.2),
    rgba(25, 198, 146, 0.45),
    rgba(14, 31, 31, 1)
  );
}

.gradient-border-bottom.balance::after {
  left: .75rem;
}

.trading-widget,
.trading-widget-no-border {
  border-width: 0;
  border-radius: 0rem;
}

.trading-widget-border {
  background-color: var(--trading-PrimaryButtonText);
  overflow-x: hidden;
  border: 1px solid #19c69233;
  border-radius: 0.5rem;
}

main {
  padding: 4px 0;
}

@media only screen and (min-width: 640px) {
  main {
    padding: 0;
  }
}

nav {
  column-gap: 18px;
}

header nav > * {
  padding: 8px 10px;

  &.text-trading-textSecondary {
    color: #ffffff;
  }
}

#navbar,
footer {
  border: 0;
}


.intro-modal-button > div {
  padding-top: 0rem;
  padding-bottom: 0rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media only screen and (min-width: 1500px) {
  #orderbook-trade-history-tabs {
    height: 47.8px;
  }
}

#orderbook-trade-history-tabs > div {
  margin-bottom: -2px;
}

.full-width-tabs,
.standard-tabs > div {
  column-gap: 0;
}

.full-width-tabs {
  border: none;
}

.full-width-tabs > button,
.standard-tabs > div > button {
  justify-content: center;
  position: relative;
}


#orderbook-trade-history-tabs > div > button {
  flex: 1;
}

.full-width-tabs > button > div {
  background: none;
}

#app-settings-tabs-container {
  border: none;
}

.full-width-tabs > button::before,
.standard-tabs > div > button::before,
#app-settings-tabs-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #0e1f1f;
}

#account-overview-tabs-container {
  border-color: #0e1f1f;
}

#assets-list-tabs-container, #hyena-portfolio-chart-tabs-container, #portfolio-tabs-container {
  border-color: #272727;
}

#account-overview-tabs, #assets-list-tabs, #hyena-portfolio-chart-tabs-container > div, #portfolio-tabs-container > div {
  margin-bottom: -1px;
}

#assets-list-tabs.standard-tabs > div > button::before, #hyena-portfolio-chart-tabs-container > div > div > button::before, #portfolio-tabs-container > div > div > button::before {
  background: #272727;
}

#assets-list-tabs.standard-tabs > div > button.active::before, #hyena-portfolio-chart-tabs-container > div > div > button.active::before, #portfolio-tabs-container > div > div > button.active::before {
  background: #19c692;
}

.full-width-tabs > button.active,
.standard-tabs > div > button.active {
  background: none;
  border: none;
}

.full-width-tabs > button.active::before,
.standard-tabs > div > button.active::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #19c692;
}

.position-row.long > td:first-child {
  background: linear-gradient(90deg, rgba(22, 198, 101, 0.2), transparent);
  border-left: 3px;
  border-style: solid;
  border-color: #16c665;
}

.position-row.short > td:first-child {
  background: linear-gradient(90deg, rgba(233, 104, 126, 0.2), transparent);
  border-left: 3px;
  border-style: solid;
  border-color: #e9687e;
}

.orderbook-asks {
  gap: 0.125rem;
}

.orderbook-bids {
  gap: 0.125rem;
}

.bg-trading-orderBookAsk {
  background: rgba(235, 68, 95, 0.15);
  right: auto;
  left: 0;
}

.bg-trading-orderBookBid {
  background: rgba(33, 156, 146, 0.15);
  right: auto;
  left: 0;
}

#market-selector-overlay {
  display: none;
}

.bg-hyena-modal {
  box-sizing: border-box;

  background:
    radial-gradient(
      81.63% 100% at 50% 100%,
      rgba(25, 198, 146, 0.15) 0%,
      rgba(25, 198, 146, 0) 100%
    ),
    #000000;
  border: 1px solid rgba(25, 198, 146, 0.25);
  border-radius: 8px;
}

.migrator-modal-gradient-button {
  background:
    radial-gradient(
      181.24% 281.43% at 50.46% 272.86%,
      #1cc693 0%,
      rgba(25, 198, 146, 0) 100%
    ),
    rgba(255, 255, 255, 0.1);
}

.migrator-modal-wizard-button {
  background: transparent;
  border: 2px solid #0e1f1f;
}

.migrator-modal-wizard-button.completed {
  background: linear-gradient(180deg, #7b7b7b 0%, #4d4d4d 100%);
  border: 0;
}

.migrator-modal-wizard-button.active {
  background: linear-gradient(180deg, #1cc693 0%, #1cc69366 100%);
  border: 0;
}

.trade-action-button-wrapper {
  background: #0e1312;
  border: 1px solid #092f24;
}

#deposit-button {
  background: transparent;
}

#deposit-button > div {
  color: var(--trading-PrimaryText);
}

#range-custom-thumb,
#range-ticks,
.range-tick {
  background: #142b2b !important;
}

.range-tick.tick-filled {
  background: var(--trading-Primary) !important;
}

.dual-size-input-percentage-button {
  background: #1c1e20;
}

.dual-size-input-percentage-button:hover {
  color: var(--trading-Primary);
}

#app-settings-button {
  border: 1px solid var(--trading-Border);
  border-radius: 0.5rem;
  padding: 0.266rem;
}

#app-settings-button > svg {
  width: 1rem;
  height: 1rem;
}

#app-settings-button:hover {
  border: 1px solid var(--trading-Primary);
}

#app-settings-button:hover > svg {
  color: var(--trading-PrimaryText);
}

.button-subtle {
  background: #0e2826;
}

.icon-action-button,
.dex-transfer-button,
.hip3-transfer-button,
.action-button {
  background: #18c69233;
  border: 1px solid #18c69250;
  color: #18c692;
}

.icon-action-button:hover,
.dex-transfer-button:hover,
.hip3-transfer-button:hover,
.action-button:hover {
  background: #18c69266;
}

.base-modal {
  padding: 0;
  border: 1px solid rgba(25, 198, 146, 0.25);
}

#hyena-intro-modal {
  border: none;
}

#orderbook-spread {
  background: #222727;
  margin-left: 0;
  margin-right: 0;
}

#market-dropdown > div {
  background: #131c1c;
  border: 1px solid rgba(25, 198, 146, 0.15);
}

.market-dropdown-row.active {
  background: #1a2626;
}

.market-dropdown-row:hover {
  background: #1a2626;
}

#market-dropdown .standard-tabs {
  position: relative;
}

#market-dropdown .standard-tabs > div {
  border: 0;
}

#market-dropdown .standard-tabs::before, #asset-list.standard-tabs::before {
  content: "";
  position: absolute;
  bottom: -0;
  left: 0;
  right: 0;
  height: 1px;
  background: #292e2e;
  width: 100%;
  z-index: 1;
}

#market-dropdown .standard-tabs > div > button {
  padding: 5px 12px;
}

#market-dropdown .standard-tabs > div > button::before {
  bottom: -0;
  z-index: 2;
  background: #292e2e;
}

#market-dropdown .standard-tabs > div > button.active::before {
  background: #19c692;
}

#header-logo {
  margin-left: -6px;
}

.token-input {
  background: #111816;
}

.token-selector-button {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

#swap-route {
  background: #0a0e0d;
}