.web3-ui-tooltips.bn-bubble-higher .bn-bubble-content {
  max-height: 400px
}

.styles_module_tooltip__PQ2N7 {
  background: var(--color-ToastBg);
  color: var(--color-TextOnGray);
  z-index: calc(var(--zindex-tooltip-portal) + 1);
  opacity: 0;
  animation: styles_module_tooltip-fade-in-keyframes__1mxrB var(--animation-duration-base)ease-out forwards;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px
}

:where(.styles_module_tooltip__PQ2N7) {
  word-wrap: break-word;
  max-width: 320px
}

@keyframes styles_module_tooltip-fade-in-keyframes__1mxrB {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.styles_module_arrow__2n7Y2 {
  fill: var(--color-ToastBg)
}

.trader-detail-drawer {
  z-index: 101 !important
}

.trader-detail-drawer .bn-virtual-table-header {
  height: 26px !important
}

.trader-detail-drawer .bn-virtual-table-header,
.trader-detail-drawer .bn-virtual-table-row {
  border-bottom: none !important
}

.trader-detail-drawer .bn-virtual-table {
  scrollbar-width: none
}

.trader-detail-drawer .bn-virtual-table::-webkit-scrollbar {
  width: 0;
  height: 0
}

.trader-detail-drawer .bn-drawer-wrap {
  background-color: var(--color-BasicBg);
  width: 560px
}

.trader-detail-drawer .no-data-container>div {
  min-height: 0 !important
}

.trader-detail-drawer .bn-virtual-table-row {
  height: 44px !important
}

.trader-detail-drawer div:has(>.bn-virtual-table-row) {
  height: 44px !important
}

.trader-detail-drawer .bn-virtual-table-cell * {
  font-weight: 500 !important
}

.trader-detail-drawer .no-data-container svg {
  color: var(--color-TertiaryText) !important
}

.ltr .trader-detail-drawer .bn-drawer-wrap {
  border-left: 1px solid var(--color-Line)
}

.rtl .trader-detail-drawer .bn-drawer-wrap {
  border-right: 1px solid var(--color-Line)
}

.tooltips-ele-full-center>.bn-tooltips-ele {
  justify-content: center;
  width: 100%;
  display: flex
}

.bn-trans:has(.token-follow-dropdown) {
  z-index: calc(var(--zindex-tooltip-portal) + 4) !important
}

#hover-card-portal>[data-radix-popper-content-wrapper] {
  z-index: calc(var(--zindex-tooltip-portal) + 1) !important
}

.hover-card__content-wrapper {
  animation-duration: var(--animation-duration-base);
  animation-timing-function: ease-in-out
}

.hover-card__content {
  box-shadow: var(--shadow-shadow2);
  background-color: var(--color-CardBg)
}

:where(.hover-card__content) {
  border-radius: var(--radii-m)
}

.hover-card__content-wrapper[data-side] {
  animation-name: hover-card-animation
}

.hover-card__tooltip {
  z-index: calc(var(--zindex-tooltip-portal) + 2) !important
}

.hover-card__dropdown-bubble-wrapper {
  z-index: calc(var(--zindex-tooltip-portal) + 3) !important
}

@keyframes hover-card-animation {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.bn-tooltips-trans {
  z-index: 1500
}

.emoji-picker {
  --epr-picker-border-radius: 12px;
  --epr-header-padding: 8px 12px;
  --epr-category-navigation-button-size: 20px;
  --epr-emoji-size: 28px;
  --epr-emoji-gap: 4px;
  --epr-emoji-padding: 4px
}

.emoji-picker .EmojiPickerReact {
  --epr-dark-bg-color: var(--color-CardBg);
  --epr-light-bg-color: var(--color-CardBg);
  --epr-bg-color: var(--color-CardBg);
  --epr-header-bg-color: var(--color-CardBg);
  --epr-text-color: var(--color-PrimaryText);
  --epr-dark-text-color: var(--color-PrimaryText);
  --epr-hover-bg-color: var(--emoji-picker-hover-bg);
  --epr-focus-bg-color: var(--emoji-picker-hover-bg);
  --epr-dark-hover-bg-color: var(--emoji-picker-hover-bg);
  --epr-dark-focus-bg-color: var(--emoji-picker-hover-bg);
  --epr-search-bg-color: var(--color-CardBg);
  --epr-search-border-color: var(--color-Line);
  --epr-search-border-color-active: var(--color-PrimaryYellow);
  --epr-search-input-bg-color: var(--color-Input);
  --epr-search-input-bg-color-active: var(--color-Input);
  --epr-dark-search-input-bg-color: var(--color-Input);
  --epr-dark-search-input-bg-color-active: var(--color-Input);
  --epr-search-input-text-color: var(--color-PrimaryText);
  --epr-search-input-placeholder-color: var(--color-TertiaryText);
  --epr-category-label-bg-color: var(--color-CardBg);
  --epr-dark-category-label-bg-color: var(--color-CardBg);
  --epr-picker-border-color: var(--color-Line);
  --epr-horizontal-padding: 16px;
  --epr-search-input-padding: 0 40px;
  --epr-highlight-color: var(--color-PrimaryYellow) !important;
  --epr-dark-highlight-color: var(--color-PrimaryYellow) !important;
  box-shadow: none !important;
  background-color: var(--color-CardBg) !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important
}

.emoji-picker .EmojiPickerReact aside.epr-main,
.emoji-picker .EmojiPickerReact .epr-header,
.emoji-picker .EmojiPickerReact .epr-search-container,
.emoji-picker .EmojiPickerReact .epr-header-overlay {
  background-color: var(--color-CardBg) !important
}

.emoji-picker .EmojiPickerReact .epr-search-container input.epr-search {
  transition: border-color .2s, background-color .2s;
  background-color: var(--color-Input) !important;
  background-color: var(--epr-search-input-bg-color, var(--color-Input)) !important;
  border: 1px solid var(--color-Line) !important;
  border: 1px solid var(--epr-search-border-color, var(--color-Line)) !important;
  color: var(--color-PrimaryText) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important
}

.emoji-picker .EmojiPickerReact .epr-search-container input.epr-search::placeholder {
  color: var(--color-TertiaryText) !important
}

.emoji-picker .EmojiPickerReact .epr-search-container input.epr-search::placeholder {
  color: var(--color-TertiaryText) !important
}

.emoji-picker .EmojiPickerReact .epr-search-container input.epr-search::placeholder {
  color: var(--color-TertiaryText) !important
}

.emoji-picker .EmojiPickerReact .epr-search-container input.epr-search:focus {
  background-color: var(--color-Input) !important;
  background-color: var(--epr-search-input-bg-color-active, var(--color-Input)) !important;
  border: 1px solid var(--color-PrimaryYellow) !important;
  border: 1px solid var(--epr-search-border-color-active, var(--color-PrimaryYellow)) !important;
  outline: none !important
}

.emoji-picker .EmojiPickerReact .epr-category-nav {
  border-bottom: 1px solid var(--color-Line) !important;
  padding: 8px 12px !important
}

.emoji-picker .EmojiPickerReact .epr-category-nav button {
  transition: background-color .15s;
  border-radius: 6px !important;
  padding: 6px !important
}

.emoji-picker .EmojiPickerReact .epr-category-nav button:hover {
  background-color: var(--emoji-picker-hover-bg) !important
}

.emoji-picker .EmojiPickerReact .epr-category-nav button.epr-active {
  background-color: var(--emoji-picker-selected-bg) !important
}

.emoji-picker .EmojiPickerReact .epr-category-nav button.epr-active svg {
  fill: var(--color-PrimaryYellow) !important
}

.emoji-picker .EmojiPickerReact .epr-emoji-category-label {
  color: var(--color-SecondaryText) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  background-color: var(--color-CardBg) !important;
  padding: 12px 14px 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important
}

.emoji-picker .EmojiPickerReact .epr-emoji-category-content .epr-emoji-category-label,
.emoji-picker .EmojiPickerReact [data-name] .epr-emoji-category-label {
  background-color: var(--color-CardBg) !important
}

.emoji-picker .EmojiPickerReact button.epr-emoji {
  border-radius: 8px !important;
  transition: background-color .15s, transform .1s !important
}

.emoji-picker .EmojiPickerReact button.epr-emoji:hover {
  transform: scale(1.1);
  background-color: var(--emoji-picker-hover-bg) !important
}

.emoji-picker .EmojiPickerReact button.epr-emoji:active {
  transform: scale(.95)
}

.emoji-picker .EmojiPickerReact .epr-body {
  scrollbar-width: thin;
  scrollbar-color: var(--emoji-picker-scrollbar-thumb)transparent
}

.emoji-picker .EmojiPickerReact .epr-body::-webkit-scrollbar {
  width: 6px
}

.emoji-picker .EmojiPickerReact .epr-body::-webkit-scrollbar-track {
  background: 0 0
}

.emoji-picker .EmojiPickerReact .epr-body::-webkit-scrollbar-thumb {
  background-color: var(--emoji-picker-scrollbar-thumb);
  border-radius: 3px
}

.emoji-picker .EmojiPickerReact .epr-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--emoji-picker-scrollbar-thumb-hover)
}

.emoji-picker .EmojiPickerReact .epr-skin-tones button {
  transition: transform .15s;
  border-radius: 50% !important
}

.emoji-picker .EmojiPickerReact .epr-skin-tones button:hover {
  transform: scale(1.2)
}

.emoji-picker .EmojiPickerReact .epr-no-results {
  color: var(--color-TertiaryText) !important;
  text-align: center !important;
  padding: 24px !important;
  font-size: 14px !important
}

.emoji-picker-popover-content {
  border-radius: 12px;
  overflow: hidden
}

.theme-root.midnight .emoji-picker,
:root[data-theme=midnight] .emoji-picker,
.emoji-picker,
.theme-root.dark .emoji-picker,
:root[data-theme=dark] .emoji-picker {
  --emoji-picker-shadow: 0 4px 24px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .2);
  --emoji-picker-hover-bg: rgba(255, 255, 255, .08);
  --emoji-picker-selected-bg: rgba(240, 185, 11, .15);
  --emoji-picker-scrollbar-thumb: rgba(255, 255, 255, .2);
  --emoji-picker-scrollbar-thumb-hover: rgba(255, 255, 255, .3)
}

.theme-root.light .emoji-picker,
:root[data-theme=light] .emoji-picker {
  --emoji-picker-shadow: 0 4px 24px rgba(0, 0, 0, .12), 0 2px 8px rgba(0, 0, 0, .08);
  --emoji-picker-hover-bg: rgba(0, 0, 0, .04);
  --emoji-picker-selected-bg: rgba(240, 185, 11, .12);
  --emoji-picker-scrollbar-thumb: rgba(0, 0, 0, .15);
  --emoji-picker-scrollbar-thumb-hover: rgba(0, 0, 0, .25)
}

.theme-root.midnight .twitter-profile-content,
.theme-root.midnight .twitter-community-content,
.theme-root.midnight .twitter-post-content {
  --color-TwitterContentBg: #15202b;
  --color-TwitterContentBgHover: #1c2733;
  --color-TwitterContentBgActive: rgba(230, 236, 240, .7);
  --color-TwitterContentText: #8799a8;
  --color-TwitterContentLine: #3b4652;
  --color-TwitterContentBtnBg: transparent;
  --color-TwitterContentBtnHoverBg: rgba(107, 201, 251, .1)
}

.theme-root.light .twitter-profile-content,
.theme-root.light .twitter-community-content,
.theme-root.light .twitter-post-content {
  --color-TwitterContentBg: #fff;
  --color-TwitterContentBgHover: #f7f9f9;
  --color-TwitterContentText: #4a6174;
  --color-TwitterContentLine: #e4e6e9;
  --color-TwitterContentBtnBg: transparent;
  --color-TwitterContentBtnHoverBg: rgba(0, 111, 214, .1)
}

.cex-filter .bn-textField {
  border: 1px solid #474d57;
  border: 1px solid var(--color-InputLine, #474d57);
  width: 127px
}

.cex-filter .bn-textField.data-error {
  border: 1px solid #ff4d4f;
  border: 1px solid var(--color-Error, #ff4d4f)
}

.cex-filter .bn-textField:not(.data-error):hover,
.cex-filter .bn-textField:not(.data-error):focus {
  border: 1px solid gold;
  border: 1px solid var(--color-PrimaryYellow, gold)
}

.cex-filter .bn-select-field {
  grid-gap: 0;
  gap: 0;
  padding: 0
}

.cex-filter .bn-select-field.data-line,
.cex-filter .bn-select-field.data-line:hover,
.cex-filter .bn-select-field.data-line:focus {
  border: none
}

.cex-filter .bn-tooltips-ele {
  width: 55px
}

.ltr .cex-filter .bn-textField .bn-textField-input {
  text-align: right
}

.rtl .cex-filter .bn-textField .bn-textField-input {
  text-align: left
}

.cex-table {
  position: relative
}

.cex-table table {
  border-collapse: collapse;
  width: 100%
}

.cex-table thead th {
  white-space: nowrap;
  background-color: #181a20;
  background-color: var(--color-BasicBg, #181a20);
  padding: 12px 16px
}

.cex-table tbody tr td {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 12px 16px
}

.cex-table tbody tr td:has(>a.cex-table-link-cell) {
  padding: 0
}

.cex-table tbody tr td:has(>a.cex-table-link-cell)>a.cex-table-link-cell {
  color: inherit;
  padding: 12px 16px;
  text-decoration: none;
  display: block
}

.cex-table tbody tr td:first-child:has(>a.cex-table-link-cell) {
  padding: 0
}

.cex-table tbody tr td:last-child:has(>a.cex-table-link-cell) {
  padding: 0
}

.cex-table .bn-web-table-container .bn-web-table-row {
  border-bottom: 1px solid #2b3139;
  border-bottom: 1px solid var(--color-Line, #2b3139)
}

.cex-table .bn-web-table thead tr {
  background-color: transparent
}

.cex-table .rc-table-row:hover {
  background-color: #1e2329;
  background-color: var(--color-Vessel, #1e2329)
}

.cex-table .rc-table-cell-fix-left {
  z-index: 1
}

.cex-table .rc-table-placeholder {
  border-bottom: none
}

.cex-table .rc-table-placeholder .rc-table-cell {
  padding: 0
}

.cex-table .rc-table-cell-fix-left-first:after,
.cex-table .rc-table-cell-fix-left-last:after {
  content: "";
  pointer-events: none;
  width: 30px;
  transition: box-shadow .3s;
  position: absolute;
  top: 0;
  bottom: -1px
}

.cex-table .bn-web-table {
  border-bottom: none
}

.cex-table .bn-web-table-body {
  --scroll-pad: 0px !important;
  --scroll-size: 0px !important
}

.cex-table .table-pagination {
  justify-content: center;
  padding: 24px 0;
  display: flex
}

.ltr .cex-table tbody tr td:first-child:has(>a.cex-table-link-cell)>a.cex-table-link-cell {
  padding-left: 16px
}

.ltr .cex-table tbody tr td:last-child:has(>a.cex-table-link-cell)>a.cex-table-link-cell {
  padding-right: 16px
}

.ltr .cex-table .rc-table-ping-left .rc-table-cell-fix-left-first:after,
.ltr .cex-table .rc-table-ping-left .rc-table-cell-fix-left-last:after {
  box-shadow: inset 10px 0 8px -8px rgba(5, 5, 5, .72)
}

.ltr .cex-table .rc-table-cell-fix-left-first:after,
.ltr .cex-table .rc-table-cell-fix-left-last:after {
  right: 0;
  transform: translate(100%)
}

.ltr .cex-table[dir=rtl] td {
  direction: rtl !important
}

.ltr .cex-table[dir=rtl] th {
  direction: rtl !important
}

.rtl .cex-table tbody tr td:first-child:has(>a.cex-table-link-cell)>a.cex-table-link-cell {
  padding-right: 16px
}

.rtl .cex-table tbody tr td:last-child:has(>a.cex-table-link-cell)>a.cex-table-link-cell {
  padding-left: 16px
}

.rtl .cex-table .rc-table-ping-left .rc-table-cell-fix-left-first:after,
.rtl .cex-table .rc-table-ping-left .rc-table-cell-fix-left-last:after {
  box-shadow: inset -10px 0 8px -8px rgba(5, 5, 5, .72)
}

.rtl .cex-table .rc-table-cell-fix-left-first:after,
.rtl .cex-table .rc-table-cell-fix-left-last:after {
  left: 0;
  transform: translate(-100%)
}

.rtl .cex-table[dir=rtl] td {
  direction: ltr !important
}

.rtl .cex-table[dir=rtl] th {
  direction: ltr !important
}

.no-data {
  text-align: center
}

.no-data .bn-emptyState-icon {
  width: 64px;
  width: var(--icon-size, 64px);
  height: 64px;
  height: var(--icon-size, 64px);
  color: var(--color-TertiaryText)
}

.no-data .bn-emptyState-content {
  color: var(--color-TertiaryText)
}

.no-data .bn-svg {
  width: 64px;
  width: var(--icon-size, 64px);
  height: 64px;
  height: var(--icon-size, 64px);
  color: var(--color-TertiaryText)
}

.token-detail-uikit-table-override thead {
  border-bottom: 1px solid var(--color-Line);
  border-top: 1px solid var(--color-Line);
  height: 40px
}

.token-detail-uikit-table-override thead tr th,
.token-detail-uikit-table-override tbody tr td {
  padding-top: 0 !important;
  padding-bottom: 0 !important
}

.token-detail-uikit-table-override tr {
  border: none !important
}

.token-detail-uikit-table-override .bn-web-table {
  scrollbar-width: thin;
  scrollbar-color: var(--color-Line)transparent
}

.token-detail-uikit-table-override .bn-web-table::-webkit-scrollbar-thumb {
  background: var(--color-Line);
  border-radius: 3px
}

.token-detail-uikit-table-override .bn-web-table::-webkit-scrollbar-thumb:hover {
  background: var(--color-TertiaryText)
}

.token-detail-uikit-table-override .bn-web-table-body {
  height: var(--table-height)
}

.token-detail-virtual-table.bn-virtual-table {
  scrollbar-width: thin;
  scrollbar-color: var(--color-Line)transparent
}

.token-detail-virtual-table.bn-virtual-table::-webkit-scrollbar-thumb {
  background: var(--color-Line);
  border-radius: 3px
}

.token-detail-virtual-table.bn-virtual-table::-webkit-scrollbar-thumb:hover {
  background: var(--color-TertiaryText)
}

.holders-table-container .bn-virtual-table-row,
.traders-table-container .bn-virtual-table-row,
.trade-history-table-container .bn-virtual-table-row,
.liquidity-change-history-table-container .bn-virtual-table-row,
.liquidity-pool-table-container .bn-virtual-table-row {
  cursor: pointer
}

.ltr .limit-order-item input {
  text-align: right
}

.rtl .limit-order-item input {
  text-align: left
}

.image-pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges
}

.address-blockies-img {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  position: relative;
  overflow: hidden
}

.address-blockies-img--editable {
  cursor: pointer
}

.address-blockies-img__overlay {
  background-color: var(--color-Mask);
  opacity: 0;
  cursor: pointer;
  border-radius: inherit;
  border: none;
  outline: none;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0
}

.address-blockies-img--editable:hover .address-blockies-img__overlay {
  opacity: 1
}

.address-blockies-img__edit-icon {
  color: var(--color-StaticWhite, #fff);
  width: 50%;
  min-width: 12px;
  max-width: 20px;
  height: 50%;
  min-height: 12px;
  max-height: 20px
}

.TokenSelect_module_tokenSelectBubble__2Cx_w {
  width: 100%
}

.TokenSelect_module_tokenSelectBubble__2Cx_w .bn-bubble-content {
  width: 100% !important
}

.chart-toolbar-color-picker svg {
  fill: var(--color-PrimaryText) !important;
  background-color: transparent !important
}

.chart-toolbar-color-picker svg:hover {
  opacity: .8
}

.chart-toolbar-color-picker .hue-horizontal div>div {
  border-radius: 100% !important;
  width: 14px !important;
  height: 14px !important
}

.chart-toolbar-color-picker input[id^=rc-editable-input-] {
  background-color: var(--color-Input);
  border: 1px solid var(--color-Line) !important;
  height: 22px !important;
  color: var(--color-PrimaryText) !important;
  box-shadow: none !important;
  font-size: 12px !important
}

.chart-toolbar-color-picker input[id^=rc-editable-input-]+label {
  color: var(--color-PrimaryText) !important;
  margin-top: 8px !important;
  font-size: 12px !important
}

.ltr .chart-toolbar-color-picker svg {
  margin-left: 16px
}

.ltr .chart-toolbar-color-picker .hue-horizontal div>div {
  transform: translate(-6px, -2px) !important
}

.rtl .chart-toolbar-color-picker svg {
  margin-right: 16px
}

.rtl .chart-toolbar-color-picker .hue-horizontal div>div {
  transform: translate(6px, -2px) !important
}

.token-detail-handle-bottom {
  position: absolute;
  background-color: var(--color-SectionDivider) !important;
  width: 100% !important;
  height: 4px !important
}

.token-detail-handle-bottom:hover,
.token-detail-handle-bottom:active {
  background-color: var(--color-DisableText) !important
}

.QRCode-logo-container {
  position: absolute;
  top: 50%
}

.ltr .QRCode-logo-container {
  left: 50%;
  transform: translate(-50%, -50%)
}

.rtl .QRCode-logo-container {
  right: 50%;
  transform: translate(50%, -50%)
}

.QRCode-logo-border {
  background-color: #fff;
  border-radius: 4px;
  padding: 2px
}

.QRCode-logo {
  background-color: #000;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  padding: 4px
}

.QRCode-text1 {
  white-space: pre-wrap;
  width: 130px
}

.QRCode-img {
  background-color: #fff;
  border-radius: 4px;
  padding: 12px;
  position: relative
}

.QRCode-img .bn-button {
  padding: 4px 8px
}