/* --- Extracted <style> block #1 --- */
@font-face {
  font-family: "harmonyos-sans";
  font-weight: 400;
  src:
    /*savepage-url=../fonts/harmonyos-sans/regular.woff2*/
    url(fonts/font_6d67eef3f6328ca1119255fb68f6ea74a150eb2f.woff2) format("woff2");
}

@font-face {
  font-family: "harmonyos-sans";
  font-weight: 500;
  src:
    /*savepage-url=../fonts/harmonyos-sans/medium.woff2*/
    url(fonts/font_53d365e82ad16919d3d1afcd8b7d72edf89493dc.woff2) format("woff2");
}

@font-face {
  font-family: "harmonyos-sans";
  font-weight: 700;
  src:
    /*savepage-url=../fonts/harmonyos-sans/bold.woff2*/
    url(fonts/font_2860ca60810c482ec983c155eaeb5a6500775b94.woff2) format("woff2");
}

@font-face {
  font-family: "harmonyos-sans-sc";
  font-weight: 400;
  src:
    /*savepage-url=../fonts/harmonyos-sans-sc-subset/regular.woff2*/
    url() format("woff2");
}

@font-face {
  font-family: "harmonyos-sans-sc";
  font-weight: 500;
  src:
    /*savepage-url=../fonts/harmonyos-sans-sc-subset/medium.woff2*/
    url() format("woff2");
}

@font-face {
  font-family: "harmonyos-sans-sc";
  font-weight: 700;
  src:
    /*savepage-url=../fonts/harmonyos-sans-sc-subset/bold.woff2*/
    url() format("woff2");
}

@font-face {
  font-family: "harmonyos-sans-tc";
  font-weight: 400;
  src:
    /*savepage-url=../fonts/harmonyos-sans-tc-subset/regular.woff2*/
    url() format("woff2");
}

@font-face {
  font-family: "harmonyos-sans-tc";
  font-weight: 500;
  src:
    /*savepage-url=../fonts/harmonyos-sans-tc-subset/medium.woff2*/
    url() format("woff2");
}

@font-face {
  font-family: "harmonyos-sans-tc";
  font-weight: 700;
  src:
    /*savepage-url=../fonts/harmonyos-sans-tc-subset/bold.woff2*/
    url() format("woff2");
}

/** 全局设置字体 */
html:not([data-v4-lang="zh-cn"]):not([data-v4-lang="zh-tc"]) {
  font-family: "harmonyos-sans", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html[data-v4-lang="zh-cn"] {
  font-family: "harmonyos-sans-sc", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

html[data-v4-lang="zh-tc"] {
  font-family: "harmonyos-sans-tc", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

body,
input,
button,
select,
textarea {
  font-family: inherit !important;
}

:root {
  --color-primary-white: rgba(255, 255, 255, 1);
  --color-primary-black: rgba(0, 0, 0, 1);
  --color-primary-black_p40: rgba(0, 0, 0, 0.4);
  --color-primary-black_p60: rgba(0, 0, 0, 0.6);
  --color-gray-light-100: rgba(250, 250, 250, 1);
  --color-gray-light-200: rgba(245, 245, 245, 1);
  --color-gray-light-300: rgba(235, 235, 235, 1);
  --color-gray-light-400: rgba(221, 221, 221, 1);
  --color-gray-light-500: rgba(179, 179, 179, 1);
  --color-gray-light-600: rgba(140, 140, 140, 1);
  --color-gray-light-700: rgba(89, 89, 89, 1);
  --color-gray-light-800: rgba(77, 77, 77, 1);
  --color-gray-dark-100: rgba(22, 22, 22, 1);
  --color-gray-dark-200_p50: rgba(31, 31, 31, 0.5);
  --color-gray-dark-200: rgba(31, 31, 31, 1);
  --color-gray-dark-300: rgba(38, 38, 38, 1);
  --color-gray-dark-400: rgba(51, 51, 51, 1);
  --color-gray-dark-500: rgba(64, 64, 64, 1);
  --color-gray-dark-600: rgba(77, 77, 77, 1);
  --color-gray-dark-700: rgba(102, 102, 102, 1);
  --color-gray-dark-800: rgba(153, 153, 153, 1);
  --color-blue-01: rgba(0, 127, 255, 1);
  --color-blue-01_p10: rgba(0, 127, 255, 0.1);
  --color-blue-01_p20: rgba(0, 127, 255, 0.2);
  --color-purple-02: rgba(88, 78, 238, 1);
  --color-blue-03: rgba(39, 198, 218, 1);
  --color-red-classic-01: rgba(242, 73, 102, 1);
  --color-red-01: rgba(236, 64, 122, 1);
  --color-green-01: rgba(102, 187, 106, 1);
  --color-purple-01: rgba(197, 102, 213, 1);
  --color-red-classic-01_p10: rgba(242, 73, 102, 0.1);
  --color-red-classic-01_p20: rgba(242, 73, 102, 0.2);
  --color-red-classic-02: rgba(217, 65, 91, 1);
  --color-red-modern-01: rgba(178, 16, 18, 1);
  --color-red-modern-02: rgba(255, 65, 91, 1);
  --color-red-modern-03_p20: rgba(255, 0, 0, 0.2);
  --color-red-modern-04_p20: rgba(215, 115, 125, 0.2);
  --color-green-classic-01: rgba(7, 176, 103, 1);
  --color-green-classic-01_p10: rgba(7, 176, 103, 0.1);
  --color-green-classic-01_p20: rgba(7, 176, 103, 0.2);
  --color-green-classic-02: rgba(6, 153, 92, 1);
  --color-green-modern-01: rgba(35, 104, 8, 1);
  --color-green-modern-02: rgba(104, 179, 0, 1);
  --color-green-modern-02_p20: rgba(104, 179, 0, 0.2);
  --color-green-modern-03: rgba(142, 214, 112, 1);
  --color-green-modern-01_p20: rgba(90, 191, 40, 0.2);
  --color-orange-01: rgba(255, 149, 0, 1);
  --color-orange-01_p10: rgba(255, 149, 0, 0.1);
  --color-orange-01_p20: rgba(255, 149, 0, 0.2);
  --color-orange-02: rgba(255, 192, 66, 1);
}

html[data-v4-theme="light"] {
  --Text-L1: var(--color-primary-black);
  --Text-L2: var(--color-gray-light-700);
  --Text-L3: var(--color-gray-light-600);
  --Text-L4: var(--color-gray-light-500);
  --Background-L1: var(--color-primary-white);
  --Background-PopUp: var(--color-primary-white);
  --Background-L2: var(--color-gray-light-100);
  --Background-L3: var(--color-gray-light-200);
  --Background-Toast: var(--color-gray-light-800);
  --Border-L1: var(--color-gray-light-400);
  --Border-L2: var(--color-gray-light-300);
  --Button-Blue-Fill: var(--color-blue-01);
  --Button-Blue-Text: var(--color-primary-white);
  --Button-Green-Fill: var(--color-green-classic-01);
  --Button-Green-Text: var(--color-primary-white);
  --Functional-Blue: var(--color-blue-01);
  --Functional-Green: var(--color-green-classic-01);
  --Functional-Red: var(--color-red-classic-01);
  --Functional-Blue_bg: var(--color-blue-01_p10);
  --Text-Green: var(--color-green-classic-01);
  --Functional-Green_bg: var(--color-green-classic-01_p10);
  --Text-Red: var(--color-red-classic-01);
  --Functional-Red_bg: var(--color-red-classic-01_p10);
  --Functional-Orange: var(--color-orange-01);
  --Functional-Orange_bg: var(--color-orange-01_p10);
  --Functional-White: var(--color-primary-white);
  --Functional-black: var(--color-primary-black);
  --Overlay-mask: var(--color-primary-black_p40);
  --Button-Red-Fill: var(--color-red-classic-01);
  --Button-Red-Text: var(--color-primary-white);
  --kline-ma1: var(--color-purple-01);
  --kline-ma2: var(--color-blue-03);
  --kline-ma3: var(--color-purple-02);
  --kline-ma4: var(--color-red-01);
  --kline-ma5: var(--color-orange-01);
  --kline-ma6: var(--color-orange-02);
  --kline-ma7: var(--color-green-01);
  --kline-ma8: var(--color-blue-01);
}

html[data-v4-theme="dark"] {
  --Text-L1: var(--color-primary-white);
  --Text-L2: var(--color-gray-dark-800);
  --Text-L3: var(--color-gray-dark-700);
  --Text-L4: var(--color-gray-dark-500);
  --Background-L1: var(--color-primary-black);
  --Background-PopUp: var(--color-gray-dark-100);
  --Background-L2: var(--color-gray-dark-200_p50);
  --Background-L3: var(--color-gray-dark-200);
  --Background-Toast: var(--color-gray-dark-600);
  --Border-L1: var(--color-gray-dark-400);
  --Border-L2: var(--color-gray-dark-300);
  --Button-Blue-Fill: var(--color-blue-01);
  --Button-Blue-Text: var(--color-primary-white);
  --Button-Green-Fill: var(--color-green-classic-02);
  --Button-Green-Text: var(--color-primary-white);
  --Functional-Blue: var(--color-blue-01);
  --Functional-Green: var(--color-green-classic-02);
  --Functional-Red: var(--color-red-classic-02);
  --Functional-Blue_bg: var(--color-blue-01_p20);
  --Text-Green: var(--color-green-classic-02);
  --Functional-Green_bg: var(--color-green-classic-01_p20);
  --Text-Red: var(--color-red-classic-02);
  --Functional-Red_bg: var(--color-red-classic-01_p20);
  --Functional-Orange: var(--color-orange-01);
  --Functional-Orange_bg: var(--color-orange-01_p20);
  --Functional-White: var(--color-primary-white);
  --Functional-black: var(--color-primary-black);
  --Overlay-mask: var(--color-primary-black_p60);
  --Button-Red-Fill: var(--color-red-classic-02);
  --Button-Red-Text: var(--color-primary-white);
  --kline-ma1: var(--color-purple-01);
  --kline-ma2: var(--color-blue-03);
  --kline-ma3: var(--color-purple-02);
  --kline-ma4: var(--color-red-01);
  --kline-ma5: var(--color-orange-01);
  --kline-ma6: var(--color-orange-02);
  --kline-ma7: var(--color-green-01);
  --kline-ma8: var(--color-blue-01);
}

html[data-v4-theme="modern-light"] {
  --Text-L1: var(--color-primary-black);
  --Text-L2: var(--color-gray-light-700);
  --Text-L3: var(--color-gray-light-600);
  --Text-L4: var(--color-gray-light-500);
  --Background-L1: var(--color-primary-white);
  --Background-PopUp: var(--color-primary-white);
  --Background-L2: var(--color-gray-light-100);
  --Background-L3: var(--color-gray-light-200);
  --Background-Toast: var(--color-gray-light-800);
  --Border-L1: var(--color-gray-light-400);
  --Border-L2: var(--color-gray-light-300);
  --Button-Blue-Fill: var(--color-primary-black);
  --Button-Blue-Text: var(--color-primary-white);
  --Button-Green-Fill: var(--color-green-modern-02_p20);
  --Button-Green-Text: var(--color-green-modern-01);
  --Functional-Blue: var(--color-blue-01);
  --Functional-Green: var(--color-green-modern-02);
  --Functional-Red: var(--color-red-modern-02);
  --Functional-Blue_bg: var(--color-blue-01_p10);
  --Text-Green: var(--color-green-modern-01);
  --Functional-Green_bg: var(--color-green-modern-02_p20);
  --Text-Red: var(--color-red-modern-01);
  --Functional-Red_bg: var(--color-red-modern-04_p20);
  --Functional-Orange: var(--color-orange-01);
  --Functional-Orange_bg: var(--color-orange-01_p10);
  --Functional-White: var(--color-primary-white);
  --Functional-black: var(--color-primary-black);
  --Overlay-mask: var(--color-primary-black_p40);
  --Button-Red-Fill: var(--color-red-modern-04_p20);
  --Button-Red-Text: var(--color-red-modern-01);
  --kline-ma1: var(--color-purple-01);
  --kline-ma2: var(--color-blue-03);
  --kline-ma3: var(--color-purple-02);
  --kline-ma4: var(--color-red-01);
  --kline-ma5: var(--color-orange-01);
  --kline-ma6: var(--color-orange-02);
  --kline-ma7: var(--color-green-01);
  --kline-ma8: var(--color-blue-01);
}

html[data-v4-theme="modern-dark"] {
  --Text-L1: var(--color-primary-white);
  --Text-L2: var(--color-gray-dark-800);
  --Text-L3: var(--color-gray-dark-700);
  --Text-L4: var(--color-gray-dark-500);
  --Background-L1: var(--color-primary-black);
  --Background-PopUp: var(--color-gray-dark-100);
  --Background-L2: var(--color-gray-dark-200_p50);
  --Background-L3: var(--color-gray-dark-200);
  --Background-Toast: var(--color-gray-dark-600);
  --Border-L1: var(--color-gray-dark-400);
  --Border-L2: var(--color-gray-dark-300);
  --Button-Blue-Fill: var(--color-primary-white);
  --Button-Blue-Text: var(--color-primary-black);
  --Button-Green-Fill: var(--color-green-modern-01_p20);
  --Button-Green-Text: var(--color-green-modern-03);
  --Functional-Blue: var(--color-blue-01);
  --Functional-Green: var(--color-green-modern-03);
  --Functional-Red: var(--color-red-modern-02);
  --Functional-Blue_bg: var(--color-blue-01_p20);
  --Text-Green: var(--color-green-modern-03);
  --Functional-Green_bg: var(--color-green-modern-01_p20);
  --Text-Red: var(--color-red-modern-02);
  --Functional-Red_bg: var(--color-red-modern-03_p20);
  --Functional-Orange: var(--color-orange-01);
  --Functional-Orange_bg: var(--color-orange-01_p20);
  --Functional-White: var(--color-primary-white);
  --Functional-black: var(--color-primary-black);
  --Overlay-mask: var(--color-primary-black_p60);
  --Button-Red-Fill: var(--color-red-modern-03_p20);
  --Button-Red-Text: var(--color-red-modern-02);
  --kline-ma1: var(--color-purple-01);
  --kline-ma2: var(--color-blue-03);
  --kline-ma3: var(--color-blue-01);
  --kline-ma4: var(--color-red-01);
  --kline-ma5: var(--color-orange-01);
  --kline-ma6: var(--color-orange-02);
  --kline-ma7: var(--color-green-01);
  --kline-ma8: var(--color-blue-01);
}

/* --- Extracted <style> block #2 --- */
.data-center .linear-select-condition-wrap {
  align-items: center;
  display: flex
}

.data-center .adjustment-conetnt,
.data-center .adjustment-conetnt .table-body-line-focus td,
.data-center .transfer-limit-table,
.data-center .transfer-limit-table .table-body-line-focus td {
  position: relative
}

.data-center .adjustment-conetnt .table-body-line-focus td:after,
.data-center .transfer-limit-table .table-body-line-focus td:after {
  content: "";
  height: 100%;
  left: -1px;
  position: absolute;
  top: -1px;
  width: 100%
}

.data-center .adjustment-conetnt .table-body-line-focus td.focus-item1:after,
.data-center .transfer-limit-table .table-body-line-focus td.focus-item1:after {
  border: 1px solid var(--dexc-primary-color);
  border-right: unset
}

.data-center .adjustment-conetnt .table-body-line-focus td.focus-item2:after,
.data-center .transfer-limit-table .table-body-line-focus td.focus-item2:after {
  border: 1px solid var(--dexc-primary-color);
  border-left: unset;
  border-right: unset;
  width: calc(100% + 1px)
}

.data-center .adjustment-conetnt .table-body-line-focus td.focus-item3:after,
.data-center .transfer-limit-table .table-body-line-focus td.focus-item3:after {
  border: 1px solid var(--dexc-primary-color);
  border-left: unset;
  width: calc(100% + 1px)
}

.title-text {
  margin-right: 6px
}

.data-center-wrap {
  min-height: 500px
}

.data-center-wrap .dex-tabs-line {
  border-bottom: unset
}

.data-center-wrap .data-center-table {
  border-collapse: collapse;
  margin-bottom: 50px;
  width: 100%
}

.data-center-wrap .data-center-table thead th {
  background: #f5f5f5;
  border: 1px solid #e6ecf2;
  color: #000;
  font-weight: 400;
  height: 40px;
  line-height: normal;
  text-align: center
}

.data-center-wrap .data-center-table tbody tr td {
  border: 1px solid #e6ecf2;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  height: 30px;
  padding: 0 !important;
  text-align: center;
  word-break: break-word
}

.data-center-wrap .data-center-limit-table tbody tr td {
  padding: 0 !important
}

.data-center-wrap .transfer-limit-table {
  position: relative
}

.data-center-wrap .transfer-limit-table thead th {
  font-size: 12px;
  min-width: 60px !important;
  padding: 8px
}

.data-center-wrap .transfer-limit-table thead th .main-font,
.data-center-wrap .transfer-limit-table thead th .tip-text {
  color: unset
}

.data-center-wrap .transfer-limit-table-tbody tr {
  height: 31px
}

.data-center-wrap .linear-trade-limit-title-wrap,
.data-center-wrap .trade-limit-title-wrap {
  flex: 1 1;
  flex-direction: row;
  justify-content: space-between
}

.data-center-wrap .linear-trade-limit-title-wrap {
  align-items: center;
  display: flex;
  padding-bottom: 12px
}

.data-center-wrap .linear-trade-limit-title-wrap .data-center-title {
  margin-bottom: 0 !important
}

.data-center-wrap .linear-trade-limit-title-wrap .trade-limit-tooltip .icon-warn-info {
  font-size: 14px;
  height: 14px
}

.data-center-wrap .linear-trade-limit-title-wrap .trade-limit-tooltip .tooltip-inner-wrap {
  left: -9px;
  top: 4px
}

.data-center-wrap .transfer-limit {
  color: #000
}

.page-wrap-list .dex-tabs-nav {
  margin-bottom: 20px
}

.basic-contract-bill .contract-bill-table {
  min-height: 432px;
  padding: 0;
  position: relative
}

.basic-contract-bill .contract-bill-table .pagination-wrapper {
  height: 64px
}

.basic-contract-bill .contract-bill-table .text-align-right {
  text-align: right
}

.basic-contract-bill .contract-bill-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%
}

.basic-contract-bill .contract-bill-table table td:first-child,
.basic-contract-bill .contract-bill-table table th:first-child {
  padding-left: 30px
}

.basic-contract-bill .contract-bill-table table td:last-child,
.basic-contract-bill .contract-bill-table table th:last-child {
  padding-right: 30px
}

.basic-contract-bill .contract-bill-table table thead tr {
  display: table;
  table-layout: fixed;
  width: 100%
}

.basic-contract-bill .contract-bill-table table thead tr th {
  color: #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 8px 0;
  vertical-align: baseline
}

.basic-contract-bill .contract-bill-table table tbody {
  box-shadow: inset 0 -1px 0 0 #ecf1f8;
  display: block;
  max-height: 400px;
  overflow-y: auto
}

.basic-contract-bill .contract-bill-table table tbody tr {
  display: table;
  height: 48px;
  table-layout: fixed;
  width: 100%
}

.basic-contract-bill .contract-bill-table table tbody tr:hover {
  background-color: #f8fafd
}

.basic-contract-bill .contract-bill-table table tbody tr td {
  color: #232a4a;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.basic-contract-bill .contract-bill-table table tbody tr .contract-bill-view-detail {
  color: var(--dexc-primary-color);
  cursor: pointer
}

.basic-contract-bill .contract-bill-table .table-loading-swapper {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.basic-contract-bill .contract-bill-title-swapper {
  align-items: center;
  color: #232a4a;
  display: flex;
  font-size: 12px;
  margin-left: 30px
}

.basic-contract-bill .contract-bill-title-swapper:before {
  background-color: #357ce1;
  border-radius: 1.5px;
  content: "";
  display: block;
  height: 12px;
  margin-right: 5px;
  width: 3px
}

.basic-contract-bill .pagination-wrapper-bill {
  height: unset !important;
  min-height: 48px !important;
  padding: 6px 20px 6px 30px !important
}

.basic-contract-bill .pagination-wrapper-bill .pagination-title {
  color: #8a8a8e;
  font-size: 12px;
  width: 960px
}

.basic-contract-bill .query-button {
  margin-left: 16px
}

.contract-current-order .contract-order-handle {
  align-items: center;
  display: flex
}

.contract-current-order .center-page .center-page-table-wrap .table-head-two-line th {
  padding-bottom: 8px !important;
  padding-top: 8px !important;
  vertical-align: top
}

.contract-current-order .center-page .center-page-table-wrap .table-head-two-line th .tip-text:not(.ru-RU) {
  white-space: nowrap
}

.contract-current-order .center-page .center-page-table-wrap .table-body-two-line td.order-time,
.contract-current-order .center-page .center-page-table-wrap .table-head-two-line th.order-time {
  min-width: 64px
}

.contract-current-order .tickicon {
  margin-right: 8px
}

.contract-current-order .place-holder {
  display: inline-block;
  width: 20px
}

.contract-current-order .contract-order-header {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  padding-top: 50px
}

.contract-current-order .contract-order-header-wrapped {
  color: #fff;
  display: flex;
  margin: auto;
  width: 1320px
}

.contract-current-order .contract-order-header-wrapped-title {
  align-items: center;
  display: flex;
  padding-bottom: 12px
}

.contract-current-order .contract-order-header-wrapped-title img {
  height: 20px;
  width: 20px
}

.contract-current-order .contract-order-header-wrapped-title span {
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  margin-left: 12px
}

.contract-current-order .contract-order-header-btn-wrap {
  margin-left: 80px
}

.contract-current-order .contract-order-header-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  padding-bottom: 12px
}

.contract-current-order .contract-order-header-btn-wrap a.btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.contract-current-order .contract-order-header-btn-wrap a:nth-child(2),
.contract-current-order .contract-order-header-btn-wrap a:nth-child(3) {
  margin-left: 40px
}

.contract-current-order .contract-order-content {
  border-radius: 2px;
  position: relative;
  width: 1320px
}

.contract-current-order .contract-order-content .contract-order-select-date .center-page-select-root {
  margin-right: 0
}

.contract-current-order .contract-order-content .contract-order-select-date .select-condition-wrap {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  width: 1040px
}

.contract-current-order .contract-order-content .contract-order-select-date .select-condition-wrap .select-condition-symbol {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.contract-current-order .contract-order-content .contract-order-select-date .select-condition-wrap .select-condition-symbol .center-page-convert-font {
  width: 130px !important
}

.contract-current-order .contract-order-content .order-type-btn-wrap-right-check {
  cursor: pointer;
  display: flex;
  margin-left: 24px
}

.contract-current-order .contract-order-content .order-type-btn-wrap-right-check i {
  margin-right: 10px
}

.contract-current-order .contract-order-content .hide-cancel-check-text {
  color: #8a8a8e;
  font-size: 12px
}

.contract-current-order .contract-order-content .center-page-convert-font {
  width: 130px !important
}

.contract-current-order .contract-order-content .contract-order-select-title {
  padding-right: 10px
}

.contract-current-order .contract-order-content .hide-cancel-check {
  cursor: pointer;
  display: flex;
  padding-left: 30px
}

.contract-current-order .contract-order-content .query-button {
  float: left;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: unset !important;
  min-width: 90px !important;
  padding: 0 16px;
  white-space: nowrap;
  width: unset !important
}

.contract-current-order .contract-order-content .query-button:last-child {
  margin-right: 0
}

.contract-current-order .contract-order-content .contract-order-list-item {
  display: inline-block;
  vertical-align: middle;
  width: 100px
}

.contract-current-order .contract-order-content .contract-order-list-item-operate {
  display: inline-block;
  width: 40px
}

.contract-current-order .contract-order-content .contract-order-list-item-operate button {
  font-size: 12px
}

.contract-current-order .contract-order-content .contract-order-notice {
  color: #8a8a8e;
  font-size: 12px;
  width: 700px
}

.contract-current-order .content-box-title-top {
  background: hsla(0, 0%, 85%, .3);
  border-bottom: 2px solid hsla(0, 0%, 85%, .4);
  height: 48px;
  line-height: 48px;
  padding: 0 24px
}

.contract-current-order .content-box-title-top .rectangle-radio-item-base {
  background-color: transparent;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: 400
}

.contract-current-order .content-box-title-top .rectangle-radio-item-base-selected {
  background-color: transparent !important;
  border: none !important;
  color: #000 !important;
  font-weight: 500;
  position: relative
}

.contract-current-order .content-box-title-top .rectangle-radio-item-base-selected:after {
  background: var(--dexc-primary-color);
  bottom: -10px;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: calc(100% - 30px)
}

.time-sharing .top-area-box {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  color: #fff;
  height: 82px;
  padding-top: 47px
}

.time-sharing .top-area-box .top-area {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  margin: 0 auto;
  width: 1200px
}

.time-sharing .top-area-box .top-area .icon-arrow-go {
  color: #8a8a8e;
  cursor: pointer;
  font-size: 12px;
  padding-left: 10px;
  transform: rotate(180deg) scale(.8)
}

.time-sharing .top-area-box .top-area .top-area-title {
  background: url(images/image_ac8dbc9f60446a8020682ee41154893b19e8ff9e.png) 0 0 no-repeat;
  background-size: auto 100%;
  padding-left: 30px
}

.time-sharing .time-sharing-content-box {
  background-color: #fff
}

.time-sharing .time-sharing-content-box .time-sharing-content {
  margin: 0 auto;
  padding-top: 24px;
  width: 1200px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-title {
  align-items: center;
  background: #fff;
  border: 1px solid #e6ecf2;
  display: flex;
  height: 48px;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 0 24px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-title .trade-name {
  color: var(--dexc-primary-font-color);
  font-size: 18px;
  font-weight: 500
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-title .content-title-right {
  align-items: center;
  display: flex
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-title .content-title-right .trade-time {
  color: #232a4a;
  font-size: 12px;
  font-weight: 400;
  text-align: right
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-title .content-title-right .trade-time:before {
  background: var(--up-color);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 6px;
  width: 6px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-title .content-title-right .content-btn-stop {
  background: var(--up-color);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  margin-left: 24px;
  min-width: 90px;
  text-align: center
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item {
  border: 1px solid #e6ecf2;
  border-radius: 2px 2px 0 0;
  margin-bottom: 16px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item .content-item-title {
  background: #f9f9f9;
  font-size: 14px;
  font-weight: 500;
  height: 48px;
  line-height: 48px;
  padding: 0 24px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item .content-item-table {
  overflow: hidden;
  padding: 0 16px 16px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item .content-item-table .pagination.pagination-root {
  margin-top: 10px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item .content-item-table .transparent-button {
  align-items: center;
  text-align: right
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item .content-item-table .icon-arrow-go {
  display: inline-block;
  margin-left: 6px;
  transform: rotate(90deg);
  vertical-align: middle
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item .content-item-table .icon-arrow-go.show-more {
  transform: rotate(270deg)
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item table {
  font-size: 12px;
  font-weight: 400;
  text-align: left;
  width: 100%
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item table th {
  background: #fff;
  color: #8a8a8e;
  height: 32px;
  padding: 0 8px
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item table tbody tr {
  box-shadow: 0 1px 0 #e6ecf2
}

.time-sharing .time-sharing-content-box .time-sharing-content .content-item table tbody tr td {
  height: 44px;
  padding: 0 8px
}

.children-table tr td {
  background: #f9f9f9
}

.transaction-query-no-data {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto;
  padding-bottom: 40px;
  padding-top: 40px
}

.transaction-query-no-data span:first-child {
  margin-bottom: 20px
}

.react-grid-layout {
  position: relative;
  transition: height .2s ease
}

.react-grid-item {
  transition: all .2s ease;
  transition-property: left, top, width, height
}

.react-grid-item img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none
}

.react-grid-item.cssTransforms {
  transition-property: transform, width, height
}

.react-grid-item.resizing {
  transition: none;
  will-change: width, height;
  z-index: 1
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  will-change: transform;
  z-index: 3
}

.react-grid-item.dropping {
  visibility: hidden
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: .2;
  transition-duration: .1s;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  z-index: 2
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none
}

.react-grid-item>.react-resizable-handle {
  height: 20px;
  position: absolute;
  width: 20px
}

.react-grid-item>.react-resizable-handle:after {
  border-bottom: 2px solid rgba(0, 0, 0, .4);
  border-right: 2px solid rgba(0, 0, 0, .4);
  bottom: 3px;
  content: "";
  height: 5px;
  position: absolute;
  right: 3px;
  width: 5px
}

.react-resizable-hide>.react-resizable-handle {
  display: none
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  cursor: sw-resize;
  left: 0;
  transform: rotate(90deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  cursor: se-resize;
  right: 0
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-nw {
  cursor: nw-resize;
  left: 0;
  top: 0;
  transform: rotate(180deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-ne {
  cursor: ne-resize;
  right: 0;
  top: 0;
  transform: rotate(270deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-e,
.react-grid-item>.react-resizable-handle.react-resizable-handle-w {
  cursor: ew-resize;
  margin-top: -10px;
  top: 50%
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-n,
.react-grid-item>.react-resizable-handle.react-resizable-handle-s {
  cursor: ns-resize;
  left: 50%;
  margin-left: -10px
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg)
}

.react-grid-item>.react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg)
}

.react-resizable {
  position: relative
}

.react-resizable-handle {
  background-image: url("images/image_3af98a2f6efeb0feace03ff7e5b1ec946a27ca2a.svg");
  background-origin: content-box;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
  height: 20px;
  padding: 0 3px 3px 0;
  position: absolute;
  width: 20px
}

.react-resizable-handle-sw {
  bottom: 0;
  cursor: sw-resize;
  left: 0;
  transform: rotate(90deg)
}

.react-resizable-handle-se {
  bottom: 0;
  cursor: se-resize;
  right: 0
}

.react-resizable-handle-nw {
  cursor: nw-resize;
  left: 0;
  top: 0;
  transform: rotate(180deg)
}

.react-resizable-handle-ne {
  cursor: ne-resize;
  right: 0;
  top: 0;
  transform: rotate(270deg)
}

.react-resizable-handle-e,
.react-resizable-handle-w {
  cursor: ew-resize;
  margin-top: -10px;
  top: 50%
}

.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg)
}

.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg)
}

.react-resizable-handle-n,
.react-resizable-handle-s {
  cursor: ns-resize;
  left: 50%;
  margin-left: -10px
}

.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg)
}

.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg)
}

.contract-order .contract-order-handle {
  align-items: center;
  display: flex
}

.contract-order .history-content {
  max-width: 1050px;
  min-width: 1050px
}

.contract-order .center-page .center-page-table-wrap .table-head-two-line th {
  padding-bottom: 8px !important;
  padding-top: 8px !important;
  vertical-align: top
}

.contract-order .center-page .center-page-table-wrap .table-head-two-line th .tip-text:not(.ru-RU) {
  white-space: nowrap
}

.contract-order .center-page .center-page-table-wrap .table-body-two-line td.order-time,
.contract-order .center-page .center-page-table-wrap .table-head-two-line th.order-time {
  min-width: 64px
}

.contract-order .contract-order-header {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  padding-top: 50px
}

.contract-order .contract-order-header-wrapped {
  color: #fff;
  display: flex;
  margin: auto;
  width: 1320px
}

.contract-order .contract-order-header-wrapped-title {
  align-items: center;
  display: flex;
  padding-bottom: 12px
}

.contract-order .contract-order-header-wrapped-title img {
  height: 20px;
  width: 20px
}

.contract-order .contract-order-header-wrapped-title span {
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  margin-left: 12px
}

.contract-order .contract-order-header-btn-wrap {
  margin-left: 80px
}

.contract-order .contract-order-header-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  padding-bottom: 12px
}

.contract-order .contract-order-header-btn-wrap a.btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.contract-order .contract-order-header-btn-wrap a:nth-child(2),
.contract-order .contract-order-header-btn-wrap a:nth-child(3) {
  margin-left: 40px
}

.contract-order-export {
  cursor: pointer
}

.contract-order .contract-order-content {
  border-radius: 2px;
  position: relative;
  width: 1320px
}

.contract-order .contract-order-content .content-box-title-top {
  align-items: center;
  background: hsla(0, 0%, 85%, .3);
  border-bottom: 2px solid hsla(0, 0%, 85%, .4);
  display: flex;
  height: 48px;
  justify-content: space-between;
  padding: 0 24px
}

.contract-order .contract-order-content .content-box-title-top .rectangle-radio-item-base {
  background-color: transparent;
  border: none;
  color: #000;
  font-size: 14px;
  font-weight: 400
}

.contract-order .contract-order-content .content-box-title-top .rectangle-radio-item-base-selected {
  background-color: transparent !important;
  border: none !important;
  color: #000 !important;
  font-weight: 500;
  position: relative
}

.contract-order .contract-order-content .content-box-title-top .rectangle-radio-item-base-selected:after {
  background: var(--dexc-primary-color);
  bottom: -12px;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  width: calc(100% - 30px)
}

.contract-order .contract-order-content .content-box-title {
  padding-left: unset;
  padding-right: 24px
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  max-width: 1040px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-right: 14px;
  position: relative;
  width: 1000px;
  z-index: 1
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap::-webkit-scrollbar {
  height: 2px
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap::-webkit-scrollbar-thumb {
  background: #ccd2db;
  border-radius: 1.5px
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap .select-inner-wrap {
  align-items: center;
  display: flex;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1000
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap .select-inner-wrap .contract-order-select-date {
  align-items: center;
  display: flex
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap .select-inner-wrap .center-page-select-root {
  margin-right: 0
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap .select-inner-wrap .select-condition-symbol {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.contract-order .contract-order-content .content-box-title .select-condition-wrap .select-inner-wrap .select-condition-symbol .center-page-convert-font {
  width: 130px !important
}

.contract-order .contract-order-content .linear-pad-left {
  padding-left: 30px
}

.contract-order .contract-order-content .linear-order-type-btn-wrap-right-check,
.contract-order .contract-order-content .order-type-btn-wrap-right-check {
  cursor: pointer;
  display: flex;
  margin-right: 20px
}

.contract-order .contract-order-content .linear-order-type-btn-wrap-right-check i,
.contract-order .contract-order-content .order-type-btn-wrap-right-check i {
  margin-right: 10px
}

.contract-order .contract-order-content .linear-order-type-btn-wrap-right-check .hide-cancel-check-text,
.contract-order .contract-order-content .order-type-btn-wrap-right-check .hide-cancel-check-text {
  color: #8a8a8e;
  font-size: 12px
}

.contract-order .contract-order-content .center-page-convert-font {
  width: 130px !important
}

.contract-order .contract-order-content .contract-order-select-title {
  padding-right: 10px
}

.contract-order .contract-order-content .hide-cancel-check {
  cursor: pointer;
  display: flex;
  padding-left: 30px
}

.contract-order .contract-order-content .query-button {
  float: left;
  margin-left: 16px;
  margin-right: 0;
  margin-top: unset !important
}

.contract-order .contract-order-content .contract-order-list-item {
  display: inline-block;
  vertical-align: middle;
  width: 100px
}

.contract-order .contract-order-content .contract-order-list-item-operate {
  display: inline-block;
  width: 40px
}

.contract-order .contract-order-content .contract-order-list-item-operate button {
  font-size: 12px
}

.contract-order .contract-order-content .contract-order-notice {
  color: #8a8a8e;
  font-size: 12px;
  width: 700px
}

.deal-order-no-data {
  align-items: center;
  color: #596a7a;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 400px;
  justify-content: center;
  line-height: 14px
}

.deal-order-no-data-text {
  margin-top: 16px
}

.deal-order-header {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  margin-bottom: 24px;
  overflow: hidden;
  width: 100%
}

.deal-order-header img {
  margin-right: 12px;
  vertical-align: middle;
  width: 20px
}

.deal-order-header-wrap {
  color: #fff;
  display: flex;
  font-size: 16px;
  margin: 46px auto 0;
  width: 1320px
}

.deal-pad-left {
  padding-left: 30px !important
}

.deal-order-type-btn-wrap {
  margin-left: 80px
}

.deal-order-type-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  padding-bottom: 12px
}

.deal-order-type-btn-wrap a.btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.deal-order-type-btn-wrap a:nth-child(2),
.deal-order-type-btn-wrap a:nth-child(3) {
  margin-left: 40px
}

.deal-order .deal-order-content {
  border-radius: 4px;
  position: relative;
  width: 1320px
}

.deal-order .deal-order-content.center-page .center-page-table-wrap .table-head-two-line th {
  padding-bottom: 8px !important;
  padding-top: 8px !important;
  vertical-align: top
}

.deal-order .deal-order-content .deal-order-handle {
  align-items: center;
  display: flex
}

.deal-order .deal-order-content .query-button {
  float: left;
  margin-left: 16px;
  margin-right: 20px;
  margin-top: unset !important
}

.deal-order .deal-order-content .deal-order-list-item {
  display: inline-block;
  vertical-align: middle;
  width: 100px
}

.deal-order .deal-order-content .deal-order-list-item-operate {
  display: inline-block;
  width: 40px
}

.deal-order .deal-order-content .deal-order-list-item-operate button {
  font-size: 12px
}

.deal-order .deal-order-content .deal-order-notice {
  color: #8a8a8e;
  font-size: 14px
}

.deal-order-tip-style {
  width: 300px !important
}

.all-position .center-page {
  min-height: 480px
}

.all-position .td-left {
  float: left;
  padding-top: 12px
}

.all-position .mark-icon {
  border: 1px solid #357ce1;
  border-radius: 1.6px;
  color: #357ce1;
  padding: 1px 5px
}

.all-position .linear-pad-left {
  padding-left: 30px
}

.all-position-no-data {
  align-items: center;
  color: #596a7a;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 400px;
  justify-content: center;
  line-height: 14px
}

.all-position-no-data-text {
  margin-top: 16px
}

.all-position-header {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  margin-bottom: 24px;
  overflow: hidden;
  width: 100%
}

.all-position-header img {
  margin-right: 12px;
  vertical-align: middle;
  width: 20px
}

.all-position-header-wrap {
  color: #fff;
  display: flex;
  font-size: 16px;
  margin: 46px auto 0;
  width: 1320px
}

.all-position-type-btn-wrap {
  margin-left: 80px
}

.all-position-type-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  padding-bottom: 12px
}

.all-position-type-btn-wrap a.btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.all-position-type-btn-wrap a:nth-child(2),
.all-position-type-btn-wrap a:nth-child(3) {
  margin-left: 40px
}

.all-position .all-position-content {
  border-radius: 4px;
  position: relative;
  width: 1320px
}

.all-position .all-position-content .table-body-line td:first-child {
  white-space: nowrap
}

.all-position .all-position-content .query-button {
  float: left;
  margin-right: 20px;
  margin-top: unset !important
}

.all-position .all-position-content .all-position-list-item {
  display: inline-block;
  vertical-align: middle;
  width: 100px
}

.all-position .all-position-content .all-position-list-item-operate {
  display: inline-block;
  width: 40px
}

.all-position .all-position-content .all-position-list-item-operate button {
  font-size: 12px
}

.all-position .all-position-content .all-position-notice {
  color: #8a8a8e;
  font-size: 14px
}

.trade-data .data-center-page-wrap {
  margin-top: 26px
}

.trade-data .trade-data-detail {
  display: flex;
  justify-content: space-between
}

.trade-data .trade-data-detail .trade-data-detail-list {
  align-items: flex-start;
  display: flex;
  order: 1
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  min-width: 90px
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item>.tooltip-new {
  line-height: 1em
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value {
  color: var(--dexc-primary-color);
  font-size: 20px;
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
  overflow: hidden
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div {
  display: inline-flex;
  flex-direction: column;
  height: 1000px;
  width: 10px
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div span {
  height: 24px;
  width: 100%
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value .trade-data-detail-item-value-unit {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  margin-left: 4px
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-text {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 12px
}

.trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value-transform {
  color: #8a8a8e;
  font-size: 12px;
  margin-top: 4px
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  order: 2
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 12px
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left {
  align-items: flex-start;
  display: inline-flex;
  max-width: 210px
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left>[class^=icon] {
  color: #357ce1;
  display: inline-flex;
  margin-right: 6px;
  margin-top: 1px
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-title-text {
  display: inline-block;
  max-width: 158px
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap .icon-warn-info.secondary-font {
  margin-left: 6px
}

.trade-data .trade-data-detail .trade-data-detail-title-wrap .tooltip-new {
  display: flex;
  margin-left: 6px;
  margin-right: 8px;
  margin-top: 1px;
  vertical-align: middle
}

.trade-data .trade-data-table {
  border-top: 1px solid #e6ecf2;
  margin-top: 18px
}

.trade-data .trade-data-table tr td:first-child,
.trade-data .trade-data-table tr th:first-child {
  padding-left: 0 !important
}

.trade-data .trade-data-table tr td:last-child,
.trade-data .trade-data-table tr th:last-child {
  padding-right: 0 !important
}

.trade-data .trade-data-table.trade-data-table-symbol .table-head-line th {
  padding-bottom: 7px !important;
  padding-top: 7px !important
}

.trade-data .query-button {
  margin-left: 16px
}

.trade-data .hbdm-daterange-picker {
  margin-right: 0
}

.trade-data .trade-data-table-wrap {
  height: unset !important;
  min-height: 480px
}

.trade-data .trade-data-echart {
  display: flex;
  height: 368px;
  justify-content: space-between;
  padding-top: 30px;
  width: 100%
}

.trade-data .trade-data-echart-control {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: space-between;
  width: 100%
}

.trade-data .trade-data-detail-title,
.trade-data .trade-data-echart-control-title {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 7px;
  position: relative
}

.trade-data .trade-data-detail-title:before,
.trade-data .trade-data-echart-control-title:before {
  background: var(--dexc-primary-color);
  border-radius: 1.5px;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 3px
}

.trade-data .trade-data-echart-control-title-2,
.trade-data .trade-data-echart-control-title-3 {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 7px;
  position: relative
}

.trade-data .trade-data-echart-control-title-2:before,
.trade-data .trade-data-echart-control-title-3:before {
  background: var(--dexc-primary-color);
  border-radius: 1.5px;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 3px
}

.trade-data .trade-data-echart-control-select {
  align-items: center;
  display: flex
}

.trade-data .trade-data-echart-control-select-label {
  color: #8a8a8e;
  font-size: 12px;
  margin-right: 10px
}

.trade-data .trade-data-echart-select-root {
  border-radius: 3px;
  height: 24px;
  margin-right: 20px;
  width: 70px
}

.trade-data .trade-data-funds-tooltip {
  background: rgba(24, 25, 30, .7);
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(28, 36, 44, .1);
  height: 54px;
  min-width: 121px;
  padding: 10px
}

.trade-data .trade-data-funds-tooltip-time {
  color: #c6c6c6;
  font-size: 12px;
  line-height: 12px
}

.trade-data .trade-data-funds-tooltip-value {
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  margin-top: 10px
}

.trade-data .pagination-wrapper {
  padding: 0 !important
}

.trade-data .pagination-wrapper .trade-data-notice {
  color: #8a8a8e;
  font-size: 12px;
  width: 700px
}

.trade-data .pagination-wrapper .pagination-confirm {
  margin-right: 0
}

.trade-data .trade-data-foot-prompt {
  color: #8a8a8e;
  font-size: 12px
}

.trade-data .trade-data-custom-width {
  width: 30%
}

.trade-data .trade-data-guide .s-guide-two-main {
  left: -98px;
  right: auto;
  top: 28px;
  width: 209px
}

.trade-data .trade-data-guide .trade-data-guide-main {
  align-items: center;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.trade-data .trade-data-guide .trade-data-guide-main img {
  margin-bottom: 20px;
  width: 90px
}

.swap-trade-data .data-center-page-wrap {
  margin-top: 26px
}

.swap-trade-data .trade-data-detail {
  display: flex;
  justify-content: space-between
}

.swap-trade-data .trade-data-detail .trade-data-detail-list {
  align-items: flex-start;
  display: flex;
  order: 1
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  min-width: 90px
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item>.tooltip-new {
  line-height: 1em
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value {
  color: var(--dexc-primary-color);
  font-size: 20px;
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
  overflow: hidden
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div {
  display: inline-flex;
  flex-direction: column;
  height: 1000px;
  width: 10px
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div span {
  height: 24px;
  width: 100%
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value .trade-data-detail-item-value-unit {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  margin-left: 4px
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-text {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 12px
}

.swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value-transform {
  color: #8a8a8e;
  font-size: 12px;
  margin-top: 4px
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  order: 2
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 12px
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left {
  align-items: flex-start;
  display: inline-flex;
  max-width: 210px
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left>[class^=icon] {
  color: #357ce1;
  display: inline-flex;
  margin-right: 6px;
  margin-top: 1px
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-title-text {
  display: inline-block;
  max-width: 158px
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .icon-warn-info.secondary-font {
  margin-left: 6px
}

.swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .tooltip-new {
  display: flex;
  margin-left: 6px;
  margin-right: 8px;
  margin-top: 1px;
  vertical-align: middle
}

.swap-trade-data .trade-data-table {
  border-top: 1px solid #e6ecf2;
  margin-top: 18px
}

.swap-trade-data .trade-data-table tr td:first-child,
.swap-trade-data .trade-data-table tr th:first-child {
  padding-left: 0 !important
}

.swap-trade-data .trade-data-table tr td:last-child,
.swap-trade-data .trade-data-table tr th:last-child {
  padding-right: 0 !important
}

.swap-trade-data .trade-data-table.trade-data-table-symbol .table-head-line th {
  padding-bottom: 7px !important;
  padding-top: 7px !important
}

.swap-trade-data .query-button {
  margin-left: 16px
}

.swap-trade-data .hbdm-daterange-picker {
  margin-right: 0
}

.swap-trade-data .trade-data-table-wrap {
  height: unset !important;
  min-height: 480px
}

.swap-trade-data .trade-data-echart {
  display: flex;
  height: 368px;
  justify-content: space-between;
  padding-top: 30px;
  width: 100%
}

.swap-trade-data .trade-data-echart-control {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: space-between;
  width: 100%
}

.swap-trade-data .trade-data-detail-title,
.swap-trade-data .trade-data-echart-control-title {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 7px;
  position: relative
}

.swap-trade-data .trade-data-detail-title:before,
.swap-trade-data .trade-data-echart-control-title:before {
  background: var(--dexc-primary-color);
  border-radius: 1.5px;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 3px
}

.swap-trade-data .trade-data-echart-control-title-2,
.swap-trade-data .trade-data-echart-control-title-3 {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 7px;
  position: relative
}

.swap-trade-data .trade-data-echart-control-select {
  align-items: center;
  display: flex
}

.swap-trade-data .trade-data-echart-control-select-label {
  color: #8a8a8e;
  font-size: 12px;
  margin-right: 10px
}

.swap-trade-data .trade-data-echart-select-root {
  border-radius: 3px;
  height: 24px;
  margin-right: 20px;
  width: 70px
}

.swap-trade-data .trade-data-funds-tooltip {
  background: rgba(24, 25, 30, .7);
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(28, 36, 44, .1);
  height: 54px;
  min-width: 121px;
  padding: 10px
}

.swap-trade-data .trade-data-funds-tooltip-time {
  color: #c6c6c6;
  font-size: 12px;
  line-height: 12px
}

.swap-trade-data .trade-data-funds-tooltip-value {
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  margin-top: 10px
}

.swap-trade-data .pagination-wrapper {
  padding: 0 !important
}

.swap-trade-data .pagination-wrapper .trade-data-notice {
  color: #8a8a8e;
  font-size: 12px;
  width: 700px
}

.swap-trade-data .pagination-wrapper .pagination-confirm {
  margin-right: 0
}

.swap-trade-data .trade-data-foot-prompt {
  color: #8a8a8e;
  font-size: 12px
}

.swap-trade-data .trade-data-custom-width {
  width: 30%
}

.swap-trade-data .swap-trade-data-guide .s-guide-two-main {
  left: -98px;
  right: auto;
  top: 28px;
  width: 209px
}

.swap-trade-data .swap-trade-data-guide .trade-data-guide-main {
  align-items: center;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.swap-trade-data .swap-trade-data-guide .trade-data-guide-main img {
  margin-bottom: 20px;
  width: 90px
}

.root-white-green .page-wrap-list.update-20221117 {
  display: flex;
  flex-direction: column
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap {
  display: flex;
  flex: 1 1
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page {
  border: none;
  padding: 0 16px 22px
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .content-box-title {
  background: #fff;
  border: none;
  box-sizing: initial;
  height: auto;
  padding: 16px 0
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .content-box-title .select-condition-wrap :first-child .center-page-select-title,
.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .content-box-title :first-child.select-condition-symbol .center-page-select-title {
  margin-left: 0
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .center-page-table-wrap .table tr th :first-child {
  padding-left: 0
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .center-page-table-wrap .table-head-line th,
.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .center-page-table-wrap .table-head-two-line th {
  background: #f7f8fa;
  color: #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  padding-bottom: 7px !important;
  padding-top: 8px !important;
  vertical-align: top
}

.common-trade-data .data-center-page-wrap {
  margin-top: 26px
}

.common-trade-data .trade-data-detail {
  display: flex;
  justify-content: space-between
}

.common-trade-data .trade-data-detail .trade-data-detail-list {
  align-items: flex-start;
  display: flex;
  order: 1
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  min-width: 90px
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item>.tooltip-new {
  line-height: 1em
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value {
  color: var(--dexc-primary-color);
  font-size: 20px;
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
  overflow: hidden
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div {
  display: inline-flex;
  flex-direction: column;
  height: 1000px;
  width: 10px
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div span {
  height: 24px;
  width: 100%
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value .trade-data-detail-item-value-unit {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  margin-left: 4px
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-text {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 12px
}

.common-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value-transform {
  color: #8a8a8e;
  font-size: 12px;
  margin-top: 4px
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  order: 2
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 12px
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left {
  align-items: flex-start;
  display: inline-flex;
  max-width: 210px
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left>[class^=icon] {
  color: #357ce1;
  display: inline-flex;
  margin-right: 6px;
  margin-top: 1px
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-title-text {
  display: inline-block;
  max-width: 158px
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap .icon-warn-info.secondary-font {
  margin-left: 6px
}

.common-trade-data .trade-data-detail .trade-data-detail-title-wrap .tooltip-new {
  display: flex;
  margin-left: 6px;
  margin-right: 8px;
  margin-top: 1px;
  vertical-align: middle
}

.common-trade-data .trade-data-table {
  border-top: 1px solid #e6ecf2;
  margin-top: 18px
}

.common-trade-data .trade-data-table tr td:first-child,
.common-trade-data .trade-data-table tr th:first-child {
  padding-left: 0 !important
}

.common-trade-data .trade-data-table tr td:last-child,
.common-trade-data .trade-data-table tr th:last-child {
  padding-right: 0 !important
}

.common-trade-data .trade-data-table.trade-data-table-symbol .table-head-line th {
  padding-bottom: 7px !important;
  padding-top: 7px !important
}

.common-trade-data .query-button {
  margin-left: 16px
}

.linear-swap-trade-data .data-center-page-wrap {
  margin-top: 26px
}

.linear-swap-trade-data .trade-data-detail {
  display: flex;
  justify-content: space-between
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list {
  align-items: flex-start;
  display: flex;
  order: 1
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item {
  display: flex;
  flex-direction: column;
  margin-right: 30px;
  min-width: 90px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item>.tooltip-new {
  line-height: 1em
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value {
  color: var(--dexc-primary-color);
  font-size: 20px;
  height: 20px;
  line-height: 20px;
  margin-top: 8px;
  overflow: hidden
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div {
  display: inline-flex;
  flex-direction: column;
  height: 1000px;
  width: 10px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value div span {
  height: 24px;
  width: 100%
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value .trade-data-detail-item-value-unit {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  margin-left: 4px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-text {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 12px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-list .trade-data-detail-item .trade-data-detail-item-value-transform {
  color: #8a8a8e;
  font-size: 12px;
  margin-top: 4px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  order: 2
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-size: 12px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left {
  align-items: flex-start;
  display: inline-flex;
  max-width: 210px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-check .trade-data-detail-check-left>[class^=icon] {
  color: #357ce1;
  display: inline-flex;
  margin-right: 6px;
  margin-top: 1px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .trade-data-detail-title-text {
  display: inline-block;
  max-width: 158px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .icon-warn-info.secondary-font {
  margin-left: 6px
}

.linear-swap-trade-data .trade-data-detail .trade-data-detail-title-wrap .tooltip-new {
  display: flex;
  margin-left: 6px;
  margin-right: 8px;
  margin-top: 1px;
  vertical-align: middle
}

.linear-swap-trade-data .trade-data-table {
  border-top: 1px solid #e6ecf2;
  margin-top: 18px
}

.linear-swap-trade-data .trade-data-table tr td:first-child,
.linear-swap-trade-data .trade-data-table tr th:first-child {
  padding-left: 0 !important
}

.linear-swap-trade-data .trade-data-table tr td:last-child,
.linear-swap-trade-data .trade-data-table tr th:last-child {
  padding-right: 0 !important
}

.linear-swap-trade-data .trade-data-table.trade-data-table-symbol .table-head-line th {
  padding-bottom: 7px !important;
  padding-top: 7px !important
}

.linear-swap-trade-data .query-button {
  margin-left: 16px
}

.linear-swap-trade-data .hbdm-daterange-picker {
  margin-right: 0
}

.linear-swap-trade-data .select-condition-wrap {
  flex: 1 1
}

.linear-swap-trade-data .trade-data-table-wrap {
  height: unset !important;
  min-height: 480px
}

.linear-swap-trade-data .trade-data-echart {
  display: flex;
  height: 368px;
  justify-content: space-between;
  padding-top: 30px;
  width: 100%
}

.linear-swap-trade-data .trade-data-echart-control {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: space-between;
  width: 100%
}

.linear-swap-trade-data .trade-data-detail-title,
.linear-swap-trade-data .trade-data-echart-control-title {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 7px;
  position: relative
}

.linear-swap-trade-data .trade-data-detail-title:before,
.linear-swap-trade-data .trade-data-echart-control-title:before {
  background: var(--dexc-primary-color);
  border-radius: 1.5px;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 4px;
  width: 3px
}

.linear-swap-trade-data .trade-data-echart-control-title-2,
.linear-swap-trade-data .trade-data-echart-control-title-3 {
  color: #000;
  font-size: 16px;
  line-height: 22px;
  padding-left: 7px;
  position: relative
}

.linear-swap-trade-data .trade-data-echart-control-select {
  align-items: center;
  display: flex
}

.linear-swap-trade-data .trade-data-echart-control-select-label {
  color: #8a8a8e;
  font-size: 12px;
  margin-right: 10px
}

.linear-swap-trade-data .trade-data-echart-select-root {
  border-radius: 3px;
  height: 24px;
  margin-right: 20px;
  width: 83px
}

.linear-swap-trade-data .trade-data-funds-tooltip {
  background: rgba(24, 25, 30, .7);
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(28, 36, 44, .1);
  height: 54px;
  min-width: 121px;
  padding: 10px
}

.linear-swap-trade-data .trade-data-funds-tooltip-time {
  color: #c6c6c6;
  font-size: 12px;
  line-height: 12px
}

.linear-swap-trade-data .trade-data-funds-tooltip-value {
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  margin-top: 10px
}

.linear-swap-trade-data .pagination-wrapper {
  padding: 0 !important
}

.linear-swap-trade-data .pagination-wrapper .trade-data-notice {
  color: #8a8a8e;
  font-size: 12px;
  width: 700px
}

.linear-swap-trade-data .pagination-wrapper .pagination-confirm {
  margin-right: 0
}

.linear-swap-trade-data .trade-data-foot-prompt {
  color: #8a8a8e;
  font-size: 12px
}

.linear-swap-trade-data .trade-data-custom-width {
  width: 30%
}

.linear-swap-trade-data .swap-trade-data-guide .s-guide-two-main {
  left: -98px;
  right: auto;
  top: 28px;
  width: 209px
}

.linear-swap-trade-data .swap-trade-data-guide .trade-data-guide-main {
  align-items: center;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.linear-swap-trade-data .swap-trade-data-guide .trade-data-guide-main img {
  margin-bottom: 20px;
  width: 90px
}

.contract-info-nav {
  border-radius: 2px;
  display: inline-block;
  height: 355px;
  padding: 10px;
  vertical-align: top;
  width: 280px
}

.contract-info-nav .nav-item {
  border-radius: 2px;
  height: 56px;
  line-height: 56px;
  padding-left: 40px
}

.contract-info-nav .nav-item .nav-link {
  display: block;
  font-size: 16px;
  text-decoration: none;
  transition: color .2s ease-in-out
}

.contract-info-nav .nav-item-white:hover {
  background-color: #e9eaed
}

.contract-info-nav .nav-item-white:hover .nav-link {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.contract-info-nav .nav-item-blue:hover {
  background-color: #000
}

.contract-info-nav .nav-item-blue:hover .nav-link {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.contract-info-nav .nav-item-black:hover {
  background-color: #34363f
}

.contract-info-nav .nav-item-black:hover .nav-link {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.content-info-box {
  border-radius: 2px;
  display: inline-block;
  width: 1320px
}

.content-info-box .content-info-root-box {
  height: 100%;
  position: relative
}

.content-info-box .content-info-root-box .float-right-item {
  float: right
}

.contract-info-header {
  background: #1b2945;
  height: 82px;
  width: 100%
}

.contract-info .order-type-btn-wrap {
  margin-left: 80px
}

.contract-info .order-type-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  padding-bottom: 12px
}

.contract-info .order-type-btn-wrap a.btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.contract-info .order-type-btn-wrap a:nth-child(2),
.contract-info .order-type-btn-wrap a:nth-child(3),
.contract-info .order-type-btn-wrap a:nth-child(4) {
  margin-left: 40px
}

.contract-info .center-page {
  border-radius: 2px;
  position: relative;
  width: 1320px
}

.contract-info .center-page .data-title {
  border-bottom: 1px solid #e6ecf2;
  display: flex;
  font-size: 16px;
  justify-content: left;
  line-height: 60px;
  margin-top: 20px
}

.contract-info .center-page .data-title .margin-left-40 {
  margin-left: 40px
}

.contract-info {
  min-height: 528px
}

.contract-info .center-info-header {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  padding-top: 50px
}

.contract-info .force-order-sheet-amount {
  background-color: #fff;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  display: flex;
  height: 28px;
  width: 190px
}

.contract-info .force-order-sheet-amount>span {
  width: 10px
}

.contract-info .force-order-sheet-amount .force-order-sheet-amount-input {
  border: none;
  box-sizing: border-box;
  outline: none;
  padding: 10px;
  width: 89px
}

.force-order .center-page-table-wrap {
  min-height: 500px
}

.force-order .center-page-table-wrap .force-order-loading {
  height: 400px
}

.force-order .variety-choose {
  display: flex
}

.force-order .variety-choose .center-page-select-title {
  margin-top: 6px
}

.force-order .table-head-line th.pointer {
  cursor: pointer;
  position: relative;
  top: 1px
}

.force-order .force-order-sheet-wrap {
  display: flex;
  line-height: 28px
}

.swap-force-order .center-page-table-wrap {
  min-height: 500px
}

.swap-force-order .center-page-table-wrap .force-order-loading {
  height: 400px
}

.swap-force-order .table-head-line th.pointer {
  cursor: pointer;
  position: relative;
  top: 1px
}

.swap-force-order .variety-choose {
  display: flex
}

.swap-force-order .variety-choose .center-page-select-title {
  margin-top: 6px
}

.swap-force-order .force-order-sheet-wrap {
  display: flex;
  line-height: 28px
}

.linear-swap-force-order .center-page-table-wrap {
  min-height: 500px
}

.linear-swap-force-order .center-page-table-wrap .force-order-loading {
  height: 400px
}

.linear-swap-force-order .table-head-line th.pointer {
  cursor: pointer;
  position: relative;
  top: 1px
}

.linear-swap-force-order .variety-choose {
  display: flex
}

.linear-swap-force-order .variety-choose .center-page-select-title {
  margin-top: 6px
}

.linear-swap-force-order .force-order-sheet-wrap {
  display: flex;
  line-height: 28px
}

.linear-swap-force-order .force-order-sheet-wrap .force-order-sheet-amount {
  background-color: #fff;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  display: flex;
  height: 28px;
  width: 190px
}

.linear-swap-force-order .force-order-sheet-wrap .force-order-sheet-amount>span {
  width: 10px
}

.linear-swap-force-order .force-order-sheet-wrap .force-order-sheet-amount .force-order-sheet-amount-input {
  border: none;
  box-sizing: border-box;
  outline: none;
  padding: 10px;
  width: 89px
}

.center-page div.contract-data-content-header {
  display: flex;
  justify-content: flex-start
}

.center-page div.contract-data-content .position-volume-content {
  display: flex
}

.center-page div.contract-data-content .position-volume-content .center-page-select-title {
  margin-left: 16px;
  margin-top: 7px
}

.center-page div.contract-data-content .position-volume-reflash {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px
}

.center-page div.contract-data-content .position-volume-reflash .icon-transaction-reflash {
  font-size: 14px;
  height: 14px;
  margin-right: 8px;
  transform-origin: center center
}

.center-page div.contract-data-content .position-volume-reflash .icon-transaction-reflash:before {
  height: 14px;
  width: 14px
}

.center-page div.contract-data-content .position-volume-reflash .icon-transaction-reflash.animate-rotate {
  animation: loading-rotate .6s linear
}

.center-page div.contract-data-content .position-volume-reflash:hover {
  opacity: .7
}

.center-page div.contract-data-content .contract-data-content {
  display: flex;
  flex: 1 1;
  flex-direction: row
}

.center-page div.contract-data-content .center-page-select-item {
  width: auto !important
}

.center-page div.contract-data-content .chart-share {
  cursor: pointer;
  display: none;
  position: absolute;
  right: 13px;
  top: 50px
}

.center-page div.contract-data-content .chart-share>img {
  margin-left: 8px
}

.center-page div.contract-data-content .chart-share:hover,
.center-page div.contract-data-content div:hover+.chart-share {
  display: flex
}

.center-page div.swap-contract-data-content-header {
  display: flex;
  justify-content: flex-start
}

.center-page div.swap-contract-data-content .position-volume-content {
  display: flex
}

.center-page div.swap-contract-data-content .position-volume-content .center-page-select-title {
  margin-left: 16px;
  margin-top: 7px
}

.center-page div.swap-contract-data-content .position-volume-refresh {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px
}

.center-page div.swap-contract-data-content .position-volume-refresh .icon-transaction-reflash {
  font-size: 14px;
  height: 14px;
  margin-right: 8px;
  transform-origin: center center
}

.center-page div.swap-contract-data-content .position-volume-refresh .icon-transaction-reflash:before {
  height: 14px;
  width: 14px
}

.center-page div.swap-contract-data-content .position-volume-refresh .icon-transaction-reflash.animate-rotate {
  animation: loading-rotate .6s linear
}

.center-page div.swap-contract-data-content .position-volume-refresh:hover {
  opacity: .7
}

.center-page div.swap-contract-data-content .swap-contract-data-content {
  display: flex;
  flex: 1 1;
  flex-direction: row
}

.center-page div.swap-contract-data-content .swap-center-page-select-item {
  width: auto !important
}

.center-page div.swap-contract-data-content .chart-share {
  cursor: pointer;
  display: none;
  position: absolute;
  right: 13px;
  top: 50px
}

.center-page div.swap-contract-data-content .chart-share>img {
  margin-left: 8px
}

.center-page div.swap-contract-data-content .chart-share:hover,
.center-page div.swap-contract-data-content div:hover+.chart-share {
  display: flex
}

.center-page div.linear-contract-data-content-header {
  display: flex;
  justify-content: flex-start
}

.center-page div.linear-contract-data-content .position-volume-content {
  display: flex
}

.center-page div.linear-contract-data-content .position-volume-content .center-page-select-title {
  margin-left: 16px;
  margin-top: 7px
}

.center-page div.linear-contract-data-content .position-volume-refresh {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px
}

.center-page div.linear-contract-data-content .position-volume-refresh .icon-transaction-reflash {
  font-size: 14px;
  height: 14px;
  margin-right: 8px;
  transform-origin: center center
}

.center-page div.linear-contract-data-content .position-volume-refresh .icon-transaction-reflash:before {
  height: 14px;
  width: 14px
}

.center-page div.linear-contract-data-content .position-volume-refresh .icon-transaction-reflash.animate-rotate {
  animation: loading-rotate .6s linear
}

.center-page div.linear-contract-data-content .position-volume-refresh:hover {
  opacity: .7
}

.center-page div.linear-contract-data-content .linear-contract-data-content {
  display: flex;
  flex: 1 1;
  flex-direction: row
}

.center-page div.linear-contract-data-content .swap-center-page-select-item {
  width: auto !important
}

.center-page div.linear-contract-data-content .chart-share {
  cursor: pointer;
  display: none;
  position: absolute;
  right: 13px;
  top: 50px
}

.center-page div.linear-contract-data-content .chart-share>img {
  margin-left: 8px
}

.center-page div.linear-contract-data-content .chart-share:hover,
.center-page div.linear-contract-data-content div:hover+.chart-share {
  display: flex
}

.tableContainer-d472fd21 .dex-table-wrapper,
.tableContainer-d472fd21 .dex-table-wrapper .dex-table {
  border-radius: 8px
}

.tableContainer-d472fd21 .dex-table-wrapper .dex-table .dex-table-thead,
.tableContainer-d472fd21 .dex-table-wrapper .dex-table .dex-table-thead .dex-table-cell {
  background-color: unset
}

.settlement-record {
  font-size: 12px;
  height: 100%;
  position: relative
}

.settlement-record .center-page-table-wrap {
  min-height: 500px
}

.settlement-record .settlement-record-content {
  display: flex
}

.settlement-record .settlement-record-content .center-page-select-title {
  margin-top: 7px
}

.settlement-record .list-title-box {
  height: 64px;
  line-height: 64px;
  padding-left: 50px;
  padding-right: 50px
}

.settlement-record .item {
  display: inline-block;
  vertical-align: middle;
  width: 200px
}

.settlement-record .item-settlement-price {
  display: inline-block;
  vertical-align: top;
  width: 280px
}

.settlement-record .item-swapsettlement-price {
  display: inline-block;
  padding-left: 200px;
  vertical-align: top;
  width: 600px
}

.settlement-record .item-share-rate {
  display: inline-block;
  width: 116px
}

.settlement-record .center-page-table-wrap td:first-child,
.settlement-record .center-page-table-wrap th:first-child {
  padding-left: 0 !important
}

.settlement-record .center-page-table-wrap td:last-child:not(.last-td) {
  padding-right: unset !important;
  text-align: left !important
}

.settlement-record .center-page-table-wrap .border-split {
  border-bottom: 1px solid
}

.swap-settlement-record .center-page-table-wrap tr {
  height: 40px
}

.swap-settlement-record {
  font-size: 12px;
  height: 100%;
  position: relative
}

.swap-settlement-record .center-page-table-wrap {
  min-height: 500px
}

.swap-settlement-record .center-page-table-wrap tr {
  border-bottom: 1px solid;
  height: 48px
}

.swap-settlement-record .settlement-record-content {
  display: flex
}

.swap-settlement-record .settlement-record-content .center-page-select-title {
  margin-top: 7px
}

.swap-settlement-record .list-title-box {
  height: 64px;
  line-height: 64px;
  padding-left: 50px;
  padding-right: 50px
}

.swap-settlement-record .item {
  display: inline-block;
  vertical-align: middle;
  width: 200px
}

.swap-settlement-record .item-settlement-price {
  display: inline-block;
  vertical-align: top;
  width: 280px
}

.swap-settlement-record .item-swapsettlement-price {
  display: inline-block;
  padding-left: 200px;
  vertical-align: top;
  width: 600px
}

.swap-settlement-record .item-share-rate {
  display: inline-block;
  width: 116px
}

.swap-settlement-record .list-content-box {
  border-radius: 2px;
  border-top: 1px solid #dfe2e7;
  margin-left: 20px;
  margin-right: 20px;
  min-height: 516px
}

.swap-settlement-record .list-content-box li {
  border-bottom: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  padding: 20px 30px
}

.swap-settlement-record .list-content-box li .middle {
  margin-bottom: 20px;
  margin-top: 20px
}

.swap-settlement-record .list-content-box li .block {
  display: block
}

.swap-settlement-record .list-content-box li:last-child {
  border-bottom: none
}

.swap-settlement-record .td-multi-line .td-multi-line-item {
  height: 48px;
  line-height: 48px
}

.fund-provision .third-item {
  float: right
}

.fund-provision .center-page-table-wrap .pagination-wrapper {
  align-items: center;
  height: unset !important;
  justify-content: space-between;
  min-height: 48px !important
}

.fund-provision .center-page-table-wrap .pagination-wrapper .fund_rate_tip_wrap {
  color: #8a8a8e;
  display: inline-block;
  font-size: 12px;
  line-height: 20px;
  width: 900px
}

.fund-provision .center-page-table-wrap .table-tdWidth td {
  width: 280px
}

.fund-provision .select-list {
  z-index: 11
}

.fund-provision .fundrate-content {
  min-height: 300px
}

.fund-provision .fee-blue {
  color: var(--dexc-primary-color) !important;
  cursor: pointer
}

.fund-provision span {
  display: inline-block
}

.fund-provision .first-item {
  width: 700px
}

.fund-provision .tooltip-wrap .tooltip-inner-wrap {
  margin-top: 5px
}

.fund-provision .float-right-item {
  float: right
}

.fund-provision .fund-provision-page-select-item {
  position: relative;
  z-index: 21
}

.fund-provision .content-box-title .fund-rate-title {
  color: #8a8a8e;
  font-size: 12px;
  margin-right: 10px
}

.fund-provision .content-box-title .btn-wrap {
  align-items: center;
  display: flex
}

.fund-provision .content-box-title .btn-wrap button {
  color: #fff;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  margin-left: 12px;
  padding: 0 10px;
  width: unset !important
}

.fund-provision .content-box-title .k-chart-title-wrap {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%
}

.fund-provision .content-box-title .k-chart-title-wrap .back-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  color: var(--dexc-primary-color);
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  line-height: 28px;
  margin-left: 30px;
  padding: 0 8px
}

.fund-provision .content-box-title .k-chart-title-wrap .back-btn .icon-back {
  height: 12px;
  margin-right: 2px;
  transform: scale(.7) translateY(-2px);
  vertical-align: middle
}

.fund-provision .realtime-page-wrap table {
  text-align: right !important
}

.fund-provision .realtime-page-wrap table tr td:first-child,
.fund-provision .realtime-page-wrap table tr th:first-child {
  padding-left: 10px;
  text-align: left;
  width: 20px
}

.fund-provision .realtime-page-wrap table tr .tip-text {
  max-width: 130px
}

.fund-provision .kchart-wrap {
  padding: 0 30px 40px
}

.fund-provision .table-tdWidth td {
  width: 280px
}

.expected-tip {
  width: 500px !important
}

.data-center .order-type-btn-wrap {
  margin-left: 80px
}

.data-center .order-type-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  line-height: 14px;
  padding-bottom: 12px
}

.data-center .order-type-btn-wrap a.btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.data-center .order-type-btn-wrap a:nth-child(2),
.data-center .order-type-btn-wrap a:nth-child(3),
.data-center .order-type-btn-wrap a:nth-child(4) {
  margin-left: 40px
}

.data-center .center-page {
  border-radius: 2px;
  position: relative;
  width: 1320px
}

.data-center .center-page .data-title {
  border-bottom: 1px solid #e6ecf2;
  display: flex;
  font-size: 16px;
  justify-content: left;
  line-height: 160px
}

.data-center .center-page .data-title .margin-left-40 {
  margin-left: 40px
}

.data-center-page-wrap {
  margin-top: 24px
}

.data-center-page-wrap .trade-data-loading {
  height: 100%
}

.data-center-wrap {
  min-height: 60px;
  padding: 30px;
  transition: all .2s
}

.data-center-wrap .data-center-title {
  align-items: center;
  display: flex;
  font-size: 16px;
  height: 16px;
  margin-bottom: 16px;
  margin-right: 5px
}

.data-center-wrap .data-center-title .title-text {
  margin-right: 10px
}

.data-center-wrap .data-center-title .icon-warn-info {
  font-size: 14px;
  height: 14px
}

.data-center-wrap .data-center-title .tooltip-inner-wrap {
  left: -10px;
  top: 3px
}

.data-center-wrap .data-center-title:nth-child(n+2) {
  margin-top: 10px
}

.data-center-wrap .data-center-table-parameter {
  border-collapse: collapse;
  width: 100%
}

.data-center-wrap .data-center-table-parameter thead th {
  background: #f5f5f5;
  border: 1px solid #e6ecf2;
  color: #000;
  font-weight: 400;
  height: 40px;
  line-height: normal;
  text-align: center
}

.data-center-wrap .data-center-table-parameter tbody tr td {
  border: 1px solid #e6ecf2;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  height: 30px;
  padding: 30px 15px;
  text-align: center;
  word-break: break-word
}

.data-center-wrap .data-center-limit-table tbody {
  min-height: 300px
}

.data-center-wrap .data-center-limit-table tbody tr td {
  border: 1px solid #e6ecf2;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  height: 30px;
  text-align: center;
  width: 285px;
  word-break: break-word
}

.data-center-wrap .data-center-limit-table tbody tr[data-bac=bac] td {
  background: #f4f8fd
}

.data-center-wrap .data-center-limit-table tbody tr[data-bac=none] td {
  background: #fff
}

.data-center-wrap .parameter-limit-table {
  border-collapse: separate
}

.data-center-wrap .parameter-limit-table thead th {
  border: 1px solid #e6ecf2;
  border-left: none;
  font-size: 12px;
  min-width: 90px
}

.data-center-wrap .parameter-limit-table thead th .main-font,
.data-center-wrap .parameter-limit-table thead th .tip-text {
  color: unset
}

.data-center-wrap .parameter-limit-table thead th:first-child {
  background: #f5f5f5;
  border-left: 1px solid #e6ecf2;
  left: 0;
  position: sticky;
  z-index: 1
}

.data-center-wrap .parameter-limit-table tbody tr td {
  border: 1px solid #e6ecf2;
  border-left: none;
  border-top: none
}

.data-center-wrap .parameter-limit-table tbody tr td:first-child {
  background-color: #fff;
  border-left: 1px solid #e6ecf2;
  left: 0;
  position: sticky;
  z-index: 1
}

.data-center-wrap .parameter-limit-table td,
.data-center-wrap .parameter-limit-table tr p {
  white-space: nowrap
}

.data-center-wrap .trade-limit-title-wrap {
  align-items: center;
  display: flex;
  margin-bottom: 16px
}

.data-center-wrap .trade-limit-title-wrap .data-center-title {
  padding-bottom: unset
}

.data-center-wrap .trade-limit-title-wrap .trade-limit-tooltip .icon-warn-info {
  font-size: 14px;
  height: 14px
}

.data-center-wrap .trade-limit-title-wrap .trade-limit-tooltip .tooltip-inner-wrap {
  left: -9px;
  top: 4px
}

.data-center-wrap .parameter-blue {
  color: var(--dexc-primary-color) !important;
  cursor: pointer
}

.data-center-wrap .parameter_introduce {
  color: #8a8a8e;
  font-size: 12px
}

.data-center-wrap .parameter-content {
  margin-bottom: 18px;
  position: relative;
  width: 100%
}

.data-center-wrap .parameter-content div div::-webkit-scrollbar {
  height: 2px
}

.data-center-wrap .parameter-content div div::-webkit-scrollbar-thumb {
  background: #ccd2db;
  border-radius: 1.5px
}

.data-center-wrap .trade-limit-value-item {
  align-items: flex-start;
  display: flex
}

.data-center-wrap .trade-limit-value-item-period {
  margin-right: 6px
}

.sub-account {
  min-height: 528px
}

.sub-account .sub-account-sub-header-right {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 14px;
  position: absolute;
  right: 0;
  top: 1px
}

.sub-account .sub-account-sub-header-right img {
  height: 14px;
  width: 14px
}

.sub-account .sub-account-sub-header-right span {
  color: #fff;
  font-size: 12px;
  line-height: 12px;
  margin-left: 6px
}

.sub-account>.sub-account-content-box {
  border: none !important
}

.sub-account>.sub-account-content-box .sub-account-content-title {
  background-color: #fff !important
}

.sub-account>.sub-account-content-box .sub-account-select-root {
  border: none;
  font-size: 18px
}

.sub-account>.sub-account-content-box .sub-account-select-root .select-arrow {
  right: 0
}

.sub-account>.sub-account-content-box .center-page-table-wrap {
  border-bottom: 1px solid #e6ecf2;
  border-left: 1px solid #e6ecf2;
  border-right: 1px solid #e6ecf2;
  padding-bottom: 15px !important
}

.sub-account>.sub-account-content-box .center-page-table-wrap .table-head-line>th {
  padding-bottom: 7px;
  padding-top: 7px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width1 {
  width: 50px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width2 {
  width: 80px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width3 {
  width: 85px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width4 {
  width: 90px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width5 {
  padding-right: 8px;
  width: 105px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width5.linear-swap-th-width5 {
  width: 120px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width5.th-need-tran-top {
  transform: translateY(-4px)
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width6 {
  width: 121px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width7 {
  width: 92px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width8 {
  width: 74px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width9 {
  width: 80px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width10 {
  width: 70px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .th-width11 {
  width: 94px
}

.sub-account>.sub-account-content-box .center-page-table-wrap .table-head-two-line th {
  vertical-align: top
}

.sub-account>.sub-account-content-box .sub-account-content-table {
  min-height: 350px
}

.sub-account>.sub-account-content-box .sub-account-content-table tr>th {
  white-space: nowrap
}

.sub-account>.sub-account-content-box .sub-account-content-table tr>th .tooltip-inner {
  white-space: normal
}

.sub-account>.sub-account-content-box .sub-account-content-table td {
  white-space: nowrap
}

.sub-account>.sub-account-content-box .sub-account-content-table td:last-child {
  white-space: normal
}

.sub-account>.sub-account-content-box .th-width6,
.sub-account>.sub-account-content-box .th-width7 {
  width: 92px
}

.sub-account>.sub-account-content-box .th-width8 {
  width: 74px
}

.sub-account>.sub-account-content-box .th-width9 {
  width: 80px
}

.sub-account>.sub-account-content-box .th-width10 {
  width: 70px
}

.sub-account>.sub-account-content-box .th-width11 {
  width: 94px
}

.sub-account.swap-sub-account .table-head-line th {
  vertical-align: top !important
}

.sub-account .sub-accont-search {
  align-items: center;
  background: #f2f3f8;
  border-left: 1px solid #e6ecf2;
  border-right: 1px solid #e6ecf2;
  display: flex;
  height: 48px;
  justify-content: space-between;
  margin: 20px 0 0;
  padding: 0 30px
}

.sub-account .sub-accont-search .sub-accont-search-title {
  color: #000;
  font-size: 12px
}

.sub-account .sub-accont-search .sub-accont-search-box {
  position: relative
}

.sub-account .sub-accont-search .sub-accont-search-box .icon-search {
  font-size: 14px;
  height: 14px;
  left: 10px;
  position: absolute;
  top: 7px
}

.sub-account .sub-accont-search .sub-accont-search-box .icon-error {
  height: 12px;
  position: absolute;
  right: 10px;
  top: 8px
}

.sub-account .sub-accont-search .sub-accont-search-box .sub-account-search {
  background: #fff;
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  padding: 0 10px 0 30px;
  width: 246px
}

.sub-account .sub-accont-filter {
  border-left: 1px solid #e6ecf2;
  border-right: 1px solid #e6ecf2;
  color: #333;
  display: flex;
  font-size: 12px;
  height: 60px;
  justify-content: space-between;
  line-height: 60px;
  padding: 0 32px
}

.sub-account .sub-accont-filter .sub-account-filter-right {
  align-items: center;
  display: flex
}

.sub-account .sub-accont-filter .sub-account-filter-right .sub-account-filter-show-text {
  cursor: pointer;
  margin-left: 6px
}

.sub-account .sub-accont-filter .sub-account-filter-right .sub-account-filter-show {
  align-items: center;
  display: flex;
  margin-right: 16px
}

.sub-account .sub-accont-filter .sub-account-filter-right .sub-account-open-all-btn {
  background: var(--dexc-primary-color);
  border-radius: 2px;
  color: #fff;
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  min-width: 80px;
  padding: 0 16px
}

.sub-account .sub-account-link {
  float: right
}

.sub-account .sub-account-content-table {
  min-height: 350px
}

.sub-account .sub-account-tip-content {
  display: flex
}

.sub-account .pagination-wrapper {
  align-items: baseline;
  display: flex
}

.sub-account .pagination-wrapper .sub-account-notice {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 18px;
  margin-left: -40px;
  width: 820px
}

.sub-account .pagination-wrapper .sub-account-tip {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 18px;
  width: 100px
}

.sub-account .pagination-wrapper .sub-account-page {
  margin-bottom: 18px
}

.sub-account .gray-font {
  color: #8a8a8e
}

.sub-account .sub-account-content-title {
  align-items: center;
  background: #fff;
  border: 1px solid #e6ecf2;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  display: flex;
  height: 88px;
  justify-content: space-between;
  line-height: normal;
  padding: 0 20px
}

.sub-account .sub-account-content-title .contnet-title-right {
  display: flex
}

.sub-account .sub-account-content-title .contnet-title-right .sub-account-link {
  align-items: center;
  display: flex;
  margin-right: 25px
}

.sub-account .sub-account-content-title .contnet-title-right .sub-account-link:last-child {
  margin-right: 0
}

.sub-account .sub-account-content-title .contnet-title-right .sub-account-link .icon-maker-unselect,
.sub-account .sub-account-content-title .contnet-title-right .sub-account-link .icon-new-transfer,
.sub-account .sub-account-content-title .contnet-title-right .sub-account-link .icon-sub-global-maneger {
  font-size: 18px;
  height: 18px;
  margin-right: 6px;
  margin-top: -2px
}

.sub-account .sub-account-content-title .total-assets-interest-box {
  align-items: center;
  display: flex;
  line-height: 22px;
  margin-top: 8px;
  position: relative
}

.sub-account .sub-account-content-title .total-assets-interest-box .total-assets-font {
  font-size: 20px
}

.sub-account .sub-account-content-title .total-assets-interest-box .converted-currency {
  color: #8a8a8e;
  font-size: 18px;
  line-height: 21px;
  margin-left: 6px
}

.sub-account .sub-account-content-title .total-assets-interest-box .select-value-box {
  padding-left: 8px;
  padding-right: 15px
}

.sub-account .sub-account-content-title .total-assets-interest-box .select-white {
  background-color: unset !important
}

.sub-account .pagination-wrapper {
  height: auto;
  margin-top: 15px
}

.sub-account .dex-button.disabled {
  background-color: transparent;
  color: var(--dex-quaternary-font-color);
  cursor: not-allowed;
  min-width: auto;
  padding: 0
}

.open-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.open-modal-wrapper.revoke-modal-wrapper-mobile .revoke-modal-content {
  transform: scale(.8)
}

.open-modal-wrapper .open-modal-content {
  background-color: #fff;
  padding: 24px 24px 16px;
  width: 480px
}

.open-modal-wrapper .open-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 14px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.open-modal-wrapper .open-modal-content .modal-close:after {
  content: "\D7"
}

.open-modal-wrapper .open-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.open-modal-wrapper .open-modal-content .open-modal-title {
  color: #263241;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 24px;
  margin-right: 38px
}

.open-modal-wrapper .open-modal-content .open-modal-desc {
  color: #3c4d5d;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 16px
}

.open-modal-wrapper .open-modal-content .modal-footer {
  margin-top: 20px;
  text-align: right
}

.open-modal-wrapper .open-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-left: 16px;
  padding: 0 16px
}

.open-modal-wrapper .open-modal-content .modal-footer .modal-cancel-button {
  background-color: transparent;
  color: var(--dexc-primary-color)
}

.open-modal-wrapper .open-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.transfer-record {
  min-height: 528px
}

.transfer-record .transfer-record-title {
  align-items: center;
  background: #f2f6fa;
  display: flex;
  height: 48px;
  justify-content: space-between;
  line-height: unset !important;
  padding: 0 30px
}

.transfer-record .transfer-record-title .select-white {
  background-color: #fff
}

.transfer-record .transfer-record-content .back-button {
  align-items: center;
  background-color: #fff;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  color: var(--dexc-primary-color);
  display: flex;
  height: 30px;
  line-height: 28px;
  padding: 0 8px
}

.transfer-record .transfer-record-content .back-button .icon-back {
  font-size: 12px;
  height: 12px;
  margin-right: 10px;
  transform: scale(.7)
}

.assets-transfer.assets-transfer-mobile {
  z-index: 901
}

.assets-transfer.assets-transfer-mobile .assets-transfer-inner {
  transform: scale(.6)
}

.assets-transfer .assets-transfer-inner {
  font-size: 14px;
  width: 480px
}

.assets-transfer .assets-transfer-inner .drag-bar {
  height: 30px !important
}

.assets-transfer .assets-transfer-inner .alert-close {
  margin-top: 14px !important
}

.assets-transfer .assets-transfer-inner .transfer-course-wrap {
  align-items: center;
  display: flex;
  margin-right: 64px;
  position: absolute;
  right: 0;
  top: 29px
}

.assets-transfer .assets-transfer-inner .transfer-course-wrap img {
  height: 14px;
  width: 14px
}

.assets-transfer .assets-transfer-inner .transfer-course-wrap span {
  color: var(--dexc-primary-color);
  font-size: 12px;
  line-height: 12px;
  margin-left: 6px
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap {
  margin-bottom: 16px;
  position: relative
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-symbol-text {
  background-color: #fff;
  border: 1px solid #d1d3df;
  border-radius: 2px;
  color: #596a7a;
  height: 40px;
  line-height: 40px;
  width: 100%
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped {
  background-color: #fff;
  border-color: #d1d3df;
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  margin-top: 8px;
  width: 100%
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped .select-value-input-wrapped input {
  padding-left: 10px
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped .select-value-input-wrapped input::-webkit-input-placeholder {
  color: #8a8a8e
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped .select-value-input-wrapped input:-moz-placeholder,
.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped .select-value-input-wrapped input::-moz-placeholder {
  color: #8a8a8e
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped .select-value-input-wrapped input:-ms-input-placeholder {
  color: #8a8a8e
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transfer-selected-input-wraped .select-value-input-wrapped .icon-search {
  color: #8a8a8e;
  font-size: 14px;
  height: 14px;
  padding-left: 10px
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .transtion-select-label {
  color: #596a7a;
  font-size: 12px;
  left: 15px;
  line-height: 40px;
  position: absolute;
  top: 0;
  z-index: 1
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .select-value-input-wrapped {
  padding-left: 10px
}

.assets-transfer .assets-transfer-inner .transtion-select-wrap .select-value-input-wrapped .icon-search {
  color: rgba(154, 165, 181, .5);
  font-size: 14px;
  height: 14px
}

.assets-transfer .assets-transfer-inner .linear-transtion-select-wrap-label {
  margin-top: 16px
}

.assets-transfer .assets-transfer-inner .linear-transtion-select-wrap-label .borrow-coin-wrap {
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  right: 0;
  top: 8px
}

.assets-transfer .assets-transfer-inner .linear-transtion-select-wrap-label .borrow-coin-wrap a {
  color: var(--dexc-primary-color)
}

.assets-transfer .assets-transfer-inner .linear-transtion-select-wrap-label .borrow-coin-wrap .icon-warn-info {
  cursor: pointer;
  margin-left: 6px;
  position: relative;
  top: 2px
}

.assets-transfer .assets-transfer-inner .transfer-info {
  background: #fff;
  border: 1px solid #cfd3e9;
  border-radius: 3px;
  display: flex;
  height: 88px;
  margin-top: 16px;
  position: relative
}

.assets-transfer .assets-transfer-inner .transfer-info.linear-transfer-info {
  margin-top: 0
}

.assets-transfer .assets-transfer-inner .transfer-info:after {
  border: 1px dashed #e6ecf2;
  bottom: 0;
  content: "";
  display: block;
  height: 28px;
  left: 14px;
  margin: auto;
  position: absolute;
  top: 1px
}

.assets-transfer .assets-transfer-inner .transfer-info:before {
  background: #cfd3e9;
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 28px;
  margin: auto;
  position: absolute;
  top: 0;
  width: 342px
}

.assets-transfer .assets-transfer-inner .transfer-info .from-to {
  color: #000;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 6px;
  min-width: 14px
}

.assets-transfer .assets-transfer-inner .transfer-info .from-to.zh-CN,
.assets-transfer .assets-transfer-inner .transfer-info .from-to.zh-HK {
  min-width: 12px
}

.assets-transfer .assets-transfer-inner .transfer-info .from-to.en-US,
.assets-transfer .assets-transfer-inner .transfer-info .from-to.ko-KR,
.assets-transfer .assets-transfer-inner .transfer-info .from-to.ru-RU,
.assets-transfer .assets-transfer-inner .transfer-info .from-to.tr-TR,
.assets-transfer .assets-transfer-inner .transfer-info .from-to.vi-VI {
  min-width: 30px
}

.assets-transfer .assets-transfer-inner .transfer-info-blue,
.assets-transfer .assets-transfer-inner .transfer-info-yellow {
  background: #347be1;
  border-radius: 50%;
  height: 6px;
  width: 6px
}

.assets-transfer .assets-transfer-inner .transfer-info-yellow {
  background: #faad13
}

.assets-transfer .assets-transfer-inner .transfer-info-left.animation .transfer-info-left-top {
  transform: translateY(43px);
  z-index: 1
}

.assets-transfer .assets-transfer-inner .transfer-info-left.animation .transfer-info-left-bottom {
  transform: translateY(-43px);
  z-index: 2
}

.assets-transfer .assets-transfer-inner .transfer-info .transfer-info-left-bottom {
  z-index: 1
}

.assets-transfer .assets-transfer-inner .transfer-info-left {
  display: flex;
  flex: 1 1;
  flex-direction: column
}

.assets-transfer .assets-transfer-inner .transfer-info-left .transfer-type-selected-input-wraped {
  background-color: #fff;
  border-color: transparent;
  border-radius: 2px;
  height: 40px;
  width: 100%
}

.assets-transfer .assets-transfer-inner .transfer-info-left .transfer-type-selected-input-wraped .transfer-type-selected-text {
  color: #232a4a;
  font-size: 14px;
  pointer-events: none;
  white-space: normal;
  width: 255px
}

.assets-transfer .assets-transfer-inner .transfer-info-left .transfer-type-selected-input-wraped .transfer-type-selected-auto-text {
  color: #232a4a;
  font-size: 14px;
  white-space: normal;
  width: 284px
}

.assets-transfer .assets-transfer-inner .transfer-info-left-top {
  z-index: 2
}

.assets-transfer .assets-transfer-inner .transfer-info-left-bottom,
.assets-transfer .assets-transfer-inner .transfer-info-left-top {
  align-items: center;
  display: flex;
  flex: 1 1;
  height: 43px;
  padding-left: 12px;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.35, 0, .25, 1), left .3s cubic-bezier(.35, 0, .25, 1), top .3s cubic-bezier(.35, 0, .25, 1)
}

.assets-transfer .assets-transfer-inner .transfer-info-right {
  align-items: center;
  border-left: 1px solid #cfd3e9;
  display: flex;
  justify-content: center;
  width: 60px
}

.assets-transfer .assets-transfer-inner .transfer-info-right .icon-switch {
  height: 16px;
  transition: transform .2s
}

.assets-transfer .assets-transfer-inner .transfer-info .transfer-info-item {
  display: inline-block;
  vertical-align: top
}

.assets-transfer .assets-transfer-inner .transfer-info .assets-name {
  align-items: center;
  color: #232a4a;
  display: flex;
  flex: 1 1;
  font-size: 14px;
  white-space: normal;
  width: 255px
}

.assets-transfer .assets-transfer-inner .transfer-info .transfer-icon {
  cursor: pointer;
  height: 32px;
  right: 0;
  top: 32px;
  transform: rotate(0);
  transition: transform .3s;
  width: 32px
}

.assets-transfer .assets-transfer-inner .max-transfer-number {
  align-items: center;
  color: #9194a4;
  display: flex;
  float: right;
  font-size: 12px;
  padding-top: 5px
}

.assets-transfer .assets-transfer-inner .max-transfer-number.voucher_money {
  color: #8a8a8e;
  font-size: 12px
}

.assets-transfer .assets-transfer-inner .input-box {
  font-size: 14px;
  margin-top: 16px;
  position: relative
}

.assets-transfer .assets-transfer-inner .input-box.error .transfer-input {
  border-color: var(--dexc-error-color)
}

.assets-transfer .assets-transfer-inner .input-box .transfer-input {
  background-color: #fff;
  border: 1px solid #d1d3df;
  color: #232a4a;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  width: 100%
}

.assets-transfer .assets-transfer-inner .input-box .all {
  border-left: 1px solid;
  border-color: rgba(122, 152, 247, .2);
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  right: 0;
  top: 8px
}

.assets-transfer .assets-transfer-inner .input-box .input-box-label {
  color: #596a7a;
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-left: 15px;
  padding-right: 20px;
  position: absolute;
  top: 8px
}

.assets-transfer .assets-transfer-inner .input-box .input-box-currency {
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  right: 70px;
  top: 8px
}

.assets-transfer .assets-transfer-inner .select-value-input-wrapped,
.assets-transfer .assets-transfer-inner .select-value-input-wrapped input {
  font-size: 14px
}

.assets-transfer .assets-transfer-inner .right .alert-cancel-button,
.assets-transfer .assets-transfer-inner .right .alert-confirm-button {
  min-width: 60px
}

.assets-transfer .tip-wrap {
  display: flex;
  justify-content: space-between;
  line-height: 18px
}

.assets-transfer .tip-wrap .borrow-coin-wrap {
  align-items: center;
  display: inline-flex;
  margin-right: 16px
}

.assets-transfer .tip-wrap .borrow-coin-wrap .icon-warn-info {
  cursor: pointer;
  margin-left: 6px
}

.assets-transfer .tip-wrap .borrow-coin-wrap .tooltip-inner-left {
  left: -13px
}

.assets-transfer .tip-wrap .tip-right {
  padding-top: 5px
}

.assets-transfer .tip-wrap .tip-right a {
  color: var(--dexc-primary-color);
  font-size: 12px
}

.assets-transfer .alert-confirm-button:active,
.assets-transfer .alert-confirm-button:hover {
  background-color: var(--dexc-white-primary-color)
}

.assets-transfer .alert-confirm-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.assets-transfer .alert-confirm-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.assets-transfer .transfer-info-real-time-tip {
  align-items: flex-start;
  background: rgba(224, 147, 0, .05);
  border: 1px solid rgba(224, 147, 0, .3);
  box-sizing: border-box;
  display: flex;
  margin-top: 22px;
  padding-bottom: 10px;
  padding-top: 10px
}

.assets-transfer .transfer-info-real-time-tip i {
  color: var(--dexc-warning-color);
  margin-left: 16px;
  margin-top: 4px
}

.assets-transfer .transfer-info-real-time-tip span {
  color: #000;
  font-size: 12px;
  line-height: 20px;
  margin-left: 8px;
  margin-right: 14px
}

.voucher-tips-box {
  background-color: #fff;
  color: var(--dexc-primary-font-color);
  padding: 16px;
  width: 325px
}

.voucher-tips-box .voucher-tips-title {
  color: var(--dexc-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px
}

.voucher-tips-box .voucher-tips-content {
  font-size: 14px;
  margin-bottom: 16px
}

.voucher-tips-box .right {
  display: flex
}

.voucher-tips-box .right .alert-cancel-button {
  background: #f9f9f9;
  flex: 1 1
}

.voucher-tips-box .right .alert-confirm-button {
  flex: 1 1;
  padding: 0
}

.deal-order-detail-alert-inner {
  width: 1024px
}

.deal-order-detail-alert-inner .order-trade-fail-content {
  align-items: center;
  display: flex;
  font-size: 16px;
  justify-content: left;
  min-height: 40px;
  padding: 0 10px;
  text-align: left;
  width: 480px;
  word-wrap: break-word;
  background: #fff;
  border-color: #f4f4f6
}

.deal-order-detail-alert-inner .alert-title {
  font-weight: 500
}

.deal-order-detail-alert-inner .scroll-style-white::-webkit-scrollbar-track {
  background: transparent
}

.deal-order-detail-alert-inner .scroll-style-white::-webkit-scrollbar {
  width: 6px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content {
  background: rgba(242, 246, 250, .2);
  border: 1px solid #cad7e0;
  border-radius: 2px;
  max-height: 408px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content.scroll-unset {
  overflow: unset
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan {
  display: grid;
  font-size: 12px;
  grid-template-columns: 12.72727% repeat(7, 7.72727%) 16.81818% 9.09091% 6.81818%;
  line-height: 16px;
  margin: 0;
  padding: 8px 0
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .tooltip {
  line-height: 14px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .text-top {
  padding: 0 3px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan span {
  display: inline-block;
  vertical-align: top
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item {
  font-size: 12px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item:first-child {
  padding-left: 10px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item:last-child {
  padding-right: 10px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box {
  color: #232a4a;
  font-size: 12px;
  max-height: 336px;
  overflow-y: auto
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan {
  align-items: center;
  display: grid;
  grid-template-columns: 12.72727% repeat(7, 7.72727%) 16.81818% 9.09091% 6.81818%;
  min-height: 40px;
  padding-bottom: 5px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan:first-child {
  border-top: 1px solid #cad7e0
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item {
  height: 100%;
  padding: 0 3px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item:first-child {
  padding-left: 10px
}

.deal-order-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item:last-child {
  padding-right: 10px
}

.deal-order-detail-alert-inner .order-trade-detail-list-table {
  overflow: auto
}

.deal-order-detail-alert-inner .order-trade-detail-list-table table {
  font-size: 12px;
  white-space: nowrap;
  width: 100%
}

.deal-order-detail-alert-inner .order-trade-detail-list-table table thead {
  border-bottom: 1px solid #cad7e0
}

.deal-order-detail-alert-inner .order-trade-detail-list-table table td {
  padding: 5px 15px 5px 10px;
  vertical-align: middle
}

@media only screen and (max-width:1023px) {
  .deal-order-detail-alert-inner {
    width: 748px
  }

  .deal-order-detail-alert-inner .order-trade-detail-alert-inner-content {
    overflow-x: scroll
  }
}

.fee-rate {
  align-items: center;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 358px);
  padding-bottom: 32px
}

.fee-rate .fee-rate-header {
  background-color: #000f9a;
  display: flex;
  height: 216px;
  justify-content: center;
  width: 100%
}

.fee-rate .fee-rate-header .header-wrap {
  padding-top: 100px;
  width: 1200px
}

.fee-rate .fee-rate-header .header-title {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 32px;
  font-weight: 500;
  height: 32px;
  margin-bottom: 40px
}

.fee-rate .fee-rate-header .header-tabs {
  display: flex;
  height: 44px
}

.fee-rate .fee-rate-header .header-tabs .header-tab {
  align-items: center;
  border-radius: 22px 22px 0 0;
  cursor: pointer;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  height: 44px;
  justify-content: center;
  margin-right: 8px;
  padding: 0 38px
}

.fee-rate .fee-rate-header .header-tabs .header-tab:first-child {
  background-color: hsla(0, 0%, 100%, .3);
  color: #fff
}

.fee-rate .fee-rate-header .header-tabs .header-tab:last-child {
  background-color: #fff;
  color: #000
}

.fee-rate .fee-rate-header .header-tabs .header-tab span {
  display: flex;
  height: 16px;
  line-height: 16px
}

.fee-rate .fee-rate-content-wrap {
  overflow: hidden;
  overflow-x: auto;
  width: 100%
}

.fee-rate .fee-rate-content-wrap .fee-rate-content {
  background-color: #fff;
  margin: 0 auto;
  padding: 24px;
  width: 1200px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-bussiness-tabs {
  background-color: #fff;
  border: 1px solid #e6ecf2;
  border-radius: 4px;
  display: inline-flex;
  width: auto
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-business-linear-swap-tabs {
  border-bottom: 1px solid #e9eaed;
  display: inline-flex;
  margin: 24px 0 11px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-business-linear-swap-tabs .tab-item {
  color: #000;
  cursor: pointer;
  font-size: 14px;
  margin-right: 24px;
  padding-bottom: 10px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-business-linear-swap-tabs .tab-item:last-child {
  margin-right: 0
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-business-linear-swap-tabs .tab-item.active {
  border-bottom: 2px solid var(--up-color);
  color: var(--up-color)
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-bussiness-tab {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 14px;
  height: 28px;
  justify-content: center;
  min-width: 102px;
  padding: 0 24px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-bussiness-tab span {
  height: 14px;
  line-height: 14px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-bussiness-tab.active {
  background: var(--up-color);
  border-radius: 4px;
  color: #fff
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-current {
  align-items: center;
  display: flex;
  margin-top: 24px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-current .current-item {
  margin-right: 40px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-current .current-item>.current-item-title {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 12px;
  margin-bottom: 10px;
  min-height: 24px;
  text-align: left
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-current .current-item>.current-item-content {
  color: #ff9533;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  white-space: nowrap
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-current .current-item>.current-item-content img {
  margin-right: 4px;
  width: 14px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-current .current-item>.current-item-content .current-item-label {
  color: #8a8a8e;
  margin-right: 5px;
  white-space: nowrap
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-trade-data {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 16px;
  margin-top: 16px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-trade-data span {
  height: 16px;
  line-height: 16px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-trade-data span:last-child {
  color: #ff9533
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-show-statics {
  color: var(--up-color);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  height: 12px;
  line-height: 12px;
  margin-top: 16px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table-wrap {
  border-radius: 2px;
  border-top: 1px solid #e9eaed;
  margin-top: 16px;
  min-height: 355px;
  padding-top: 16px;
  position: relative;
  transition: all .2s
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .virtual-border {
  border: 1px solid var(--up-color);
  height: 40px;
  position: absolute;
  width: 100%
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-title {
  display: inline-block;
  font-size: 16px;
  padding-bottom: 16px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-title:nth-child(n+2) {
  margin-top: 10px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-subtitle {
  display: block;
  float: right;
  font-size: 16px;
  padding-bottom: 10px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .place-holder {
  display: inline-block;
  width: 28px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table {
  border-collapse: collapse;
  margin-bottom: 30px;
  width: 100%
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table thead th {
  background: #f5f5f5;
  border: 1px solid #e6ecf2;
  box-sizing: border-box;
  color: #000;
  font-weight: 400;
  height: 40px;
  line-height: normal;
  text-align: center
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table tbody tr td {
  border: 1px solid #e6ecf2;
  box-sizing: border-box;
  font-size: 12px;
  font-weight: 400;
  height: 40px;
  text-align: center
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table.cn tbody tr td:first-child,
.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table.cn tbody tr th:first-child {
  min-width: 60px !important
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table.tr tbody tr td:first-child,
.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table.tr tbody tr th:first-child {
  min-width: 106px !important
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table.ru tbody tr td:first-child,
.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-table.ru tbody tr th:first-child {
  min-width: 130px !important
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .trade-fee-tips {
  padding-left: 20px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .trade-fee-tips li {
  color: #8a8a8e;
  font-size: 14px;
  list-style-type: disc;
  margin-top: 10px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-variety {
  margin-bottom: 15px;
  margin-top: -14px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-variety .center-page-select-title {
  color: #8a8a8e;
  display: inline-block;
  font-size: 12px;
  margin-right: 10px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .fee-rate-variety span {
  height: 28px;
  line-height: 28px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .table-body-line td:first-child {
  padding-left: 10px;
  padding-right: 10px;
  text-align: left;
  white-space: nowrap
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .table-body-line img {
  margin-right: 14px;
  vertical-align: text-top;
  width: 12px
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .vip-fee {
  color: var(--dexc-primary-color)
}

.fee-rate .fee-rate-content-wrap .fee-rate-content .normal-fee {
  color: #000
}

.fee-rate .fee-banner {
  background-image: linear-gradient(180deg, #2b2770, #101354);
  height: 460px;
  position: relative;
  width: 100%
}

.fee-rate .fee-banner .fee-banner-content {
  height: 460px;
  margin: 0 auto;
  padding-top: 106px;
  width: 1200px
}

.fee-rate .fee-banner .my-fee {
  color: #fff;
  font-size: 36px;
  margin-bottom: 20px
}

.fee-rate .fee-banner .fee-title {
  border: 1px solid #646fa8;
  border-radius: 2px;
  color: #a6b4f8;
  font-size: 14px;
  margin-right: 10px;
  padding: 4px 16px
}

.fee-rate .fee-banner .fee-title-active {
  background: #4df0ff;
  border-radius: 2px;
  color: #151659;
  font-size: 14px;
  margin-right: 10px;
  padding: 4px 16px
}

.fee-rate .fee-banner .usdt-standard {
  color: #4df0ff;
  font-size: 24px;
  margin-bottom: 18px;
  margin-top: 50px
}

.fee-rate .fee-banner .usdt-standard img {
  margin-right: 12px;
  vertical-align: sub
}

.fee-rate .fee-banner .trade-data {
  color: #4df0ff;
  font-size: 14px;
  margin-bottom: 20px
}

.fee-rate .fee-banner .trade-data p {
  display: inline-block
}

.fee-rate .fee-banner .trade-data span {
  margin: 0 3px
}

.fee-rate .fee-banner .trading {
  border: 1px solid #4df0ff;
  border-radius: 2px;
  color: #4df0ff;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  text-align: center
}

.fee-rate .fee-banner .fee-list-tab {
  background: #f2f3f8;
  border-radius: 2px 2px 0 0;
  bottom: 0;
  color: #000;
  font-size: 16px;
  height: 48px;
  line-height: 48px;
  padding-left: 30px;
  position: absolute;
  width: 1200px
}

.bid-ask-detail .center-page-title {
  align-items: center;
  background-color: #fff !important;
  display: flex;
  flex: row 1;
  justify-content: space-between
}

.bid-ask-detail .bid-ask-detail-trade-unit-button {
  float: right;
  height: 24px;
  margin-top: 19px;
  padding: 0 10px;
  width: auto
}

.bid-ask-detail .bid-ask-detail-title-unit-container {
  align-items: center;
  color: #8a8a8e;
  display: flex;
  flex-direction: row;
  font-size: 12px
}

.bid-ask-detail .bid-ask-detail-title-unit-container button {
  background: #fff;
  border: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  width: 48px
}

.bid-ask-detail .bid-ask-detail-title-unit-container button[datatype=sheet] {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.bid-ask-detail .bid-ask-detail-title-unit-container button[datatype=coin] {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0
}

.bid-ask-detail .bid-ask-detail-title-unit-container .bid-ask-detail-title-unit-button-selected {
  background-color: var(--dexc-white-primary-color);
  color: #fff
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:first-child {
  border-radius: 2px 0 0 2px;
  border-right: none
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:first-child.selected {
  border-right: 1px solid
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:nth-child(2) {
  border-radius: 0
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:nth-child(2).selected-1 {
  border-left: none
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:nth-child(2).selected-3 {
  border-right: none
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:last-child {
  border-left: none;
  border-radius: 0 2px 2px 0
}

.bid-ask-detail .bid-ask-detail-title-unit-container .linear-swap-bid-ask-detail-unit-button:last-child.selected {
  border-left: 1px solid
}

.bid-ask-detail .bid-ask-list-box {
  margin-top: 10px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-title {
  background-color: #fff;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  font-size: 18px;
  padding: 0 30px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box {
  border-radius: 2px;
  display: inline-block;
  padding-bottom: 40px;
  vertical-align: top;
  width: 655px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box span {
  display: inline-block
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-list-item-index {
  padding-left: 26px;
  width: 78px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-list-item {
  font-size: 14px;
  text-align: right;
  width: 156px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-list-item-total {
  font-size: 14px;
  padding-right: 26px;
  text-align: right;
  width: 192px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-list-title-box {
  height: 40px;
  line-height: 40px;
  margin-left: 4px;
  margin-right: 4px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-detail-list {
  margin-left: 4px;
  margin-right: 4px
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-detail-list li {
  font-size: 12px;
  height: 24px;
  line-height: 24px;
  margin: 0 16px 6px 0;
  position: relative
}

.bid-ask-detail .bid-ask-list-box .bid-ask-list-content-box .bid-ask-detail-list li .step {
  height: 24px;
  position: absolute;
  right: 0
}

.assetsInfoContainer-cdb02c15 {
  background-color: var(--dexc-dark-trade-bg);
  border-top-left-radius: var(--dex-border-radius-xl);
  border-top-right-radius: var(--dex-border-radius-xl)
}

.classicLayout-e9d3d7a5 {
  overflow: visible !important;
  position: relative
}

.header-ca2fc5bb {
  align-items: center;
  background-color: var(--dexc-dark-trade-bg);
  border-bottom: 1px solid var(--dexc-trade-divider-color);
  border-top-left-radius: var(--dex-border-radius-xl);
  border-top-right-radius: var(--dex-border-radius-xl);
  display: flex;
  gap: 4px;
  height: 40px;
  justify-content: flex-start;
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 1
}

.headerTitle-dbee7b15 {
  color: var(--dex-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-align: center
}

.main-ed510f42 {
  color: var(--dexc-dark-primary-font-color)
}

.main-ed510f42.collpased-ef5b5ee4 {
  overflow: hidden
}

.btns-b77e21a5 {
  display: flex;
  padding: 12px 0
}

.alert-e05c3333 {
  margin-top: 12px
}

.secondary-c311d287 {
  color: var(--dex-secondary-font-color);
  font-weight: 400
}

.assetSummaryItem-b9860d16 {
  align-items: center;
  display: flex;
  font-size: 12px;
  justify-content: flex-start;
  line-height: 16px
}

.assetSummaryItem-b9860d16 .assetSummaryItemLabel-fd903503 {
  font-weight: 500
}

.assetSummaryItem-b9860d16 .assetSummaryItemValue-bdcc73be {
  font-weight: 500;
  margin-left: auto
}

.listContainer-a5f3359b {
  background-color: var(--dexc-dark-trade-bg);
  margin-top: 4px
}

.listContainer-a5f3359b .dex-description-list-item {
  padding: 6px 16px
}

.btn-bd6904da {
  background-color: var(--dexc-trade-component-bg-color) !important;
  flex: 1 1
}

.btn-bd6904da:hover {
  background-color: var(--dexc-trade-input-disabled-bg) !important
}

.btn-bd6904da:active {
  background-color: var(--dexc-trade-secondary-container-bg) !important
}

.collpaseIconContainer-afc8e57f {
  background-color: var(--dex-trade-input-disabled-bg);
  border-radius: var(--dex-border-radius-mid);
  cursor: pointer;
  height: 12px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 40px;
  z-index: 2
}

.collpaseIconContainer-afc8e57f:hover {
  background-color: var(--dex-primary-color)
}

.collpaseIconContainer-afc8e57f:hover .collpaseIcon-d61dbcae {
  color: #fff !important
}

.dex-tooltip {
  display: block;
  font-size: var(--dex-secondary-font-size);
  position: absolute;
  visibility: visible;
  z-index: var(--dex-dropdown-zIndex)
}

.dex-tooltip-hidden {
  display: none
}

.dex-tooltip-placement-top,
.dex-tooltip-placement-topLeft,
.dex-tooltip-placement-topRight {
  padding: var(--dex-tooltip-arrow-width) 0 var(--dex-tooltip-arrow-distance) 0
}

.dex-tooltip-placement-right,
.dex-tooltip-placement-rightBottom,
.dex-tooltip-placement-rightTop {
  padding: 0 var(--dex-tooltip-arrow-width) 0 var(--dex-tooltip-arrow-distance)
}

.dex-tooltip-placement-bottom,
.dex-tooltip-placement-bottomLeft,
.dex-tooltip-placement-bottomRight {
  padding: var(--dex-tooltip-arrow-distance) 0 var(--dex-tooltip-arrow-width) 0
}

.dex-tooltip-placement-left,
.dex-tooltip-placement-leftBottom,
.dex-tooltip-placement-leftTop {
  padding: 0 var(--dex-tooltip-arrow-distance) 0 var(--dex-tooltip-arrow-width)
}

.dex-tooltip-inner {
  background-color: var(--dex-tooltip-bg, var(--dex-primary-container-bg));
  border-radius: var(--dex-tooltip-border-radius);
  box-shadow: var(--dex-primary-box-shadow);
  color: var(--dex-tooltip-color, var(--dex-secondary-font-color));
  max-width: var(--dex-tooltip-max-width);
  min-height: 34px;
  min-width: var(--dex-tooltip-min-width);
  padding: var(--dex-toolitp-padding, 10px);
  text-align: left;
  text-decoration: none
}

.dex-tooltip-arrow {
  border-color: transparent;
  border-style: solid;
  height: 0;
  position: absolute;
  width: 0
}

.dex-tooltip-placement-top .dex-tooltip-arrow,
.dex-tooltip-placement-topLeft .dex-tooltip-arrow,
.dex-tooltip-placement-topRight .dex-tooltip-arrow {
  border-top-color: var(--dex-tooltip-bg, var(--dex-primary-container-bg));
  border-width: var(--dex-tooltip-arrow-width) var(--dex-tooltip-arrow-width) 0;
  bottom: calc(var(--dex-tooltip-arrow-distance) - var(--dex-tooltip-arrow-width));
  margin-left: calc(var(--dex-tooltip-arrow-width)*-1)
}

.dex-tooltip-placement-top .dex-tooltip-arrow {
  left: 50%
}

.dex-tooltip-placement-topLeft .dex-tooltip-arrow {
  left: 15%
}

.dex-tooltip-placement-topRight .dex-tooltip-arrow {
  right: 15%
}

.dex-tooltip-placement-right .dex-tooltip-arrow,
.dex-tooltip-placement-rightBottom .dex-tooltip-arrow,
.dex-tooltip-placement-rightTop .dex-tooltip-arrow {
  border-right-color: var(--dex-tooltip-bg, var(--dex-primary-container-bg));
  border-width: var(--dex-tooltip-arrow-width) var(--dex-tooltip-arrow-width) var(--dex-tooltip-arrow-width) 0;
  left: calc(var(--dex-tooltip-arrow-distance) - var(--dex-tooltip-arrow-width));
  margin-top: calc(var(--dex-tooltip-arrow-width)*-1)
}

.dex-tooltip-placement-right .dex-tooltip-arrow {
  top: 50%
}

.dex-tooltip-placement-rightTop .dex-tooltip-arrow {
  margin-top: 0;
  top: 15%
}

.dex-tooltip-placement-rightBottom .dex-tooltip-arrow {
  bottom: 15%
}

.dex-tooltip-placement-left .dex-tooltip-arrow,
.dex-tooltip-placement-leftBottom .dex-tooltip-arrow,
.dex-tooltip-placement-leftTop .dex-tooltip-arrow {
  border-left-color: var(--dex-tooltip-bg, var(--dex-primary-container-bg));
  border-width: var(--dex-tooltip-arrow-width) 0 var(--dex-tooltip-arrow-width) var(--dex-tooltip-arrow-width);
  margin-top: calc(var(--dex-tooltip-arrow-width)*-1);
  right: calc(var(--dex-tooltip-arrow-distance) - var(--dex-tooltip-arrow-width))
}

.dex-tooltip-placement-left .dex-tooltip-arrow {
  top: 50%
}

.dex-tooltip-placement-leftTop .dex-tooltip-arrow {
  margin-top: 0;
  top: 15%
}

.dex-tooltip-placement-leftBottom .dex-tooltip-arrow {
  bottom: 15%
}

.dex-tooltip-placement-bottom .dex-tooltip-arrow,
.dex-tooltip-placement-bottomLeft .dex-tooltip-arrow,
.dex-tooltip-placement-bottomRight .dex-tooltip-arrow {
  border-bottom-color: var(--dex-tooltip-bg, var(--dex-primary-container-bg));
  border-width: 0 var(--dex-tooltip-arrow-width) var(--dex-tooltip-arrow-width);
  margin-left: calc(var(--dex-tooltip-arrow-width)*-1);
  top: calc(var(--dex-tooltip-arrow-distance) - var(--dex-tooltip-arrow-width))
}

.dex-tooltip-placement-bottom .dex-tooltip-arrow {
  left: 50%
}

.dex-tooltip-placement-bottomLeft .dex-tooltip-arrow {
  left: 15%
}

.dex-tooltip-placement-bottomRight .dex-tooltip-arrow {
  right: 15%
}

.dex-notification {
  align-items: flex-end;
  display: flex;
  max-height: 100vh;
  position: fixed;
  z-index: var(--dex-notification-zIndex)
}

.dex-notification-top,
.dex-notification-topLeft,
.dex-notification-topRight {
  flex-direction: column;
  top: 50px
}

.dex-notification-topRight {
  right: 24px
}

.dex-notification-notice {
  align-items: center;
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: var(--dex-border-radius-large);
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  line-height: 1.5;
  margin: 12px 0;
  min-height: 50px;
  padding: 20px 16px;
  position: relative;
  width: 420px
}

.dex-notification-notice-content {
  align-items: flex-start;
  display: flex;
  height: 100%;
  justify-content: flex-start;
  width: 100%
}

.dex-notification-notice .dex-notification-icon {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: center
}

.dex-notification-notice .dex-notification-rightContainer {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 10px
}

.dex-notification-notice .dex-notification-rightContainer .dex-notification-title {
  color: var(--dex-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  text-align: left
}

.dex-notification-notice .dex-notification-rightContainer .dex-notification-desc {
  color: var(--dex-secondary-font-color);
  font-size: 14px;
  line-height: 24px;
  text-align: left
}

.dex-notification-notice-closable .dex-notification-notice-content {
  padding-right: 20px
}

.dex-notification-notice-close {
  cursor: pointer;
  filter: alpha(opacity=50);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  outline: none;
  position: absolute;
  right: 16px;
  text-decoration: none;
  top: 20px
}

.dex-notification-notice-close:hover {
  filter: alpha(opacity=100);
  opacity: 1;
  text-decoration: none
}

.dex-notification-fade {
  overflow: hidden;
  transition: all .3s
}

.dex-notification-fade-appear-start {
  opacity: 0;
  transform: translateX(100%)
}

.dex-notification-fade-appear-active {
  opacity: 1;
  transform: translateX(0)
}

.dex-notification-info {
  --border-color: var(--dex-primary-font-color)
}

.dex-notification-success {
  --border-color: var(--dex-success-color)
}

.dex-notification-warning {
  --border-color: var(--dex-warning-color)
}

.dex-notification-error {
  --border-color: var(--dex-error-color)
}

.dex-notification-no-desc-notice-content {
  align-items: center
}

.info-detail-lazy-loading {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  min-height: calc(100% - 406px);
  width: 100%
}

.info-detail-lazy-loading .info-detail-lazy-loading-header {
  background-color: #1b2945;
  width: 100%
}

.info-detail-lazy-loading .info-detail-lazy-loading-content {
  align-items: center;
  display: flex;
  flex: 1 1;
  justify-content: center;
  width: 100%
}

.info-detail-lazy-loading .info-detail-lazy-loading-content .info-detail-lazy-loading-icon {
  height: 50px;
  width: 50px
}

.full-lazy-loading-white {
  align-items: center;
  background-color: #e9eaed;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 901
}

.full-lazy-loading-white .full-lazy-loading-icon {
  height: 50px;
  width: 50px
}

.full-lazy-loading-blue {
  align-items: center;
  background-color: #000;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  margin: 0 auto;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 901
}

.full-lazy-loading-blue .full-lazy-loading-icon {
  height: 50px;
  width: 50px
}

.trade-main-lazy-loading {
  height: 1100px;
  margin: 6px auto;
  max-width: 1920px;
  width: 100%
}

.trade-main-lazy-fullscreen-loading {
  height: calc(100vh - 414px);
  max-width: none;
  min-height: 300px
}

.trade-main-lazy-loading-mobile {
  height: 100%;
  margin: 0
}

.trade-no-display {
  display: none !important;
  height: 0;
  overflow: hidden;
  width: 0
}

.trade-lazy-loading {
  position: relative !important
}

.trade-lazy-loading .trade-lazy-loading-icon {
  height: 36px;
  left: 50%;
  margin-left: -18px;
  margin-top: -18px;
  position: absolute;
  top: 50%;
  width: 36px
}

.modal-container {
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  transition: opacity .1s ease-out;
  z-index: 101;
  --dexc-primary-color: var(--dexc-dark-primary-color)
}

.modal-container .invariant-red-font-white {
  color: var(--dexc-error-color)
}

.modal-container .invariant-green-font-white {
  color: var(--dexc-success-color)
}

.modal-container .yellow-font {
  color: var(--dexc-warning-color)
}

.modal-container.modal-container-a {
  right: 24px;
  top: 24px;
  z-index: 201
}

.modal-container.modal-container-a .modal-notice {
  width: 240px
}

.modal-container.modal-container-b {
  cursor: pointer;
  right: 24px;
  top: 24px;
  z-index: 901
}

.modal-container.modal-container-b .modal-close {
  margin-top: 6px
}

.modal-container.modal-container-c {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 901
}

.modal-container.modal-container-enter {
  opacity: 1
}

.modal-container.modal-container-leave {
  opacity: 0
}

.modal-green {
  align-items: center;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  position: absolute
}

.modal-green.modal-notice {
  border-radius: 2px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  position: relative;
  width: 400px
}

.modal-green.modal-notice.modal-notice-scale {
  width: 240px
}

.modal-green.modal-notice .modal-inner {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  padding: 20px 16px;
  position: static;
  width: 100%
}

.modal-green.modal-notice .modal-inner.modal-inner-scale {
  color: #000
}

.modal-green.modal-notice .modal-inner .icon-error,
.modal-green.modal-notice .modal-inner .icon-ok,
.modal-green.modal-notice .modal-inner .icon-warn {
  font-size: 14px;
  margin-right: 10px
}

.modal-green.modal-notice .modal-inner .icon-error:before,
.modal-green.modal-notice .modal-inner .icon-ok:before,
.modal-green.modal-notice .modal-inner .icon-warn:before {
  line-height: 24px
}

.modal-green.modal-notice .modal-inner .notice-title {
  color: #000;
  font-size: 14px;
  line-height: 24px
}

.modal-green.modal-notice .modal-inner .notice-message {
  color: #4b5565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 24px
}

.modal-green.modal-notice .modal-inner .notice-link {
  color: var(--dexc-primary-color);
  font-size: 14px;
  line-height: 20px;
  padding-top: 15px
}

.modal-green.modal-notice .modal-inner .notice-link a {
  color: var(--dexc-primary-color)
}

.modal-green.modal-notice .modal-inner .notice-link button {
  background: none;
  color: var(--dexc-primary-color)
}

.modal-green.modal-notice .modal-inner .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 14px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.modal-green.modal-notice .modal-inner .modal-close:after {
  content: "\D7"
}

.modal-green.modal-notice .modal-inner .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.modal-green.modal-confirm {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0
}

.modal-green.modal-confirm .modal-inner {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
  padding: 24px;
  position: relative
}

.modal-green.modal-confirm .modal-inner.modal-inner-scale {
  transform: scale(.8)
}

.modal-green.modal-confirm .modal-inner .drag-bar {
  height: 44px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.modal-green.modal-confirm .modal-inner .modal-title {
  font-size: 20px;
  line-height: 30px;
  max-width: 90%;
  min-height: 48px;
  padding-bottom: 20px
}

.modal-green.modal-confirm .modal-inner .modal-content {
  color: #000;
  color: #3c4d5d;
  font-size: 14px;
  margin-top: 18px
}

.modal-green.modal-confirm .modal-inner .modal-content .sub-font {
  color: #8a8a8e
}

.modal-green.modal-confirm .modal-inner .modal-content .green {
  color: var(--dexc-success-color)
}

.modal-green.modal-confirm .modal-inner .modal-content .red {
  color: var(--dexc-error-color)
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-tips {
  background: rgba(224, 147, 0, .05);
  border: 1px solid rgba(224, 147, 0, .3);
  color: #596a7a;
  display: flex;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  padding: 10px 16px;
  text-align: left
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-tips .tips-icon {
  background: url(images/image_3f94b967b16a275c96e88e27732e99dfd57c9589.svg) no-repeat 0 0;
  background-size: 11px;
  flex-shrink: 0;
  margin: 4px 4px 0 0;
  width: 16px
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-tips .bold {
  font-weight: 700
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-info {
  background: #f8fafd;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  color: #596a7a;
  margin-top: 8px;
  padding: 10px 16px;
  text-align: left
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-info .info-item {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  line-height: 20px
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-info .info-item label {
  color: #8a8a8e
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-content-info .info-item span {
  color: #000
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-check {
  bottom: 25px;
  display: flex;
  line-height: 40px;
  position: absolute;
  vertical-align: middle
}

.modal-green.modal-confirm .modal-inner .modal-content .modal-check .icon-checked,
.modal-green.modal-confirm .modal-inner .modal-content .modal-check .icon-unchecked {
  color: var(--dexc-white-primary-color);
  cursor: pointer
}

.modal-green.modal-confirm .modal-inner .modal-stop-loss-label {
  border-radius: 2px;
  display: flex;
  font-size: 12px;
  line-height: 24px;
  margin-top: 14px;
  padding-left: 8px
}

.modal-green.modal-confirm .modal-inner .modal-stop-loss-label :first-child {
  min-width: 45%
}

.modal-green.modal-confirm .modal-inner .modal-stop-loss-label>div {
  display: flex;
  padding-right: 10px;
  white-space: nowrap
}

.modal-green.modal-confirm .modal-inner .modal-stop-loss-label.stop-profit {
  background: rgba(65, 179, 113, .1);
  color: var(--dexc-success-color)
}

.modal-green.modal-confirm .modal-inner .modal-stop-loss-label.stop-loss {
  background: rgba(215, 78, 90, .1);
  color: var(--dexc-error-color)
}

.modal-green.modal-confirm .modal-inner .stop-profit-text {
  color: var(--dexc-success-color)
}

.modal-green.modal-confirm .modal-inner .stop-loss-text {
  color: var(--dexc-error-color)
}

.modal-green.modal-confirm .modal-inner .modal-footer {
  color: #000;
  margin-top: 20px
}

.modal-green.modal-confirm .modal-inner .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px
}

.modal-green.modal-confirm .modal-inner .modal-footer .modal-confirm-button {
  background-color: var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  color: #fff
}

.modal-green.modal-confirm .modal-inner .modal-footer .modal-cancel-button {
  background-color: transparent;
  color: var(--dexc-white-primary-color)
}

.modal-green.modal-confirm .modal-inner .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.modal-green.modal-confirm .modal-inner .modal-close:after {
  content: "\D7"
}

.modal-green.modal-confirm .modal-inner .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.modal-green .red-font {
  color: var(--dexc-error-color)
}

.modal-green .green-font {
  color: var(--dexc-success-color)
}

.modal-green .blue-font {
  color: var(--dexc-white-primary-color)
}

.modal-red {
  align-items: center;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  position: absolute
}

.modal-red.modal-notice {
  border-radius: 2px;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
  position: relative;
  width: 400px
}

.modal-red.modal-notice.modal-notice-scale {
  width: 240px
}

.modal-red.modal-notice .modal-inner {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  padding: 20px 16px;
  position: static;
  width: 100%
}

.modal-red.modal-notice .modal-inner.modal-inner-scale {
  color: #000
}

.modal-red.modal-notice .modal-inner .icon-error,
.modal-red.modal-notice .modal-inner .icon-ok,
.modal-red.modal-notice .modal-inner .icon-warn {
  font-size: 14px;
  margin-right: 10px
}

.modal-red.modal-notice .modal-inner .icon-error:before,
.modal-red.modal-notice .modal-inner .icon-ok:before,
.modal-red.modal-notice .modal-inner .icon-warn:before {
  line-height: 24px
}

.modal-red.modal-notice .modal-inner .notice-title {
  color: #000;
  font-size: 14px;
  line-height: 24px
}

.modal-red.modal-notice .modal-inner .notice-message {
  color: #4b5565;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 24px
}

.modal-red.modal-notice .modal-inner .notice-link {
  color: var(--dexc-primary-color);
  font-size: 14px;
  line-height: 20px;
  padding-top: 15px
}

.modal-red.modal-notice .modal-inner .notice-link a {
  color: var(--dexc-primary-color)
}

.modal-red.modal-notice .modal-inner .notice-link button {
  background: none;
  color: var(--dexc-primary-color)
}

.modal-red.modal-notice .modal-inner .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 14px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.modal-red.modal-notice .modal-inner .modal-close:after {
  content: "\D7"
}

.modal-red.modal-notice .modal-inner .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.modal-red.modal-confirm {
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  left: 0;
  right: 0;
  top: 0
}

.modal-red.modal-confirm .modal-inner {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
  padding: 24px;
  position: relative
}

.modal-red.modal-confirm .modal-inner.modal-inner-scale {
  transform: scale(.8)
}

.modal-red.modal-confirm .modal-inner .drag-bar {
  height: 44px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.modal-red.modal-confirm .modal-inner .modal-title {
  font-size: 20px;
  line-height: 30px;
  max-width: 90%;
  min-height: 48px;
  padding-bottom: 20px
}

.modal-red.modal-confirm .modal-inner .modal-content {
  color: #000;
  color: #3c4d5d;
  font-size: 14px;
  margin-top: 18px
}

.modal-red.modal-confirm .modal-inner .modal-content .sub-font {
  color: #8a8a8e
}

.modal-red.modal-confirm .modal-inner .modal-content .green {
  color: var(--dexc-error-color)
}

.modal-red.modal-confirm .modal-inner .modal-content .red {
  color: var(--dexc-success-color)
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-tips {
  background: rgba(224, 147, 0, .05);
  border: 1px solid rgba(224, 147, 0, .3);
  color: #596a7a;
  display: flex;
  font-size: 12px;
  line-height: 20px;
  margin-top: 16px;
  padding: 10px 16px;
  text-align: left
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-tips .tips-icon {
  background: url(images/image_3f94b967b16a275c96e88e27732e99dfd57c9589.svg) no-repeat 0 0;
  background-size: 11px;
  flex-shrink: 0;
  margin: 4px 4px 0 0;
  width: 16px
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-tips .bold {
  font-weight: 700
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-info {
  background: #f8fafd;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  color: #596a7a;
  margin-top: 8px;
  padding: 10px 16px;
  text-align: left
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-info .info-item {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  line-height: 20px
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-info .info-item label {
  color: #8a8a8e
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-content-info .info-item span {
  color: #000
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-check {
  bottom: 25px;
  display: flex;
  line-height: 40px;
  position: absolute;
  vertical-align: middle
}

.modal-red.modal-confirm .modal-inner .modal-content .modal-check .icon-checked,
.modal-red.modal-confirm .modal-inner .modal-content .modal-check .icon-unchecked {
  color: var(--dexc-white-primary-color);
  cursor: pointer
}

.modal-red.modal-confirm .modal-inner .modal-stop-loss-label {
  border-radius: 2px;
  display: flex;
  font-size: 12px;
  line-height: 24px;
  margin-top: 14px;
  padding-left: 8px
}

.modal-red.modal-confirm .modal-inner .modal-stop-loss-label :first-child {
  min-width: 45%
}

.modal-red.modal-confirm .modal-inner .modal-stop-loss-label>div {
  display: flex;
  padding-right: 10px;
  white-space: nowrap
}

.modal-red.modal-confirm .modal-inner .modal-stop-loss-label.stop-profit {
  background: rgba(215, 78, 90, .1);
  color: var(--dexc-error-color)
}

.modal-red.modal-confirm .modal-inner .modal-stop-loss-label.stop-loss {
  background: rgba(65, 179, 113, .1);
  color: var(--dexc-success-color)
}

.modal-red.modal-confirm .modal-inner .stop-profit-text {
  color: var(--dexc-error-color)
}

.modal-red.modal-confirm .modal-inner .stop-loss-text {
  color: var(--dexc-success-color)
}

.modal-red.modal-confirm .modal-inner .modal-footer {
  color: #000;
  margin-top: 20px
}

.modal-red.modal-confirm .modal-inner .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px
}

.modal-red.modal-confirm .modal-inner .modal-footer .modal-confirm-button {
  background-color: var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  color: #fff
}

.modal-red.modal-confirm .modal-inner .modal-footer .modal-cancel-button {
  background-color: transparent;
  color: var(--dexc-white-primary-color)
}

.modal-red.modal-confirm .modal-inner .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.modal-red.modal-confirm .modal-inner .modal-close:after {
  content: "\D7"
}

.modal-red.modal-confirm .modal-inner .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.modal-red .red-font {
  color: var(--dexc-success-color)
}

.modal-red .green-font {
  color: var(--dexc-error-color)
}

.modal-red .blue-font {
  color: var(--dexc-white-primary-color)
}

.mask-can-click {
  pointer-events: none !important
}

.modal-wrapper {
  opacity: 0;
  transform: translateX(264px)
}

.modal-wrapper.modal-enter {
  opacity: 1;
  transform: translateX(0);
  transition: all .3s cubic-bezier(.78, .14, .15, .86)
}

.modal-wrapper.modal-leave {
  opacity: 0;
  transform: translateY(-84px);
  transition: all .3s cubic-bezier(.78, .14, .15, .86)
}

.cancel-order-modal-content {
  border: 1px solid #ccd2da;
  border-radius: 3px;
  padding: 0 16px
}

.cancel-order-modal-content .cancel-order-list {
  display: flex;
  justify-content: space-between;
  line-height: 40px
}

.cancel-order-modal-content .cancel-order-list .cancel-order-list-left {
  color: #8a8a8e
}

.cancel-order-modal-content .cancel-order-list .cancel-order-list-right {
  color: #000;
  margin-right: -16px;
  max-width: 97%;
  padding: 10px 0
}

.depth-chart-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%
}

.depth-chart-layout .loading-root {
  display: none
}

.depth-chart-layout .depth-chart-layout-title {
  height: 36px;
  padding-left: 16px
}

.depth-chart-layout .depth-chart-layout-title .depth-chart-layout-title-contract-name {
  color: #808799
}

.depth-chart-layout .depth-chart {
  flex: 1 1;
  height: 0
}

.guide-react-resizable-handle {
  display: none
}

.react-grid-layout .guide-react-resizable-handle {
  display: block
}

.react-grid-layout .chart-outer-wrap {
  display: flex;
  flex-direction: column;
  height: 100%
}

.react-grid-layout .chart-outer-wrap .chart-inner-wrap {
  flex: 1 1;
  height: 0;
  position: relative;
  top: 0 !important
}

.react-grid-layout .chart-outer-wrap .k-chart-head {
  min-width: 620px
}

.react-grid-layout .chart-outer-wrap .k-chart-head .switch-operate {
  color: #d8d8d8;
  margin-right: 16px
}

.react-grid-layout .chart-outer-wrap .k-chart-head .switch-operate .add-kline-button {
  font-size: 16px
}

.react-grid-layout .chart-outer-wrap .k-chart-head .switch-operate .add-kline-button:hover {
  border-color: var(--dexc-primary-color) !important;
  color: var(--dexc-primary-color) !important
}

.kline-own-select-list .btn-hover {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: space-between;
  padding: 0 16px;
  width: 158px
}

.kline-own-select-list .btn-hover>.left {
  color: #d2d6ec;
  font-size: 12px
}

.kline-own-select-list .btn-hover>.right i {
  color: #808799;
  opacity: .4
}

.kline-own-select-list .btn-hover>.right i.white {
  color: #8a8a8e
}

.kline-own-select-list .btn-hover>.right i.star-active {
  color: var(--dexc-primary-color);
  opacity: 1
}

.body-wrap-modal-wrapper-blue .kline-own-select-list .btn-hover {
  background: #212632
}

.body-wrap-modal-wrapper-blue .kline-own-select-list .btn-hover>.left {
  color: #fff
}

.body-wrap-modal-wrapper-blue .kline-own-select-list .btn-hover:hover {
  background: #2e3354 !important
}

.body-wrap-modal-wrapper-blue .kline-own-select-list .btn-hover:hover>.left {
  color: var(--dexc-primary-color)
}

.body-wrap-modal-wrapper-blue .kline-own-select-list .btn-hover.selected {
  background-color: #212632 !important
}

.body-wrap-modal-wrapper-blue .kline-own-select-list .btn-hover.selected>.left {
  color: var(--dexc-primary-color) !important
}

.body-wrap-modal-wrapper-white .kline-own-select-list .btn-hover {
  background: #fff
}

.body-wrap-modal-wrapper-white .kline-own-select-list .btn-hover>.left {
  color: #000
}

.body-wrap-modal-wrapper-white .kline-own-select-list .btn-hover:hover {
  background: #f2f6fa !important
}

.body-wrap-modal-wrapper-white .kline-own-select-list .btn-hover:hover>.left {
  color: var(--dexc-primary-color)
}

.body-wrap-modal-wrapper-white .kline-own-select-list .btn-hover.selected {
  background: #fff !important
}

.body-wrap-modal-wrapper-white .kline-own-select-list .btn-hover.selected>.left {
  color: var(--dexc-primary-color) !important
}

div.chart-outer-wrap {
  height: 390px;
  overflow: visible;
  position: relative
}

div.chart-outer-wrap.chart-outer-wrap-multiple .symbol-select-wrap {
  display: flex
}

div.chart-outer-wrap.chart-outer-wrap-multiple .chart-inner-wrap {
  height: calc(100% - 54px);
  top: 54px
}

div.chart-outer-wrap:-webkit-full-screen {
  bottom: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important
}

div.chart-outer-wrap .symbol-select-wrap {
  align-items: center;
  display: none;
  height: 30px;
  padding: 0 6px;
  width: 100%
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-value-wrap {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 100%;
  position: relative
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-value-wrap.symbol-select-value-wrap-show .k-chart-symbol-select-wrap {
  animation: common-hover-show .3s ease-out forwards;
  display: flex
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-value-wrap.symbol-select-value-wrap-show .symbol-select-arrow {
  transform: rotate(1turn) scale(.52)
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-value:hover {
  color: var(--dexc-primary-color);
  transition: all .3s
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-arrow-wrap {
  display: inline-block;
  height: 16px;
  margin-left: 7px;
  position: relative;
  width: 16px
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-arrow-wrap.white .symbol-select-arrow {
  color: #8a8a8e
}

div.chart-outer-wrap .symbol-select-wrap .symbol-select-arrow-wrap .symbol-select-arrow {
  position: absolute;
  top: 2px;
  transform: rotate(180deg) scale(.52);
  transform-origin: center center;
  transition: transform .2s
}

div.chart-outer-wrap .k-chart-symbol-select-wrap {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px 0 rgba(28, 36, 44, .12);
  cursor: pointer;
  display: none;
  left: 0;
  max-height: 300px;
  min-width: 198px;
  opacity: 0;
  padding: 44px 0 4px;
  position: absolute;
  top: 30px;
  transform: translateY(-10px);
  z-index: 3
}

div.chart-outer-wrap .k-chart-symbol-select-search {
  height: 40px;
  left: 0;
  padding-top: 4px;
  position: absolute;
  top: 4px;
  width: 100%
}

div.chart-outer-wrap .k-chart-symbol-select-search .icon-search {
  color: #9ca9b5;
  font-size: 14px;
  left: 16px;
  position: absolute;
  top: 18px
}

div.chart-outer-wrap .k-chart-symbol-select-search input {
  border: none;
  border-bottom: 1px solid #e6ecf2;
  font-size: 14px;
  height: 40px;
  padding: 0 16px 0 38px;
  width: 100%
}

div.chart-outer-wrap .k-chart-symbol-select-search input::-moz-placeholder {
  color: #8a8a8e
}

div.chart-outer-wrap .k-chart-symbol-select-search input::placeholder {
  color: #8a8a8e
}

div.chart-outer-wrap .k-chart-symbol-select {
  display: flex;
  flex-direction: column;
  max-height: 256px;
  overflow: scroll;
  width: 100%
}

div.chart-outer-wrap .k-chart-symbol-select-item {
  background: #fff;
  color: #000;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  text-align: left;
  width: auto
}

div.chart-outer-wrap .k-chart-symbol-select-item:hover {
  background: #f2f6fa;
  color: var(--dexc-primary-color)
}

div.chart-outer-wrap .k-chart-head {
  align-items: center;
  border-bottom: 1px solid;
  display: flex;
  font-size: 12px;
  height: 24px;
  justify-content: space-between;
  width: 100%
}

div.chart-outer-wrap .k-chart-head button {
  font-size: 12px
}

div.chart-outer-wrap .k-chart-head .chart-operate {
  align-items: center;
  display: flex;
  height: 24px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen {
  display: flex;
  height: inherit;
  vertical-align: top
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen button {
  height: 22px !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .selected {
  color: var(--dexc-primary-color)
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .real-time {
  border-right: 1px solid
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .interval,
div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .real-time {
  background: transparent;
  border-radius: unset !important;
  height: inherit;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .interval,
div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .real-time {
  line-height: 22px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen .min-btn {
  background: transparent;
  border-radius: unset !important;
  height: inherit;
  padding: 0 8px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected {
  align-items: center;
  display: flex;
  height: 22px;
  padding: 0;
  position: relative
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-mobile.interval-own-selected-right dd {
  left: unset;
  right: 0
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-mobile.interval-own-selected-left dd {
  left: 0;
  right: unset
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected .line {
  height: 1px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected>dt {
  height: 22px;
  line-height: 22px;
  padding: 0 5px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover {
  align-items: center;
  display: flex;
  height: 28px;
  justify-content: space-between;
  padding: 0 16px;
  width: 158px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover>.left {
  color: #d2d6ec;
  font-size: 12px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover>.right i {
  color: #808799;
  opacity: .4
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover>.right i.white {
  color: #8a8a8e
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover>.right i.star-active {
  color: var(--dexc-primary-color);
  opacity: 1
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover.selected {
  background: transparent !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected dd .btn-hover.selected>.left {
  color: var(--dexc-primary-color) !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-blue .content-box {
  background: #212632
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-blue .line {
  background: rgba(33, 38, 50, .5)
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-blue dd .btn-hover {
  background: #212632
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-blue dd .btn-hover>.left {
  color: #fff
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-blue dd .btn-hover:hover {
  background: #2e3354 !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-blue dd .btn-hover:hover>.left {
  color: var(--dexc-primary-color)
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-white .content-box {
  background: #fff
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-white .line {
  background: #ecf1f8
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-white dd .btn-hover {
  background: #fff
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-white dd .btn-hover>.left {
  color: #000
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-white dd .btn-hover:hover {
  background: #f2f6fa !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-white dd .btn-hover:hover>.left {
  color: var(--dexc-primary-color)
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-black .content-box {
  background: #34363f
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-black .line {
  background: #1e2238
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-black dd .btn-hover {
  background: #34363f
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-black dd .btn-hover>.left {
  color: #697080
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-black dd .btn-hover:hover {
  background: #3e404b !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.interval-own-selected.interval-own-selected-black dd .btn-hover:hover>.left {
  color: var(--dexc-primary-color)
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl {
  cursor: pointer;
  display: inline-block;
  height: inherit;
  line-height: 24px;
  padding: 0 20px 0 8px;
  position: relative;
  text-align: center;
  transition: all .2s ease-in-out;
  vertical-align: top
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl dd {
  border-radius: unset !important;
  border-style: solid;
  border-width: 0 1px 1px;
  display: none;
  left: -1px;
  position: absolute;
  top: 100%;
  z-index: 11
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl dd p {
  height: 24px;
  line-height: 24px;
  min-width: 46px;
  padding: 0 6px;
  text-align: center
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.selected dt {
  color: inherit !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl .dropdown-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 0 6px
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl .dropdown-wrapper .dropdown {
  color: inherit;
  font-size: 12px;
  transform: scale(.42) rotate(180deg);
  transition: transform .2s
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.dl-show {
  outline: none
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.dl-show .dropdown {
  color: var(--dexc-primary-color);
  transform: scale(.42) rotate(1turn)
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl.dl-show dd {
  display: inline-block !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .min-screen dl:focus {
  outline: none
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap {
  align-items: center;
  display: flex;
  height: 100%
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn {
  align-items: center;
  background: transparent;
  border-left: 1px solid;
  border-radius: 0;
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
  width: 32px
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip {
  background-color: #fff !important;
  border-radius: 2px;
  bottom: calc(100% + 12px);
  color: #596a7a !important;
  display: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .15));
  font-size: 12px;
  left: 50%;
  line-height: 18px;
  padding: 8px 16px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  width: auto;
  z-index: 11
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip:before {
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  border-top: 6px solid;
  border-top-color: #fff !important;
  bottom: -6px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen {
  bottom: unset !important;
  top: calc(100% + 10px) !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: 6px dashed transparent !important;
  border-right: 6px dashed transparent !important;
  border-top-color: transparent !important;
  top: -12px
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen {
  left: 15px !important;
  top: calc(100% + 7px) !important;
  transform: unset !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: unset !important;
  border-right: 10px dashed transparent !important;
  left: 5px;
  top: -12px
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover {
  color: var(--dexc-primary-color) !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover .tip {
  display: inline-block !important
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn i {
  font-size: 14px;
  height: 14px
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:last-child {
  border-right: 1px solid
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .icon-chart-setting {
  font-size: 16px !important;
  height: 16px
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-com {
  align-items: center;
  border-left: 1px solid;
  border-right: 1px solid;
  cursor: pointer;
  display: none;
  height: 100%;
  outline: none;
  padding-left: 8px;
  position: relative
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-com .dropdown-wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  padding: 0 6px
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-com .dropdown-wrapper .dropdown {
  color: inherit;
  font-size: 12px;
  transform: scale(.42) rotate(180deg);
  transition: transform .2s
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-com .dropdown-wrapper.dropdown-wrapper-up .dropdown {
  color: var(--dexc-primary-color);
  transform: scale(.42) rotate(1turn)
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-com .chart-icon-list {
  border-style: solid;
  border-width: 0 1px 1px;
  left: -1px;
  position: absolute;
  top: 24px;
  width: 158px;
  z-index: 11
}

div.chart-outer-wrap .k-chart-head .chart-operate .chart-icon-com .chart-icon-list .chart-icon-item {
  align-items: center;
  cursor: pointer;
  display: flex;
  height: 28px;
  padding-left: 16px;
  width: 100%
}

div.chart-outer-wrap .k-chart-head .switch-operate {
  align-items: center;
  display: flex;
  height: inherit
}

div.chart-outer-wrap .k-chart-head .switch-operate .btn-selected {
  border-color: var(--dexc-primary-color) !important;
  color: var(--dexc-primary-color) !important
}

div.chart-outer-wrap .k-chart-head .switch-operate h2 {
  background: transparent;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  margin-right: 8px;
  padding: 0 4px;
  text-align: center;
  width: unset !important
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap {
  outline: none;
  position: relative
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .icon-theme-switch {
  cursor: pointer;
  font-size: 18px;
  height: 18px;
  margin: 0 8px
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .icon-theme-switch:hover {
  color: var(--dexc-primary-color)
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-switch-wrap {
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(69, 97, 137, .2);
  padding: 3px;
  position: absolute;
  right: 1px;
  top: 25px;
  width: 130px;
  z-index: 11
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-switch-wrap li {
  cursor: pointer;
  padding: 7px 0;
  text-align: center
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-switch-wrap li.selected,
div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-switch-wrap li:hover {
  background: rgba(229, 235, 245, .7)
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-switch-wrap li img {
  height: 73px;
  width: 104px
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-switch-wrap li p {
  color: #596a7a;
  height: 17px;
  line-height: 17px;
  margin-top: 6px
}

div.chart-outer-wrap .k-chart-head .switch-operate .theme-wrap .theme-guide .s-guide-main {
  left: 19px
}

div.chart-outer-wrap .chart-inner-wrap {
  height: calc(100% - 24px);
  left: 0;
  position: absolute;
  top: 24px;
  width: 100%;
  z-index: 1
}

div.chart-outer-wrap .chart-inner-wrap .base-kline {
  height: 100%;
  width: 100%
}

div.chart-outer-wrap .chart-inner-wrap .base-kline-blue .dex_chart_container {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark.1ab2a88d.svg*/
    url() 50% no-repeat
}

div.chart-outer-wrap .chart-inner-wrap .base-kline-white .dex_chart_container {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white.7141dee9.svg*/
    url() 50% no-repeat
}

div.chart-outer-wrap .chart-inner-wrap .trading-view-kline {
  height: 100%;
  width: 100%
}

div.chart-outer-wrap .chart-inner-wrap #depthChartRoot {
  height: 100%
}

div.chart-outer-wrap .chart-inner-wrap #depthChartRoot .depth-chart {
  height: 100%;
  left: 0;
  position: absolute;
  top: 24px;
  width: 100%;
  z-index: -1
}

div.chart-outer-wrap .chart-inner-wrap .new-trade-page-self-selected-chart-index {
  bottom: 0;
  height: 20px;
  position: absolute;
  right: 0;
  width: 20px
}

div.chart-outer-wrap .chart-inner-wrap .new-trade-page-self-selected-chart-index .guide-react-resizable-handle {
  border: 2px solid var(--up-color);
  transform: translate(2px, 4px);
  visibility: visible !important
}

div.chart-outer-wrap .chart-inner-wrap .new-trade-page-self-selected-chart-index .guide-react-resizable-handle:after {
  border-bottom: 2px solid var(--up-color);
  border-right: 2px solid var(--up-color);
  bottom: 5px;
  content: "";
  height: 5px;
  position: absolute;
  right: 3px;
  width: 5px
}

div.chart-outer-wrap .chart-inner-wrap .new-trade-page-self-selected-chart-index .s-guide-two-main {
  bottom: 32px;
  left: -140px;
  top: auto
}

div.chart-outer-wrap .chart-inner-wrap .new-trade-page-self-selected-chart-index .s-guide-two-main .qpj {
  bottom: -3px;
  left: 84%;
  top: auto;
  transform: rotate(71deg)
}

div.chart-outer-wrap .chart-inner-wrap .new-trade-page-self-selected-chart-index .s-guide-two-main .qpj span {
  background: transparent;
  border: 20px solid transparent;
  border-bottom: 20px solid var(--up-color);
  transform: skewX(27deg)
}

.own-selected-guide .own-selected-wrap {
  font-size: 12px
}

.own-selected-guide .own-selected-wrap .own-selected-text-item {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.own-selected-guide .s-guide-two-main {
  left: -90px;
  top: 25px
}

.body-wrap-modal-wrapper.z-index-3 {
  z-index: 3
}

.body-wrap-modal-wrapper .new-trade-page-self-selected-chart-index-head .s-guide-two-main {
  top: 0
}

.body-wrap-modal-wrapper .new-trade-page-self-selected-chart-index-head .s-guide-two-main .qpj {
  left: unset;
  right: 20px
}

.chart-outer-wrap {
  height: 390px
}

@media only screen and (max-width:1023px) {
  .chart-outer-wrap {
    height: 364px !important
  }

  .chart-icon-wrap {
    display: none !important
  }

  .chart-icon-com,
  .chart-icon-wrap-base {
    display: flex !important
  }
}

.global-common-header {
  background: #080808;
  min-width: 1280px
}

.global-common-header .header-wrap {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  position: relative;
  width: 1200px;
  z-index: 999
}

.global-common-header .header-wrap.full-layout {
  gap: 50px;
  justify-content: flex-start;
  padding: 2px 32px;
  width: 100%
}

.global-common-header .header-wrap.full-layout .nav-wraper.router-item {
  flex: 1 1
}

.global-common-header .header-wrap .nav-wraper {
  align-items: center;
  display: flex;
  gap: 32px;
  justify-content: flex-start
}

.global-common-header .header-wrap .nav-wraper a {
  color: #8a8a8e;
  font-size: 14px;
  font-style: normal;
  font-weight: 500
}

.global-common-header .header-wrap .nav-wraper a.active,
.global-common-header .header-wrap .nav-wraper a:hover {
  color: #fff
}

.global-common-header .header-wrap .nav-wraper.wallet {
  gap: 12px
}

.global-common-header .header-wrap .nav-wraper.wallet .deposit-button-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect {
  background: transparent
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect .inner-content {
  align-items: center;
  background: #6001ff;
  border-radius: 30px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  gap: 10px;
  height: 38px;
  justify-content: center;
  padding: 2px 12px;
  position: relative
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connected .inner-content {
  background: #080808
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connected img {
  border-radius: 50%;
  height: 24px;
  width: 24px
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connected .dex-arrow-icon {
  color: #776ba1
}

.global-common-header .header-wrap .nav-wraper.wallet .wallet-connect.wallet-connect-button .inner-content {
  padding: 2px 24px
}

.global-common-header .header-wrap .logo {
  height: 60px;
  width: 147px
}

.global-common-header .header-wrap .langBtn {
  background: transparent
}

.global-common-header .header-wrap .langBtn .inner-content {
  align-items: center;
  border: 1px solid #343434;
  display: flex;
  height: 37px;
  justify-content: center;
  padding: 0;
  width: 37px
}

.global-common-header .header-wrap .langBtn .inner-content .border-gradient-bottom {
  bottom: -1px
}

.global-common-header .header-wrap .langBtn .inner-content .border-gradient-top {
  top: -1px
}

.langDropDown .dex-tooltip-inner {
  background: #141414;
  border: 1px solid #343434;
  border-radius: 12px;
  min-width: 140px;
  padding: 0 4px
}

.langDropDown .langOverlay {
  padding: 2px 0
}

.langDropDown .langOverlay li {
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 12px 24px 12px 12px
}

.langDropDown .langOverlay li.active,
.langDropDown .langOverlay li:hover {
  background: #202020;
  border-radius: 6px
}

.addressDropDown .dex-tooltip-inner {
  background: #141414;
  border: 1px solid #343434;
  border-radius: 24px;
  padding: 16px;
  width: 320px
}

.addressDropDown dl {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px
}

.addressDropDown dl dd span {
  font-size: 10px;
  font-style: normal;
  font-weight: 400
}

.addressDropDown dl strong {
  font-weight: 500
}

.addressDropDown h2 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 700
}

.addressDropDown h2 span {
  font-size: 12px
}

.addressDropDown .first .btnAddress {
  align-items: flex-start;
  background: #202020;
  border-radius: 20px;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  padding: 4px 12px
}

.addressDropDown strong {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.addressDropDown .btn-two {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.addressDropDown .btn-two button {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 500
}

.addressDropDown .btn-two button .inner-content {
  align-items: center;
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  height: 38px;
  justify-content: center;
  padding: 12px 24px;
  width: 140px
}

.addressDropDown .btn-two .wallet-deposit {
  background: transparent
}

.addressDropDown .btn-two .wallet-deposit .inner-content {
  background: #6001ff
}

.addressDropDown .btn-two .wallet-withdraw {
  background: transparent
}

.addressDropDown .btn-two .wallet-withdraw .inner-content {
  background-color: #141414;
  border: 1px solid #8a8a8e
}

.addressDropDown .dex-divider {
  border-color: #202020
}

.addressDropDown .btn {
  background: #1d1d1d;
  border-radius: 20px;
  padding: 6px 12px
}

.addressDropDown .btn dt {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.addressDropDown .cursor {
  cursor: pointer
}

.addressDropDown p.cursor:hover strong {
  color: #a670ff
}

.addressDropDown .dex-token-symbol {
  border: none
}

.SettingPanelDown .dex-tooltip-inner {
  background-color: var(--dexc-trade-primary-container-bg);
  border: 1px solid var(--dexc-trade-base-divider-color);
  border-radius: 24px;
  max-width: 340px;
  padding: 12px 24px 24px
}

.dex-select-dropwdown-huge {
  border-radius: 8px !important
}

.dex-select-dropwdown-huge .dex-select-item-option-active {
  background: #232323 !important;
  border-radius: 8px !important
}

.tronWalletSelectWraper-aaacfdb0 p {
  color: #8a8a8e;
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  padding-bottom: 16px
}

.tronWalletSelectWraper-aaacfdb0 p a {
  color: #fff;
  display: inline;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  margin-left: 8px;
  text-decoration: underline
}

.buttontWraper-f2282d79 button {
  align-items: center;
  background: #202020;
  border-radius: 12px;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  gap: 16px;
  margin-top: 16px;
  width: 100%
}

.buttontWraper-f2282d79 button:hover {
  background-color: #343434
}

.buttontWraper-f2282d79 button img {
  border-radius: 12px;
  height: 40px;
  width: 40px
}

.SignMessageWraper-b8c8c15a {
  padding-bottom: 32px
}

.SignMessageWraper-b8c8c15a h3 {
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700
}

.SignMessageWraper-b8c8c15a p {
  color: #8a8a8e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px
}

.SignMessageWraper-b8c8c15a button {
  border-radius: 36px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  height: 52px;
  width: 100%
}

.SignMessageBtn-eccf089a {
  align-items: center;
  background: #1d1d1d;
  border-radius: 30px;
  color: #fff;
  display: flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  gap: 4px;
  line-height: 18px;
  padding: 16px 24px
}

.chainSelect-c0517c74 .dex-select-selection-item p {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 700 !important;
  height: 24px;
  line-height: 24px !important
}

.DepositWithdrawContent-d6abc7b2 dl {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.DepositWithdrawContent-d6abc7b2 dl dt {
  color: #8a8a8e;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: capitalize
}

.DepositWithdrawContent-d6abc7b2 dl dd {
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.DepositWithdrawContent-d6abc7b2 dl dd strong {
  font-size: 16px;
  font-style: normal;
  font-weight: 700
}

.DepositWithdrawContent-d6abc7b2 .dex-tabs-line>.dex-tabs-nav .dex-tabs-nav-list>.dex-tabs-ink-bar {
  background-color: #fff
}

.DepositWithdrawContent-d6abc7b2 .dex-select {
  width: 100%
}

.DepositWithdrawContent-d6abc7b2 .dex-select .dex-select-selector {
  background-color: var(--dexc-component-bg-color);
  border-radius: 8px;
  box-sizing: border-box;
  height: 52px;
  padding: 14px 16px
}

.DepositWithdrawContent-d6abc7b2 .dex-select.dex-select-focused .dex-select-selector {
  border: 1px solid #fff
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-addon .dex-select {
  border: none;
  min-width: auto;
  padding-right: 12px
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-addon .dex-select .dex-select-selector {
  align-items: center;
  display: flex;
  padding-left: 0
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-addon .dex-select .dex-select-selector .dex-select-selection-item p {
  font-style: normal;
  font-weight: 400 !important;
  line-height: 18px
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-addon .dex-select .dex-select-selector .dex-select-selection-item img {
  display: none
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-addon .dex-select.dex-select-focused .dex-select-selector {
  border: none
}

.DepositWithdrawContent-d6abc7b2 .dex-input-huge {
  border-radius: 8px;
  height: 52px
}

.DepositWithdrawContent-d6abc7b2 .dex-input-huge.dex-input-group-wrapper .dex-input-wrapper {
  border-radius: 8px;
  height: 50px
}

.DepositWithdrawContent-d6abc7b2 .dex-input-with-options .dex-input-affix-wrapper .dex-input {
  padding-left: 16px !important;
  text-align: left
}

.DepositWithdrawContent-d6abc7b2 .dex-input-huge .dex-input,
.DepositWithdrawContent-d6abc7b2 .dex-input-huge .dex-input-affix-wrapper {
  height: 52px
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-wrapper.dex-input-group-wrapper-focused {
  border: 1px solid #fff
}

.DepositWithdrawContent-d6abc7b2 .dex-input-group-wrapper.dex-input-group-wrapper-error {
  border: 1px solid #ff4a8a
}

.laber-abc3ace2 {
  font-size: 14px;
  font-weight: 400
}

.disableBtn-dfba5b0b,
.laber-abc3ace2 {
  color: #8a8a8e;
  font-style: normal;
  line-height: normal;
  text-transform: capitalize
}

.disableBtn-dfba5b0b {
  align-items: center;
  background: #202020;
  border-radius: 30px;
  cursor: not-allowed;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  gap: 10px;
  height: 52px;
  justify-content: center;
  padding: 8px 24px;
  width: 100%
}

.depositWBtn-e60cf221 {
  background: transparent;
  cursor: pointer
}

.depositWBtn-e60cf221 .inner-content {
  align-items: center;
  background: #6001ff;
  border-radius: 30px;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  gap: 10px;
  height: 50px;
  justify-content: center;
  padding: 2px 24px
}

.depositWBtn-e60cf221 .dex-spin-loading .dex-spin-text {
  display: none
}

.enableWraper-c7b23d23 {
  background: #1d1d1d;
  border-radius: 12px;
  bottom: 0;
  left: 0;
  padding: 16px 24px;
  position: absolute;
  right: 0
}

.enableWraper-c7b23d23 h5 {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px
}

.enableWraper-c7b23d23 dd {
  align-items: center;
  border: 1px solid #8a8a8e;
  border-radius: 20px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  gap: 2px;
  justify-content: center;
  line-height: 16px;
  padding: 6px 16px;
  text-transform: capitalize;
  width: 64px
}

.enableWraper-c7b23d23 dd .dex-spin-loading .dex-spin-text {
  display: none
}

.enableWraper-c7b23d23 dd .dex-spin-loading .dex-spin-icon {
  height: 16px !important;
  width: 16px !important
}

.tag-b02b27a6 {
  background: #6001ff;
  border-radius: 100px;
  cursor: pointer;
  font-weight: 400;
  justify-content: center;
  padding: 0 14px
}

.selectItem-a52afb08,
.tag-b02b27a6 {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 14px;
  font-style: normal;
  gap: 10px;
  line-height: 24px
}

.selectItem-a52afb08 {
  font-weight: 500
}

.selectItem-a52afb08 img {
  border: none
}

.error-c4a98eab {
  color: #ff4a8a
}

.dex-select-dex-select-item-huge {
  min-width: 126px
}

.dex-modal-mask {
  background-color: var(--dex-mask-color);
  bottom: 0;
  height: 100%;
  inset-inline-end: 0;
  inset-inline-start: 0;
  position: fixed;
  top: 0;
  z-index: var(--dex-modal-mask-zIndex)
}

.dex-modal-mask-hidden {
  display: none
}

.dex-modal-wrap {
  bottom: 0;
  height: 100%;
  inset-inline-end: 0;
  inset-inline-start: 0;
  outline: 0;
  overflow: auto;
  position: fixed;
  text-align: center;
  top: 0;
  z-index: var(--dex-modal-mask-zIndex)
}

.dex-modal {
  background-color: var(--dexc-trade-primary-container-bg);
  border: 1px solid var(--dex-base-border-color);
  border-radius: 24px;
  margin: 0 auto;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  pointer-events: none;
  position: relative;
  top: 200px;
  width: 480px
}

.dex-modal-content {
  border: none;
  pointer-events: auto;
  position: relative
}

.dex-modal-content .dex-modal-header {
  padding: 24px
}

.dex-modal-content .dex-modal-header .dex-modal-title {
  color: var(--dex-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  word-wrap: break-word
}

.dex-modal-content .dex-modal-body {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  padding: 0 24px;
  word-wrap: break-word
}

.dex-modal-content .dex-modal-footer {
  align-items: center;
  background: 0 0;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 32px 24px;
  text-align: end
}

.dex-modal-content .dex-modal-footer>button {
  flex-grow: 1;
  max-width: calc(50% - 5px)
}

.dex-modal-close {
  background: 0 0;
  border: 0;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 24px;
  text-decoration: none;
  top: 24px;
  z-index: calc(var(--dex-modal-mask-zIndex) + 1)
}

.dex-modal-centered:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0
}

.dex-modal-centered .dex-modal {
  display: inline-block;
  padding-bottom: 0;
  text-align: left;
  top: 0;
  vertical-align: middle
}

.dex-modal-spin {
  width: 100%
}

.dex-modal-spin .dex-spin-container {
  background-color: rgba(0, 0, 0, .1);
  opacity: 1;
  pointer-events: none
}

.dex-spin {
  display: inline-block;
  position: relative
}

.dex-spin-loading {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.dex-spin-loading .dex-spin-icon {
  animation: spin 1s linear infinite;
  margin: 0 auto
}

.dex-spin-loading .dex-spin-text {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  line-height: 16px;
  margin: 8px auto 0;
  text-align: center
}

.dex-spin .dex-spin-container {
  height: 100%;
  width: 100%
}

.dex-spin-nested {
  position: relative
}

.dex-spin-nested .dex-spin-loading {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-spin-nested .dex-spin-container {
  opacity: .3;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.dex-spin-vertical .dex-spin-loading {
  flex-direction: column
}

.dex-spin-horizontal .dex-spin-loading {
  flex-direction: row
}

.dex-spin-horizontal .dex-spin-text {
  margin-left: 8px
}

.dex-loading-icon {
  background-image: var(--dex-icon-loading-bg-url);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain
}

.dex-button {
  border: none;
  border-radius: var(--dex-border-radius-mid);
  cursor: pointer;
  display: inline-block;
  transition: all .3s;
  white-space: nowrap
}

.dex-button:disabled:not(.dex-button-loading) {
  cursor: not-allowed
}

.dex-button-block {
  display: block;
  width: 100%
}

.dex-button-small {
  font-size: var(--dex-secondary-font-size);
  line-height: 16px;
  min-width: 40px;
  padding: 6px 8px
}

.dex-button-mid {
  min-width: 52px;
  padding: 9px 12px
}

.dex-button-large,
.dex-button-mid {
  font-size: var(--dex-main-font-size);
  line-height: 20px
}

.dex-button-large {
  min-width: 68px;
  padding: 12px 16px
}

.dex-button-huge {
  font-size: var(--dex-large-font-size);
  line-height: 20px;
  min-width: 68px;
  padding: 16px
}

.dex-button-primary {
  background-color: var(--dex-primary-color);
  color: var(--dex-white)
}

.dex-button-primary:not(:disabled):hover {
  background-color: var(--dex-primary-hover-color);
  transition: all .3s
}

.dex-button-primary:not(:disabled):active {
  background-color: var(--dex-primary-active-color);
  transition: all .3s
}

.dex-button-primary:disabled {
  background-color: var(--dexc-trade-component-bg-color);
  color: var(--dex-quaternary-font-color)
}

.dex-button-link,
.dex-button-text {
  background: none;
  border: none;
  min-width: unset;
  padding: 0;
  text-decoration: none
}

.dex-button-link:disabled,
.dex-button-text:disabled {
  color: var(--dex-quaternary-font-color)
}

.dex-button-text:not(:disabled) {
  color: var(--dex-primary-font-color)
}

.dex-button-text:not(:disabled):disabled {
  color: var(--dex-quaternary-font-color)
}

.dex-button-text:not(:disabled):hover {
  color: var(--dex-secondary-font-color)
}

.dex-button-text:not(:disabled):active {
  color: var(--dex-tertiary-font-color)
}

.dex-button-link:not(:disabled) {
  color: var(--dex-primary-hover-color)
}

.dex-button-link:not(:disabled):disabled {
  color: var(--dex-quaternary-font-color)
}

.dex-button-link:not(:disabled):hover {
  color: var(--dex-primary-hover-color)
}

.dex-button-link:not(:disabled):active {
  color: var(--dex-primary-active-color)
}

.dex-button-default {
  background-color: transparent;
  color: var(--dex-primary-font-color);
  transition: color .3s, background-color .3s
}

.dex-button-default:not(:disabled):active {
  background-color: var(--dex-input-disabled-bg);
  transition: color .3s, background-color .3s
}

.dex-button-default:disabled {
  background-color: transparent;
  color: var(--dex-quaternary-font-color)
}

.dex-button-default .dex-button-loading-icon path {
  fill: var(--dex-primary-color)
}

.dex-button-secondary {
  background-color: var(--dexc-trade-component-bg-color);
  color: var(--dex-primary-font-color);
  transition: color .3s, background-color .3s
}

.dex-button-secondary:not(:disabled):hover {
  background-color: var(--dex-input-disabled-bg);
  transition: color .3s, background-color .3s
}

.dex-button-secondary:not(:disabled):active {
  background-color: var(--dex-component-background-color);
  transition: color .3s, background-color .3s
}

.dex-button-secondary:disabled {
  background-color: var(--dexc-trade-component-bg-color);
  color: var(--dex-quaternary-font-color)
}

.dex-button-secondary .dex-button-loading-icon path {
  fill: var(--dex-primary-color)
}

.dex-button-buy,
.dex-button-sell {
  color: var(--dexc-pure-black-color);
  padding: 8px auto
}

.dex-button-buy {
  background-color: var(--dex-buy-color)
}

.dex-button-buy:hover {
  background-color: var(--dex-button-buy-hover-bg)
}

.dex-button-buy:active {
  background-color: var(--dex-button-buy-active-bg)
}

.dex-button-sell {
  background-color: var(--dex-sell-color)
}

.dex-button-sell:hover {
  background-color: var(--dex-button-sell-hover-bg)
}

.dex-button-sell:active {
  background-color: var(--dex-button-sell-active-bg)
}

.dex-button-bordered {
  border: 1px solid var(--dexc-base-border-color)
}

.dex-button-rounded {
  border-radius: 100px
}

.dex-button-loading-icon {
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-timing-function: linear
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.dex-white-loading-icon {
  background-image: var(--dex-icon-white-loading-bg-url);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain
}

.star-border-container {
  border-radius: 20px;
  display: inline-block;
  overflow: hidden;
  position: relative
}

.star-border-container:hover .border-gradient-bottom {
  animation: star-movement-bottom linear infinite alternate
}

.star-border-container:hover .border-gradient-top {
  animation: star-movement-top linear infinite alternate
}

.border-gradient-bottom {
  bottom: -12px;
  right: -250%
}

.border-gradient-bottom,
.border-gradient-top {
  border-radius: 50%;
  height: 50%;
  opacity: .7;
  position: absolute;
  width: 300%;
  z-index: 0
}

.border-gradient-top {
  left: -250%;
  top: -12px
}

.inner-content {
  background: #000;
  border: 1px solid #222;
  border-radius: 20px;
  color: #fff;
  font-size: 16px;
  padding: 16px 26px;
  position: relative;
  text-align: center;
  z-index: 1
}

@keyframes star-movement-bottom {
  0% {
    opacity: 1;
    transform: translate(0)
  }

  to {
    opacity: 0;
    transform: translate(-100%)
  }
}

@keyframes star-movement-top {
  0% {
    opacity: 1;
    transform: translate(0)
  }

  to {
    opacity: 0;
    transform: translate(100%)
  }
}

.notificationList-a72795f5 .item-a606fdc9 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 24px
}

.notificationList-a72795f5 .item-a606fdc9 .text-cbfa9a16 .title-f09ba18b {
  color: var(--Functional-White);
  font-size: 16px;
  line-height: 20px;
  margin-left: 6px
}

.notificationList-a72795f5 .item-a606fdc9 .text-cbfa9a16 .info-a85f8efc {
  color: #8e8e8e;
  font-size: 14px;
  line-height: 18px;
  margin-left: 24px;
  margin-top: 2px
}

.notificationList-a72795f5 .item-a606fdc9 .bindButton-a27f4aaf {
  border-radius: 12px;
  height: 24px;
  min-width: 52px;
  padding: 0 11px
}

.emailCodeContainer-a8c92e52 {
  text-align: center
}

.emailCodeContainer-a8c92e52 .icon-a680aff8 {
  height: 60px;
  margin: 0 auto;
  width: 60px
}

.emailCodeContainer-a8c92e52 .title-f09ba18b {
  color: var(--Functional-White);
  font-size: 24px;
  font-weight: 700;
  line-height: 30px;
  margin-top: 16px
}

.emailCodeContainer-a8c92e52 .info-a85f8efc {
  color: #8e8e8e;
  font-size: 16px;
  line-height: 20px;
  margin-top: 16px
}

.emailCodeContainer-a8c92e52 .codeBox-f87b5f57 {
  margin-top: 40px
}

.emailCodeContainer-a8c92e52 .resendBox-aa11fe0f {
  color: #8e8e8e;
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 40px;
  margin-top: 32px
}

.emailCodeContainer-a8c92e52 .resendBox-aa11fe0f span {
  color: #a670ff;
  cursor: pointer;
  margin-left: 4px
}

.emailCodeContainer-a8c92e52 .resendBox-aa11fe0f.notAllowed-a5b69a79 span {
  color: #8e8e8e;
  cursor: not-allowed
}

.modalBack-b04226bd {
  cursor: pointer
}

.codeContainer-fff9f0d9 {
  margin-top: 40px
}

.captchaInputBox-a32afab0 {
  display: flex;
  gap: 8px;
  justify-content: center
}

.captchaInputBox-a32afab0 .captchaInputItem-ce6f9b46 {
  border: 1px solid #333;
  border-radius: 4px;
  font-size: 22px;
  height: 52px;
  outline: none;
  text-align: center;
  width: 40px
}

.captchaInputBox-a32afab0 .captchaInputItem-ce6f9b46:focus {
  border: 1px solid var(--Functional-White)
}

.notificationButton-fb3a59ed {
  border-radius: 26px;
  font-size: 16px;
  font-weight: 500;
  height: 52px;
  line-height: 52px;
  margin-bottom: 32px;
  margin-top: 40px;
  padding: 0;
  width: 100%
}

.calculateInputLabel-c6156f38 {
  color: #8e8e8e;
  font-size: 14px;
  margin-bottom: 8px
}

.emailInput-e26e79eb input {
  height: 52px;
  line-height: 52px;
  text-align: left
}

.input-disabled-mixin,
.input-readonly-mixin {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-input-disabled-bg);
  color: var(--dex-tertiary-font-color);
  cursor: not-allowed
}

.input-readonly-mixin {
  cursor: default
}

.input-borderless {
  border-color: transparent
}

.dex-input {
  background-color: var(--dexc-component-bg-color);
  border: 1px solid transparent;
  border-radius: var(--dex-border-radius-mid);
  box-sizing: border-box;
  caret-color: var(--dexc-primary-color);
  color: var(--dex-primary-font-color);
  display: inline-block;
  font-size: inherit;
  font-weight: 400;
  line-height: inherit;
  outline: none;
  overflow: hidden;
  text-align: right;
  transition: border-color .2s ease-in-out;
  width: 100%
}

.dex-input::-moz-placeholder {
  color: var(--dexc-secondary-font-color)
}

.dex-input::placeholder {
  color: var(--dexc-secondary-font-color)
}

.dex-input:focus {
  border-color: var(--dexc-primary-font-color)
}

.dex-input-disabled,
.dex-input:disabled {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-input-disabled-bg);
  color: var(--dex-tertiary-font-color);
  cursor: not-allowed
}

.dex-input-left .dex-input {
  text-align: left
}

.dex-input-readonly {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-input-disabled-bg);
  color: var(--dex-tertiary-font-color);
  cursor: not-allowed;
  cursor: default
}

.dex-input-readonly:focus {
  border-color: transparent
}

.dex-input-affix-wrapper {
  align-items: center;
  background-color: var(--dexc-component-bg-color);
  border: 1px solid transparent;
  border-radius: var(--dex-border-radius-mid);
  box-sizing: border-box;
  display: inline-flex;
  justify-content: space-between;
  line-height: 18px;
  outline: none;
  overflow: hidden;
  width: 100%
}

.dex-input-affix-wrapper .dex-input {
  border-color: transparent;
  border-radius: unset;
  flex: 1 1;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  outline: none;
  padding: 0 12px;
  transition: unset
}

.dex-input-affix-wrapper .dex-input:focus {
  border-color: transparent
}

.dex-input-affix-wrapper .dex-input-prefix,
.dex-input-affix-wrapper .dex-input-suffix {
  font-weight: 400;
  padding: 10px 12px
}

.dex-input-affix-wrapper .dex-input-prefix {
  color: var(--dexc-secondary-font-color);
  margin-right: 4px;
  padding-right: 0;
  white-space: nowrap
}

.dex-input-affix-wrapper .dex-input-suffix {
  color: var(--dex-primary-font-color);
  padding-left: 0
}

.dex-input-affix-wrapper-focused {
  border-color: var(--dexc-primary-font-color);
  transition: border-color .2s ease-in-out
}

.dex-input-affix-wrapper-disabled {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-input-disabled-bg);
  cursor: not-allowed
}

.dex-input-affix-wrapper-disabled,
.dex-input-affix-wrapper-disabled .dex-input-prefix,
.dex-input-affix-wrapper-disabled .dex-input-suffix {
  color: var(--dex-tertiary-font-color)
}

.dex-input-affix-wrapper-readonly,
.dex-input-affix-wrapper-readonly .dex-input {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-input-disabled-bg);
  color: var(--dex-tertiary-font-color);
  cursor: not-allowed;
  cursor: default
}

.dex-input-affix-wrapper-readonly .dex-input-prefix,
.dex-input-affix-wrapper-readonly .dex-input-suffix {
  color: var(--dex-tertiary-font-color);
  cursor: default
}

.dex-input-affix-wrapper-readonly:focus {
  border-color: transparent
}

.dex-input-group {
  align-items: center;
  display: flex
}

.dex-input-group .dex-input {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0
}

.dex-input-group .dex-input-group-addon,
.dex-input-group .dex-input-group-addon .dex-select-selector {
  background-color: var(--dexc-component-bg-color)
}

.dex-input-group .dex-input-group-addon .dex-select-selector .dex-select-selection-item {
  color: var(--dexc-primary-font-color)
}

.dex-input-group .dex-input-group-addon:first-child {
  border-radius: 4px 0 0 4px
}

.dex-input-group .dex-input-group-addon:last-child {
  border-radius: 0 4px 4px 0
}

.dex-input-inner-tooltip {
  cursor: pointer;
  -webkit-text-decoration: underline dashed;
  text-decoration: underline dashed;
  text-decoration-color: var(--dex-tertiary-font-color);
  text-underline-offset: 4px
}

.dex-input-small {
  font-size: 12px;
  height: 28px;
  line-height: 16px;
  padding: 6px 12px
}

.dex-input-small .dex-input,
.dex-input-small .dex-input-affix-wrapper {
  height: 28px
}

.dex-input-small.dex-input-group-wrapper .dex-input-wrapper {
  height: 26px
}

.dex-input-mid {
  font-size: 14px;
  height: 36px;
  line-height: 20px;
  padding: 8px 12px
}

.dex-input-mid .dex-input,
.dex-input-mid .dex-input-affix-wrapper {
  height: 36px
}

.dex-input-mid.dex-input-group-wrapper .dex-input-wrapper {
  height: 34px
}

.dex-input-large {
  font-size: 14px;
  height: 44px;
  line-height: 20px;
  padding: 12px
}

.dex-input-large .dex-input,
.dex-input-large .dex-input-affix-wrapper {
  height: 44px
}

.dex-input-large.dex-input-group-wrapper .dex-input-wrapper {
  height: 42px
}

.dex-input-affix-wrapper.dex-input-large,
.dex-input-affix-wrapper.dex-input-mid,
.dex-input-affix-wrapper.dex-input-small,
.dex-input-group-wrapper.dex-input-large,
.dex-input-group-wrapper.dex-input-mid,
.dex-input-group-wrapper.dex-input-small {
  padding: 0
}

.dex-input-group-wrapper {
  border: 1px solid transparent;
  border-radius: var(--dex-border-radius-mid);
  display: inline-block;
  width: 100%
}

.dex-input-group-wrapper .dex-input-affix-wrapper {
  border: none;
  border-radius: 0
}

.dex-input-group-wrapper .dex-input-wrapper {
  border: none;
  border-radius: var(--dex-border-radius-mid);
  overflow: hidden
}

.dex-input-group-wrapper .dex-input-wrapper .dex-input {
  border: none;
  border-radius: 0;
  box-sizing: content-box;
  padding: 0 12px
}

.dex-input-group-wrapper .dex-input-wrapper .dex-input-group-addon {
  align-items: center;
  align-self: center;
  display: flex
}

.dex-input-group-wrapper.dex-input-group-wrapper-focused {
  border-color: var(--dexc-primary-font-color)
}

.dex-input-group-wrapper.dex-input-group-wrapper-focused .dex-input-affix-wrapper {
  border: none
}

.dex-input-group-wrapper.dex-input-group-wrapper-focused .dex-input-wrapper {
  border-color: var(--dexc-primary-font-color);
  transition: border-color .2s ease-in-out
}

.dex-form-item {
  margin-bottom: 6px
}

.dex-form-item-offset {
  margin-bottom: -20px
}

.dex-form-item-error .dex-input,
.dex-form-item-error .dex-input-affix-wrapper,
.dex-form-item-error .dex-input-with-options,
.dex-form-item-error .dex-input-with-options .dex-input-wrapper {
  border-color: var(--dex-error-color);
  box-sizing: border-box;
  transition: border-color .2s ease-in-out
}

.dex-form-item-error .dex-input .dex-input,
.dex-form-item-error .dex-input-affix-wrapper .dex-input,
.dex-form-item-error .dex-input-with-options .dex-input,
.dex-form-item-error .dex-input-with-options .dex-input-wrapper .dex-input {
  border-color: transparent
}

.dex-form-item-error .dex-form-item-explain {
  color: var(--dex-error-color);
  font-size: var(--dex-secondary-font-size);
  line-height: 16px;
  margin-top: 4px
}

.dex-form-item-hidden {
  display: none
}

.dex-checkbox-wrapper {
  align-items: center;
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  display: inline-flex;
  justify-content: flex-start
}

.dex-checkbox-wrapper .dex-checkbox-label {
  color: var(--dexc-primary-font-color);
  cursor: pointer;
  margin-left: var(--dex-checkbox-label-margin-left);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.dex-checkbox-wrapper:hover .dex-checkbox {
  border-color: var(--dexc-primary-font-color)
}

.dex-checkbox {
  --inner-bg: url("images/image_2d61e3cfb3a4f664fc0554c4a6942b24e8f947dd.svg");
  border: 1px solid var(--dex-secondary-font-color);
  border-radius: var(--dex-border-radius-xs);
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: var(--dex-checkbox-size);
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: var(--dex-checkbox-size)
}

.dex-checkbox-input {
  cursor: pointer;
  margin: 0;
  opacity: 0;
  z-index: 1
}

.dex-checkbox-inner,
.dex-checkbox-input {
  height: calc(var(--dex-checkbox-size) - 2px);
  left: 0;
  position: absolute;
  top: 0;
  width: calc(var(--dex-checkbox-size) - 2px)
}

.dex-checkbox-inner {
  background-color: transparent;
  border: none;
  box-sizing: border-box;
  display: inline-block;
  transition: background-color .2s
}

.dex-checkbox-inner:after {
  content: "";
  visibility: hidden
}

.dex-checkbox-checked {
  background-color: var(--dexc-primary-font-color);
  border-color: var(--dexc-primary-font-color)
}

.dex-checkbox-checked .dex-checkbox-inner {
  background-color: var(--dexc-primary-font-color);
  background-image: var(--inner-bg);
  background-position: 50%;
  background-repeat: no-repeat;
  transition: background-color .2s
}

.dex-checkbox:hover {
  border-color: var(--dex-primary-color)
}

.dex-checkbox-small {
  --dex-checkbox-size: var(--dex-checkbox-small-size)
}

.dex-checkbox-wrapper-small {
  font-size: var(--dex-secondary-font-size)
}

.dex-checkbox-wrapper-small .dex-checkbox-label {
  line-height: 16px
}

.dex-checkbox-wrapper-large {
  font-size: var(--dex-secondary-font-size)
}

.dex-checkbox-wrapper-large .dex-checkbox-label {
  line-height: 20px
}

.dex-checkbox-large {
  --dex-checkbox-size: var(--dex-checkbox-large-size)
}

.dex-checkbox-indeterminate {
  background-color: var(--dexc-primary-font-color);
  border-color: var(--dexc-primary-font-color)
}

.dex-checkbox-indeterminate .dex-checkbox-inner {
  background-color: var(--dexc-primary-font-color);
  background-image: none
}

.dex-checkbox-indeterminate .dex-checkbox-inner:after {
  background-color: var(--dexc-primary-container-bg);
  border: none;
  border-radius: 1px;
  height: 2px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  visibility: visible;
  width: calc(var(--dex-checkbox-size) - 4px)
}

.dex-checkbox-wrapper-disabled {
  cursor: not-allowed
}

.dex-checkbox-wrapper-disabled .dex-checkbox {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-quaternary-font-color);
  cursor: not-allowed
}

.dex-checkbox-wrapper-disabled .dex-checkbox-checked {
  background-color: var(--dex-quaternary-font-color);
  border-color: var(--dex-quaternary-font-color)
}

.dex-checkbox-wrapper-disabled .dex-checkbox-checked .dex-checkbox-inner {
  background-color: var(--dex-quaternary-font-color)
}

.dex-checkbox-wrapper-disabled .dex-checkbox-input {
  cursor: not-allowed
}

.dex-checkbox-wrapper-disabled .dex-checkbox-inner {
  background-color: var(--dex-input-disabled-bg)
}

.dex-checkbox-wrapper-disabled .dex-checkbox:hover {
  border-color: var(--dex-quaternary-font-color)
}

.dex-checkbox-wrapper-disabled .dex-checkbox-label {
  color: var(--dex-tertiary-font-color);
  cursor: not-allowed
}

.dex-checkbox-wrapper-disabled:hover .dex-checkbox {
  border-color: var(--dex-quaternary-font-color)
}

.dex-checkbox-group {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: flex-start
}

.dex-token-symbol {
  background-color: var(--dexc-white-primary-container-bg);
  border: 2px solid #fff;
  border-radius: 100%;
  box-sizing: content-box;
  overflow: hidden
}

.dex-token-symbol-loading {
  background-color: var(--dex-quaternary-font-color)
}

.dex-token-symbol[alt] {
  display: inline-block;
  text-align: center
}

.dex-token-symbol-list {
  align-items: center;
  display: inline-flex;
  justify-content: flex-start
}

.dex-token-symbol-list-item:not(.dex-token-symbol-list-item:first-child) {
  margin-left: -6px
}

.dex-token-symbol-list-placeholder {
  align-items: center;
  background-color: var(--dex-tertiary-font-color);
  border: 2px solid #fff;
  border-radius: 100%;
  box-sizing: content-box;
  color: #fff;
  cursor: default;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  justify-content: center;
  line-height: 16px;
  margin-left: -6px;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.dex-select {
  --dex-select-min-width: 80px;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  font-size: var(--dex-main-font-size);
  min-width: var(--dex-select-min-width);
  position: relative
}

.dex-select-selector {
  background-color: transparent;
  border: 1px solid var(--dexc-dark-base-border-color);
  cursor: pointer;
  min-width: inherit;
  overflow: hidden;
  padding: var(--dex-select-selector-padding);
  text-overflow: ellipsis;
  white-space: nowrap
}

.dex-select-selector .dex-select-selection-search {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-select-selector .dex-select-selection-search-input {
  background: transparent;
  border: none;
  color: var(--dexc-secondary-font-color);
  cursor: pointer;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  outline: none;
  padding: 0;
  padding: var(--dex-select-selector-padding, 12px);
  width: 100%
}

.dex-select-selector .dex-select-selection-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none
}

.dex-select-selector .dex-select-selection-placeholder {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  line-height: 16px
}

.dex-select-selector .dex-select-selection-item {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  line-height: 16px;
  margin-right: 4px
}

.dex-select-arrow {
  align-items: center;
  color: var(--dexc-secondary-font-color);
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  transform-origin: center;
  transition: transform .3s ease-in-out
}

.dex-select-open .dex-select-selector {
  border-color: var(--dexc-primary-font-color)
}

.dex-select-open .dex-select-selection-item {
  color: var(--dexc-primary-font-color)
}

.dex-select-open .dex-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  transform-origin: center;
  transition: all .3s
}

.dex-select-dropdown {
  background-color: var(--dex-primary-container-bg);
  border: 1px solid var(--dexc-base-border-color);
  border-radius: var(--dex-border-radius-mid);
  box-shadow: var(--dex-primary-box-shadow);
  display: inline-block;
  padding: 4px;
  position: relative;
  z-index: var(--dex-dropdown-zIndex)
}

.dex-select-dropdown .dex-select-item {
  border-radius: var(--dex-border-radius-small);
  color: var(--dex-primary-font-color);
  cursor: pointer;
  font-weight: 500;
  line-height: 20px;
  overflow: hidden;
  text-align: left
}

.dex-select-dropdown .dex-select-item:hover {
  color: var(--dex-primary-font-color);
  transition: all .3s
}

.dex-select-dropdown .dex-select-item-option-active,
.dex-select-dropdown .dex-select-item:hover {
  background-color: var(--dexc-trade-component-bg-color)
}

.dex-select-dropdown .dex-select-item-option-selected,
.dex-select-dropdown .dex-select-item-option-selected:hover {
  color: var(--dexc-primary-font-color)
}

.dex-select-dropdown .dex-select-item-option-content {
  border-radius: var(--dex-border-radius-small);
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap
}

.dex-select-dropdown .dex-select-item-option-disabled {
  color: var(--dex-quaternary-font-color);
  cursor: not-allowed
}

.dex-select-dropdown .dex-select-item-option-disabled:hover {
  background-color: unset;
  color: unset;
  color: var(--dex-quaternary-font-color)
}

.dex-select-dropdown .dex-select-item-empty {
  background-color: var(--dex-primary-container-bg);
  color: var(--dex-quaternary-font-color);
  font-size: 12px;
  padding: 20px 0;
  text-align: center
}

.dex-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar {
  height: var(--dex-scrollbar-width);
  width: var(--dex-scrollbar-width)
}

.dex-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: var(--dex-scrollbar-redius)
}

.dex-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-track {
  background-color: var(--dex-scrollbar-track-bg)
}

.dex-select-dropdown .rc-virtual-list-holder::-webkit-scrollbar-corner {
  background-color: var(--dex-scrollbar-corner-bg)
}

.dex-select-dropdown-hidden {
  display: none
}

.dex-select-borderless .dex-select-selector {
  border-color: transparent
}

.dex-select-bj .dex-select-selector {
  background: var(--dexc-trade-component-bg-color)
}

.dex-select-small {
  border-radius: 20px
}

.dex-select-small .dex-select-selector {
  border-radius: 20px;
  min-height: 28px;
  padding: var(--dex-select-selector-padding, 4px 12px);
  padding-right: 28px
}

.dex-select-small .dex-select-selector .dex-select-selection-search-input {
  font-size: 12px;
  padding: var(--dex-select-selector-padding, 4px 12px)
}

.dex-select-small .dex-select-selector .dex-select-selection-item,
.dex-select-small .dex-select-selector .dex-select-selection-placeholder {
  font-size: 12px;
  line-height: 16px
}

.dex-select-dropwdown-small .dex-select-item-option-content {
  font-size: 12px;
  line-height: 16px;
  padding: 6px 12px
}

.dex-select-mid {
  border-radius: 26px
}

.dex-select-mid .dex-select-selector {
  border-radius: 26px;
  font-size: 14px;
  line-height: 20px;
  min-height: 36px;
  padding: var(--dex-select-selector-padding, 8px 12px);
  padding-right: 28px
}

.dex-select-mid .dex-select-selector .dex-select-selection-search-input {
  font-size: 14px;
  padding: var(--dex-select-selector-padding, 8px 12px)
}

.dex-select-mid .dex-select-selector .dex-select-selection-item,
.dex-select-mid .dex-select-selector .dex-select-selection-placeholder {
  font-size: 14px;
  line-height: 20px
}

.dex-select-dropwdown-mid .dex-select-item-option-content {
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px
}

.dex-select-large {
  border-radius: 32px
}

.dex-select-large .dex-select-selector {
  border-radius: 32px;
  font-size: 14px;
  line-height: 20px;
  min-height: 44px;
  padding: var(--dex-select-selector-padding, 12px);
  padding-right: 28px
}

.dex-select-large .dex-select-selector .dex-select-selection-search-input {
  font-size: 14px;
  padding: var(--dex-select-selector-padding, 12px)
}

.dex-select-large .dex-select-selector .dex-select-selection-item,
.dex-select-large .dex-select-selector .dex-select-selection-placeholder {
  font-size: 14px;
  line-height: 20px
}

.dex-select-dropwdown-large .dex-select-item-option-content {
  font-size: 14px;
  line-height: 20px;
  padding: 10px 12px
}

.dex-select-show-search .dex-select-selection-search-input {
  cursor: text
}

.dex-select-open.dex-select-show-search .dex-select-selection-item {
  color: var(--dex-quaternary-font-color)
}

.dex-input-with-options {
  border: 1px solid transparent;
  border-radius: var(--dex-border-radius-mid);
  transition: border-color .2s ease-in-out
}

.dex-input-with-options .dex-select-selection-item {
  display: inline-block;
  text-align: right;
  width: 100%
}

.dex-input-with-options .dex-input-affix-wrapper .dex-input {
  padding: 0 !important
}

.dex-input-with-options.dex-input-group-wrapper .dex-input-wrapper {
  border: none
}

.dex-input-with-options.dex-input-group-wrapper-focused {
  border: 1px solid var(--dexc-primary-font-color);
  caret-color: var(--dexc-primary-color);
  transition: border-color .2s ease-in-out
}

.dex-input-with-options.dex-input-group-wrapper-focused .dex-select-selector .dex-select-selection-item {
  color: var(--dexc-primary-font-color)
}

.dex-divider {
  background-color: var(--dex-common-border-color);
  border: none;
  height: 1px;
  width: 100%
}

.fullScreenTipsBar {
  background-color: rgba(251, 185, 48, .2);
  color: #fbb930;
  cursor: pointer;
  font-size: 14px;
  font-style: normal;
  height: 32px;
  left: 0;
  line-height: 32px;
  position: absolute;
  right: 0;
  top: 64px;
  width: 100%;
  z-index: 1000
}

.fullScreenTipsBar p {
  margin: 0 auto;
  max-width: 1200px;
  text-align: left
}

.deposit-tip {
  background: #3c3c3c;
  border-radius: 90px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  padding: 4px 12px;
  position: absolute;
  top: 52px;
  white-space: nowrap
}

.deposit-tip .deposit-tip-content {
  align-items: center;
  display: flex
}

.deposit-tip .tip-arrow {
  border-bottom: 8px solid #3c3c3c;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  left: 50%;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  width: 0
}

.deposit-dialog-tips {
  background: rgba(96, 1, 255, .27);
  border-radius: 12px;
  cursor: pointer;
  margin: 0 0 20px;
  padding: 16px 24px
}

.deposit-dialog-tips .tips-content {
  display: flex;
  flex-direction: column
}

.deposit-dialog-tips .tips-header {
  align-items: center;
  display: flex
}

.deposit-dialog-tips .tips-header .party-emoji {
  font-size: 24px;
  line-height: 1
}

.deposit-dialog-tips .tips-header .main-text {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px
}

.deposit-dialog-tips .tips-details {
  color: v #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  padding-left: 24px
}

.dex-tabs {
  overflow: hidden
}

.dex-tabs-nav {
  align-items: center;
  display: flex;
  width: 100%
}

.dex-tabs-nav-wrap {
  display: flex;
  flex: auto;
  overflow: hidden;
  position: relative;
  transform: translate(0);
  white-space: nowrap
}

.dex-tabs-nav-wrap:after,
.dex-tabs-nav-wrap:before {
  bottom: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity .3s;
  width: 32px;
  z-index: 1
}

.dex-tabs-nav-wrap:before {
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .08);
  left: 0
}

.dex-tabs-nav-wrap:after {
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .08);
  right: 0
}

.dex-tabs-nav-wrap .dex-tabs-nav-list {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-ink-bar {
  display: none
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab {
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  font-weight: 500;
  white-space: nowrap
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab:hover {
  color: var(--dex-primary-font-color)
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab:focus {
  outline: none
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab.dex-tabs-tab-active {
  color: var(--dex-primary-font-color)
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab-btn:focus {
  outline: none
}

.dex-tabs-nav-wrap .dex-tabs-nav-list .dex-tabs-tab.dex-tabs-tab-disabled {
  color: var(--dex-quaternary-font-color);
  cursor: not-allowed
}

.dex-tabs-nav .dex-tabs-nav-wrap.dex-tabs-nav-wrap-ping-left:before,
.dex-tabs-nav .dex-tabs-nav-wrap.dex-tabs-nav-wrap-ping-right:after {
  opacity: 1
}

.dex-tabs-nav .dex-tabs-extra-content {
  flex: none
}

.dex-tabs-content-holder .dex-tabs-tabpane:focus {
  outline: none
}

.dex-tabs-content-holder::-webkit-scrollbar {
  height: var(--dex-scrollbar-width);
  width: var(--dex-scrollbar-width)
}

.dex-tabs-content-holder::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: var(--dex-scrollbar-redius)
}

.dex-tabs-content-holder::-webkit-scrollbar-track {
  background-color: var(--dex-scrollbar-track-bg)
}

.dex-tabs-content-holder::-webkit-scrollbar-corner {
  background-color: var(--dex-scrollbar-corner-bg)
}

.dex-tabs-nav-operations,
.dex-tabs-nav-operations .dex-tabs-nav-more,
.dex-tabs-nav-operations-hidden,
.dex-tabs-tabpane-hidden {
  display: none
}

.dex-tabs-card>.dex-tabs-nav {
  background-color: var(--dex-secondary-container-bg)
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
  border-top: 2px solid transparent;
  font-size: 16px;
  line-height: 20px;
  padding: 9px 30px;
  transition: background-color .3s
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:hover {
  background-color: var(--dex-component-background-color);
  transition: background-color .3s
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-active {
  background-color: var(--dex-primary-container-bg);
  border-top-color: var(--dex-primary-color);
  transition: background-color .3s
}

.dex-tabs-card>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-disabled:hover {
  background-color: unset
}

.dex-tabs-line>.dex-tabs-nav {
  position: relative
}

.dex-tabs-line>.dex-tabs-nav:before {
  border-bottom: 1px solid var(--dex-common-border-color);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  width: 100%
}

.dex-tabs-line>.dex-tabs-nav .dex-tabs-nav-list>.dex-tabs-ink-bar {
  background-color: var(--dex-primary-color);
  border-radius: 2px;
  bottom: 0;
  display: block;
  height: 2px;
  position: absolute
}

.dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
  font-size: 16px;
  line-height: 16px;
  margin-right: 24px;
  padding: 12px 0;
  white-space: nowrap
}

.dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:last-child {
  margin-right: 0
}

.dex-tabs-line>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-active {
  position: relative
}

.dex-tabs-tag {
  padding: 4px 0
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab {
  font-size: 12px;
  line-height: 16px;
  margin-right: 8px;
  padding: 4px 12px;
  transition: background-color .3s
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:hover {
  transition: background-color .3s
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab:last-child {
  margin-right: 0
}

.dex-tabs-tag>.dex-tabs-nav>.dex-tabs-nav-wrap>.dex-tabs-nav-list>.dex-tabs-tab.dex-tabs-tab-active {
  background-color: var(--dex-component-background-color);
  border-radius: 4px;
  position: relative;
  transition: background-color .3s
}

.vip {
  align-items: center;
  background: url(images/image_c6289c47d54773fa1d8167bee7908aa2f75f7592.png) no-repeat 0;
  background-size: 24px 24px;
  color: #c39635;
  display: flex;
  font-size: 10px;
  font-weight: 500;
  height: 24px;
  line-height: 12px;
  padding-left: 12px;
  position: relative
}

.vip .vip-level {
  color: var(--dexc-primary-font-color);
  font-size: 10px;
  font-weight: 700;
  left: 12px;
  line-height: 10px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%)
}

.vip .vip-levelName {
  align-items: center;
  border: 1px solid var(--dexc-warning-color);
  border-left: none;
  border-radius: 0 20px 20px 0;
  color: var(--dexc-warning-color);
  display: flex;
  font-size: 10px;
  font-weight: 500;
  height: 16px;
  padding: 0 8px 0 16px;
  transform: translate(-3px);
  width: 100%
}

.root-direction-green-dc99c8e7,
html[data-red-green-direction=green] {
  --up-color: var(--dexc-success-color);
  --up-color-hover: #007451;
  --up-color-fade10: rgba(var(--dexc-success-color-rgb), 10%);
  --down-color: var(--dexc-error-color);
  --down-color-hover: #bb2237;
  --down-color-fade10: rgba(var(--dexc-error-color-rgb), 10%)
}

.root-direction-red-e8373726,
html[data-red-green-direction=red] {
  --up-color: var(--dexc-error-color);
  --up-color-hover: #bb2237;
  --up-color-fade10: rgba(var(--dexc-error-color-rgb), 10%);
  --down-color: var(--dexc-success-color);
  --down-color-hover: #007451;
  --down-color-fade10: rgba(var(--dexc-success-color-rgb), 10%)
}

.settingPanelContainer-da188337 {
  height: 370px;
  overflow-y: scroll;
  width: 292px
}

.settingPanelContainer-da188337::-webkit-scrollbar {
  background-color: transparent;
  width: 4px
}

.settingPanelContainer-da188337::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: 20px
}

.settingPanelContainer-da188337 .dex-description {
  background-color: unset
}

.settingPanelContainer-da188337 .dex-description .dex-description-list-item {
  padding: 10px 0
}

.settingPanelContainer-da188337 .dex-description .dex-description-list-item .dex-description-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px
}

.settingPanelContainer-da188337 .dex-divider {
  margin-bottom: 20px;
  margin-top: 20px
}

.settingPanelContainer-da188337 .settingTitle-a07337ea {
  color: var(--dex-secondary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  padding: 10px 0
}

.layoutSetting-d2f6193d {
  padding: 8px 0
}

.layoutSetting-d2f6193d .radioGroup-b1a46088 {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.layoutSetting-d2f6193d .radioGroup-b1a46088 .radio-dca3d7af {
  cursor: pointer
}

.layoutSetting-d2f6193d .radioGroup-b1a46088 .illustration-fba78389 {
  border-radius: 4px;
  margin-top: 4px
}

.dex-radio-wrapper {
  --dex-radio-width: 16px;
  --dex-radio-inner-width: 6px;
  align-items: center;
  cursor: pointer;
  display: inline-flex
}

.dex-radio-wrapper .dex-radio {
  cursor: pointer;
  font-size: var(--dex-main-font-size);
  margin: 0;
  padding: 0;
  position: relative
}

.dex-radio-wrapper .dex-radio-input {
  box-sizing: border-box;
  cursor: pointer;
  height: 100%;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 1
}

.dex-radio-wrapper .dex-radio-inner {
  background-color: transparent;
  border-color: var(--dex-quaternary-font-color);
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  box-sizing: border-box;
  display: block;
  height: var(--dex-radio-width);
  inset-block-start: 0;
  inset-inline-start: 0;
  position: relative;
  transition: border-color .2s;
  width: var(--dex-radio-width)
}

.dex-radio-wrapper .dex-radio-checked .dex-radio-inner {
  border-color: var(--dexc-primary-font-color);
  border-width: 5px
}

.dex-radio-wrapper .dex-radio-disabled,
.dex-radio-wrapper .dex-radio-disabled .dex-radio-input {
  cursor: not-allowed
}

.dex-radio-wrapper .dex-radio-disabled .dex-radio-inner {
  background-color: var(--dex-input-disabled-bg);
  border-color: var(--dex-quaternary-font-color)
}

.dex-radio-wrapper .dex-radio-disabled+.dex-radio-label {
  cursor: not-allowed
}

.dex-radio-wrapper .dex-radio-disabled.dex-radio-checked .dex-radio-inner {
  background-color: transparent;
  border-color: var(--dex-quaternary-font-color)
}

.dex-radio-wrapper .dex-radio-label {
  color: var(--dex-primary-font-color);
  font-size: var(--dex-main-font-size);
  padding-left: 8px;
  padding-right: 8px
}

.dex-radio-wrapper:hover .dex-radio:not(.dex-radio-disabled) .dex-radio-inner {
  border-color: var(--dexc-primary-font-color)
}

.dex-radio-group {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.dex-radio-group-item {
  border-radius: 0;
  border-right-color: transparent
}

.dex-radio-group-item:first-child {
  border-radius: var(--dex-border-radius-mid) 0 0 var(--dex-border-radius-mid)
}

.dex-radio-group-item:last-child {
  border-radius: 0 var(--dex-border-radius-mid) var(--dex-border-radius-mid) 0
}

.dex-radio-group-item-active,
.dex-radio-group-item:last-child.dex-radio-group-item-active {
  border-color: var(--dexc-primary-font-color)
}

.dex-radio-group-size-small {
  --item-padding: 4px 8px;
  --item-font-size: 12px;
  --item-line-height: 12px
}

.dex-radio-group-size-mid {
  --item-padding: 4px 8px;
  --item-font-size: 12px;
  --item-line-height: 16px
}

.dex-radio-group-size-large {
  --item-padding: 4px 20px;
  --item-font-size: 14px;
  --item-line-height: 24px
}

.dex-radio-group-tag {
  background-color: var(--dex-component-background-color);
  border-radius: var(--dex-border-radius-mid);
  display: inline-flex;
  gap: 2px;
  padding: 2px
}

.dex-radio-group-tag-item {
  border-radius: var(--dex-border-radius-small);
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  flex: 1 1;
  font-size: var(--item-font-size);
  line-height: var(--item-line-height);
  padding: var(--item-padding);
  text-align: center;
  white-space: nowrap
}

.dex-radio-group-tag-item-active {
  background-color: var(--dex-primary-container-bg);
  color: var(--dex-primary-font-color)
}

.dex-radio-group-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%
}

.dex-radio-group-card-item {
  align-items: center;
  border: 1px solid var(--dex-common-border-color);
  border-radius: var(--dex-border-radius-large);
  cursor: pointer;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 16px 12px;
  width: 100%
}

.dex-radio-group-card-item-active {
  border-color: var(--dexc-primary-font-color)
}

.dex-radio-group-card-item-has-icon {
  align-items: flex-start;
  gap: 12px
}

.dex-radio-group-card-title {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
  padding: 0
}

.dex-radio-group-card-desc {
  color: var(--dex-secondary-font-color);
  font-size: 12px;
  line-height: normal;
  margin: 4px 0 0;
  padding: 0
}

.dex-radio-group-card-radio {
  align-self: center;
  margin-left: auto
}

.dex-dropdown {
  background-color: var(--dex-primary-container-color);
  border-radius: var(--dex-border-radius-mid);
  box-shadow: var(--dex-primary-box-shadow);
  left: -9999px;
  margin-top: 4px;
  position: absolute;
  top: -9999px;
  z-index: var(--dex-dropdown-zIndex)
}

.dex-dropdown-hidden {
  display: none
}

.dex-dropdown-trigger {
  align-items: center;
  color: var(--dexc-secondary-font-color);
  cursor: pointer;
  display: inline-flex;
  gap: 4px
}

.dex-dropdown-trigger-arrow {
  transform: rotate(180deg)
}

.dex-dropdown-trigger>.dex-button {
  padding-right: 4px
}

.dex-dropdown-open>.dex-button {
  color: var(--dexc-primary-font-color)
}

.dex-dropdown-overlay-list {
  background-color: var(--dex-primary-container-bg);
  border: 1px solid var(--dexc-base-border-color);
  border-radius: var(--dex-border-radius-mid);
  list-style: none;
  margin: 0;
  padding: 4px;
  width: 100%
}

.dex-dropdown-overlay-list-item {
  border-radius: var(--dex-border-radius-small);
  color: var(--dex-primary-font-color);
  cursor: pointer;
  font-weight: 400;
  overflow: hidden;
  transition: all .1s
}

.dex-dropdown-overlay-list-item:hover {
  background-color: var(--dexc-trade-component-bg-color);
  transition: all .3s
}

.dex-dropdown-small .dex-dropdown-overlay-list {
  min-width: 80px !important
}

.dex-dropdown-small .dex-dropdown-overlay-list-item {
  font-size: 12px;
  line-height: 16px;
  padding: 6px 12px;
  text-align: center
}

.dex-dropdown-mid .dex-dropdown-overlay-list {
  min-width: 88px !important
}

.dex-dropdown-mid .dex-dropdown-overlay-list-item {
  font-size: 14px;
  line-height: 20px;
  padding: 8px 12px;
  text-align: center
}

.dex-dropdown-large .dex-dropdown-overlay-list {
  min-width: 140px !important
}

.dex-dropdown-large .dex-dropdown-overlay-list-item {
  font-size: 14px;
  line-height: 20px;
  padding: 12px;
  text-align: left
}

.dex-description {
  background: var(--dex-primary-container-bg)
}

.dex-description-list-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 12px 16px
}

.dex-description-list-item .dex-description-label,
.dex-description-list-item .dex-description-value {
  color: var(--dex-primary-font-color);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px
}

.dex-description-list-item .dex-description-label.underline {
  cursor: pointer;
  -webkit-text-decoration: underline dashed;
  text-decoration: underline dashed;
  text-decoration-color: var(--dex-tertiary-font-color);
  text-underline-offset: 4px
}

.dex-description-list-item .dex-description-label {
  text-align: left
}

.dex-description-list-item .dex-description-value {
  text-align: right
}

html[data-theme=white] {
  --tips-color: #5e697a;
  --item-bg: #f7f9fb
}

html[data-theme=blue] {
  --tips-color: #7e8697;
  --item-bg: #1b1e28
}

.hadDom-b8ac3cc2 .tips-aa75db39 {
  color: var(--tips-color);
  font-size: 12px;
  margin-bottom: 16px
}

.hadDom-b8ac3cc2 .items-bdc05e82 {
  background: var(--item-bg);
  border-radius: var(--dex-border-radius-mid);
  padding: 8px 0
}

.hadDom-b8ac3cc2 .items-bdc05e82 .dex-description {
  background: transparent
}

.hadDom-b8ac3cc2 .items-bdc05e82 .dex-description-list-item {
  padding: 8px 16px
}

.hadDom-b8ac3cc2 .items-bdc05e82 .dex-description-label,
.hadDom-b8ac3cc2 .items-bdc05e82 .dex-description-value {
  font-size: 14px;
  font-weight: 400
}

.setingDom-ad6a4f17 .dex-date-picker {
  flex: 1 1
}

.setingDom-ad6a4f17 .dex-date-picker .dex-date-picker-input>input {
  text-align: center
}

.setingDom-ad6a4f17 .setingBody-a12f0419 {
  padding: 24px 0
}

.setingDom-ad6a4f17 .setingBody-a12f0419 .title-aa3c8acd {
  color: var(--dexc-primary-font-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px
}

.setingDom-ad6a4f17 .setingBody-a12f0419 .subTitle-f2a3092c {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  font-style: normal;
  line-height: 16px;
  margin-bottom: 16px
}

.setingDom-ad6a4f17 .setingBody-a12f0419 .setingItemBox-a1096a29 {
  border: 1px solid var(--dexc-common-border-color);
  border-radius: 4px;
  margin-bottom: 8px;
  padding: 12px
}

.setingDom-ad6a4f17 .setingBody-a12f0419 .setingItemBox-a1096a29 .setingItem-d7239b8b {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between
}

.setingDom-ad6a4f17 .setingBody-a12f0419 .dateBox-a84df2ff {
  display: flex;
  margin-top: 8px
}

.setingDom-ad6a4f17 .footer-af345d10 {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 24px
}

.setingDom-ad6a4f17 .footer-af345d10 .dex-button-primary {
  margin-left: 12px;
  padding: 12px 32px
}

.dex-date-picker-date-panel .dex-date-picker-body table.dex-date-picker-content {
  border-collapse: inherit
}

.setingDom-d4dbbbf8 .content-bf695762 {
  max-height: 400px;
  overflow-y: auto
}

.setingDom-d4dbbbf8 .setingRules-fa342459 {
  padding: 24px 0
}

.setingDom-d4dbbbf8 .setingRules-fa342459 .title-cd890ee9 {
  color: var(--dexc-primary-font-color);
  font-size: 14px
}

.setingDom-d4dbbbf8 .setingRules-fa342459 .rulesItem-a983e2f8 {
  font-size: 12px;
  margin-top: 12px
}

.setingDom-d4dbbbf8 .setingRules-fa342459 .rulesItem-a983e2f8 .link-c5fff40b {
  color: var(--dexc-primary-hover-color);
  cursor: pointer;
  vertical-align: middle
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 {
  margin-top: 24px
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table {
  margin-top: 12px
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table {
  border-bottom: 1px solid var(--dexc-common-border-color);
  border-collapse: separate;
  border-radius: 4px;
  border-right: 1px solid var(--dexc-common-border-color)
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table td,
.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table th {
  border-left: 1px solid var(--dexc-common-border-color);
  border-top: 1px solid var(--dexc-common-border-color)
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table tr:last-child td:first-child {
  border-bottom-left-radius: 4px
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table tr:last-child td:last-child {
  border-bottom-right-radius: 4px
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table th:first-child {
  border-top-left-radius: 4px
}

.setingDom-d4dbbbf8 .setingSymbol-e539aef1 .dex-table table th:last-child {
  border-top-right-radius: 4px
}

.setingDom-d4dbbbf8 .footer-f87b7bd0 {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 24px
}

.setingDom-d4dbbbf8 .footer-f87b7bd0 .dex-button {
  flex: 1 1
}

.priceProtectionModal-a4177ea8 {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  padding-bottom: 24px
}

.priceProtectionModal-a4177ea8 a {
  color: var(--dexc-primary-color)
}

.priceProtectionModal-a4177ea8 .contentTip-b4e15c3c {
  margin-top: 12px
}

.priceProtectionModal-a4177ea8 .dex-description-list-item {
  padding-left: 0;
  padding-right: 0
}

.priceProtectionModal-a4177ea8 .dex-description-list-item .dex-description-label,
.priceProtectionModal-a4177ea8 .dex-description-list-item .dex-description-value {
  font-size: 14px
}

.invite-dialog-content {
  padding-bottom: 14px
}

.title {
  border-bottom: 1px solid var(--dexc-dark-base-border-color);
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 12px;
  padding-bottom: 12px
}

.rate-dialog {
  --dex-table-thead-cell-padding: 16px 0 0 0;
  --dex-table-tbody-cell-padding: 10px 0 10px 0
}

.rate-dialog .dex-modal-content .dex-modal-body {
  padding: 0
}

.rate-dialog .dex-modal-content .dex-modal-body p {
  margin: 0 24px
}

.rate-dialog .dex-table table .dex-table-thead>tr>.dex-table-cell:nth-last-child(2) {
  padding-right: 24px
}

.rate-dialog .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell {
  font-size: 12px;
  line-height: 16px
}

.dex-table-wrapper {
  --dex-table-bg: var(--dex-trade-bg);
  --dex-table-thead-bg: var(--dex-table-bg);
  --dex-table-expand-row-bg: var(--dex-table-bg);
  --dex-table-hover-bg: var(--dex-table-bg);
  background-color: var(--dex-table-bg)
}

.dex-table {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  min-height: var(--dex-table-min-height);
  overflow: auto;
  padding: 0;
  position: relative
}

.dex-table .dex-table-header {
  position: sticky
}

.dex-table .dex-table-body::-webkit-scrollbar {
  height: var(--dex-scrollbar-width);
  width: var(--dex-scrollbar-width)
}

.dex-table .dex-table-body::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: var(--dex-scrollbar-redius)
}

.dex-table .dex-table-body::-webkit-scrollbar-track {
  background-color: var(--dex-scrollbar-track-bg)
}

.dex-table .dex-table-body::-webkit-scrollbar-corner {
  background-color: var(--dex-scrollbar-corner-bg)
}

.dex-table .dex-table-content::-webkit-scrollbar {
  height: var(--dex-scrollbar-width);
  width: var(--dex-scrollbar-width)
}

.dex-table .dex-table-content::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: var(--dex-scrollbar-redius)
}

.dex-table .dex-table-content::-webkit-scrollbar-track {
  background-color: var(--dex-scrollbar-track-bg)
}

.dex-table .dex-table-content::-webkit-scrollbar-corner {
  background-color: var(--dex-scrollbar-corner-bg)
}

.dex-table table {
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  width: 100%
}

.dex-table table .dex-table-thead {
  background-color: var(--dex-table-bg)
}

.dex-table table .dex-table-thead>tr>.dex-table-cell:first-child {
  padding-left: var(--dex-table-cell-first-last-padding)
}

.dex-table table .dex-table-thead>tr>.dex-table-cell:last-child {
  padding-right: var(--dex-table-cell-first-last-padding)
}

.dex-table table .dex-table-thead>tr>.dex-table-cell {
  background-color: var(--dex-table-bg);
  color: var(--dex-secondary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: var(--dex-table-thead-cell-padding);
  text-align: left;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.dex-table table .dex-table-thead th.dex-table-cell:last-of-type {
  text-align: right
}

.dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:first-child {
  padding-left: var(--dex-table-cell-first-last-padding)
}

.dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:last-child {
  padding-right: var(--dex-table-cell-first-last-padding)
}

.dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell {
  background-color: var(--dex-table-bg);
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  padding: var(--dex-table-tbody-cell-padding);
  transition: background-color .3s
}

.dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:last-child {
  text-align: right
}

.dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell-row-hover {
  background-color: var(--dex-table-hover-bg);
  transition: background-color .3s
}

.dex-table table .dex-table-tbody>.dex-table-row-hover {
  background-color: var(--dex-table-hover-bg)
}

.dex-table table .dex-table-tbody .dex-table-expanded-row {
  background-color: var(--dex-table-expand-row-bg)
}

.dex-table table .dex-table-tbody .dex-table-expanded-row-by-click {
  cursor: pointer
}

.dex-table table .dex-table-row-expand-icon-cell {
  display: none
}

.dex-table-pagination-wrapper {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px;
  width: 100%
}

.dex-table-extra-tip {
  justify-content: space-between
}

.dex-table-sort-title {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: flex-start
}

.dex-table-sort-icon {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-content: center;
  margin-left: 7px
}

.dex-table-placeholder .dex-empty {
  margin: 100px 0 152px
}

.dex-table-cell-fix-left,
.dex-table-cell-fix-right {
  z-index: 2
}

.dex-table-row-hover.dex-table-cell-fix-left,
.dex-table-row-hover.dex-table-cell-fix-right {
  background-color: unset
}

.dex-table-ping-right .dex-table-cell-fix-right-first:after {
  box-shadow: inset -10px 0 8px -8px #00000026
}

.dex-table-cell-fix-right-first:after {
  bottom: -1px;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-100%);
  transition: box-shadow .3s;
  width: 30px
}

.dex-table-ping-left .dex-table-cell-fix-left-last:after {
  box-shadow: inset 10px 0 8px -8px #00000026
}

.dex-table-cell-fix-left-last:after {
  bottom: -1px;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%);
  transition: box-shadow .3s;
  width: 30px
}

.dex-table-bordered .dex-table-container {
  border: .5px solid var(--dex-common-border-color);
  border-radius: var(--dex-border-radius-large);
  overflow: hidden
}

.dex-table-bordered table {
  border-collapse: collapse;
  border-style: hidden
}

.dex-table-bordered table .dex-table-tbody>.dex-table-row>.dex-table-cell,
.dex-table-bordered table .dex-table-thead>tr>.dex-table-cell {
  border: .5px solid var(--dex-common-border-color)
}

.dex-empty {
  margin: 0 auto;
  text-align: center
}

.dex-empty .dex-empty-icon {
  display: inline-block
}

.dex-empty .dex-empty-desc {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  line-height: 16px;
  margin-top: 16px
}

.dex-pagination {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  font-size: 14px;
  justify-content: flex-start;
  list-style: none;
  margin: 0;
  padding: 0
}

.dex-pagination .dex-pagination-prev {
  align-items: center;
  display: inline-flex;
  justify-content: center
}

.dex-pagination .dex-pagination-prev .dex-arrow-right-icon {
  transform: rotate(180deg);
  transform-origin: center
}

.dex-pagination .dex-pagination-next,
.dex-pagination .dex-pagination-prev {
  background-color: var(--dexc-trade-primary-container-bg)
}

.dex-pagination .dex-pagination-next.dex-pagination-disabled,
.dex-pagination .dex-pagination-prev.dex-pagination-disabled {
  pointer-events: none
}

.dex-pagination .dex-pagination-item,
.dex-pagination .dex-pagination-jump-next,
.dex-pagination .dex-pagination-jump-prev,
.dex-pagination .dex-pagination-next,
.dex-pagination .dex-pagination-prev {
  border-radius: var(--dex-border-radius-small);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 24px;
  line-height: 20px;
  margin-right: 4px;
  min-width: 24px;
  padding: 2px 8px;
  text-align: center;
  transition: all .3s
}

.dex-pagination .dex-pagination-item:hover,
.dex-pagination .dex-pagination-jump-next:hover,
.dex-pagination .dex-pagination-jump-prev:hover,
.dex-pagination .dex-pagination-next:hover,
.dex-pagination .dex-pagination-prev:hover {
  background-color: var(--dexc-trade-divider-color);
  color: var(--dex-primary-font-color);
  transition: backgroundColor .3s
}

.dex-pagination>:last-child {
  margin-right: 0
}

.dex-pagination .dex-pagination-item {
  color: var(--dex-secondary-font-color);
  font-weight: 400;
  transition: all .3s
}

.dex-pagination .dex-pagination-item-active {
  background-color: var(--dexc-trade-divider-color);
  color: var(--dex-primary-font-color);
  transition: backgroundColor .3s
}

.dex-pagination .dex-pagination-next {
  align-items: center;
  display: inline-flex;
  justify-content: center
}

.dex-pagination .dex-pagination-jump-next {
  padding: 2px 6px
}

.dex-pagination .dex-pagination-jump-next:hover {
  font-weight: 400
}

.dex-pagination .dex-pagination-jump-next .dex-pagination-jump-link {
  border: none
}

.dex-pagination .dex-pagination-jump-next-custom-icon,
.dex-pagination .dex-pagination-jump-prev-custom-icon {
  color: var(--dex-secondary-font-color)
}

.dex-pagination-overlay {
  background-color: var(--dex-primary-container-bg);
  border-radius: var(--dex-border-radius-small);
  box-shadow: var(--dex-primary-box-shadow);
  padding: 4px
}

.dex-pagination-overlay-item {
  color: var(--dex-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 6px auto;
  text-align: center;
  width: 72px
}

.dex-pagination-sizes-overlay {
  --dex-pagination-max-num: 6;
  max-height: calc(var(--dex-pagination-max-num)*28px + 2px);
  overflow: auto
}

.dex-tip-text {
  color: var(--dexc-dark-secondary-font-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-decoration: underline;
  text-decoration-color: var(--dexc-dark-secondary-font-color);
  text-decoration-style: dashed;
  text-underline-offset: 4px
}

.footer {
  background-color: var(--dexc-footer-bg);
  color: var(--dexc-dark-primary-font-color);
  min-width: 1200px;
  width: 100%
}

.footer .footer-container {
  margin: 0 auto;
  padding: 80px 0 0;
  width: 1200px
}

.footer .footer-container .footer-main {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px
}

.footer .footer-container .footer-main .footer-brand {
  flex: 1 1;
  width: 420px
}

.footer .footer-container .footer-main .footer-brand .brand-logo img {
  height: 54px;
  position: relative;
  top: -10px;
  width: 184px
}

.footer .footer-container .footer-main .footer-brand .brand-tagline {
  color: var(--dexc-footer-font-color);
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 26px;
  margin: 30px 0 12px
}

.footer .footer-container .footer-main .footer-brand .brand-slogan {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  opacity: .6
}

.footer .footer-container .footer-main .footer-brand .contact-email {
  align-items: center;
  color: var(--dexc-dark-primary-font-color);
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  margin-top: 56px
}

.footer .footer-container .footer-main .footer-brand .contact-email img {
  height: 14px;
  margin-right: 8px;
  width: 14px
}

.footer .footer-container .footer-main .footer-nav {
  display: flex;
  gap: 60px;
  margin: 0 40px
}

.footer .footer-container .footer-main .footer-nav .nav-column {
  margin-right: 16px;
  width: 200px
}

.footer .footer-container .footer-main .footer-nav .nav-column:last-of-type {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-right: 0
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 14px;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 8px
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-links li {
  margin-bottom: 8px
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-links li a {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px
}

.footer .footer-container .footer-main .footer-nav .nav-column .nav-links li a:hover {
  color: var(--dexc-dark-primary-font-color)
}

.footer .footer-container .footer-main .scroll-to-top {
  bottom: 166px;
  cursor: pointer;
  opacity: 1;
  position: fixed;
  right: calc(50% - 576px);
  transform: translateY(0);
  transition: all .3s ease;
  z-index: 99999
}

.footer .footer-container .footer-main .scroll-to-top .scroll-button {
  align-items: center;
  background-color: var(--dexc-footer-up-to-top-bg);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
  cursor: pointer;
  display: flex;
  height: 48px;
  justify-content: center;
  transition: all .3s ease;
  width: 48px
}

.footer .footer-container .footer-main .scroll-to-top .scroll-button:hover {
  background-color: var(--dexc-footer-up-to-top-bg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  transform: translateY(-2px)
}

.footer .footer-container .footer-main .scroll-to-top .scroll-button img {
  height: 24px;
  width: 24px
}

.footer .footer-container .footer-bottom {
  padding-bottom: 40px
}

.footer .footer-container .footer-bottom .footer-divider {
  background-color: var(--dexc-pure-white-color);
  height: 1px;
  margin-bottom: 56px;
  opacity: .2
}

.footer .footer-container .footer-bottom .footer-bottom-content {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.footer .footer-container .footer-bottom .footer-bottom-content .copyright {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media {
  display: flex
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a {
  align-items: center;
  background-color: var(--dexc-dark-component-bg-color);
  border-radius: 50%;
  display: flex;
  height: 40px;
  justify-content: center;
  margin-left: 16px;
  text-decoration: none;
  transition: all .3s ease;
  width: 40px
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a img {
  height: 24px;
  width: 24px
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a:hover {
  background-color: var(--dexc-footer-icon-hover-bg);
  transform: translateY(-2px)
}

.footer .footer-container .footer-bottom .footer-bottom-content .social-media a span {
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  font-weight: 500
}

.footer-m {
  min-width: 100%
}

.footer-m .footer-container {
  padding: 32px 24px 80px;
  width: 100%
}

.footer-m .footer-container .footer-main {
  display: block;
  margin-bottom: 16px
}

.footer-m .footer-container .footer-main .footer-brand {
  width: 100%
}

.footer-m .footer-container .footer-main .footer-brand .brand-logo {
  text-align: center
}

.footer-m .footer-container .footer-main .footer-brand .brand-logo img {
  height: auto;
  width: 110px
}

.footer-m .footer-container .footer-main .footer-brand .brand-slogan,
.footer-m .footer-container .footer-main .footer-brand .brand-tagline,
.footer-m .footer-container .footer-main .footer-brand .nav-links {
  display: none
}

.footer-m .footer-container .footer-main .footer-brand .contact-email {
  gap: 8px;
  justify-content: center;
  margin-top: 0
}

.footer-m .footer-container .footer-bottom .footer-divider,
.footer-m .footer-container .footer-main .footer-nav {
  display: none
}

.footer-m .footer-container .footer-bottom .footer-bottom-content {
  display: block
}

.footer-m .footer-container .footer-bottom .footer-bottom-content .copyright {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px;
  text-align: center
}

.footer-m .footer-container .footer-bottom .footer-bottom-content .social-media {
  justify-content: center;
  padding-top: 16px
}

.sub-wrap {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  padding-top: 47px
}

.sub-wrap .sub-wrap-content {
  color: #fff;
  display: flex;
  height: 34px;
  margin: auto;
  position: relative;
  width: 1320px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-title {
  align-items: center;
  display: flex;
  padding-bottom: 12px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-title img {
  height: 20px;
  width: 20px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-title span {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-left: 12px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap {
  display: flex;
  margin-left: 40px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap .btn-selected {
  border-bottom-color: var(--dexc-primary-color);
  color: #fff
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #87a2cd;
  display: inline-block;
  font-size: 14px;
  margin-left: 40px
}

.sub-wrap .sub-wrap-content .sub-wrap-content-btn-wrap a span {
  display: inline-block;
  font-weight: 500;
  height: 14px;
  line-height: 10px
}

.tooltip-new {
  display: inline-block;
  position: relative
}

.tooltip-popup {
  display: flex;
  flex-direction: column;
  opacity: 0;
  position: absolute;
  z-index: 901
}

.tooltip-popup .tooltip-popup-blue-font {
  color: var(--dexc-white-primary-color)
}

.tooltip-popup .tooltip-popup-arrow {
  background-color: transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  display: inline-block;
  height: 0;
  width: 0
}

.tooltip-popup .tooltip-popup-arrow-top {
  border-top: 5px solid #fff
}

.tooltip-popup .tooltip-popup-arrow-bottom {
  border-bottom: 5px solid #fff
}

.tooltip-popup .tooltip-popup-arrow-left {
  border-bottom: 5px solid transparent;
  border-left: 5px solid #fff;
  border-top: 5px solid transparent;
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%) !important
}

.tooltip-popup .tooltip-popup-arrow-right {
  border: 5px solid transparent;
  border-left: none;
  border-right-color: #fff;
  left: -5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) !important
}

.tooltip-popup .tooltip-popup-tip {
  color: #000;
  display: inline-block;
  font-size: 12px;
  width: 208px;
  word-wrap: break-word;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  box-sizing: border-box;
  font-style: normal;
  padding: 10px;
  text-align: left
}

.tooltip-popup .tooltip-popup-tip-auto {
  white-space: nowrap;
  width: auto
}

.tooltip-popup-open {
  opacity: 1
}

.tooltip-popup-left .tooltip-popup-arrow {
  margin-left: 10px
}

.tooltip-popup-middle {
  transform: translateX(-50%)
}

.tooltip-popup-middle .tooltip-popup-arrow {
  margin-left: 50%;
  transform: translateX(-50%)
}

.tooltip-popup-direction-left .tooltip-popup-arrow,
.tooltip-popup-direction-right .tooltip-popup-arrow {
  margin-left: unset
}

.tooltip-popup-right .tooltip-popup-arrow {
  margin-left: calc(100% - 20px)
}

.blue-font {
  color: var(--dexc-primary-hover-color)
}

.layout-bb2281db {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: inherit;
  --layout-margin: 8px;
  --2x-layout-margin: calc(var(--layout-margin)*2);
  --3x-layout-margin: calc(var(--layout-margin)*3);
  --4x-layout-margin: calc(var(--layout-margin)*4)
}

.layout-bb2281db .box-d159b4f3 {
  background-color: var(--dexc-dark-trade-bg);
  border: 1px solid var(--dexc-dark-base-border-color)
}

.layout-bb2281db .box-d159b4f3:not(.footer-d6972fcb) {
  border-radius: var(--dex-border-radius-xl);
  overflow: hidden
}

.classicLayout-ba638505 {
  --layout-contract-list-h: 560px;
  --layout-contract-list-w: 320px;
  --layout-assets-w: 320px;
  --layout-assets-h: 467px;
  --layout-chart-h: 560px;
  --layout-bidask-w: 280px;
  --layout-deal-w: 280px;
  --layout-footer-h: 24px;
  --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-deal-w) - var(--layout-contract-list-w) - var(--4x-layout-margin));
  --layout-chart-min-w: calc(var(--trade-page-min-screen-width) - var(--layout-bidask-w) - var(--layout-contract-list-w) - var(--4x-layout-margin));
  --layout-order-h: 467px;
  --layout-order-w: var(--layout-chart-w);
  --layout-order-min-w: var(--layout-chart-min-w);
  --layout-transaction-panel-min-h: 500px;
  --layout-transaction-panel-h: calc(100vh - var(--layout-chart-h) - var(--layout-order-h) - var(--dex-header-height) - var(--layout-footer-h) - var(--3x-layout-margin));
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px
}

.classicLayout-ba638505 .top-c18336c7 {
  display: flex;
  gap: var(--layout-margin);
  margin-left: var(--layout-margin);
  margin-right: var(--layout-margin)
}

.classicLayout-ba638505 .top-c18336c7 .t1-f30ce0e2 {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.classicLayout-ba638505 .top-c18336c7 .t2-c8594ea8 {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 4px
}

.classicLayout-ba638505 .contractList-b517fbb3 {
  transition: height .3s
}

.classicLayout-ba638505 .contractList-b517fbb3.expanded-f8db2c05 {
  height: calc(var(--layout-contract-list-h) + var(--layout-assets-h) - 40px)
}

.classicLayout-ba638505 .assetsInfo-fd796e29 {
  overflow: visible !important;
  transition: height .3s
}

.classicLayout-ba638505 .assetsInfo-fd796e29.collapsed-ffa5a79b {
  height: 40px
}

.classicLayout-ba638505 .transactionPanel-ea956296 {
  height: var(--layout-transaction-panel-h);
  margin-left: var(--layout-margin);
  margin-right: var(--layout-margin)
}

.classicLayout-ba638505 .bidask-e363683c,
.classicLayout-ba638505 .dealDetail-bcbcde52 {
  max-height: calc(var(--layout-chart-h) + var(--layout-order-h) + var(--layout-margin))
}

.classicLayout-ba638505 .footer-d6972fcb {
  position: sticky
}

.classicLayout-ba638505 .dex-slider-wrapper {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.classicLayout-ba638505.combined-d8492a3b {
  --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-contract-list-w) - var(--3x-layout-margin))
}

.proLayout-d8c0c56d {
  --layout-assets-w: 280px;
  --layout-chart-h: 600px;
  --layout-order-h: 600px;
  --layout-order-w: 280px;
  --layout-bidask-w: 280px;
  --layout-bidask-h: 600px;
  --layout-deal-w: 280px;
  --layout-deal-h: 600px;
  --layout-footer-h: 24px;
  --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-deal-w) - var(--layout-deal-w) - var(--4x-layout-margin));
  --layout-transaction-panel-min-h: 500px;
  --layout-assets-min-h: var(--layout-transaction-panel-min-h);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: var(--layout-footer-h)
}

.proLayout-d8c0c56d .top-c18336c7 {
  display: flex;
  flex: 1 1;
  flex-direction: row;
  gap: var(--layout-margin);
  margin: var(--layout-margin)
}

.proLayout-d8c0c56d .top-c18336c7 .topLeft-a9d4e7de {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: var(--layout-margin)
}

.proLayout-d8c0c56d .top-c18336c7 .topLeft-a9d4e7de .topLeftTop-bbc517ca {
  display: flex;
  gap: var(--layout-margin)
}

.proLayout-d8c0c56d .top-c18336c7 .topRight-ab8caa4c {
  display: flex;
  flex-direction: column;
  gap: var(--layout-margin)
}

.proLayout-d8c0c56d .assetsInfo-fd796e29,
.proLayout-d8c0c56d .chart-c89a8f63 {
  flex: 1 1
}

.proLayout-d8c0c56d .transactionPanel-ea956296 {
  flex: 1 1;
  max-height: calc(var(--trade-page-min-height) - var(--3x-layout-margin) - var(--layout-footer-h) - var(--layout-chart-h));
  max-width: calc(100vw - var(--layout-assets-w) - var(--layout-margin));
  min-width: calc(var(--trade-page-min-screen-width) - var(--layout-assets-w) - var(--layout-margin))
}

.proLayout-d8c0c56d .footer-d6972fcb {
  position: fixed
}

.proLayout-d8c0c56d.combined-d8492a3b {
  --layout-chart-w: calc(100vw - var(--layout-bidask-w) - var(--layout-order-w) - var(--4x-layout-margin))
}

.contractList-b517fbb3 {
  height: var(--layout-contract-list-h);
  width: var(--layout-contract-list-w)
}

.assetsInfo-fd796e29 {
  height: var(--layout-assets-h);
  min-height: var(--layout-assets-min-h);
  width: var(--layout-contract-list-w)
}

.chart-c89a8f63 {
  height: var(--layout-chart-h);
  min-width: var(--layout-chart-min-w);
  width: var(--layout-chart-w)
}

.orderBoard-b3bc0b61 {
  height: var(--layout-order-h);
  min-width: var(--layout-order-min-w);
  overflow-y: auto !important;
  width: var(--layout-order-w)
}

.proHideAssets-bdc6aab6 {
  height: calc(var(--layout-order-h) + var(--layout-assets-min-h) + 4px)
}

.classicHideAssets-c7831d50 {
  height: calc(var(--layout-contract-list-h) + var(--layout-assets-h) + 4px)
}

.bidask-e363683c {
  height: var(--layout-bidask-h);
  width: var(--layout-bidask-w)
}

.dealDetail-bcbcde52 {
  height: var(--layout-deal-h);
  width: var(--layout-deal-w)
}

.transactionPanel-ea956296 {
  min-height: var(--layout-transaction-panel-min-h)
}

.footer-d6972fcb {
  bottom: 0;
  height: var(--layout-footer-h);
  left: 0;
  width: 100vw;
  z-index: 10
}

.tradePage-dd3e50e5 {
  --trade-page-min-screen-width: 1280px;
  --dex-input-disabled-bg: var(--dexc-trade-input-disabled-bg);
  --dex-component-background-color: var(--dexc-secondary-container-bg);
  --dex-primary-container-bg: var(--dexc-trade-primary-container-bg);
  --dex-secondary-container-bg: var(--dexc-trade-secondary-container-bg);
  --trade-page-min-height: calc(100vh - var(--dex-header-height));
  background-color: var(--dexc-trade-bg);
  min-height: var(--trade-page-min-height);
  min-width: var(--trade-page-min-screen-width);
  width: 100vw
}

.dex-space {
  display: flex
}

.dex-space-align-start {
  align-items: flex-start
}

.dex-space-align-center {
  align-items: center
}

.dex-space-align-end {
  align-items: flex-end
}

.dex-space-align-baseline {
  align-items: baseline
}

.dex-space-justify-start {
  justify-content: flex-start
}

.dex-space-justify-center {
  justify-content: center
}

.dex-space-justify-end {
  justify-content: flex-end
}

.dex-space-justify-between {
  justify-content: space-between
}

.dex-space-justify-around {
  justify-content: space-around
}

.dex-space-horizontal {
  flex-direction: row
}

.dex-space-vertical {
  flex-direction: column
}

.dex-space-wrap {
  flex-wrap: wrap
}

.dex-alert {
  align-items: flex-start;
  border-radius: 8px;
  display: flex;
  justify-content: flex-start;
  padding: 8px 12px;
  position: relative
}

.dex-alert-icon {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-right: 8px;
  padding-top: 1px;
  width: 12px
}

.dex-alert-content {
  text-align: left
}

.dex-alert-content .dex-alert-title {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  margin-bottom: 4px
}

.dex-alert-content .dex-alert-message {
  color: var(--dex-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.dex-alert-close-icon {
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 10px;
  width: 12px
}

.dex-alert-centered {
  justify-content: center
}

.dex-alert-hidden {
  display: none
}

.dex-alert-closable {
  padding-right: 30px
}

.dex-alert-warning {
  background-color: var(--dex-alert-warning-background-color)
}

.dex-alert-info {
  background-color: var(--dexc-trade-component-bg-color)
}

.dex-alert-success {
  background-color: var(--dex-alert-success-background-color)
}

.dex-alert-error {
  background-color: var(--dex-alert-error-background-color)
}

@font-face {
  font-family: swiper-icons;
  font-style: normal;
  font-weight: 400;
  src: url("assets/asset_2f0309d7fe92d81bb9d17d8382747c5001ce3520.woff")
}

:root {
  --swiper-theme-color: #007aff
}

.swiper {
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column
}

.swiper-wrapper {
  box-sizing: content-box;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
  z-index: 1
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0)
}

.swiper-pointer-events {
  touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x
}

.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
  backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-css-mode>.swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
  margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
  margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper:before {
  height: var(--swiper-centered-offset-after);
  min-width: 1px;
  width: 100%
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: center center;
  scroll-snap-stop: always
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
  height: 1px;
  width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
  height: var(--swiper-virtual-size);
  width: 1px
}

:root {
  --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
  align-items: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  cursor: pointer;
  display: flex;
  height: var(--swiper-navigation-size);
  justify-content: center;
  margin-top: calc(0px - var(--swiper-navigation-size)/2);
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size)/44*27);
  z-index: 10
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  cursor: auto;
  opacity: .35;
  pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  cursor: auto;
  opacity: 0;
  pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  font-variant: normal;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none !important
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  left: auto;
  right: 10px
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "next"
}

.swiper-button-lock {
  display: none
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity .3s;
  z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%
}

.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(.33)
}

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: 50%;
  display: inline-block;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

button.swiper-pagination-bullet {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer
}

.swiper-pagination-bullet:only-child {
  display: none !important
}

.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  display: block;
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, right .2s
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, .25);
  position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  transform-origin: left top;
  width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: 4px;
  left: 0;
  top: 0;
  width: 100%
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
  height: 100%;
  left: 0;
  top: 0;
  width: 4px
}

.swiper-pagination-lock {
  display: none
}

.swiper-scrollbar {
  background: rgba(0, 0, 0, .1);
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  bottom: 3px;
  height: 5px;
  left: 1%;
  position: absolute;
  width: 98%;
  z-index: 50
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
  height: 98%;
  position: absolute;
  right: 3px;
  top: 1%;
  width: 5px;
  z-index: 50
}

.swiper-scrollbar-drag {
  background: rgba(0, 0, 0, .5);
  border-radius: 10px;
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%
}

.swiper-scrollbar-cursor-drag {
  cursor: move
}

.swiper-scrollbar-lock {
  display: none
}

.swiper-zoom-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain
}

.swiper-slide-zoomed {
  cursor: move
}

.swiper-lazy-preloader {
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top: 4px solid transparent;
  box-sizing: border-box;
  height: 42px;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
  position: absolute;
  top: 50%;
  transform-origin: 50%;
  width: 42px;
  z-index: 10
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.swiper .swiper-notification {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
  margin: 0 auto;
  transition-timing-function: ease-out
}

.swiper-grid>.swiper-wrapper {
  flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
  flex-direction: column;
  flex-wrap: wrap
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-cube {
  overflow: visible
}

.swiper-cube .swiper-slide {
  backface-visibility: hidden;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
  visibility: hidden;
  width: 100%;
  z-index: 1
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next+.swiper-slide,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
  backface-visibility: hidden;
  z-index: 0
}

.swiper-cube .swiper-cube-shadow {
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: .6;
  position: absolute;
  width: 100%;
  z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
  background: #000;
  bottom: 0;
  content: "";
  filter: blur(50px);
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.swiper-flip {
  overflow: visible
}

.swiper-flip .swiper-slide {
  backface-visibility: hidden;
  pointer-events: none;
  z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
  backface-visibility: hidden;
  z-index: 0
}

.swiper-creative .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height
}

.swiper-cards {
  overflow: visible
}

.swiper-cards .swiper-slide {
  backface-visibility: hidden;
  overflow: hidden;
  transform-origin: center bottom
}

.footerBarInner-cda7df96 {
  align-items: center;
  background-color: var(--dex-trade-primary-container-bg);
  border-top: 1px solid var(--dexc-common-border-color);
  color: var(--dexc-primary-font-color);
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  padding: 2px 16px;
  width: 100%
}

.seleSelectBox-de0e3cea {
  align-items: center;
  display: flex;
  flex: 1 1;
  width: 60%
}

.changeBox-aeead338 {
  border-radius: 4px;
  display: inline-flex;
  margin-right: 8px;
  position: relative;
  vertical-align: middle
}

.changeBox-aeead338 .dex-setting-2-icon {
  cursor: pointer
}

.changeBox-aeead338 .changeDataListBox-fac2e292 {
  background-color: var(--dex-trade-primary-container-bg);
  bottom: 22px;
  box-shadow: 0 2px 8px 0 rgba(28, 36, 44, .1);
  position: absolute;
  width: -moz-max-content;
  width: max-content
}

.changeBox-aeead338 .changeDataListBox-fac2e292 .changeMark-ec49d635 {
  background: transparent;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0
}

.changeBox-aeead338 .changeDataListBox-fac2e292 .changeDataList-c3337cf8 {
  background-color: var(--dex-trade-primary-container-bg);
  padding: 4px;
  position: relative;
  z-index: 10
}

.changeBox-aeead338 .changeDataListBox-fac2e292 .changeItem-f92f1d1f {
  cursor: pointer;
  padding: 10px 12px
}

.changeBox-aeead338 .changeDataListBox-fac2e292 .changeItem-f92f1d1f.selected-ab2c6c71 {
  color: var(--dexc-primary-color)
}

.changeBox-aeead338 .changeDataListBox-fac2e292 .changeItem-f92f1d1f:hover {
  background: var(--dexc-secondary-container-bg)
}

.hotSerachData-f23ab97f {
  display: inline-flex;
  line-height: 20px
}

.swiper {
  margin-left: 0
}

.swiper-slide {
  width: auto
}

.contractElements-f971b349 {
  color: var(--dexc-primary-font-color);
  cursor: pointer;
  line-height: 16px
}

.contractElements-f971b349:hover {
  color: var(--dexc-secondary-font-color)
}

.contractElements-f971b349:before,
.seleSelectBox-de0e3cea:before {
  border-left: 1px solid var(--dexc-common-border-color);
  border-radius: 1px;
  content: "";
  display: inline-block;
  height: 10px;
  margin: 0 14px;
  vertical-align: middle;
  width: 0
}

.seleSelectData-b6d5c883 {
  display: inline-flex;
  width: calc(100% - 64px)
}

.seleSelectData-b6d5c883 .seleSelectDataItem-dadabf4b {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center
}

.seleSelectData-b6d5c883 .seleSelectDataItem-dadabf4b:after {
  border-left: 1px solid var(--dexc-common-border-color);
  border-radius: 1px;
  content: "";
  display: inline-block;
  height: 10px;
  margin-left: 16px;
  width: 0
}

.seleSelectData-b6d5c883 .seleSelectDataItem-dadabf4b .seleSelectDataItemName-f622f0e8 {
  color: var(--dexc-secondary-font-color);
  display: inline-flex;
  gap: 4px
}

.seleSelectData-b6d5c883 .seleSelectDataItem-dadabf4b .seleSelectDataItemRise-dd588cca.up-ee909b5d {
  color: var(--dex-buy-color)
}

.seleSelectData-b6d5c883 .seleSelectDataItem-dadabf4b .seleSelectDataItemRise-dd588cca.down-b236bb7d {
  color: var(--dex-sell-color)
}

.seleSelectData-b6d5c883 .seleSelectDataItem-dadabf4b.last-dbb92907:after {
  display: none
}

.galaxy-container {
  background-color: #080808 !important;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%
}

.galaxy-container canvas {
  background-color: #080808 !important;
  display: block;
  height: 100% !important;
  left: 0;
  position: absolute;
  top: 0;
  width: 100% !important
}

.galaxy-container .galaxy-unload-overlay {
  background-color: #080808 !important;
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 9999
}

.split-text-container {
  backface-visibility: hidden;
  color: var(--dexc-dark-primary-font-color);
  font-size: 72px;
  font-weight: 500;
  line-height: 94px;
  margin: 0 auto;
  opacity: 0;
  text-align: center;
  transform: translateZ(0);
  visibility: hidden;
  width: 1200px;
  will-change: transform, opacity;
  z-index: 99
}

.galaxy-part-container,
.galaxy-slot {
  background-color: var(--dexc-dark-primary-bg-color)
}

.galaxy-slot {
  width: 100%
}

.galaxy-slot img {
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important;
  height: 540px;
  image-rendering: auto;
  left: 50%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  position: absolute;
  top: -65px;
  transform: translateX(-50%);
  visibility: visible;
  width: 540px;
  will-change: auto;
  z-index: 88
}

.galaxy-slot .content-text {
  position: absolute;
  text-align: center;
  top: 227px;
  width: 100%;
  z-index: 99
}

.galaxy-slot .content-text .desc {
  color: var(--dexc-dark-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  margin: 40px 0
}

.galaxy-slot .content-text .btn {
  background: var(--dexc-dark-primary-color);
  border-radius: 30px;
  color: var(--dexc-dark-primary-font-color);
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  padding: 16.5px 14px 16.5px 27px;
  text-align: center
}

.galaxy-slot .content-text .btn:hover {
  background: var(--dexc-dark-primary-hover-color)
}

.galaxy-slot .content-text .btn>div {
  align-items: center;
  display: flex
}

.galaxy-slot .content-text .btn span {
  align-items: center;
  background-color: var(--dexc-dark-primary-font-color);
  border-radius: 50%;
  display: flex;
  height: 28px;
  justify-content: center;
  margin-left: 16px;
  width: 28px
}

.galaxy-slot .content-text .btn span i {
  color: var(--dexc-white-primary-font-color);
  font-size: 12px
}

.galaxy-slot .container-content {
  background-color: var(--dexc-dark-primary-bg-color);
  bottom: 126px;
  color: var(--dexc-dark-primary-font-color);
  font-weight: 500;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 1200px;
  z-index: 99
}

.galaxy-slot .container-content span {
  display: block;
  font-size: 16px;
  margin-bottom: 16px
}

.galaxy-slot .container-content p {
  font-size: 44px;
  font-weight: 500;
  line-height: 54px
}

.galaxy-slot .container-content .text-center {
  position: relative
}

.galaxy-slot .container-content .text-center:after {
  background-color: var(--dexc-white-tertiary-font-color);
  content: "";
  display: inline-block;
  height: 40px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px
}

.galaxy-slot .container-content .text-center:last-of-type:after {
  display: none
}

:root {
  --hue: 27;
  --sat: 69%;
  --white: #fff;
  --purple-primary: #8400ff;
  --purple-glow: rgba(132, 0, 255, .2);
  --purple-border: rgba(132, 0, 255, .8);
  --border-color: #392e4e;
  --background-dark: #060010;
  color-scheme: light dark
}

.card-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
  margin: 0 auto;
  width: 1200px
}

.card-grid-mobile {
  padding: 0 24px
}

.card-grid-mobile .card {
  aspect-ratio: auto;
  background: #141414;
  border: none;
  border-radius: 24px;
  display: block;
  height: auto;
  margin-bottom: 16px;
  min-height: auto;
  padding: 24px 16px
}

.card-grid-mobile .card .card__header {
  padding-bottom: 32px
}

.card-grid-mobile .card .card__header img {
  height: 36px;
  width: 36px
}

.card-grid-mobile .card .card__content .card__title {
  font-size: 18px;
  font-style: normal;
  font-weight: 500
}

.card-grid-mobile .card .card__content .card__description {
  font-size: 12px;
  font-weight: 400;
  overflow-wrap: break-word
}

.card {
  aspect-ratio: 1.33333333;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  justify-content: space-between;
  min-height: 200px;
  overflow: hidden;
  position: relative;
  transition: all .3s ease;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-intensity: 0;
  --glow-radius: 200px;
  background: var(--dexc-dark-primary-bg-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  height: 446px;
  max-width: 100%;
  padding: 32px 24px;
  width: 100%
}

.card img {
  height: 60px;
  width: 60px
}

.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, .15);
  transform: translateY(-2px)
}

.card__content,
.card__header {
  color: var(--white);
  display: flex;
  position: relative
}

.card__header {
  gap: .75em;
  justify-content: space-between
}

.card__content {
  flex-direction: column
}

.card__content .card__title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 15px
}

.card__content .card__description {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px
}

.card__label,
.card__title {
  font-size: 16px
}

.card__title {
  font-weight: 400;
  margin: 0 0 .25em
}

.card__description {
  font-size: 12px;
  line-height: 1.2;
  opacity: .9
}

.card--text-autohide .card__description,
.card--text-autohide .card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis
}

.card--text-autohide .card__title {
  -webkit-line-clamp: var(--clamp-title);
  line-clamp: var(--clamp-title)
}

.card--text-autohide .card__description {
  -webkit-line-clamp: var(--clamp-desc);
  line-clamp: var(--clamp-desc)
}

.card--border-glow:after {
  background: radial-gradient(var(--glow-radius) circle at var(--glow-x) var(--glow-y), rgba(132, 0, 255, calc(var(--glow-intensity)*.8)) 0, rgba(132, 0, 255, calc(var(--glow-intensity)*.4)) 30%, transparent 60%);
  border-radius: inherit;
  content: "";
  inset: 0;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 6px;
  pointer-events: none;
  position: absolute;
  transition: opacity .3s ease;
  z-index: 1
}

.card--border-glow:hover:after {
  opacity: 1
}

.card--border-glow:hover {
  box-shadow: 0 4px 20px rgba(46, 24, 78, .4), 0 0 30px var(--purple-glow)
}

.particle-container {
  overflow: hidden;
  position: relative
}

.particle:before {
  background: rgba(132, 0, 255, .2);
  border-radius: 50%;
  bottom: -2px;
  content: "";
  left: -2px;
  position: absolute;
  right: -2px;
  top: -2px;
  z-index: -1
}

.particle-container:hover {
  box-shadow: 0 4px 20px rgba(46, 24, 78, .2), 0 0 30px var(--purple-glow)
}

.global-spotlight {
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 200 !important
}

.bento-section {
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.char {
  background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, .7));
  background-clip: text;
  -webkit-background-clip: text;
  color: #fff;
  font-size: 44px;
  line-height: normal;
  margin-bottom: 60px;
  text-align: center;
  -webkit-text-fill-color: transparent
}

.char,
.homeM .char {
  font-style: normal;
  font-weight: 500
}

.homeM .char {
  font-size: 20px;
  margin-bottom: 24px
}

.market-dashboard .dashboard-title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: .5px;
  margin: 120px 0 60px;
  text-align: center
}

.market-dashboard .market-grid {
  cursor: pointer;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 0 auto;
  max-width: 1200px
}

.market-dashboard .market-card {
  background-color: var(--dexc-dark-primary-container-bg);
  border: 1px solid var(--dexc-dark-trade-base-divider-color);
  border-radius: 24px;
  height: 216px;
  padding: 20px;
  transition: transform .2s ease, box-shadow .2s ease;
  width: 384px
}

.market-dashboard .market-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transform: translateY(-2px)
}

.market-dashboard .market-card .card-header {
  align-items: center;
  display: flex;
  margin-bottom: 24px
}

.market-dashboard .market-card .card-header .dex-token-symbol {
  border-width: 0
}

.market-dashboard .market-card .card-header .crypto-icon {
  align-items: center;
  border-radius: 50%;
  display: flex;
  font-size: 20px;
  font-weight: 700;
  height: 48px;
  justify-content: center;
  margin-right: 16px;
  width: 48px
}

.market-dashboard .market-card .card-header .asset-info {
  flex: 1 1;
  margin-left: 16px
}

.market-dashboard .market-card .card-header .asset-info .asset-name {
  color: var(--dexc-dark-primary-font-color);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 2px
}

.market-dashboard .market-card .card-header .asset-info .asset-type {
  color: var(--dexc-white-secondary-font-color);
  font-size: 11px;
  font-weight: 400;
  line-height: 13px
}

.market-dashboard .market-card .card-body {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px
}

.market-dashboard .market-card .card-body .price-section {
  flex: 1 1
}

.market-dashboard .market-card .card-body .price-section .current-price {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px
}

.market-dashboard .market-card .card-body .price-section .current-price.success-color {
  color: var(--dexc-success-color)
}

.market-dashboard .market-card .card-body .price-section .current-price.price-down {
  color: var(--dexc-error-color)
}

.market-dashboard .market-card .card-footer {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.market-dashboard .market-card .card-footer .metric {
  align-items: flex-end;
  color: var(--dexc-dark-secondary-font-color);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px
}

.market-dashboard .market-card .card-footer .metric div:first-of-type {
  margin-bottom: 12px
}

.market-dashboard .market-card .card-footer .metric .metric-value.change-up {
  color: var(--dexc-success-color)
}

.market-dashboard .market-card .card-footer .metric .metric-value.change-down {
  color: var(--dexc-error-color)
}

.market-dashboard .loading-container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px
}

.market-dashboard .loading-container .loading-spinner {
  animation: spin 1s linear infinite;
  border-top: 4px solid var(--dexc-dark-base-border-color);
  border: 4px solid var(--dexc-dark-base-border-color);
  border-radius: 50%;
  border-top-color: var(--dexc-dark-primary-font-color);
  height: 40px;
  margin-bottom: 16px;
  width: 40px
}

.market-dashboard .loading-container .loading-text {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 16px;
  font-weight: 400
}

@keyframes spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.homeM .market-dashboard {
  padding: 0 24px
}

.homeM .market-dashboard .dashboard-title {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 24px;
  margin-top: 48px;
  padding-top: 24px
}

.homeM .market-dashboard .market-grid {
  gap: 16px
}

.homeM .market-dashboard .market-card {
  background-color: #141414;
  border: none;
  height: auto;
  padding: 24px 16px;
  width: auto
}

.homeM .market-dashboard .market-card:hover {
  transform: translateY(0)
}

.homeM .market-dashboard .market-card .card-header {
  margin-bottom: 16px
}

.homeM .market-dashboard .market-card .card-header .asset-info {
  margin-left: 12px
}

.homeM .market-dashboard .market-card .card-header .asset-info .asset-name {
  font-size: 16px;
  font-style: normal;
  font-weight: 500
}

.homeM .market-dashboard .market-card .card-footer .metric {
  align-items: flex-start;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px
}

.homeM .market-dashboard .market-card .card-footer .metric div:first-of-type {
  margin-bottom: 4px
}

.cooperative-partner {
  padding: 120px 0 0;
  width: 100%
}

.cooperative-partner .partner-container {
  position: relative
}

.cooperative-partner .partner-container:before {
  background-image:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/cooperative_partner_bg.e16ec22d.png*/
    var(--media-url-17);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 360px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 678px
}

.cooperative-partner .partner-container .partner-title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 44px;
  font-weight: 500;
  line-height: 52px;
  margin-bottom: 189px;
  position: relative;
  text-align: center;
  z-index: 2
}

.cooperative-partner .partner-container .partner-swiper {
  position: relative;
  width: 100%;
  z-index: 2
}

.cooperative-partner .partner-container .partner-swiper .partner-swiper-container {
  width: 100%
}

.cooperative-partner .partner-container .partner-swiper .partner-swiper-container .partner-slide {
  align-items: center;
  display: flex;
  width: auto !important
}

.cooperative-partner .partner-container .partner-swiper .partner-swiper-container .partner-slide img {
  display: block;
  height: auto;
  width: 260px
}

.homeM .cooperative-partner {
  padding: 53px 0 0
}

.homeM .cooperative-partner .partner-container {
  width: 100%
}

.homeM .cooperative-partner .partner-container:before {
  background-size: 100% 100%;
  height: 160px;
  width: 100%
}

.homeM .cooperative-partner .partner-container .partner-title {
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  margin-bottom: 12px
}

.homeM .cooperative-partner .partner-container .partner-grid {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 1fr);
  padding: 100px 24px
}

.homeM .cooperative-partner .partner-container .partner-grid .partner-item {
  align-items: center;
  display: flex;
  justify-content: center
}

.homeM .cooperative-partner .partner-container .partner-grid .partner-item img {
  display: block;
  height: auto;
  width: 160px
}

.homeM .cooperative-partner .partner-container .partner-swiper {
  padding: 48px 24px
}

.homeM .cooperative-partner .partner-container .partner-swiper .partner-swiper-container .partner-slide img {
  width: 160px
}

.home {
  background-color: var(--dexc-dark-primary-bg-color);
  min-width: 1200px;
  padding-bottom: 150px
}

.home .home-container {
  margin: 0 auto;
  width: 1200px
}

.mobileHome .dex-notification-notice {
  width: 320px
}

.mobileHome .dex-notification-notice .dex-notification-notice .dex-notification-rightContainer .dex-notification-title {
  font-size: 14px
}

.mobileHome .dex-notification-notice .dex-close-icon {
  display: none
}

.homeM {
  background-color: var(--dexc-dark-primary-bg-color)
}

.homeM .mobileBanner {
  background-image:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/bg_m.57011032.jpg*/
    url();
  background-size: 100% 100%;
  height: 434px
}

.homeM .mobileBanner .mobileHeader {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px
}

.homeM .mobileBanner .mobileHeader img {
  width: 120px
}

.homeM .mobileBanner .mobileTitle {
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 44px;
  margin-top: 100px;
  padding: 0 24px;
  text-align: center
}

.homeM .mobileBanner .mobileTitle2 {
  color: #8a8a8e;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  margin-top: 12px;
  padding: 0 24px;
  text-align: center
}

.homeM .FloatingBar {
  align-items: center;
  background: #6001ff;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIsAAAA8CAYAAABW1kkyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAG5ZJREFUeNrsm/d3E1cWx/llN73Z0pQ3RXJwQrBslZlR7zKEsoR1CgFs3G3JtizLvRe5N2EIm5C2WZLd9C1/4947T8+NnJOQgmVgzvkeGWMfRtKH7/3e+65OnLXf/e5EmV4p25aWUDe/TKjrX8aV9XtxZeMfcdvGF/D1F3F1/XNUVF77LK6ufRaTVz+NKaufRKWVj2MKSFr5CB4/isorf4vKS6DlOxGy9EFERi3fjipLt6JK4VZEKtw0pRRuhuXCdlRe2A6Rhc0Qmd+IyAubEbmwESZz62GlsBZWFlbD0uxclExrQXF2KSTNLQel2amEvfDyT92/X552+oXJkYA4NR2UJqf8ZGrSTyYmA2RyIkAmxn1kfMwvTIwGyNhVLxlWTpT7ddH+kVAu95IgRUtEXdfjVVvRhH2zIa5uLFJAUOtfxJS1v5uAMDhQ6uqnUYCDavVu3LZ614REKUGiLt+JASCosGQCAlrciSgIyWIxoiwWEZIwQAKPWwhISJ7fgD+vh6X5tbCEgMythqSF5RIcSwDMUJDMNoTIbCEkzy4EpJnW/c8jJM7YQvL0jYA0Ne0XKSQUkHEKiTA+FiSTY/A9CsmT6/4rKqxZE69uGqmqYixp23wnqW6mE7bNlaRtYyepbn0FcHy130XQQVAMkri6CloHSFYAkNWPARQAZPkudZHVDyPK8ofoIKiwvHiHusji7bBUMCEJAyQhExAqBAThoIAUKCBkYT0IkFBA5lciyvwKgyQozy0GycwiQhIUp/NBMjUflKbnQtLULAKSsA++7AdIEBB0kKCMkCAgU+PMSXz8WM4vTSf1VydeepDX7kJ17imfOGQYZDD8yAAR4gtc/au3vUnbzYsJpdgTs22OAAh3krbtb5LK1jdJ29bXCXXrX3F1858oBARLDTyWAKEuEpdZmdkrMTF17RN4BEBoqYmXykwMIGEugoAcgAQAQYWkwn0OsusihLpICADBUoOQBAAQBokJiExdBAFhkAQQElBAmpyBUjMc3OciKB8CAg7iJ2apyXnJROhC9Z2nHuT1DCvjxCDDlw1xOOMVh9JeYbDtiqPw52MGxTZ3pvpWImHfaktW7YwlbcUPk/biDwm1+H3KVvwuYdv+LqkAIDbU1jcICIUEHYS6CIBxD10E3OSe6SAycxBUCRKVZZHVu1GFKiIjHCyLHAQEswjCwbIIAoKKghASzCMmHDIIsgiWGQZIiAFCwEFkBghq2oTED4AwSALS9AzLIgyQkExLDeYQlFcYHwE36X9QSMKnxl9AF/EKw21eHgARh7u9Yr7bRwa7DD7fqdsGxbIF482T21y97WYyZd9pT9lubterN79KqcV/J9XtH5Nq8QfQ9wkQAgJgfBsHSOLKHiBJdBAF4GAuAoBQJ6FhFcXKDAISB0CYiyAcLKxC+dkGTUbl1RtQZi4AIH7IInVBuVCdklekc3KhIlgSZJ9XqCZ/Vj7bbJWPpwIHcoNbBCPybAIAaQgK0y0heSbNAEEXwTKDkOwPq8xFghhaJQi1GFrVCccDlRnbaBW6iE+iLqLx+W6dH+zyEVS+0+AHOzRhoF0n+Uj5wOHcfu7cyQ+SKfVW7oz99sdQUv6DSgAgKRvIvv1jXN3+gQGSAkGJ+RYdBMXKDHOQ/S6CYTW2DxBU9JCL0CxCg2oEFJWW34vJy68duZticFUmvUEy0cjKDAZVXwkQvzSOasbQ+iBlBn4+hC7CANnvIgZA4gVANFO5Ni/Iww9cO3JA6tXbl+ptt5ZStp3/JW07/0VAUuqOCQh1kG0QBWRfmUE4vjaziI26CHMQAOguQLGUUjdyUGI64evrEFYvJ5SNa/B1H2gO4aBhFR8pICgaVlcW66W1ynJ0WwyoAE0IAQlIE8M+aXTYJ44N+clYxy9xkaA8VOclo2+xLIJCFzHIEABCXQQh8RJwEmGgFWUIuRYPl23WuIG3Hda+54+gxHxQC3Asm4AoCEjRhISVGXQRBknKXjTLDAKCZQYF4fVT7Gji8kZ3Uimew9kItsA6KTz7S/59hCEirbaYgMi0o2FZBMtKuWc3f0XhRa8w1usVx/JecSQfIKMDkHekX+IiLIugg6AQEIMAJARdZLBtPyQGlz+rVQ6edvKjzx3Zk0UHSYGSKgBiAxdhWYS5iELLDEICf7eeULcz9fad89DlnKZA/D4XlJk8AsI6Gsgijccl7Af4Ub8XIPHxIzlDGOr3kZGGwy0vcxEGCXURWmY0dBAUAUkUEgDnutsymNC53EmH40p5dD8pmkMOlBrsZhAScBjoTjabzyqbxh9NdAJCatQcmlGB08SOCyw6GbH4yGi/nwxnwTV6URhWdW7oTc160EVYqUEXYZAwF/EAIF6hz+u19gkUkDK79joa1s0UIXgWm6NqseZh3kdQ3nkGIFmNKEtmyxtXlqLHBZawZfwFHSGRABJxqMcQ8/tyCOtmWGBlZSZnAqKJ+XNeqc/t5/J82T/RVCmsgsN8DqXm3aOsiQDJME5WowrMRKS5nuMEC5YYWmYOzUUwh6BIrsN0ED7f6BUHzvuFkZorh92j/GE5ekjYFVbnW3GqSlUoJOz3nj4usOzNRFgWQdGORueHGnE2guXltwKi6+k/6SRt0bn0SV1Jn3y45zXVa9ZyedEj0vwVnK6y8btfLdQcB1h8UrbS4DGHHGx5NX4whYD8djhGLDqfrnNzPWG3NXPRaem+7OQzbzkrM/UnHtcrJM2+R89nqGDs3nEc7hvH77tB1TrQ6iu1vG4yEPo1cHjErE2Te52a1JNyc+kGN9fb4OYzf3VaMm9pAImL77mEQnDw5x9LWMLyfCeezQR2z2fmFgPCpL38u6G8emBwJg40GyCd62/4ud/F8g9v+mseS8bQxL7zmph9WxN73kZA6gAQD997GSFxWXouaQiIJf0Xt5C56LF2X0D5q5tefFydpZdCQtcAAmR6Ac5kWsv9vj1czoVwaFz/DU1E5ZrcfH+jh89dTx/6n+/kezi3deA1N+kLIQguru8dDeTiEJC06SAoD999mbmIW0BAKCR1AIjTmgGoMuddXPc5j6WfPHagwLbZ0yGZAoKnvId3Rcr53g25P2FCwvU16SYkfdc9fPaaxvdfNfieWpeQdRhCfwKdxsP1vGuI/e9qIgVExxKDkDAX4WmpYS5SZ+0yAaGQdJqA1HIdb7pAdVz3GQdpUR87WAL2gj1MZkxAUGxPBLfNQmSmD2EqW1iE7EUTEkv2GoNEE7Lvo3Sh/4pH6HsPIfGIPSYkGkfLjE56GxAQdBEP6TWdhLkIQsJcxGE6SHvcIXR7ETwHSaue53NW9po8frCQqct0DYBCgotEbOMM5SOT18vxvjFz7ALC912lgPSagBggBIS5CAuqKCcAQrNI9yUUKzMuIZ10WtKaJnaddlW2SKegLccQ+2TPct8VJNNZdBFUUGJriQgJ7qzSxWY85S0/WPqrEBA3AmIFOKwZAATKTCmLmIBUUkCw5UVIaDjNxNzWbjf+vgPaaziFfuYJBT93sS14cQ8QttgcLK0konAVwCfCGgA3Giyne8ezHFZmUBqX2QurUGbQLZyQW7wVfYr+SvqlJy7xG6+AMNGLDsIWmykgYyYkPnHfrog4OuiHVYCQOBEri5b5BMxEuL0ywyDRSbqBhVX43rkn7/DvdIWU6VpcR2QugnurCAgKATFKgKACuAZAcA1gtN8njbT6q3NHOmPA4RmbibBuZm9w1r3bzTx5l3+nbTO/OJ72C7iOSIWAoLz8iAkI7okE5D1IDq8C6NJwEhecj+L+3VzmLJuJoHAmgpCwbsZTankfpPQk7G1Po7Bk1T7XxddyoIp2xck3V2lyZ/Up0nGqRmivcVvb3I6XO1yOyhbfYwGLT5po2VtLLLmINDpoArK7TEThMEBeMtKHgPjEkZ6Dp7ywtyoMxR/m1nsdSb/BSg1realoy+sRui/gTATnIR6lg3gsHcTxSlp18l1VtdDpoFyk01Nr6TDge4HT1tZYnbUz5rS2RVEOa0vEzbWGa7n2UB3XEkQ5K9v9AI3fIbT4HJWNoCZvraXZeORBAbdIBCCLICBsJdGLgJCxHLoIOggCwlxEhz0R1E+tAaDY3qou5K8Y3GAYcoOa+IP2VF1S9nVnabqKDrJ/soqDMwaJm+s6i6rj2s84KzvrnZVdKQAj5bJ0JGstXYk6mJ3UASQesTOGcLisHbuAUEg6gqcrmgJOvimADuICSBggdZZWvc7SqJ+23NAeaVDATQIsrB4ARBhr8ZLhqwgIWyZC7QLC03VEFIWErgFopUM8XCgyuFwLntGw8bshD1wEqGKGJX8qxI9y+NGPX3O4hyfLMA953cNlgux8Bl0EHYSN3l1cmk5WK7vPMEAQDnCElEtAQNooIAKFhDkICkpNyE1dpARIW6CmElykss3LAKkVm403ABAnAIJyWBvdqEcSEvyglUFGzvplCgmWGJpFhrMoDKwsi7CNs/sXm4dMQFDspBf3Vj0ACQME5YXxO05VddLfaMAZjUHodJUNzjCUwtT0jMeajUFQjWlir47SSVZzCT0+XAfw8Jl6j7X3AjqIxs5oMIuUXOQwJAiIB0bwTr4ECd+eQkAAKgoJOIgJidgWRVEXuRF6o4KWGQYIcxEEhLkIykluaKdeue6sqWiqQdVWNp9GPbQ3MGabrXpIbiIDIO2YQwKmk9CwClmjD7OInxt14hKRD12E31tJ3IXkkIvc//EIejajcbkmhMQgOfN8BuWyZt9ngzMdREfve+cz2NHoOBMhNKxiFmGTVRZYPaUccrjM1ILqKtvBSSgkDigxKHQSWmawxLQJGFZZYHU+38NhgK2uaHqRCcrms9XVF57ar0Ti/+1d+1MUZxbtJG5W5THD0D3T8wAHmPerZxiQuImRVGXNotEVrK4BRESIihp3NcY12fzCf+7e8319er5pyCY+ggTpqlNToFRR02fOPffc+zWLp6yjdPGREX+kmogf+VK3vf1uBiTpBl4E2+88KsGl5q6UmY54ECC62Dzn/nsTJJH9VTXl1QThAO9JOMQ7mCQ6OMN8Bslqf4inF4pAEO6KcBWAXoQqogiS1KUGBOkI6EPa7tZiJygzNZSZsc0vrONyYcorhHnwLodSPAIx5/7n/EL6+X2a1XlXdzPsaM5nn+3Kv3f5M3U58L3gvCgu5ATyesF5ViBIEpQaEmTflJclxhFycIDnCILgTMGY0bSMNQAqCEjCKe+so8tMI2JW6+JBqCIoM6ZZZUcDs+qJF0H5OD5m0/1JH/TO/HLt3SwC7dkgyXzqx3tzLgnyTKBVxGx55UY3rd95gSRUEOyLQEFIEk55qSKM32eTBjkAY1ckbHntPkFgWOFDWGaoIm0BuxmYVaiI6UVqY1sX4UegInXxIQBbXs+9Uz82ZOHTANQAb+K/2wjKXnsXRQjSlYNWMrtZNlUEXkSVGaPlBeTczOr57M+vdSxVrwCAHAB8yKMBgmCAxzJDH8I1AKarQD9d3RGSsO3dVplIdFfENKumDwE6kY6GBAFgWGlWK/Zm6diQhU8E4JOJLqRfPpBZzdKXmV8mlgp7owP/V76+6P7s4BjDZzkhh/vy6jzLjNsPznh+RiELw9rPRBayP3yGEvW6awAgCcqMWWpAkpYiCEny/wnSsCMbZ4ZZpYLArNKH0KxCQdjyIhPRBNkeUBEqCQjCjgYtr5SiTmtspwHUEnfqCsPoZu6qbqY43KuWRtYq5RG/XLY3yhW7VwKqznqxNrpRKMR6M8XY+jRQjt2eKsf8qan4+rlqfEWwfq4ZWx87NLKopxNhiMcHz7gvwwEeprxIVxG/6/nM87DlnROCkCQoM0xXWWb4XBFmIl336dU3CclIFoMkusy4oiTKrGovYs5nOhlNEnoRlBqWGZpVkyRAB20vVCQwq2YuArDlHVSRDRWctZCLCEGQrjI4MzORqt2brQlpVC6S3PCARnKz1UzdalZTt4VEa3UFl+1wr9ocFwLZviLP9OjNYs0R4iR7M4o8SSFOyp+qxFfzC4lD3MHF4yI4wFPPFQkGeIjfdbKqB3gASEKCqHYXBOFJPCGI8VwRnYskn99GINa13y6G77hPnI6jCUIvQhVhNxOaVVuTo2HvUEEGWl6ALW8/Wb07EJwhekeZQTcDeIGKIDijiiA4o4IouFsqOKsEmQiS1Vp8VQiypYIzEqQydqsJVMd6jZoLktyqFYUcDUEpIAgUBsoC1BxfSAJ1WZkuJlcCktzIV9Pr5+pj/uQFyz9zeGd10j91RU0eU0EkD5FkVc9nADN6j3Y0CM0AdDw8ZIVMRMh0RdSm/i4eZ0WyzEYWm6UVvjqHQZ69u9gefzTvZXY7QqYaNuVbie9yC5JnFBJPRrFUhAS2bG+PeJn7lzu/4UXC+Uw66Ggy219AQUCQMDhLBSQ5IH6HglBFAIRojeSaIklLVKQqKCT8mlKRtEEQQ0VIkoaQBARB6QFJUHoAEGUm8c+JQmIlhzWJw/Ut8qYuJF9cNuN3PA1AZyIvoCJUENXykiShF3F/2JQbegkE+SMOdOMN6dr30wiyEF696QJRO7nzOUlCFSFB6EXY8jYSIMhGSBAgSpBKMJsBas7qQJkBSaqj60UhSkpIkgQKw77TcX2nlFmzicrI5nhlZHm8NuonarmdBF4nxYc0gcn1sXz8RrwtmB7zY91pP4ZXhHg4AoIPgPU+LpJG1OXiwsSPq1SRaMsrSrOGpwOczz69gCwEv/BRPCkANCcfqjec3/ecnY4iiSskYTfDMjOmzWpboAiSAEFuCfpmtWzMZ5rpO12UmWJcK0gp3vOoIBXxIvAglezmuPWhXGhvO5Kq4mzKeyIFz/aexdwIpWVBSkw7vpufdXYKTTnSCQK0x+/NdxCr2/e/YrLKIR4Wn8O1Avu7LlSEJCFB6EP2z2fMMrMe+pCoWQVJABhW+BAFKTWL1tbpk62lt7z56hRe/mm8M/F9BttmMuyr4Cxvi0M8d3dR+QokqHZ/mchseWfTO/9ohMHZ1t/pQ+qGWUWyClKFCfHorXmQhC0vSg0zEShJzdgVAUFMktCLtLNbbZYZkANGFV6EBAFgVuE3Tu72b1x1y/90LvWvxpwYzm7u8ULXffSV2ihzHl9Bywv0B3iPD+xoOOUlScIhnhBEkYO5CDsa+hDDrHLK6+V2s6o0WYunQBB6EZCDKsJForrbXwWoxnp6DQBlJig1jbG+ggAoNSBJw+hmmoKWmNWCe9c5YcPvMKPIRLzggBWCs+h8Bulq9BQe8hDAXAMA2PIeRBC2vBzgMQ9haOYJ+CgRmOOmqAiDM6oISBI1rDWHXsRoeZWKMBNhy6sJAqDdbWV0yysmtTAj0IGabneZi1Tc1Tw6GnQzjcTqREs6mtK4n/UEZft6pmqvpKeGrqfqju/ODF9OzqSWlTEujVyzYYQBbYKvwot99KcnTMd9eEkfsPo+PIFnHrJiqtqyd5SKcLG5bRzVBEFUqUkwE9Flhqib22YAZzOOBlTEHOJhTQA+hCSJEgS7Il7oRXrKizATYXBWCEpM0QzNRpC23iyCHCAKCMKWFwRpCUgQ5CJseUvj32ZLiiCriiAkSSMJrKUKw0sOgI4pC4Lk/ERTCAKgQxIyDVvH4Zp1HhW4BgAViZKEAzyqCPdW9RDv7jcsNVQRmtVosmoGZyQIuxlASBCGgZ7E7NFMpBV4EU9As8oyQz8CBSFJkIuAIK0glveyvRJIAoAgyEMAhGbA9JlrkyAIFAQEaWVXcooohorkh3x3SggyM7ycBDpuoCLZ5fGcKAhVJB+0zwlrSfZflkbz+cXTx6YUtSU0M8sMjkhQRUAQgGUGQPQOkCCcz8wGmQiAGQ2eemS95oVuCiSJEqQU3/DY8up0lYa1p4KzIlUkAx+yweBMKQlDMzM4g4IA1bSoSEarCMlBggB5KTF1gakgIEg3sxaQ5JsElARtvybJ1zEQRH52BNCq4n9iHZerlXlYbhm7Ilwmav7KMhFJwo6GwVlbVAQ+hF6kO33/tafiGLiRJPQhbHdJEHM+Q7NKFUGpYaoKhPOZmPYhUypV1WUGNz2VujwkHdJQJnPtbMYSyGtOYvlBXDiTtxZP5+XYB14L1tJfTdSt+qdE1+r+BbDEpC8K8HrsjC5uuCoxUBFzPpPmfIZ7Itw2M6a8Lqe8g/E7Sg3aXba8GneD4EzPZ1BCzIUqEITdTNkIzkgStruaJDe1WTXmM1SRJghilBpG7/QiMKv4xJ+0OW9wYTbTST78OtrRAGbLC8CHmPE790Q8gblMBJAgSFfNbgYAAcyRg7TB1WguQrPKjgYEQakx1wO0gtyY4RCPKqK8iJCjLkCpQZkBJs5KeYlvxU/u+ltcXm4zy813djQdQf/8DKP3wQNWVBGSxMxFqCIgibn5DlLkjCksPAG7maiKsOWlD6GK0KySIOhm6EPY8gKFM0uhUQVgTv0TVXn7C0NAc4AHmHsi5hpAVEXUfIYEiSarxvkZkCKX6xMFwzcShKsA8CPNgCTIRDzZYvOEKCQISw0zEZJkOigzDUHUrLLlhQH1ff+TPWvv4709gflqYo/f3/9/XlmvPrIEr4hX/Bqvlvr6vWYrh/X8W/wVCyjDQSSJtrymD/FcDSarzXR/DYCGFTe8bvVLD0wjzSrLDBQEBDHLDGBmIoDpRdjyAqUz32ZRakAQdDIkCdRLBWfuElteFZoxF+HEmB0NuxmgJUa4K+YXZhetMI+ALAm6XTG0i9rQ7u1ZH1tCpvcewuGAlXUIF29iSw52R1WEBGGZATkYv2uC6GUiwOxooBy4WZZxYYxvJqsto8xAQdTGWUwTBDDNKn0ISNLIrE7kzuwPznTLi1wEBPEdAKmqSZLJgCT4XUiQz8vXRxxrEQRRXVJXwC4IBFE+SwiC2RnOC0GlYJahPEcmqUVwhr88cajGV3ZwazLg0z4E6E95y0aZ4caZl9EEoVGFasjP7PMIjaG1FMpMM+pFmItEzCpAs8pMxAzNzp3V5GAmApIgEwFBOgJmIgzNGJyBIKaKqFaaKpKDigySBG0xCAJYoiIsVarsHKWLwRmfdXLYpEGcjRsKxYgGZ+ZCEdQCn3bkFySJGbqhbHDjTBGE0XuUIFSRCEmoIPQhJAkUpIUyEySr+H2hIICK3ydBFK0iZmhGkkBF4KUAKKsl5VKXTKrI3indbmuCWEf5YnAG84k33XqPF6QXezN4owm8ofj+ryWziPSnR5bDlhdAy8shHpNVtrwwrCZBTBUhSeBF4EOgIiQIVATgbAagIiAkUwQ2QAKY2KPvOBhH/2rYD+aYrLaT9/521J95hk8fpH5GfIVSkVEZ4jl6PkOzei52bUBFpoP5DIOz6BAvP3RlQEW4+mh6EbPUoMSgjHyQKwWSrl4Ko/f09txRW5aCaYRHQWxvdjQzYUdzxxji6QkvwCEeVcQDcn42nPIGPmQmJAhVZD9BQFD6EPiMDzEC+R9/AYpyf5wRhQAAAABJRU5ErkJggg==);
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: auto 100%;
  border-radius: 16px;
  bottom: 36px;
  display: flex;
  height: 60px;
  justify-content: space-between;
  left: 24px;
  padding: 0 12px;
  position: fixed;
  right: 24px;
  z-index: 99999
}

.homeM .FloatingBar p {
  color: #fff;
  flex: 1 1;
  font-size: 14px;
  font-style: normal;
  font-weight: 500
}

.homeM .FloatingBar .btn {
  align-items: center;
  background: #080808;
  border-radius: 16px;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px
}

.homeM .FloatingBar .btn .dex-icon {
  padding-right: 4px
}

.summary-section {
  margin-bottom: 24px
}

.summary-section .section-title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 18px
}

.summary-section .summary-cards {
  background: hsla(0, 0%, 8%, .5);
  border-radius: 24px;
  box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05);
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr)
}

.summary-section .summary-cards .summary-card {
  border-radius: 16px;
  padding: 40px;
  position: relative
}

.summary-section .summary-cards .summary-card:not(:last-child):after {
  background: var(--dexc-dark-invite-primary-bg-color);
  content: "";
  height: 80px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px
}

.summary-section .summary-cards .summary-card .summary-value {
  color: var(--dexc-dark-primary-font-color);
  font-size: 28px;
  font-weight: 500;
  line-height: 34px;
  margin-bottom: 16px
}

.summary-section .summary-cards .summary-card .summary-label {
  align-items: center;
  color: var(--dexc-dark-secondary-font-color);
  display: flex;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px
}

.summary-section .summary-cards .summary-card .summary-label img {
  height: 16px;
  margin-right: 6px;
  width: 16px
}

.details-section {
  background: hsla(0, 0%, 8%, .5);
  border-radius: 24px;
  box-shadow: inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05);
  padding: 24px 20px
}

.details-section .section-title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 4px
}

.details-section .title-desc {
  max-width: 760px
}

.details-section .disclaimer {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.details-section .filter-bar {
  display: flex;
  flex-wrap: wrap;
  position: relative
}

.details-section .filter-bar .search-container {
  align-items: center;
  border: 1px solid var(--dexc-dark-base-border-color);
  border-radius: 8px;
  display: flex;
  margin-right: 12px;
  padding: 8px 12px;
  width: 120px
}

.details-section .filter-bar .search-container .dex-icon-next {
  color: var(--dexc-dark-invite-search-icon-color)
}

.details-section .filter-bar .search-container .search-field {
  background: transparent;
  border: none;
  color: var(--dexc-dark-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-left: 6px;
  outline: none;
  width: 100%
}

.details-section .filter-bar .search-container .search-field::-moz-placeholder {
  color: var(--dexc-white-tertiary-font-color)
}

.details-section .filter-bar .search-container .search-field::placeholder {
  color: var(--dexc-white-tertiary-font-color)
}

.details-section .filter-bar .query-btn {
  background: var(--dexc-dark-primary-color);
  border: none;
  border-radius: 8px;
  color: var(--dexc-dark-primary-font-color);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 32px;
  transition: all .3s ease;
  white-space: nowrap
}

.details-section .filter-bar .query-btn:hover {
  background: var(--dexc-dark-primary-hover-color);
  transform: translateY(-1px)
}

.details-section .data-table {
  border-top: 1px solid var(--dexc-dark-base-border-color);
  margin-top: 16px
}

.details-section .data-table .dex-table-wrapper {
  --dex-table-bg: transparent;
  --dex-table-thead-bg: transparent;
  --dex-table-expand-row-bg: transparent;
  --dex-table-hover-bg: transparent;
  background-color: transparent
}

.details-section .data-table .dex-table-wrapper .dex-table {
  background-color: transparent;
  table-layout: fixed;
  width: 100%
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-thead .dex-table-row .dex-table-cell {
  background-color: transparent;
  overflow: hidden;
  padding: 16px 19px 8px;
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-thead .dex-table-row .dex-table-cell:first-of-type {
  padding-left: 0
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-thead .dex-table-row .dex-table-cell:last-of-type {
  padding-right: 0
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-row .dex-table-cell {
  background-color: transparent;
  color: var(--dexc-dark-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  overflow: hidden;
  padding: 14px 19px;
  text-align: left;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-row .dex-table-cell:first-of-type {
  padding-left: 0
}

.details-section .data-table .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-row .dex-table-cell:last-of-type {
  padding-right: 0;
  text-align: right
}

.details-section .data-table .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell {
  color: var(--dexc-dark-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 14px 19px
}

.details-section .data-table .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:first-of-type {
  padding-left: 0
}

.details-section .data-table .dex-table table .dex-table-tbody>.dex-table-row>.dex-table-cell:last-of-type {
  padding-right: 0
}

.details-section .data-table .dex-table table .dex-table-thead>tr>.dex-table-cell {
  padding: 16px 19px 8px
}

.details-section .data-table .dex-table table .dex-table-thead>tr>.dex-table-cell:first-of-type {
  padding-left: 0
}

.details-section .data-table .dex-table table .dex-table-thead>tr>.dex-table-cell:last-of-type {
  padding-right: 0
}

.dex-table-placeholder .dex-empty {
  margin: 100px 0 50px
}

.dex-message {
  align-items: flex-end;
  display: flex;
  max-height: 100vh;
  position: fixed;
  z-index: var(--dex-notification-zIndex)
}

.dex-message-top,
.dex-message-topLeft,
.dex-message-topRight {
  flex-direction: column;
  top: 50px
}

.dex-message-topRight {
  right: 24px
}

.dex-message-notice {
  align-items: center;
  background: #fff;
  border-left: 4px solid var(--border-color);
  border-radius: 3px 3px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  line-height: 1.5;
  margin: 12px 0;
  min-height: 50px;
  position: relative;
  width: 400px
}

.dex-message-notice-content {
  align-items: flex-start;
  color: var(--dex-primary-font-color);
  display: flex;
  height: 100%;
  justify-content: flex-start;
  padding: 20px 16px
}

.dex-message-notice-content .dex-message-icon {
  align-items: center;
  display: flex;
  height: 24px;
  justify-content: center;
  margin-right: 10px
}

.dex-message-notice .dex-message-content-text {
  font-size: 16px
}

.dex-message-notice-closable .dex-message-notice-content {
  padding-right: 20px;
  text-align: left
}

.dex-message-notice-close {
  color: #000;
  cursor: pointer;
  filter: alpha(opacity=20);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  opacity: .2;
  outline: none;
  position: absolute;
  right: 5px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  top: 3px
}

.dex-message-notice-close-x:after {
  content: "×"
}

.dex-message-notice-close:hover {
  filter: alpha(opacity=100);
  opacity: 1;
  text-decoration: none
}

.dex-message-fade {
  overflow: hidden;
  transition: all .3s
}

.dex-message-fade-appear-start {
  opacity: 0;
  transform: translateX(100%)
}

.dex-message-fade-appear-active {
  opacity: 1;
  transform: translateX(0)
}

.dex-message-info {
  --border-color: var(--dex-primary-color)
}

.dex-message-success {
  --border-color: var(--dex-success-color)
}

.dex-message-warning {
  --border-color: var(--dex-warning-color)
}

.dex-message-error {
  --border-color: var(--dex-error-color)
}

.banner-content {
  position: relative;
  width: 100%;
  z-index: 999
}

.banner-content div {
  font-size: 48px;
  font-weight: 700;
  line-height: 58px;
  padding: 70px 0 30px
}

.banner-content div,
.banner-content p {
  color: var(--dexc-dark-primary-font-color)
}

.banner-content p {
  background: var(--dexc-dark-primary-bg-color);
  border: 1px solid var(--dexc-dark-invite-btn-border-color);
  border-radius: 30px;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 auto;
  padding: 16px 40px
}

.dex-banner-desc-rate span {
  color: var(--dex-warning-color);
  display: inline-block;
  margin: 0 2px
}

.loading-root {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center
}

.loading-root .loading-circle {
  width: 64px
}

.loading-root .loading-logo {
  animation: loading-jump .5s ease-in infinite alternate;
  display: inline-block
}

.loading-root .loading-logo .logo-img {
  height: 60px;
  width: 60px
}

.invite-dialog-content {
  padding: 0 0 32px
}

.invite-dialog-content .invite-profile {
  border-bottom: 1px solid var(--dexc-dark-base-border-color);
  padding-bottom: 24px
}

.invite-dialog-content .invite-profile.cursor-not-allowed {
  cursor: not-allowed
}

.invite-dialog-content .invite-profile.cursor-pointer {
  cursor: pointer
}

.invite-dialog-content .invite-profile:last-of-type {
  border-bottom-width: 0
}

.invite-dialog-content .invite-profile .invite-stats .current-tag {
  background: var(--dexc-dark-trade-base-divider-color);
  border-radius: 2px;
  color: var(--dexc-dark-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 2px 4px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item.users .user-info {
  align-items: center;
  display: flex
}

.invite-dialog-content .invite-profile .invite-stats .stat-item.users .user-info .user-id {
  color: var(--dexc-dark-primary-font-color);
  font-size: 18px;
  font-weight: 500;
  line-height: 22px;
  margin: 0 8px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item:last-child {
  margin-bottom: 0
}

.invite-dialog-content .invite-profile .invite-stats .stat-item .stat-label {
  color: var(--dexc-white-tertiary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px
}

.invite-dialog-content .invite-profile .invite-stats .stat-item .stat-value {
  color: var(--dexc-dark-primary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px
}

.invite-dialog-content .dex-button {
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  margin-top: 24px;
  padding: 16px 24px;
  width: 100%
}

.invite-dialog-content .custom-invite-code {
  padding: 12px 0 0
}

.invite-dialog-content .custom-invite-code p {
  color: var(--dexc-white-tertiary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px
}

.invite-dialog-content .custom-invite-code input {
  background: var(--dexc-dark-component-bg-color);
  border-radius: 8px;
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  font-weight: 700;
  height: auto;
  line-height: 20px;
  margin-top: 8px;
  padding: 16px;
  text-align: left;
  width: 100%
}

.invite-dialog-content .custom-invite-code input::-moz-placeholder {
  color: var(--dexc-white-tertiary-font-color)
}

.invite-dialog-content .custom-invite-code input::placeholder {
  color: var(--dexc-white-tertiary-font-color)
}

.invite-dialog-content .custom-invite-code input:focus {
  border-color: transparent
}

.invite-dialog-content .custom-invite-code span {
  color: var(--dexc-error-color);
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 8px
}

.dex-button-primary.disabled,
.dex-button-primary.disabled:hover {
  background-color: var(--dex-input-disabled-bg);
  color: var(--dex-quaternary-font-color)
}

.inviteCodeModal-d85b0182 {
  padding-bottom: 32px;
  padding-top: 70px
}

.inviteCodeModal-d85b0182 img {
  display: block;
  height: 60px;
  margin: 0 auto;
  width: 60px
}

.inviteCodeModal-d85b0182 div,
.inviteCodeModal-d85b0182 p {
  text-align: center
}

.inviteCodeModal-d85b0182 p:first-of-type {
  color: var(--dexc-dark-primary-font-color);
  font-size: 14px;
  line-height: 18px;
  margin: 12px 0 28px
}

.inviteCodeModal-d85b0182 .inviteCode-aca5272b {
  color: var(--dexc-dark-primary-font-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 20px;
  margin-bottom: 28px
}

.inviteCodeModal-d85b0182 p:last-of-type {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 36px
}

.inviteCodeModal-d85b0182 button {
  border-radius: 36px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  height: 52px;
  width: 100%
}

.invite-page {
  background-color: var(--dexc-dark-primary-bg-color);
  margin-bottom: 50px;
  min-height: 100vh;
  width: 100%
}

.invite-page .invite-container {
  margin: 0 auto;
  padding: 0 20px;
  width: 1200px
}

.invite-page .invite-container .my-rebate-section {
  margin-bottom: 60px;
  position: relative;
  z-index: 999
}

.invite-page .invite-container .my-rebate-section .section-title {
  align-items: center;
  color: var(--dexc-dark-primary-font-color);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px
}

.invite-page .invite-container .my-rebate-section .section-title i {
  margin-left: 6px
}

.invite-page .invite-container .my-rebate-section .section-title p {
  font-size: 32px;
  font-weight: 600;
  line-height: 30px
}

.invite-page .invite-container .my-rebate-section .section-title button {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px
}

.invite-page .invite-container .my-rebate-section .rebate-cards {
  background: #080808;
  border-radius: 24px;
  box-shadow: inset 0 1.154px 0 1px hsla(0, 0%, 100%, .19), 0 8.077px 3.462px 0 rgba(0, 0, 0, .03), 0 4.615px 4.615px 0 rgba(0, 0, 0, .25), 0 0 6px 0 hsla(0, 0%, 100%, .25), inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05);
  display: flex
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card {
  width: 25%;
  word-wrap: break-word;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  padding: 40px;
  position: relative
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card:not(:last-child):after {
  background: var(--dexc-dark-tertiary-font-color);
  content: "";
  height: 80px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-title {
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-desc {
  align-items: center;
  color: var(--dexc-white-tertiary-font-color);
  display: flex;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-desc.invite p {
  align-items: center;
  color: var(--dexc-dark-primary-font-color);
  display: flex;
  margin-left: 6px
}

.invite-page .invite-container .my-rebate-section .rebate-cards .rebate-card .card-desc .custom {
  align-items: center;
  color: var(--dexc-dark-primary-font-color);
  display: inline-block;
  display: flex;
  font-size: 12px
}

.invite-page .invite-bg {
  height: 500px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 1200px
}

.invite-page .loading-root {
  z-index: 2
}

.portfolio-page {
  margin: 0 auto;
  padding-bottom: 60px;
  padding-top: 60px;
  width: 1200px
}

.portfolio-panel-title {
  color: var(--dexc-primary-font-color);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 16px;
  margin-top: 60px
}

.portfolio-panel-container {
  border: 1px solid var(--dexc-trade-divider-color);
  border-radius: 24px;
  min-width: 1200px !important;
  overflow: hidden;
  width: 100% !important
}

.investment .investment-header {
  color: var(--dexc-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 16px
}

.investment .investment-content {
  display: flex;
  gap: 12px;
  justify-content: space-between
}

.investment .investment-content-left {
  background: var(--dexc-primary-container-bg);
  border: 1px solid var(--dexc-common-border-color);
  border-radius: 24px;
  display: flex;
  height: auto;
  padding: 24px;
  width: 300px
}

.investment .investment-content-right {
  border: 1px solid var(--dexc-common-border-color);
  border-radius: 24px;
  flex: 1 1;
  height: 100%
}

.investment-info {
  flex-direction: column;
  height: 100%;
  width: 100%
}

.investment-info,
.investment-info .first {
  display: flex;
  justify-content: space-between
}

.investment-info .first {
  align-items: center;
  margin-bottom: 24px
}

.investment-info .first .address {
  align-items: center;
  background: #1d1d1d;
  border-radius: 20px;
  color: var(--dexc-primary-font-color);
  display: flex;
  font-size: 14px;
  font-weight: 500;
  height: 26px;
  padding: 0 12px
}

.investment-info .first .address span:first-child {
  margin-right: 4px
}

.investment-info .investment-content-left-total .total-title {
  align-items: center;
  color: var(--dexc-secondary-font-color);
  display: flex;
  font-size: 14px;
  font-weight: 400;
  gap: 4px;
  line-height: 18px;
  margin-bottom: 12px
}

.investment-info .investment-content-left-total .total-title .eye-icon {
  color: var(--dexc-secondary-font-color) !important;
  cursor: pointer
}

.investment-info .total-value {
  align-items: center;
  color: var(--dexc-primary-font-color);
  display: flex;
  gap: 4px
}

.investment-info .total-value .total-value-number {
  font-size: 28px;
  font-weight: 500;
  line-height: 34px
}

.investment-info .total-value .total-value-unit {
  font-size: 14px;
  line-height: 16px;
  margin-top: 8px
}

.investment-info .total-today {
  align-items: center;
  color: var(--dexc-secondary-font-color);
  display: flex;
  font-size: 14px;
  font-weight: 400;
  gap: 4px;
  line-height: 14px;
  margin-top: 8px
}

.investment-info .total-today .total-today-text {
  border-bottom: 1px dashed var(--dexc-secondary-font-color);
  cursor: pointer
}

.investment-info .total-value-list {
  margin-top: 34px
}

.investment-info .total-value-list .total-value-list-item {
  align-items: center;
  display: flex;
  height: 18px;
  justify-content: space-between
}

.investment-info .total-value-list .total-value-list-item-title {
  color: var(--dexc-secondary-font-color);
  font-size: 14px;
  line-height: 18px
}

.investment-info .total-value-list .total-value-list-item-title.line {
  border-bottom: 1px dashed var(--dexc-secondary-font-color)
}

.investment-info .total-value-list .total-value-list-item-value {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  line-height: 18px
}

.investment-info .total-value-list .total-value-list-item:not(:last-child) {
  margin-bottom: 8px
}

.investment-info .btns {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between
}

.investment-info .btns button {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500
}

.investment-info .btns button .inner-content {
  align-items: center;
  border-radius: 100px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  height: 38px;
  justify-content: center;
  padding: 12px 24px;
  width: 120px
}

.investment-info .btns .wallet-link {
  background: transparent
}

.investment-info .btns .wallet-link .inner-content {
  background: var(--dexc-primary-color);
  width: 250px
}

.investment-info .btns .wallet-deposit {
  background: transparent
}

.investment-info .btns .wallet-deposit .inner-content {
  background: var(--dexc-primary-color)
}

.investment-info .btns .wallet-withdraw {
  background: transparent
}

.investment-info .btns .wallet-withdraw .inner-content {
  background: var(--dexc-primary-container-bg);
  border: 1px solid var(--dexc-base-border-color)
}

.investment-info .fee {
  align-items: center;
  background: #1d1d1d;
  border-radius: 20px;
  display: flex;
  gap: 12px;
  height: 28px;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 16px
}

.investment-info .fee .fee-item {
  align-items: center;
  color: var(--dexc-secondary-font-color);
  display: flex;
  font-size: 12px;
  gap: 2px
}

.investment-info .fee .fee-item span {
  color: var(--dexc-primary-font-color)
}

.investment-chart {
  height: 100%;
  width: 100%
}

.investment-chart .chart-tabs {
  padding-top: 24px
}

.investment-chart .chart-tabs .dex-tabs-nav-wrap {
  padding: 0 24px
}

.investment-chart .chart-tabs .dex-tabs-content-holder {
  padding: 24px 0 0
}

.investment-chart .chart-time-select {
  padding-right: 24px
}

.investment-chart .info-account {
  align-items: center;
  color: var(--dexc-secondary-font-color);
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  padding: 0 24px
}

.investment-chart .info-account .info-account-total {
  font-size: 16px;
  gap: 8px;
  line-height: 20px
}

.investment-chart .info-account .info-account-total span {
  color: var(--dexc-primary-font-color)
}

.investment-chart .info-account .info-account-time {
  font-size: 10px;
  line-height: 14px
}

.investment-chart .dex-spin {
  width: 100%
}

.investment-chart .chart-content {
  height: 200px;
  padding-right: 12px;
  width: 100%
}

.investment-chart .chart-content .chart-content-chart {
  height: 100%;
  width: 100%
}

.investment-chart .chart-tip {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  line-height: 16px;
  padding: 12px 24px
}

.faqSection-e74a2e75 .sectionTitle-ddedd715 {
  color: var(--dexc-dark-primary-font-color);
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 16px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 {
  background: var(--dexc-dark-primary-container-bg);
  border: 1px solid var(--dexc-dark-common-border-color);
  border-radius: 24px;
  padding: 0 24px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e {
  border-bottom: 1px solid var(--dexc-dark-common-border-color);
  overflow: hidden
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e:last-child {
  border-bottom: 0
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa {
  align-items: center;
  cursor: pointer;
  display: flex;
  padding: 24px 0;
  transition: background-color .2s ease
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqQ-e63c0e9a {
  align-items: center;
  background: var(--dexc-dark-component-bg-color);
  border-radius: 4px;
  color: var(--dexc-dark-secondary-font-color);
  display: flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  height: 16px;
  justify-content: center;
  line-height: 14px;
  margin-right: 8px;
  width: 16px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqText-a6f1d52a {
  color: var(--dexc-dark-primary-font-color);
  flex: 1 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqArrow-d386c548 {
  color: var(--dexc-dark-secondary-font-color);
  flex-shrink: 0;
  font-size: 12px;
  transition: transform .2s ease
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqQuestion-a07419aa .faqArrow-d386c548.expanded-fdad573f {
  transform: rotate(180deg)
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqAnswer-c0d3649c {
  align-items: flex-start;
  display: flex;
  margin-bottom: 24px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqAnswer-c0d3649c .faqA-c29195ef {
  align-items: center;
  background: var(--dexc-dark-component-bg-color);
  border-radius: 4px;
  color: var(--dexc-dark-secondary-font-color);
  display: flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  height: 16px;
  justify-content: center;
  line-height: 14px;
  margin-right: 8px;
  margin-top: 3px;
  width: 16px
}

.faqSection-e74a2e75 .faqList-eff6b8c8 .faqItem-ee57bc6e .faqAnswer-c0d3649c .faqText-a6f1d52a {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5
}

.accountInfo-a4a986cb {
  align-items: center;
  background: var(--dexc-dark-trade-primary-container-bg);
  border-radius: 24px;
  box-shadow: inset 0 1.154px 0 1px hsla(0, 0%, 100%, .19), 0 8.077px 3.462px 0 rgba(0, 0, 0, .03), 0 4.615px 4.615px 0 rgba(0, 0, 0, .25), 0 0 6px 0 hsla(0, 0%, 100%, .25), inset 0 1px 1px 0 rgba(199, 211, 234, .12), inset 0 24px 48px 0 rgba(199, 211, 234, .05);
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 24px
}

.accountInfo-a4a986cb .balanceSection-b0817a6b {
  display: flex;
  gap: 100px
}

.accountInfo-a4a986cb .balanceItem-e4535106 {
  align-items: center;
  display: flex;
  gap: 8px
}

.accountInfo-a4a986cb .balanceItem-e4535106 .label-c8a7b0e6 {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px
}

.accountInfo-a4a986cb .balanceItem-e4535106 .value-adc3b78e {
  color: var(--dexc-dark-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px
}

.accountInfo-a4a986cb .recordsBtn-a1f76ecb {
  background: transparent;
  border: 1px solid #6001ff;
  border-radius: 8px;
  color: #6001ff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  transition: all .2s ease
}

.accountInfo-a4a986cb .recordsBtn-a1f76ecb:hover {
  background: #6001ff;
  color: #fff
}

.incomeProducts-cb735c06 {
  background: var(--dexc-dark-primary-container-bg);
  border: 1px solid var(--dexc-dark-common-border-color);
  border-radius: 24px;
  padding: 24px
}

.incomeProducts-cb735c06 .header-e20cf304 {
  align-items: center;
  border-bottom: 1px solid var(--dexc-dark-common-border-color);
  display: flex;
  justify-content: space-between;
  padding-bottom: 24px
}

.incomeProducts-cb735c06 .header-e20cf304 .title-ee678166 {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px
}

.incomeProducts-cb735c06 .header-e20cf304 .connectWalletBtn-d08a9f15,
.incomeProducts-cb735c06 .header-e20cf304 .earningRecordBtn-aba49a35,
.incomeProducts-cb735c06 .header-e20cf304 .receiveEarningsBtn-f1641075 {
  border: none;
  border-radius: 24px;
  color: var(--dexc-dark-primary-font-color);
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  padding: 7px 24px;
  transition: all .3s ease
}

.incomeProducts-cb735c06 .header-e20cf304 .earningRecordBtn-aba49a35 {
  background: transparent;
  border: 1px solid var(--dexc-dark-base-border-color);
  margin-right: 16px;
  padding: 7px 38px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 {
  display: flex;
  flex-direction: column
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .empty-f1935162 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 260px;
  justify-content: center
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
  padding: 20px 0
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .tokenSymbol-d9bcc142 {
  align-items: center;
  border: none;
  display: flex
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .symbol-c65c756f {
  color: var(--dexc-dark-primary-font-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin-left: 8px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .apyInfo-e6b3c91f {
  align-items: center;
  display: flex;
  gap: 8px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .apyInfo-e6b3c91f .apyLabel-f3f9f200 {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px
}

.incomeProducts-cb735c06 .productsList-dcf844b6 .productItem-af395062 .apyInfo-e6b3c91f .apy-a1ae93f0 {
  color: var(--dexc-dark-primary-font-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px
}

.incomeProducts-cb735c06 .earnProducts-bcade121 {
  border: none;
  padding: 24px 0 0
}

.exchangeSuccess-fd3e8aa9 {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 90px
}

.exchangeSuccess-fd3e8aa9 .dex-icon-success {
  color: var(--dexc-dark-primary-hover-color);
  display: inline-block;
  font-size: 54px;
  height: 54px;
  line-height: 54px;
  margin-bottom: 32px
}

.exchangeSuccess-fd3e8aa9 .exchangeSuccessText-caa2550a {
  color: var(--dexc-dark-primary-font-color);
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 8px
}

.exchangeSuccess-fd3e8aa9 .exchangeSuccessTips-ae26c2b4 {
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-bottom: 32px
}

.exchangeSuccess-fd3e8aa9 .exchangeSuccessBtn-f0196639 {
  border-radius: 32px;
  margin: 24px 0 32px;
  padding: 16px;
  width: 100%
}

:root {
  --dexc-success-color: #75d12a;
  --dexc-warning-color: #ffa435;
  --dexc-error-color: #ff4a8a;
  --dexc-aux-color: #ff4a8a;
  --dexc-pure-white-color: #fff;
  --dexc-pure-black-color: #000;
  --dexc-mask-color: rgba(0, 0, 0, .8);
  --dexc-footer-bg: #121212;
  --dexc-footer-font-color: #f5f5f5;
  --dexc-footer-up-to-top-bg: #434343;
  --dexc-footer-icon-hover-bg: #444;
  --dexc-white-primary-color: #0173e5;
  --dexc-white-primary-hover-color: #2788e9;
  --dexc-white-primary-active-color: #0162c3;
  --dexc-white-primary-font-color: #000;
  --dexc-white-secondary-font-color: #565656;
  --dexc-white-tertiary-font-color: #8a8a8e;
  --dexc-white-quaternary-font-color: #adadb4;
  --dexc-white-primary-bg-color: #f2f2f2;
  --dexc-white-primary-container-bg: #fff;
  --dexc-white-secondary-container-bg: #fafafa;
  --dexc-white-component-bg-color: #f5f5f5;
  --dexc-white-input-disabled-bg: #ebebeb;
  --dexc-white-base-border-color: #ddd;
  --dexc-white-common-border-color: #ddd;
  --dexc-white-trade-bg: #f2f2f2;
  --dexc-white-trade-special-container-bg: #fff;
  --dexc-white-trade-primary-container-bg: #fff;
  --dexc-white-trade-secondary-container-bg: #fafafa;
  --dexc-white-trade-component-bg-color: #f5f5f5;
  --dexc-white-trade-input-disabled-bg: #ebebeb;
  --dexc-white-trade-base-divider-color: #ddd;
  --dexc-white-trade-divider-color: #ddd;
  --dexc-dark-primary-color: #6001ff;
  --dexc-dark-primary-hover-color: #a670ff;
  --dexc-dark-primary-active-color: #4c00ca;
  --dexc-dark-primary-font-color: #fff;
  --dexc-dark-secondary-font-color: #8a8a8e;
  --dexc-dark-tertiary-font-color: #343434;
  --dexc-dark-quaternary-font-color: #343434;
  --dexc-dark-primary-bg-color: #080808;
  --dexc-dark-secondary-container-bg: #080808;
  --dexc-dark-component-bg-color: #202020;
  --dexc-dark-input-disabled-bg: #141414;
  --dexc-dark-base-border-color: #343434;
  --dexc-dark-common-border-color: #202020;
  --dexc-dark-trade-bg: #080808;
  --dexc-dark-trade-special-container-bg: #0c0d0e;
  --dexc-dark-trade-primary-container-bg: #141414;
  --dexc-dark-trade-secondary-container-bg: #080808;
  --dexc-dark-trade-component-bg-color: #202020;
  --dexc-dark-trade-input-disabled-bg: #141414;
  --dexc-dark-trade-base-divider-color: #343434;
  --dexc-dark-trade-divider-color: #202020;
  --dexc-dark-invite-primary-bg-color: #343434;
  --dexc-dark-invite-search-icon-color: #8c8c8c;
  --dexc-dark-invite-btn-border-color: #714ebd
}

html[data-dexc-theme=dark] {
  --dexc-primary-color: var(--dexc-dark-primary-color);
  --dexc-primary-hover-color: var(--dexc-dark-primary-hover-color);
  --dexc-primary-active-color: var(--dexc-dark-primary-active-color);
  --dexc-primary-font-color: var(--dexc-dark-primary-font-color);
  --dexc-secondary-font-color: var(--dexc-dark-secondary-font-color);
  --dexc-tertiary-font-color: var(--dexc-dark-tertiary-font-color);
  --dexc-quaternary-font-color: var(--dexc-dark-quaternary-font-color);
  --dexc-primary-bg-color: var(--dexc-dark-primary-bg-color);
  --dexc-primary-container-bg: var(--dexc-dark-primary-container-bg);
  --dexc-secondary-container-bg: var(--dexc-dark-secondary-container-bg);
  --dexc-component-bg-color: var(--dexc-dark-component-bg-color);
  --dexc-input-disabled-bg: var(--dexc-dark-input-disabled-bg);
  --dexc-base-border-color: var(--dexc-dark-base-border-color);
  --dexc-common-border-color: var(--dexc-dark-common-border-color);
  --dexc-trade-bg: var(--dexc-dark-trade-bg);
  --dexc-trade-special-container-bg: var(--dexc-dark-trade-special-container-bg);
  --dexc-trade-primary-container-bg: var(--dexc-dark-trade-primary-container-bg);
  --dexc-trade-secondary-container-bg: var(--dexc-dark-trade-secondary-container-bg);
  --dexc-trade-component-bg-color: var(--dexc-dark-trade-component-bg-color);
  --dexc-trade-input-disabled-bg: var(--dexc-dark-trade-input-disabled-bg);
  --dexc-trade-base-divider-color: var(--dexc-dark-trade-base-divider-color);
  --dexc-trade-divider-color: var(--dexc-dark-trade-divider-color)
}

html[data-dexc-theme=white] {
  --dexc-pure-color: var(--dexc-pure-white-color);
  --dexc-primary-color: var(--dexc-white-primary-color);
  --dexc-primary-hover-color: var(--dexc-white-primary-hover-color);
  --dexc-primary-active-color: var(--dexc-white-primary-active-color);
  --dexc-primary-font-color: var(--dexc-white-primary-font-color);
  --dexc-secondary-font-color: var(--dexc-white-secondary-font-color);
  --dexc-tertiary-font-color: var(--dexc-white-tertiary-font-color);
  --dexc-quaternary-font-color: var(--dexc-white-quaternary-font-color);
  --dexc-primary-bg-color: var(--dexc-white-primary-bg-color);
  --dexc-primary-container-bg: var(--dexc-white-primary-container-bg);
  --dexc-secondary-container-bg: var(--dexc-white-secondary-container-bg);
  --dexc-component-bg-color: var(--dexc-white-component-bg-color);
  --dexc-input-disabled-bg: var(--dexc-white-input-disabled-bg);
  --dexc-base-border-color: var(--dexc-white-base-border-color);
  --dexc-common-border-color: var(--dexc-white-common-border-color);
  --dexc-trade-bg: var(--dexc-white-trade-bg);
  --dexc-trade-special-container-bg: var(--dexc-white-trade-special-container-bg);
  --dexc-trade-primary-container-bg: var(--dexc-white-trade-primary-container-bg);
  --dexc-trade-secondary-container-bg: var(--dexc-white-trade-secondary-container-bg);
  --dexc-trade-component-bg-color: var(--dexc-white-trade-component-bg-color);
  --dexc-trade-input-disabled-bg: var(--dexc-white-trade-input-disabled-bg);
  --dexc-trade-base-divider-color: var(--dexc-white-trade-base-divider-color);
  --dexc-trade-divider-color: var(--dexc-white-trade-divider-color)
}

.tabContent-ecdce619 {
  margin: 0 -24px;
  padding: 0 24px 24px
}

.tabContent-ecdce619 .coinFilters-a9d469d5 {
  padding: 16px 0
}

.tabContent-ecdce619 .coinFilters-a9d469d5 .dex-tabs-tab-active {
  background-color: var(--dexc-dark-component-bg-color) !important;
  border-radius: 20px !important
}

.tabContent-ecdce619 .dex-token-symbol {
  background-color: transparent
}

.recordList-a6ae002d {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  height: 286px;
  justify-items: center;
  margin: 0 -24px;
  overflow-y: auto;
  padding: 0 24px
}

.recordList-a6ae002d.hasData-f1dcfcc3 {
  display: block
}

.recordItem-c9815df6 {
  border-bottom: 1px solid var(--dexc-dark-common-border-color);
  padding: 16px 0;
  width: 100%
}

.recordItem-c9815df6:first-child {
  padding-top: 0
}

.recordItem-c9815df6 .recordHeader-f651e134 {
  align-items: center;
  color: #8a8a8e;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  justify-content: space-between;
  line-height: 16px;
  margin-bottom: 8px
}

.recordItem-c9815df6 .recordContent-a13624a7 {
  align-items: center;
  display: flex
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 {
  align-items: center;
  display: flex;
  flex: 1 1;
  gap: 8px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 .recordInfo-fc7e72a1 .coinName-d763bb0a {
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 2px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordLeft-cd196774 .recordInfo-fc7e72a1 .amount-e1654b9a {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordArrow-e99a9366 {
  align-items: center;
  display: flex;
  height: 16px;
  justify-content: center;
  width: 16px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 {
  align-items: center;
  display: flex;
  flex: 1 1;
  gap: 12px;
  justify-content: flex-end
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 {
  text-align: right
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .coinName-d763bb0a {
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 2px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .amount-e1654b9a {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .amount-e1654b9a .amountValue-fe8a152d {
  vertical-align: middle
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .recordInfo-fc7e72a1 .dex-tag {
  border-radius: 2px;
  font-size: 10px;
  font-weight: 400;
  line-height: 11px;
  margin-left: 4px;
  padding: 3px 4px
}

.recordItem-c9815df6 .recordContent-a13624a7 .recordRight-a78bf0a4 .typeLabel-f9514a73 {
  border-radius: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 4px 8px;
  white-space: nowrap
}

.recordItem-c9815df6 .recordPending-f30b45f1 {
  color: var(--dexc-success-color)
}

.icon-c0aae262 {
  border: none
}

:root {
  --dexc-success-color-rgb: 117, 209, 42;
  --dexc-warning-color-rgb: 255, 164, 53;
  --dexc-error-color-rgb: 255, 74, 138;
  --dexc-aux-color-rgb: 255, 74, 138;
  --dexc-pure-white-color-rgb: 255, 255, 255;
  --dexc-pure-black-color-rgb: 0, 0, 0;
  --dexc-footer-bg-rgb: 18, 18, 18;
  --dexc-footer-font-color-rgb: 245, 245, 245;
  --dexc-footer-up-to-top-bg-rgb: 67, 67, 67;
  --dexc-footer-icon-hover-bg-rgb: 68, 68, 68;
  --dexc-white-primary-color-rgb: 1, 115, 229;
  --dexc-white-primary-hover-color-rgb: 39, 136, 233;
  --dexc-white-primary-active-color-rgb: 1, 98, 195;
  --dexc-white-primary-font-color-rgb: 0, 0, 0;
  --dexc-white-secondary-font-color-rgb: 86, 86, 86;
  --dexc-white-tertiary-font-color-rgb: 138, 138, 142;
  --dexc-white-quaternary-font-color-rgb: 173, 173, 180;
  --dexc-white-primary-bg-color-rgb: 242, 242, 242;
  --dexc-white-primary-container-bg-rgb: 255, 255, 255;
  --dexc-white-secondary-container-bg-rgb: 250, 250, 250;
  --dexc-white-component-bg-color-rgb: 245, 245, 245;
  --dexc-white-input-disabled-bg-rgb: 235, 235, 235;
  --dexc-white-base-border-color-rgb: 221, 221, 221;
  --dexc-white-common-border-color-rgb: 221, 221, 221;
  --dexc-white-trade-bg-rgb: 242, 242, 242;
  --dexc-white-trade-special-container-bg-rgb: 255, 255, 255;
  --dexc-white-trade-primary-container-bg-rgb: 255, 255, 255;
  --dexc-white-trade-secondary-container-bg-rgb: 250, 250, 250;
  --dexc-white-trade-component-bg-color-rgb: 245, 245, 245;
  --dexc-white-trade-input-disabled-bg-rgb: 235, 235, 235;
  --dexc-white-trade-base-divider-color-rgb: 221, 221, 221;
  --dexc-white-trade-divider-color-rgb: 221, 221, 221;
  --dexc-dark-primary-color-rgb: 96, 1, 255;
  --dexc-dark-primary-hover-color-rgb: 166, 112, 255;
  --dexc-dark-primary-active-color-rgb: 76, 0, 202;
  --dexc-dark-primary-font-color-rgb: 255, 255, 255;
  --dexc-dark-secondary-font-color-rgb: 138, 138, 142;
  --dexc-dark-tertiary-font-color-rgb: 52, 52, 52;
  --dexc-dark-quaternary-font-color-rgb: 52, 52, 52;
  --dexc-dark-primary-bg-color-rgb: 8, 8, 8;
  --dexc-dark-primary-container-bg-rgb: 20, 20, 20;
  --dexc-dark-secondary-container-bg-rgb: 8, 8, 8;
  --dexc-dark-component-bg-color-rgb: 32, 32, 32;
  --dexc-dark-input-disabled-bg-rgb: 20, 20, 20;
  --dexc-dark-base-border-color-rgb: 52, 52, 52;
  --dexc-dark-common-border-color-rgb: 32, 32, 32;
  --dexc-dark-trade-bg-rgb: 8, 8, 8;
  --dexc-dark-trade-special-container-bg-rgb: 12, 13, 14;
  --dexc-dark-trade-primary-container-bg-rgb: 20, 20, 20;
  --dexc-dark-trade-secondary-container-bg-rgb: 8, 8, 8;
  --dexc-dark-trade-component-bg-color-rgb: 32, 32, 32;
  --dexc-dark-trade-input-disabled-bg-rgb: 20, 20, 20;
  --dexc-dark-trade-base-divider-color-rgb: 52, 52, 52;
  --dexc-dark-trade-divider-color-rgb: 32, 32, 32;
  --dexc-dark-invite-primary-bg-color-rgb: 52, 52, 52;
  --dexc-dark-invite-search-icon-color-rgb: 140, 140, 140;
  --dexc-dark-invite-btn-border-color-rgb: 113, 78, 189
}

html[data-dexc-theme=white] {
  --dexc-pure-color-rgb: var(--dexc-pure-white-color-rgb);
  --dexc-primary-color-rgb: var(--dexc-white-primary-color-rgb);
  --dexc-primary-hover-color-rgb: var(--dexc-white-primary-hover-color-rgb);
  --dexc-primary-active-color-rgb: var(--dexc-white-primary-active-color-rgb);
  --dexc-primary-font-color-rgb: var(--dexc-white-primary-font-color-rgb);
  --dexc-secondary-font-color-rgb: var(--dexc-white-secondary-font-color-rgb);
  --dexc-tertiary-font-color-rgb: var(--dexc-white-tertiary-font-color-rgb);
  --dexc-quaternary-font-color-rgb: var(--dexc-white-quaternary-font-color-rgb);
  --dexc-primary-bg-color-rgb: var(--dexc-white-primary-bg-color-rgb);
  --dexc-primary-container-bg-rgb: var(--dexc-white-primary-container-bg-rgb);
  --dexc-secondary-container-bg-rgb: var(--dexc-white-secondary-container-bg-rgb);
  --dexc-component-bg-color-rgb: var(--dexc-white-component-bg-color-rgb);
  --dexc-input-disabled-bg-rgb: var(--dexc-white-input-disabled-bg-rgb);
  --dexc-base-border-color-rgb: var(--dexc-white-base-border-color-rgb);
  --dexc-common-border-color-rgb: var(--dexc-white-common-border-color-rgb);
  --dexc-trade-bg-rgb: var(--dexc-white-trade-bg-rgb);
  --dexc-trade-special-container-bg-rgb: var(--dexc-white-trade-special-container-bg-rgb);
  --dexc-trade-primary-container-bg-rgb: var(--dexc-white-trade-primary-container-bg-rgb);
  --dexc-trade-secondary-container-bg-rgb: var(--dexc-white-trade-secondary-container-bg-rgb);
  --dexc-trade-component-bg-color-rgb: var(--dexc-white-trade-component-bg-color-rgb);
  --dexc-trade-input-disabled-bg-rgb: var(--dexc-white-trade-input-disabled-bg-rgb);
  --dexc-trade-base-divider-color-rgb: var(--dexc-white-trade-base-divider-color-rgb);
  --dexc-trade-divider-color-rgb: var(--dexc-white-trade-divider-color-rgb)
}

html[data-dexc-theme=dark] {
  --dexc-primary-color-rgb: var(--dexc-dark-primary-color-rgb);
  --dexc-primary-hover-color-rgb: var(--dexc-dark-primary-hover-color-rgb);
  --dexc-primary-active-color-rgb: var(--dexc-dark-primary-active-color-rgb);
  --dexc-primary-font-color-rgb: var(--dexc-dark-primary-font-color-rgb);
  --dexc-secondary-font-color-rgb: var(--dexc-dark-secondary-font-color-rgb);
  --dexc-tertiary-font-color-rgb: var(--dexc-dark-tertiary-font-color-rgb);
  --dexc-quaternary-font-color-rgb: var(--dexc-dark-quaternary-font-color-rgb);
  --dexc-primary-bg-color-rgb: var(--dexc-dark-primary-bg-color-rgb);
  --dexc-primary-container-bg-rgb: var(--dexc-dark-primary-container-bg-rgb);
  --dexc-secondary-container-bg-rgb: var(--dexc-dark-secondary-container-bg-rgb);
  --dexc-component-bg-color-rgb: var(--dexc-dark-component-bg-color-rgb);
  --dexc-input-disabled-bg-rgb: var(--dexc-dark-input-disabled-bg-rgb);
  --dexc-base-border-color-rgb: var(--dexc-dark-base-border-color-rgb);
  --dexc-common-border-color-rgb: var(--dexc-dark-common-border-color-rgb);
  --dexc-trade-bg-rgb: var(--dexc-dark-trade-bg-rgb);
  --dexc-trade-special-container-bg-rgb: var(--dexc-dark-trade-special-container-bg-rgb);
  --dexc-trade-primary-container-bg-rgb: var(--dexc-dark-trade-primary-container-bg-rgb);
  --dexc-trade-secondary-container-bg-rgb: var(--dexc-dark-trade-secondary-container-bg-rgb);
  --dexc-trade-component-bg-color-rgb: var(--dexc-dark-trade-component-bg-color-rgb);
  --dexc-trade-input-disabled-bg-rgb: var(--dexc-dark-trade-input-disabled-bg-rgb);
  --dexc-trade-base-divider-color-rgb: var(--dexc-dark-trade-base-divider-color-rgb);
  --dexc-trade-divider-color-rgb: var(--dexc-dark-trade-divider-color-rgb);
  --dexc-invite-primary-bg-color-rgb: var(--dexc-dark-invite-primary-bg-color-rgb);
  --dexc-invite-search-icon-color-rgb: var(--dexc-dark-invite-search-icon-color-rgb);
  --dexc-invite-btn-border-color-rgb: var(--dexc-dark-invite-btn-border-color-rgb)
}

.dex-tag {
  background-color: var(--dexc-common-border-color);
  cursor: default;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  text-align: center
}

.dex-tag-small {
  padding: 0 4px
}

.dex-tag-mid {
  padding: 4px 8px
}

.dex-tag-large {
  padding: 6px 8px
}

.dex-tag-primary {
  background-color: var(--dex-tag-cur-color)
}

.dex-tag-default,
.dex-tag-primary {
  border: none;
  color: var(--dexc-primary-font-color)
}

.dex-tag-default {
  background-color: rgba(var(--dex-tag-cur-color-rgb), .2)
}

.dex-tag-ghost {
  background-color: transparent;
  border: 1px solid var(--dex-tag-cur-color);
  color: var(--dexc-primary-font-color)
}

.dex-tag-link {
  background-color: var(--dex-component-background-color);
  color: var(--dex-primary-font-color);
  cursor: pointer;
  transition: color .3s
}

.dex-tag-link:hover {
  color: var(--dex-primary-color);
  transition: color .3s
}

.dex-tag-gray {
  background-color: var(--dexc-trade-divider-color);
  color: var(--dexc-secondary-font-color)
}

.dex-tag-blue {
  --dex-tag-cur-color: var(--dex-primary-color);
  --dex-tag-cur-color-rgb: var(--dex-primary-color-rgb)
}

.dex-tag-green {
  --dex-tag-cur-color: var(--dex-success-color);
  --dex-tag-cur-color-rgb: var(--dex-success-color-rgb)
}

.dex-tag-yellow {
  --dex-tag-cur-color: var(--dex-aux-color);
  --dex-tag-cur-color-rgb: var(--dex-aux-color-rgb)
}

.dex-tag-red {
  --dex-tag-cur-color: var(--dex-error-color);
  --dex-tag-cur-color-rgb: var(--dex-error-color-rgb)
}

.dex-tag-normal.dex-tag-large,
.dex-tag-normal.dex-tag-mid,
.dex-tag-normal.dex-tag-small {
  border-radius: var(--dex-border-radius-xs)
}

.dex-tag-circle {
  border-radius: 100px
}

.dex-tag-special {
  border-radius: 8px 0
}

:root {
  --dex-mc-primary-font-color: var(--dexc-primary-font-color);
  --dex-mc-secondary-font-color: var(--dexc-secondary-font-color);
  --dex-mc-tertiary-font-color: var(--dexc-tertiary-font-color);
  --dex-mc-quaternary-font-color: var(--dexc-quaternary-font-color);
  --dex-mc-primary-bg-color: var(--dexc-primary-bg-color);
  --dex-mc-primary-container-bg: var(--dexc-primary-container-bg);
  --dex-mc-secondary-container-bg: var(--dexc-secondary-container-bg);
  --dex-mc-component-background-color: var(--dexc-component-bg-color);
  --dex-mc-input-disabled-bg: var(--dexc-input-disabled-bg);
  --dex-mc-common-border-color: var(--dexc-common-border-color);
  --dex-mc-trade-primary-container-bg: var(--dexc-trade-primary-container-bg);
  --dex-mc-divider-color: var(--dexc-divider-color)
}

html[data-red-green-direction=green] {
  --dex-mc-buy-color-fade10: rgba(var(--dex-success-color-rgb), 0.1);
  --dex-mc-orderbook-price-label-buy-background: linear-gradient(var(--dex-mc-buy-color-fade10), var(--dex-mc-buy-color-fade10));
  --dex-mc-sell-color-fade10: rgba(var(--dex-error-color-rgb), 0.1);
  --dex-mc-orderbook-price-label-sell-background: linear-gradient(var(--dex-mc-sell-color-fade10), var(--dex-mc-sell-color-fade10))
}

html[data-red-green-direction=red] {
  --dex-mc-buy-color-fade10: rgba(var(--dex-error-color-rgb), 0.1);
  --dex-mc-orderbook-price-label-buy-background: linear-gradient(var(--dex-mc-buy-color-fade10), var(--dex-mc-buy-color-fade10));
  --dex-mc-sell-color-fade10: rgba(var(--dex-success-color-rgb), 0.1);
  --dex-mc-orderbook-price-label-sell-background: linear-gradient(var(--dex-mc-sell-color-fade10), var(--dex-mc-sell-color-fade10))
}

:root {
  --dex-mc-kline-header-button-color: var(--dexc-dark-secondary-font-color);
  --dex-mc-kline-header-button-active-color: var(--dex-mc-primary-font-color);
  --dex-mc-kline-header-background: var(--dexc-trade-bg)
}

html[data-dex-theme=light],
html[data-dex-theme=white] {
  --dex-mc-orderbook-price-label-hover-background-color: #fafafa
}

html[data-dex-theme=dark] {
  --dex-mc-orderbook-price-label-hover-background-color: #1b1e28
}

.dex-mc-icon {
  align-items: center;
  display: flex;
  justify-content: center
}

.productsList-f816f95d {
  background: var(--dexc-dark-primary-container-bg);
  border: 1px solid var(--dexc-dark-common-border-color);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px
}

.productsList-f816f95d .empty-db3106f2 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 260px;
  justify-content: center
}

.productsList-f816f95d .productItem-ce0baeaa {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 20px 0
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd {
  align-items: center;
  display: flex
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd .tokenSymbol-e9cf8d38 {
  border: none
}

.productsList-f816f95d .productItem-ce0baeaa .productInfo-b6683fdd .symbol-c78a4a4b {
  color: var(--dexc-dark-primary-font-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  margin-left: 8px
}

.productsList-f816f95d .productItem-ce0baeaa .apyInfo-c99120d5 {
  align-items: center;
  display: flex;
  gap: 8px
}

.productsList-f816f95d .productItem-ce0baeaa .apyInfo-c99120d5 .apyLabel-fc52a0b4 {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px
}

.productsList-f816f95d .productItem-ce0baeaa .apyInfo-c99120d5 .apy-d5a9b8ff {
  color: var(--dexc-dark-primary-font-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px
}

.dex-mc-kline-chart {
  background-color: var(--dex-mc-kline-header-background);
  height: 631px;
  width: 100%
}

.dex-mc-kline-chart-fullscreen {
  height: calc(100% - 28px);
  width: 100%
}

.stakingPage-ddd65f26 {
  background-color: #080808;
  min-height: 100vh;
  padding-bottom: 100px;
  width: 100%
}

.stakingPage-ddd65f26 .dex-token-symbol {
  background-color: transparent
}

.stakingPage-ddd65f26 .stakingContainer-f32eaa99 {
  margin: 0 auto;
  width: 1200px
}

.stakingPage-ddd65f26 .balanceSection-f69c88c0,
.stakingPage-ddd65f26 .earnSection-f1c2b1ce {
  margin-bottom: 60px
}

.stakingPage-ddd65f26 .earnSection-f1c2b1ce .sectionTitle-b08b7321 {
  color: var(--dexc-dark-primary-font-color);
  font-size: 28px;
  font-weight: 500;
  line-height: 40px;
  margin-bottom: 16px
}

.dex-mc-chart-type-selector,
.dex-mc-chart-type-selector-label {
  align-items: center;
  display: flex;
  justify-content: center
}

.dex-mc-chart-type-selector-label {
  color: var(--dex-mc-kline-header-button-active-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px
}

.dex-mc-chart-type-selector-triangle {
  cursor: "pointer";
  margin-left: 6px
}

.dex-mc-chart-type-selector-open .dex-mc-chart-type-selector-triangle {
  transform: rotate(180deg);
  transform-origin: center;
  transition: all .3s
}

.heroSection-d7b7b2bf {
  margin-bottom: 12px;
  overflow: hidden
}

.heroSection-d7b7b2bf .heroContent-f088ed93 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 78px 0 87px;
  position: relative
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c {
  flex: 1 1
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroSubtitle-bace3597 {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 16px
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroTitle-d7969307 {
  font-size: 48px;
  font-weight: 700;
  line-height: 80px;
  margin-bottom: 32px;
  margin-right: 486px
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroTitle-d7969307 span:first-child {
  background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, .7));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .heroTitle-d7969307 span:last-child {
  color: #fbb930
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .eventRulesBtn-f2026d40 {
  background: var(--dexc-dark-primary-bg-color);
  border: 1px solid var(--dexc-dark-invite-btn-border-color);
  border-radius: 30px;
  color: var(--dexc-dark-primary-font-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  margin: 0 auto;
  padding: 16px 40px
}

.heroSection-d7b7b2bf .heroLeft-fa0ff91c .eventRulesBtn-f2026d40 .dex-icon-right-arrow {
  color: var(--dexc-dark-primary-font-color);
  font-size: 16px;
  margin-left: 4px
}

.heroSection-d7b7b2bf .banner-dcff1f9a {
  position: absolute;
  right: -56px;
  top: 18px
}

.heroSection-d7b7b2bf .banner-dcff1f9a img {
  height: 380px;
  width: 380px
}

.dex-mc-kline-header {
  align-items: center;
  background-color: var(--dex-mc-kline-header-background);
  border-radius: 4px 4px 0 0;
  box-sizing: border-box;
  display: flex;
  height: 28px;
  justify-content: space-around;
  min-width: 400px;
  padding: 0 16px
}

.dex-mc-kline-header-radio-container {
  align-items: center;
  display: flex;
  gap: 16px;
  height: 100%;
  justify-content: center
}

.dex-mc-kline-header-radio-container-label {
  color: var(--dex-mc-kline-header-button-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
  margin: 8px 0;
  text-align: center
}

.dex-mc-kline-header-radio-container-label:hover {
  color: var(--dex-mc-kline-header-button-active-color)
}

.dex-mc-kline-header-radio-container-button {
  align-items: center;
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  display: flex;
  justify-content: center
}

.dex-mc-kline-header-radio-container-button .dex-icon,
.dex-mc-kline-header-radio-container-button .dex-icon-next {
  font-size: 20px;
  line-height: 20px
}

.dex-mc-kline-header-radio-container-button:hover {
  color: var(--dex-mc-kline-header-button-active-color)
}

.dex-mc-kline-header-radio-container-button:hover circle,
.dex-mc-kline-header-radio-container-button:hover path,
.dex-mc-kline-header-radio-container-button:hover rect {
  stroke: var(--dex-mc-kline-header-button-active-color)
}

.dex-mc-kline-header-radio-container-label-active {
  color: var(--dex-mc-kline-header-button-active-color)
}

.dex-mc-kline-header-price-type-container {
  align-items: center;
  color: var(--dex-mc-kline-header-button-color);
  display: flex;
  flex: 1 1;
  font-weight: 500;
  gap: 16px;
  justify-content: flex-end;
  line-height: 16px
}

.dex-mc-kline-header-price-type-container .dex-select {
  min-height: unset;
  min-width: unset
}

.dex-mc-kline-header-price-type-container .dex-select .dex-select-selector {
  font-size: 12px;
  line-height: 16px;
  min-height: auto;
  padding: 2px 24px 2px 8px
}

.dex-mc-kline-header-price-type-container span {
  cursor: default;
  font-size: 12px;
  line-height: 16px
}

.dex-mc-kline-header-radio-container-open .dex-mc-kline-header-radio-container-triangle {
  transform: rotate(180deg);
  transform-origin: center;
  transition: all .3s
}

ul.dex-mc-kline-header-trading-type-container {
  list-style: none;
  margin: 0
}

.dex-mc-kline-header-trading-type-container {
  color: var(--dex-primary-font-color);
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  gap: 4px;
  justify-content: flex-start;
  line-height: 16px;
  margin: 0;
  padding: 0
}

.dex-mc-kline-header-trading-type-container li .dex-checkbox-wrapper {
  border-radius: 4px;
  color: var(--dex-primary-font-color);
  gap: 8px;
  padding: 7px 12px;
  width: 100%
}

.dex-mc-kline-header-trading-type-container li .dex-checkbox-wrapper .dex-checkbox-label {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: 0
}

.dex-mc-kline-header-trading-type-container li .dex-checkbox-wrapper:hover {
  background: var(--dex-secondary-container-bg)
}

.dex-mc-kline-header-trading-type-container li .dex-tip-text {
  color: var(--dex-primary-font-color)
}

.dex-mc-kline-header-trading-type-container dl {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0;
  min-height: 28px;
  min-width: 220px;
  padding: 0 12px;
  width: 100%
}

.dex-mc-kline-header-trading-type-container dl .dex-select {
  border: 1px solid var(--dex-common-border-color);
  border-radius: 4px
}

.dex-mc-kline-header-trading-type-container dl .dex-select:focus,
.dex-mc-kline-header-trading-type-container dl .dex-select:hover {
  border-color: var(--dexc-primary-font-color)
}

.dex-mc-kline-header-trading-type-container dl .dex-select-selector {
  background: transparent
}

.dex-mc-kline-header-trading-type-container dl .dex-select-dropdown .dex-select-item {
  font-weight: 400
}

.dex-mc-kline-header-days-wraper {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: 4px;
  padding-right: 12px
}

.dex-mc-kline-header-days-wraper span {
  background: var(--dexc-component-bg-color);
  border-radius: 4px;
  cursor: pointer;
  min-width: 100px;
  padding: 4px 8px;
  text-align: center
}

.dex-mc-kline-header-days-wraper span.current,
.dex-mc-kline-header-days-wraper span:hover {
  background: rgba(0, 117, 237, .1);
  color: #0075ed
}

.dex-mc-kline-header-current-transaction-overlay .dex-tooltip-inner {
  max-width: 340px;
  padding: 4px
}

.dex-mc-kline-header-trading-munus-overlay .dex-tooltip-inner {
  background-color: var(--dex-trade-primary-container-bg);
  padding: 4px
}

.hero-banner {
  margin-top: 80px;
  padding: 0 0 100px
}

.hero-banner.no-login {
  margin-bottom: -28px;
  margin-top: 26px;
  padding-bottom: 0
}

.hero-banner .hero-content {
  align-items: center;
  display: grid;
  gap: 60px;
  grid-template-columns: 2fr 1fr;
  margin: 0 auto;
  max-width: 1200px
}

.hero-banner .hero-left .hero-title {
  color: var(--dex-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  margin-bottom: 8px
}

.hero-banner .hero-left .hero-subtitle {
  color: var(--dex-primary-font-color);
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 14px
}

.hero-banner .hero-left .hero-subtitle span {
  color: var(--dex-warning-color);
  font-size: 54px;
  line-height: 66px
}

.hero-banner .hero-left .activity-time {
  color: var(--dexc-white-tertiary-font-color);
  font-size: 14px;
  line-height: 18px
}

.hero-banner .hero-left .phase-selector .dex-select {
  background: var(--dexc-dark-primary-container-bg);
  border: 1px solid var(--dexc-dark-common-border-color)
}

.hero-banner .hero-left .phase-selector .dex-select .dex-select-selector {
  border-radius: 12px;
  min-height: 48px;
  padding: 12px 20px
}

.hero-banner .hero-left .phase-selector .dex-select .dex-select-selector .dex-select-selection-item {
  color: var(--dex-primary-font-color);
  font-size: 16px;
  line-height: 24px;
  margin-right: 28px
}

.hero-banner .hero-left .phase-selector .dex-select .dex-select-arrow {
  color: var(--dex-primary-font-color);
  right: 20px
}

.hero-banner .hero-left .phase-selector .dex-select:focus,
.hero-banner .hero-left .phase-selector .dex-select:hover {
  border-color: var(--dexc-dark-common-border-color)
}

.hero-banner .hero-right>img {
  height: 399px;
  width: 438px
}

.hero-banner .hero-right .claim-box {
  border-radius: 16px;
  box-shadow: 0 8.077px 3.462px 0 rgba(0, 0, 0, .03), 0 4.615px 4.615px 0 rgba(0, 0, 0, .25), 0 0 6px 0 hsla(0, 0%, 100%, .25), inset 0 1.154px 0 1px hsla(0, 0%, 100%, .19);
  padding: 32px
}

.hero-banner .hero-right .claim-box .claim-title {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 6px
}

.hero-banner .hero-right .claim-box .claim-value {
  align-items: center;
  color: var(--dex-primary-font-color);
  display: flex;
  font-size: 24px;
  font-weight: 700;
  justify-content: space-between;
  line-height: 30px;
  margin-bottom: 18px
}

.hero-banner .hero-right .claim-box .claim-value p {
  align-items: center;
  color: var(--dex-primary-font-color);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  line-height: 16px
}

.hero-banner .hero-right .claim-box .claim-button {
  width: 100%
}

.hero-banner .claim-button {
  --dex-border-radius-mid: 100px
}

.success-modal .success-icon {
  align-items: center;
  background-color: var(--dexc-dark-primary-color);
  border-radius: 50%;
  display: flex;
  height: 54px;
  justify-content: center;
  margin: 32px auto;
  width: 54px
}

.success-modal .success-icon img {
  height: 42px;
  width: 42px
}

.success-modal .dex-modal-body p {
  color: var(--dex-primary-font-color);
  font-size: 16px;
  line-height: 20px;
  text-align: center
}

.claim-info-modal .dex-modal-content .dex-modal-footer,
.success-modal .dex-modal-content .dex-modal-footer {
  padding: 24px 24px 32px
}

.claim-info-modal .dex-modal-content .dex-modal-footer button,
.success-modal .dex-modal-content .dex-modal-footer button {
  max-width: 100%
}

.claim-details-list {
  max-height: 340px;
  overflow-y: scroll
}

.claim-details-list::-webkit-scrollbar {
  width: 6px
}

.claim-details-list::-webkit-scrollbar-thumb {
  background: var(--dexc-dark-common-border-color);
  border-radius: 3px
}

.claim-details-list::-webkit-scrollbar-thumb:hover {
  background: var(--dex-primary-color)
}

.claim-details-list .claim-item {
  align-items: center;
  border-bottom: .5px solid var(--dexc-dark-base-border-color);
  display: flex;
  justify-content: space-between;
  padding: 10px 0
}

.claim-details-list .claim-item:last-child {
  border-bottom: none
}

.claim-details-list .claim-item .claim-item-content {
  display: flex;
  flex: 1 1;
  flex-direction: column
}

.claim-details-list .claim-item .icon-box.success {
  background-color: var(--dexc-success-color)
}

.claim-details-list .claim-item .claim-amount {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 18px
}

.claim-details-list .claim-item .claim-date {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 12px;
  line-height: 16px;
  margin-top: 2px
}

.claim-details-list .claim-item .claim-status {
  align-items: center;
  display: flex;
  flex: 1 1;
  gap: 8px;
  justify-content: flex-end
}

.claim-details-list .claim-item .claim-status.success,
.claim-details-list .claim-item .claim-status.success i {
  color: #52c41a
}

.claim-details-list .claim-item .claim-status.pending,
.claim-details-list .claim-item .claim-status.pending i {
  color: #faad14
}

.claim-details-list .claim-item .claim-status span {
  font-size: 14px
}

.claim-details-list .claim-item .claim-status .record-icon img {
  height: auto;
  width: 16px
}

.dex-select-dropdown .dex-select-item {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  padding: 12px 15px
}

.dex-select-dropdown .dex-select-item .dex-select-item-option-selected,
.dex-select-dropdown .dex-select-item:hover {
  background-color: #232323;
  color: var(--dex-primary-font-color)
}

.claim-info-modal .dex-modal-body,
.success-modal .dex-modal-body {
  padding: 0
}

.claim-info-modal .dex-modal-body .claim-details-list,
.success-modal .dex-modal-body .claim-details-list {
  padding: 0 24px
}

.no-data {
  align-items: center;
  color: #8a8a8e;
  display: flex;
  flex-direction: column;
  font-size: 16px;
  font-weight: 400;
  justify-content: center;
  line-height: 20px;
  padding: 88px 0;
  text-align: center
}

.no-data img {
  height: auto;
  margin-bottom: 10px;
  width: 80px
}

.activity-one {
  margin-bottom: 102px
}

.activity-one .welcome-card {
  background: var(--dex-component-background-color);
  border: 1px solid var(--dex-trade-base-divider-color);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  transition: all .3s ease
}

.activity-one .welcome-card .card-title {
  align-items: center;
  color: var(--dex-primary-font-color);
  display: flex;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px
}

.activity-one .welcome-card img {
  height: auto;
  margin-left: 6px;
  width: 24px
}

.activity-one .welcome-card:hover {
  border-color: var(--dex-trade-base-divider-color);
  transform: translateY(-2px)
}

.activity-one .welcome-card .card-content {
  display: flex;
  flex: 1 1;
  flex-direction: column
}

.activity-one .card-description {
  color: var(--dex-secondary-font-color);
  color: #828282;
  font-size: 14px;
  line-height: 18px;
  margin: 8px 0
}

.activity-one .card-description.last-card-description {
  margin-top: 0
}

.activity-one .tag {
  background: var(--dexc-dark-primary-color);
  border-radius: 2px;
  color: var(--dex-primary-font-color);
  display: inline-block;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  white-space: nowrap;
  width: -moz-fit-content;
  width: fit-content
}

.activity-one .progress-container {
  align-items: center;
  display: flex;
  margin: 16px 0
}

.activity-one .progress-container .user-icon {
  align-items: center;
  color: var(--dex-primary-font-color);
  display: flex;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  margin-right: 8px
}

.activity-one .progress-container .user-icon span {
  color: #666
}

.activity-one .progress-container .user-icon i {
  margin-right: 4px
}

.activity-one .progress-bar {
  background: var(--dex-trade-base-divider-color);
  border-radius: 12px;
  height: 6px;
  overflow: hidden;
  width: 100%
}

.activity-one .progress-bar .progress-text {
  color: var(--dex-tertiary-font-color);
  font-size: 14px;
  text-align: center
}

.activity-one .progress-bar .progress-fill {
  background: #fbb930;
  border-radius: 12px;
  height: 100%;
  transition: width .3s ease
}

.activity-one .button-container {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.activity-one .button-container img {
  height: 16px;
  margin-right: 4px;
  width: 16px
}

.activity-one .button-container button {
  align-items: center;
  color: var(--dex-primary-font-color);
  display: flex;
  font-size: 14px;
  line-height: 18px;
  padding: 8px 24px
}

.activity-one .button-container button.green {
  color: var(--dexc-success-color)
}

.activity-one .button-container .card-footer {
  text-align: right
}

.activity-one .button-container .card-footer .limit-text {
  color: var(--dexc-dark-secondary-font-color);
  display: block;
  font-size: 12px;
  line-height: 16px
}

.activity-one .button-container .card-footer .extra-info {
  color: var(--dexc-dark-primary-font-color);
  display: block;
  font-size: 12px;
  line-height: 16px;
  margin-top: 4px
}

.activity-one .button-container .card-footer .extra-info span {
  color: #fbb930
}

.activity-three {
  margin-bottom: 102px
}

.activity-three .platform-card {
  background: var(--dexc-dark-trade-primary-container-bg);
  border: .5px solid var(--dex-trade-base-divider-color);
  border-radius: 24px;
  cursor: pointer;
  padding: 24px;
  position: relative;
  transition: all .3s ease
}

.activity-three .platform-card img {
  bottom: 0;
  height: 142px;
  position: absolute;
  right: 0;
  width: 142px
}

.activity-three .platform-card:hover {
  transform: translateY(-2px)
}

.activity-three .platform-card .platform-icon {
  font-size: 48px;
  margin-bottom: 24px;
  opacity: .8
}

.activity-three .platform-card .platform-title {
  color: var(--dexc-white-tertiary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 4px
}

.activity-three .platform-card .platform-desc {
  color: var(--dex-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  height: 100px;
  line-height: 20px
}

.activity-three .platform-card .platform-desc span {
  color: var(--dex-warning-color)
}

.activity-three .platform-card .participate-button {
  background: var(--dexc-pure-white-color);
  border-radius: 100px;
  color: var(--dexc-dark-tertiary-font-color);
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  min-width: 120px;
  padding: 10px 24px;
  text-align: center
}

.activity-description {
  background: var(--dexc-dark-trade-primary-container-bg);
  border: .5px solid var(--dexc-dark-trade-base-divider-color);
  border-radius: 24px;
  margin-bottom: 80px
}

.activity-description .description-card {
  padding: 32px
}

.activity-description .description-card .section-title {
  color: var(--dex-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 16px
}

.activity-description .description-card .rule-item {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px
}

.activity-description .description-card .rule-item:last-of-type {
  color: var(--dexc-white-tertiary-font-color);
  font-size: 12px;
  margin-top: 40px
}

.airdrop-page {
  background: var(--dexc-dark-trade-bg);
  color: var(--dex-primary-font-color);
  margin: 0 auto;
  min-height: 100vh;
  width: 1200px
}

.airdrop-page .section {
  margin-bottom: 40px
}

.airdrop-page .section-header {
  margin-bottom: 38px
}

.airdrop-page .section-header .section-title {
  align-items: center;
  color: var(--dex-primary-font-color);
  display: flex;
  font-size: 24px;
  font-weight: 500;
  line-height: 28px
}

.airdrop-page .section-header .section-title img {
  height: 32px;
  margin-right: 8px;
  width: 32px
}

.airdrop-page .section-header .section-description {
  color: var(--dexc-dark-secondary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 10px
}

.airdrop-page .card {
  background: var(--dex-component-background-color);
  border: 1px solid var(--dex-trade-base-divider-color);
  border-radius: 12px;
  padding: 24px
}

.airdrop-page .card-content {
  color: var(--dex-secondary-font-color);
  font-size: 14px;
  line-height: 1.5
}

.airdrop-page .container {
  margin: 0 auto;
  max-width: 1200px
}

.airdrop-page .rebate-card {
  background: var(--dex-component-background-color);
  border: 1px solid var(--dex-trade-base-divider-color);
  border-radius: 12px;
  padding: 24px;
  transition: all .3s ease
}

.airdrop-page .rebate-card:hover {
  border-color: var(--dex-trade-base-divider-color);
  transform: translateY(-2px)
}

.airdrop-page .cards-grid {
  align-items: stretch;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr)
}

.airdrop-page .value-large {
  font-size: 32px
}

.airdrop-page .value-large,
.airdrop-page .value-medium {
  color: var(--dex-primary-font-color);
  font-weight: 700;
  line-height: 1.2
}

.airdrop-page .value-medium {
  font-size: 24px
}

.airdrop-page .value-small {
  color: var(--dex-primary-font-color);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2
}

.airdrop-page .text-primary {
  color: var(--dex-primary-color)
}

.airdrop-page .text-secondary {
  color: var(--dex-tertiary-font-color)
}

.airdrop-page .text-muted {
  color: var(--dex-quaternary-font-color)
}

.airdrop-page .tag-new-user {
  background: var(--dex-component-background-color);
  border: 1px solid var(--dex-trade-base-divider-color);
  color: var(--dex-tertiary-font-color)
}

.airdrop-page .button-primary {
  background: linear-gradient(90deg, var(--dex-primary-color) 0, var(--dex-primary-hover-color) 100%);
  border: none;
  border-radius: 8px;
  color: var(--dex-primary-font-color);
  cursor: pointer;
  font-weight: 600;
  padding: 12px 24px;
  transition: all .3s ease;
  width: 100%
}

.airdrop-page .button-primary:hover {
  background: linear-gradient(90deg, var(--dex-primary-hover-color) 0, var(--dex-primary-color) 100%);
  transform: translateY(-1px)
}

.airdrop-page .button-primary:active {
  transform: translateY(0)
}

.airdrop-page .button-secondary {
  background: transparent;
  border: 1px solid var(--dex-primary-color);
  border-radius: 8px;
  color: var(--dex-primary-color);
  cursor: pointer;
  font-weight: 600;
  padding: 12px 24px;
  transition: all .3s ease
}

.airdrop-page .button-secondary:hover {
  background: var(--dex-primary-color);
  color: var(--dex-primary-font-color)
}

.airdrop-page .grid-3 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr)
}

.airdrop-page .grid-2 {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr)
}

.airdrop-page .flex-between {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.airdrop-page .flex-center {
  align-items: center;
  display: flex;
  gap: 8px
}

.airdrop-page .text-center {
  text-align: center
}

.airdrop-page .mb-16 {
  margin-bottom: 16px
}

.airdrop-page .mb-24 {
  margin-bottom: 24px
}

.airdrop-page .mt-16 {
  margin-top: 16px
}

.airdrop-page .mt-24 {
  margin-top: 24px
}

.airdrop-page .p-24 {
  padding: 24px
}

.airdrop-page .p-32 {
  padding: 32px
}

.apiPage-a76d2d0f {
  margin: 0 auto;
  padding-top: 60px;
  width: 1200px
}

.apiPage-a76d2d0f .dex-button-mini {
  align-items: center;
  border-radius: 100px;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0 12px
}

.apititle-db35c113 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px
}

.apiBox-a63eea35 {
  background: #080808;
  border: 1px solid #202020;
  border-radius: 24px;
  padding: 24px
}

.apiBox-a63eea35 h3 {
  font-size: 20px
}

.apiBox-a63eea35 h3,
.apiBox-a63eea35 h4 {
  color: #fff;
  font-style: normal;
  font-weight: 500;
  line-height: 20px
}

.apiBox-a63eea35 h4 {
  align-items: center;
  display: flex;
  font-size: 16px;
  justify-content: space-between
}

.apiBox-a63eea35 .dex-button-secondary {
  border: 1px solid #343434
}

.tag-a82f88e7 {
  background: #202020;
  border-radius: 2px;
  color: #8a8a8e;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  padding: 4px
}

.notice-bb0bc2e6 {
  padding-top: 8px
}

.notice-bb0bc2e6 li {
  color: #8a8a8e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  padding-left: 14px;
  padding-top: 8px;
  position: relative
}

.notice-bb0bc2e6 li:before {
  background-color: #8a8a8e;
  border-radius: 4px;
  content: "";
  display: inline-block;
  height: 4px;
  left: 0;
  position: absolute;
  top: 16px;
  width: 4px
}

.notice-bb0bc2e6 li a {
  color: #fff;
  text-decoration: underline
}

.notice2-d8f51746 li {
  color: #8a8a8e;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  padding-left: 14px;
  padding-top: 4px;
  position: relative
}

.notice2-d8f51746 li:before {
  background-color: #8a8a8e;
  border-radius: 4px;
  content: "";
  display: inline-block;
  height: 4px;
  left: 0;
  position: absolute;
  top: 12px;
  width: 4px
}

.notice2-d8f51746 li strong {
  color: #fff
}

.addBtn-ebfcd156 {
  align-items: center;
  border-radius: 30px;
  display: flex !important;
  gap: 4px;
  padding: 8px 15px
}

.editApiManageModal-df3b2aeb {
  padding-bottom: 32px
}

.editApiManageModal-df3b2aeb p {
  color: #8a8a8e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400
}

.editApiManageModal-df3b2aeb p span {
  color: #ff4a8a
}

.editApiManageModal-df3b2aeb dl {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.editApiManageModal-df3b2aeb dl dt {
  color: #8a8a8e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px
}

.editApiManageModal-df3b2aeb dl dt strong {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px
}

.editApiManageModal-df3b2aeb .dex-input-huge {
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  padding: 14px 16px;
  text-align: left
}

.editApiManageModal-df3b2aeb .dex-input-huge:focus {
  border: 1px solid #343434
}

.editApiManageModal-df3b2aeb .dex-input-huge::-moz-placeholder {
  font-size: 16px;
  font-weight: 400
}

.editApiManageModal-df3b2aeb .dex-input-huge::placeholder {
  font-size: 16px;
  font-weight: 400
}

.editApiManageModal-df3b2aeb .radioWraper {
  align-items: center;
  display: flex;
  gap: 40px
}

.editApiManageModal-df3b2aeb .radioWraper .dex-radio-label {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px
}

.editApiManageModal-df3b2aeb textarea {
  background-color: var(--dexc-component-bg-color);
  border-color: transparent;
  color: #fff;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  height: 70px;
  line-height: 20px;
  padding: 16px;
  width: 100%
}

.editApiManageModal-df3b2aeb textarea:focus {
  border: 1px solid #343434
}

.editApiManageModal-df3b2aeb textarea::-moz-placeholder {
  font-size: 16px;
  font-weight: 400
}

.editApiManageModal-df3b2aeb textarea::placeholder {
  font-size: 16px;
  font-weight: 400
}

.editApiManageModal-df3b2aeb .dex-button-huge {
  border: 1px solid transparent;
  border-radius: 30px;
  color: #fff;
  flex: 1 1;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  padding: 15px
}

.editApiManageModal-df3b2aeb .dex-button-huge.dex-button-secondary {
  border-color: #343434
}

.editApiManageModal-df3b2aeb .dex-button-mini {
  align-items: center;
  border-radius: 100px;
  display: flex;
  height: 24px;
  justify-content: center;
  padding: 0 12px
}

.editApiManageModal-df3b2aeb .btnWraper {
  align-items: center;
  display: flex;
  gap: 40px;
  justify-content: space-between
}

.WranInfo-c624e9e0 h5 {
  color: #fff;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal
}

.WranInfo-c624e9e0 .dex-checkbox-wrapper-large {
  align-items: flex-start;
  display: flex;
  gap: 12px
}

.WranInfo-c624e9e0 .dex-checkbox-wrapper-large .dex-checkbox {
  margin-top: 3px
}

.WranInfo-c624e9e0 .dex-checkbox-wrapper-large .dex-checkbox-label {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin-left: 0;
  width: 406px
}

.WranInfo-c624e9e0 .dex-checkbox-wrapper-large.grag .dex-checkbox-label {
  color: #8a8a8e
}

.delTips-a5c45064 {
  color: #fff;
  font-size: 18px;
  line-height: 26px;
  padding: 24px 0;
  text-align: center
}

.dex-textarea {
  background-color: transparent;
  border: 1px solid var(--dex-common-border-color);
  border-radius: var(--dex-border-radius-mid);
  font-size: 14px;
  line-height: normal;
  padding: 12px;
  resize: none
}

.dex-textarea,
.dex-textarea:focus {
  color: var(--dex-primary-font-color);
  transition: border-color .3s
}

.dex-textarea:focus {
  border-color: var(--dexc-primary-font-color);
  outline: none
}

.dex-textarea::-moz-placeholder {
  color: var(--dexc-secondary-font-color)
}

.dex-textarea::placeholder {
  color: var(--dexc-secondary-font-color)
}

.dex-textarea-wrapper {
  background-color: transparent;
  border: 1px solid var(--dex-common-border-color);
  border-radius: var(--dex-border-radius-mid);
  color: var(--dex-primary-font-color);
  display: inline-block;
  padding: 12px;
  position: relative;
  transition: border-color .3s
}

.dex-textarea-wrapper .dex-textarea {
  border: none;
  padding: 0
}

.dex-textarea-wrapper .dex-textarea-count {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  line-height: 12px
}

.dex-textarea-wrapper .dex-textarea-count>span {
  color: var(--dex-quaternary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: right
}

.dex-textarea-wrapper .dex-textarea-count-value {
  color: var(--dex-tertiary-font-color)
}

.dex-textarea-wrapper .dex-textarea-count-max {
  color: var(--dex-quaternary-font-color)
}

.dex-textarea-focused.dex-textarea-wrapper {
  border-color: var(--dexc-primary-font-color);
  transition: border-color .3s
}

.dex-textarea-count-overflow.dex-textarea-wrapper {
  border-color: var(--dex-error-color)
}

.dex-textarea-count-overflow.dex-textarea-wrapper .dex-textarea-count-value {
  color: var(--dex-error-color)
}

:root {
  --dex-warning-color: var(--dexc-warning-color);
  --dex-warning-color-rgb: var(--dexc-warning-color-rgb);
  --dex-success-color: var(--dexc-success-color);
  --dex-success-color-rgb: var(--dexc-success-color-rgb);
  --dex-error-color: var(--dexc-error-color);
  --dex-error-color-rgb: var(--dexc-error-color-rgb);
  --dex-aux-color: var(--dexc-aux-color);
  --dex-aux-color-rgb: var(--dexc-aux-color-rgb);
  --dex-white: var(--dexc-pure-white-color);
  --dex-black: var(--dexc-pure-black-color);
  --dex-mask-color: var(--dexc-mask-color);
  --dex-large-font-size: 16px;
  --dex-main-font-size: 14px;
  --dex-secondary-font-size: 12px;
  --dex-border-radius-xs: 2px;
  --dex-border-radius-small: 4px;
  --dex-border-radius-mid: 8px;
  --dex-border-radius-large: 12px;
  --dex-border-radius-xl: 16px;
  --dex-modal-mask-zIndex: 1000;
  --dex-dropdown-zIndex: calc(var(--dex-modal-mask-zIndex) + 50);
  --dex-notification-zIndex: calc(var(--dex-modal-mask-zIndex) + 100);
  --dex-cascader-dropdown-zIndex: calc(var(--dex-dropdown-zIndex) + 50);
  --dex-menu-min-width: 80px;
  --dex-primary-color-rgb: var(--dexc-primary-color-rgb);
  --dex-primary-color: var(--dexc-primary-color);
  --dex-primary-hover-color: var(--dexc-primary-hover-color);
  --dex-primary-active-color: var(--dexc-primary-active-color);
  --dex-primary-font-color: var(--dexc-primary-font-color);
  --dex-secondary-font-color: var(--dexc-secondary-font-color);
  --dex-tertiary-font-color: var(--dexc-tertiary-font-color);
  --dex-quaternary-font-color: var(--dexc-quaternary-font-color);
  --dex-primary-bg-color: var(--dexc-primary-bg-color);
  --dex-primary-container-bg: var(--dexc-trade-primary-container-bg);
  --dex-secondary-container-bg: var(--dexc-trade-secondary-container-bg);
  --dex-component-background-color: var(--dexc-dark-primary-bg-color);
  --dex-input-disabled-bg: var(--dexc-trade-input-disabled-bg);
  --dex-base-border-color: var(--dexc-base-border-color);
  --dex-common-border-color: var(--dexc-common-border-color);
  --dex-trade-bg: var(--dexc-trade-bg);
  --dex-trade-special-container-bg: var(--dexc-trade-special-container-bg);
  --dex-trade-primary-container-bg: var(--dexc-trade-primary-container-bg);
  --dex-trade-secondary-container-bg: var(--dexc-trade-secondary-container-bg);
  --dex-trade-component-background-color: var(--dexc-trade-component-bg-color);
  --dex-trade-input-disabled-bg: var(--dexc-trade-input-disabled-bg);
  --dex-trade-base-divider-color: var(--dexc-trade-base-divider-color);
  --dex-trade-divider-color: var(--dexc-trade-divider-color)
}

html[data-dex-theme=dark] {
  --dex-primary-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4), 0px 4px 8px rgba(0, 0, 0, .6);
  --dex-secondary-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4), 0px 8px 16px rgba(0, 0, 0, .6);
  --dex-tertiary-box-shadow: 0px 0px 6px rgba(0, 0, 0, .4), 0px 16px 32px rgba(0, 0, 0, .6);
  --dex-primary-border-color: #343434
}

html[data-dex-theme=white] {
  --dex-primary-box-shadow: 0px 0px 6px rgba(0, 0, 0, .04), 0px 4px 8px rgba(0, 0, 0, .06);
  --dex-secondary-box-shadow: 0px 0px 6px rgba(0, 0, 0, .04), 0px 8px 16px rgba(0, 0, 0, .06);
  --dex-tertiary-box-shadow: 0px 0px 6px rgba(0, 0, 0, .04), 0px 16px 32px rgba(0, 0, 0, .06)
}

:root {
  --dex-slider-trail-height: 2px;
  --dex-slider-handle-size: 10px;
  --dex-slider-dot-size: 10px;
  --dex-slider-handle-inner-size: calc(var(--dex-slider-handle-size) - 6px);
  --dex-tooltip-arrow-width: 6px;
  --dex-tooltip-arrow-distance: 8px;
  --dex-tooltip-min-width: 56px;
  --dex-tooltip-border-radius: var(--dex-border-radius-mid);
  --dex-checkbox-large-size: 14px;
  --dex-checkbox-small-size: 12px;
  --dex-checkbox-checked-inner-bg: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none" viewBox="0 0 8 8"><path stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1 4.357 3.333 6.5 7 1.5"/></svg>');
  --dex-checkbox-label-margin-left: 4px;
  --dex-table-thead-cell-padding: 12px 19px;
  --dex-table-tbody-cell-padding: 15px 19px;
  --dex-table-cell-first-last-padding: 24px;
  --dex-table-min-height: 340px;
  --dex-scrollbar-width: 4px;
  --dex-scrollbar-redius: 4px;
  --dex-scrollbar-track-bg: "transparent";
  --dex-scrollbar-corner-bg: "transparent"
}

html[data-dex-theme=dark] {
  --dex-alert-warning-background-color: #2f2523;
  --dex-alert-success-background-color: #17292e;
  --dex-alert-error-background-color: #2e2027;
  --dex-switch-handler-bg: var(--dex-primary-font-color);
  --dex-icon-close-color: #475369;
  --dex-icon-common-fill-color: #98a0af;
  --dex-icon-arrow-right-color: #7e8697;
  --dex-icon-loading-bg-url: url("data: image/svg+xml;utf8,%3Csvg%0A%20%20width%3D%2232%22%0A%20%20height%3D%2232%22%0A%20%20viewBox%3D%220%200%2032%2032%22%0A%20%20fill%3D%22none%22%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%3E%0A%20%20%3Cg%20clip-path%3D%22url(%23clip0_2654_9131)%22%3E%0A%20%20%20%20%3Cmask%20id%3D%22path-1-inside-1_2654_9131%22%20fill%3D%22white%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20d%3D%22M32%2016C32%2024.8366%2024.8366%2032%2016%2032C7.16344%2032%200%2024.8366%200%2016C0%207.16344%207.16344%200%2016%200C24.8366%200%2032%207.16344%2032%2016Z%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2Fmask%3E%0A%20%20%20%20%3Cg%0A%20%20%20%20%20%20clip-path%3D%22url(%23paint0_angular_2654_9131_clip_path)%22%0A%20%20%20%20%20%20data-figma-skip-parse%3D%22true%22%0A%20%20%20%20%20%20mask%3D%22url(%23path-1-inside-1_2654_9131)%22%0A%20%20%20%20%3E%0A%20%20%20%20%20%20%3Cg%20transform%3D%22matrix(0.016%200%200%200.016%2016%2016)%22%3E%0A%20%20%20%20%20%20%20%20%3CforeignObject%20x%3D%22-1250%22%20y%3D%22-1250%22%20width%3D%222500%22%20height%3D%222500%22%0A%20%20%20%20%20%20%20%20%20%20%3E%3Cdiv%0A%20%20%20%20%20%20%20%20%20%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%0A%20%20%20%20%20%20%20%20%20%20%20%20style%3D%22%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20background%3A%20conic-gradient(%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20from%2090deg%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rgba(255%2C%20255%2C%20255%2C%201)%200deg%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20rgba(255%2C%20255%2C%20255%2C%200)%20360deg%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20100%25%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%201%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22%0A%20%20%20%20%20%20%20%20%20%20%3E%3C%2Fdiv%0A%20%20%20%20%20%20%20%20%3E%3C%2FforeignObject%3E%0A%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20d%3D%22M32%2016H28C28%2022.6274%2022.6274%2028%2016%2028V32V36C27.0457%2036%2036%2027.0457%2036%2016H32ZM16%2032V28C9.37258%2028%204%2022.6274%204%2016H0H-4C-4%2027.0457%204.95431%2036%2016%2036V32ZM0%2016H4C4%209.37258%209.37258%204%2016%204V0V-4C4.95431%20-4%20-4%204.95431%20-4%2016H0ZM16%200V4C22.6274%204%2028%209.37258%2028%2016H32H36C36%204.95431%2027.0457%20-4%2016%20-4V0Z%22%0A%20%20%20%20%20%20data-figma-gradient-fill%3D%22%7B%26%2334%3Btype%26%2334%3B%3A%26%2334%3BGRADIENT_ANGULAR%26%2334%3B%2C%26%2334%3Bstops%26%2334%3B%3A%5B%7B%26%2334%3Bcolor%26%2334%3B%3A%7B%26%2334%3Br%26%2334%3B%3A1.0%2C%26%2334%3Bg%26%2334%3B%3A1.0%2C%26%2334%3Bb%26%2334%3B%3A1.0%2C%26%2334%3Ba%26%2334%3B%3A1.0%7D%2C%26%2334%3Bposition%26%2334%3B%3A0.0%7D%2C%7B%26%2334%3Bcolor%26%2334%3B%3A%7B%26%2334%3Br%26%2334%3B%3A1.0%2C%26%2334%3Bg%26%2334%3B%3A1.0%2C%26%2334%3Bb%26%2334%3B%3A1.0%2C%26%2334%3Ba%26%2334%3B%3A0.0%7D%2C%26%2334%3Bposition%26%2334%3B%3A1.0%7D%5D%2C%26%2334%3BstopsVar%26%2334%3B%3A%5B%7B%26%2334%3Bcolor%26%2334%3B%3A%7B%26%2334%3Br%26%2334%3B%3A1.0%2C%26%2334%3Bg%26%2334%3B%3A1.0%2C%26%2334%3Bb%26%2334%3B%3A1.0%2C%26%2334%3Ba%26%2334%3B%3A1.0%7D%2C%26%2334%3Bposition%26%2334%3B%3A0.0%7D%2C%7B%26%2334%3Bcolor%26%2334%3B%3A%7B%26%2334%3Br%26%2334%3B%3A1.0%2C%26%2334%3Bg%26%2334%3B%3A1.0%2C%26%2334%3Bb%26%2334%3B%3A1.0%2C%26%2334%3Ba%26%2334%3B%3A0.0%7D%2C%26%2334%3Bposition%26%2334%3B%3A1.0%7D%5D%2C%26%2334%3Btransform%26%2334%3B%3A%7B%26%2334%3Bm00%26%2334%3B%3A32.0%2C%26%2334%3Bm01%26%2334%3B%3A-1.7567624601127346e-13%2C%26%2334%3Bm02%26%2334%3B%3A1.8474111129762605e-13%2C%26%2334%3Bm10%26%2334%3B%3A2.1120338279927847e-13%2C%26%2334%3Bm11%26%2334%3B%3A32.0%2C%26%2334%3Bm12%26%2334%3B%3A-2.1316282072803006e-13%7D%2C%26%2334%3Bopacity%26%2334%3B%3A1.0%2C%26%2334%3BblendMode%26%2334%3B%3A%26%2334%3BNORMAL%26%2334%3B%2C%26%2334%3Bvisible%26%2334%3B%3Atrue%7D%22%0A%20%20%20%20%20%20mask%3D%22url(%23path-1-inside-1_2654_9131)%22%0A%20%20%20%20%2F%3E%0A%20%20%20%20%3Cpath%0A%20%20%20%20%20%20d%3D%22M30%2018C31.1046%2018%2032%2017.1046%2032%2016C32%2014.8954%2031.1046%2014%2030%2014C28.8954%2014%2028%2014.8954%2028%2016C28%2017.1046%2028.8954%2018%2030%2018Z%22%0A%20%20%20%20%20%20fill%3D%22white%22%0A%20%20%20%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3CclipPath%20id%3D%22paint0_angular_2654_9131_clip_path%22%3E%0A%20%20%20%20%20%20%3Cpath%0A%20%20%20%20%20%20%20%20d%3D%22M32%2016H28C28%2022.6274%2022.6274%2028%2016%2028V32V36C27.0457%2036%2036%2027.0457%2036%2016H32ZM16%2032V28C9.37258%2028%204%2022.6274%204%2016H0H-4C-4%2027.0457%204.95431%2036%2016%2036V32ZM0%2016H4C4%209.37258%209.37258%204%2016%204V0V-4C4.95431%20-4%20-4%204.95431%20-4%2016H0ZM16%200V4C22.6274%204%2028%209.37258%2028%2016H32H36C36%204.95431%2027.0457%20-4%2016%20-4V0Z%22%0A%20%20%20%20%20%20%20%20mask%3D%22url(%23path-1-inside-1_2654_9131)%22%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%20%20%3CclipPath%20id%3D%22clip0_2654_9131%22%3E%0A%20%20%20%20%20%20%3Crect%20width%3D%2232%22%20height%3D%2232%22%20fill%3D%22white%22%20%2F%3E%0A%20%20%20%20%3C%2FclipPath%3E%0A%20%20%3C%2Fdefs%3E%0A%3C%2Fsvg%3E");
  --dex-icon-white-loading-bg-url: url("images/image_9cae69f6d9d4cfc67f8a87f7bca797464764e7fd.png");
  --dex-card-divider-color: rgba(33, 38, 50, .5);
  --dex-orderbook-background-color: var(--dexc-trade-bg);
  --dex-orderbook-price-label-hover-background-color: #1b1e28;
  --dex-contract-list-background: var(--dex-trade-primary-container-bg);
  --dex-contract-list-new-icon-bg: #2e2027;
  --dex-contract-list-cross-icon-bg: #17212f;
  --dex-contract-list-hover-background: #202020
}

html[data-dex-theme=white] {
  --dex-alert-warning-background-color: #fff3ea;
  --dex-alert-success-background-color: #e7f7f5;
  --dex-alert-error-background-color: #feefee;
  --dex-switch-handler-bg: var(--dex-white);
  --dex-icon-close-color: var(--dex-tertiary-font-color);
  --dex-icon-common-fill-color: #4d5462;
  --dex-icon-arrow-right-color: #5e697a;
  --dex-icon-loading-bg-url: url("images/image_e253daa93d41213987f49b8ea4692f7d32bde630.png");
  --dex-icon-white-loading-bg-url: url("images/image_9cae69f6d9d4cfc67f8a87f7bca797464764e7fd.png");
  --dex-card-divider-color: hsla(210, 4%, 91%, .5);
  --dex-orderbook-background-color: #fff;
  --dex-orderbook-price-label-hover-background-color: #f9f9f9;
  --dex-contract-list-background: #fff;
  --dex-contract-list-new-icon-bg: #feefee;
  --dex-contract-list-cross-icon-bg: #f0f7fd;
  --dex-contract-list-cross-tab-bg: #f4f7fa;
  --dex-contract-list-hover-background: #f8fafd
}

html[data-red-green-direction=green] {
  --dex-buy-color: var(--dex-success-color);
  --dex-buy-color-fade10: rgba(var(--dex-success-color-rgb), 0.1);
  --dex-buy-color-fade20: rgba(var(--dex-success-color-rgb), 0.2);
  --dex-buy-color-fade30: rgba(var(--dex-success-color-rgb), 0.3);
  --dex-buy-orderbook-price-label-background: linear-gradient(var(--dex-buy-color-fade10), var(--dex-buy-color-fade10));
  --dex-sell-color: var(--dex-error-color);
  --dex-sell-color-fade10: rgba(var(--dex-error-color-rgb), 0.1);
  --dex-sell-color-fade20: rgba(var(--dex-error-color-rgb), 0.2);
  --dex-sell-color-fade30: rgba(var(--dex-error-color-rgb), 0.3);
  --dex-sell-orderbook-price-label-background: linear-gradient(var(--dex-sell-color-fade10), var(--dex-sell-color-fade10));
  --dex-button-buy-hover-bg: var(--dex-buy-color);
  --dex-button-buy-active-bg: var(--dex-buy-color);
  --dex-button-sell-hover-bg: var(--dex-sell-color);
  --dex-button-sell-active-bg: var(--dex-sell-color)
}

html[data-red-green-direction=red] {
  --dex-buy-color: var(--dex-error-color);
  --dex-buy-color-fade10: rgba(var(--dex-error-color-rgb), 0.1);
  --dex-buy-color-fade20: rgba(var(--dex-error-color-rgb), 0.2);
  --dex-buy-color-fade30: rgba(var(--dex-error-color-rgb), 0.3);
  --dex-buy-orderbook-price-label-background: linear-gradient(var(--dex-buy-color-fade10), var(--dex-buy-color-fade10));
  --dex-sell-color: var(--dex-success-color);
  --dex-sell-color-fade10: rgba(var(--dex-success-color-rgb), 0.1);
  --dex-sell-color-fade20: rgba(var(--dex-success-color-rgb), 0.2);
  --dex-sell-color-fade30: rgba(var(--dex-success-color-rgb), 0.3);
  --dex-sell-orderbook-price-label-background: linear-gradient(var(--dex-sell-color-fade10), var(--dex-sell-color-fade10));
  --dex-button-sell-hover-bg: var(--dex-sell-color);
  --dex-button-sell-active-bg: var(--dex-sell-color);
  --dex-button-buy-hover-bg: var(--dex-buy-color);
  --dex-button-buy-active-bg: var(--dex-buy-color)
}

.dex-icon,
.dex-icon-next {
  align-items: center;
  display: inline-flex;
  line-height: 0;
  text-align: center
}

.dex-zoom-appear,
.dex-zoom-enter,
.dex-zoom-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-appear.dex-zoom-appear-active,
.dex-zoom-enter.dex-zoom-enter-active {
  animation-name: hbZoomIn;
  animation-play-state: running
}

.dex-zoom-leave.dex-zoom-leave-active {
  animation-name: hbZoomOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-appear,
.dex-zoom-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-appear-prepare,
.dex-zoom-enter-prepare {
  transform: none
}

.dex-zoom-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

.dex-zoom-big-appear,
.dex-zoom-big-enter,
.dex-zoom-big-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-big-appear.dex-zoom-big-appear-active,
.dex-zoom-big-enter.dex-zoom-big-enter-active {
  animation-name: hbZoomBigIn;
  animation-play-state: running
}

.dex-zoom-big-leave.dex-zoom-big-leave-active {
  animation-name: hbZoomBigOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-big-appear,
.dex-zoom-big-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-big-appear-prepare,
.dex-zoom-big-enter-prepare {
  transform: none
}

.dex-zoom-big-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

.dex-zoom-big-fast-appear,
.dex-zoom-big-fast-enter,
.dex-zoom-big-fast-leave {
  animation-duration: .1s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-big-fast-appear.dex-zoom-big-fast-appear-active,
.dex-zoom-big-fast-enter.dex-zoom-big-fast-enter-active {
  animation-name: hbZoomBigIn;
  animation-play-state: running
}

.dex-zoom-big-fast-leave.dex-zoom-big-fast-leave-active {
  animation-name: hbZoomBigOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-big-fast-appear,
.dex-zoom-big-fast-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-big-fast-appear-prepare,
.dex-zoom-big-fast-enter-prepare {
  transform: none
}

.dex-zoom-big-fast-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

.dex-zoom-up-appear,
.dex-zoom-up-enter,
.dex-zoom-up-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-up-appear.dex-zoom-up-appear-active,
.dex-zoom-up-enter.dex-zoom-up-enter-active {
  animation-name: hbZoomUpIn;
  animation-play-state: running
}

.dex-zoom-up-leave.dex-zoom-up-leave-active {
  animation-name: hbZoomUpOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-up-appear,
.dex-zoom-up-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-up-appear-prepare,
.dex-zoom-up-enter-prepare {
  transform: none
}

.dex-zoom-up-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

.dex-zoom-down-appear,
.dex-zoom-down-enter,
.dex-zoom-down-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-down-appear.dex-zoom-down-appear-active,
.dex-zoom-down-enter.dex-zoom-down-enter-active {
  animation-name: hbZoomDownIn;
  animation-play-state: running
}

.dex-zoom-down-leave.dex-zoom-down-leave-active {
  animation-name: hbZoomDownOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-down-appear,
.dex-zoom-down-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-down-appear-prepare,
.dex-zoom-down-enter-prepare {
  transform: none
}

.dex-zoom-down-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

.dex-zoom-left-appear,
.dex-zoom-left-enter,
.dex-zoom-left-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-left-appear.dex-zoom-left-appear-active,
.dex-zoom-left-enter.dex-zoom-left-enter-active {
  animation-name: hbZoomLeftIn;
  animation-play-state: running
}

.dex-zoom-left-leave.dex-zoom-left-leave-active {
  animation-name: hbZoomLeftOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-left-appear,
.dex-zoom-left-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-left-appear-prepare,
.dex-zoom-left-enter-prepare {
  transform: none
}

.dex-zoom-left-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

.dex-zoom-right-appear,
.dex-zoom-right-enter,
.dex-zoom-right-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-zoom-right-appear.dex-zoom-right-appear-active,
.dex-zoom-right-enter.dex-zoom-right-enter-active {
  animation-name: hbZoomRightIn;
  animation-play-state: running
}

.dex-zoom-right-leave.dex-zoom-right-leave-active {
  animation-name: hbZoomRightOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-zoom-right-appear,
.dex-zoom-right-enter {
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  opacity: 0;
  transform: scale(0)
}

.dex-zoom-right-appear-prepare,
.dex-zoom-right-enter-prepare {
  transform: none
}

.dex-zoom-right-leave {
  animation-timing-function: cubic-bezier(.78, .14, .15, .86)
}

@keyframes hbZoomIn {
  0% {
    opacity: 0;
    transform: scale(.2)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes hbZoomOut {
  0% {
    transform: scale(1)
  }

  to {
    opacity: 0;
    transform: scale(.2)
  }
}

@keyframes hbZoomBigIn {
  0% {
    opacity: 0;
    transform: scale(.8)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes hbZoomBigOut {
  0% {
    transform: scale(1)
  }

  to {
    opacity: 0;
    transform: scale(.8)
  }
}

@keyframes hbZoomUpIn {
  0% {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 50% 0
  }

  to {
    transform: scale(1);
    transform-origin: 50% 0
  }
}

@keyframes hbZoomUpOut {
  0% {
    transform: scale(1);
    transform-origin: 50% 0
  }

  to {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 50% 0
  }
}

@keyframes hbZoomLeftIn {
  0% {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 0 50%
  }

  to {
    transform: scale(1);
    transform-origin: 0 50%
  }
}

@keyframes hbZoomLeftOut {
  0% {
    transform: scale(1);
    transform-origin: 0 50%
  }

  to {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 0 50%
  }
}

@keyframes hbZoomRightIn {
  0% {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 100% 50%
  }

  to {
    transform: scale(1);
    transform-origin: 100% 50%
  }
}

@keyframes hbZoomRightOut {
  0% {
    transform: scale(1);
    transform-origin: 100% 50%
  }

  to {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 100% 50%
  }
}

@keyframes hbZoomDownIn {
  0% {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 50% 100%
  }

  to {
    transform: scale(1);
    transform-origin: 50% 100%
  }
}

@keyframes hbZoomDownOut {
  0% {
    transform: scale(1);
    transform-origin: 50% 100%
  }

  to {
    opacity: 0;
    transform: scale(.8);
    transform-origin: 50% 100%
  }
}

.dex-fade-appear,
.dex-fade-enter,
.dex-fade-leave {
  animation-duration: .2s;
  animation-fill-mode: both;
  animation-play-state: paused
}

.dex-fade-appear.dex-fade-appear-active,
.dex-fade-enter.dex-fade-enter-active {
  animation-name: hbFadeIn;
  animation-play-state: running
}

.dex-fade-leave.dex-fade-leave-active {
  animation-name: hbFadeOut;
  animation-play-state: running;
  pointer-events: none
}

.dex-fade-appear,
.dex-fade-enter {
  animation-timing-function: linear;
  opacity: 0
}

.dex-fade-leave {
  animation-timing-function: linear
}

@keyframes hbFadeIn {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes hbFadeOut {
  0% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

* {
  box-sizing: border-box
}

@font-face {
  font-family: dexIconNext;
  src:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/iconfont.e4bb62ac.woff2?t=175611939961*/
    url(fonts/font_0f4a6c2d71a09dcd074b48041e2db5277953fa7b.woff2) format("woff2")
}

.dex-icon-next {
  font-family: dexIconNext !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}

.dex-icon-sousuo:before {
  content: "\e62e"
}

.dex-icon-remen:before {
  content: "\e62d"
}

.dex-icon-add2:before {
  content: "\e62c"
}

.dex-icon-right-arrow:before {
  content: "\e621"
}

.dex-icon-left-arrow:before {
  content: "\e625"
}

.dex-icon-up-arrow:before {
  content: "\e62b"
}

.dex-icon-error:before {
  content: "\e614"
}

.dex-icon-rebate:before {
  content: "\e628"
}

.dex-icon-order:before {
  content: "\e629"
}

.dex-icon-dropdown:before {
  content: "\e62a"
}

.dex-icon-api:before {
  content: "\e626"
}

.dex-icon-language:before {
  content: "\e627"
}

.dex-icon-help:before {
  content: "\e61e"
}

.dex-icon-email:before {
  content: "\e61f"
}

.dex-icon-add:before {
  content: "\e620"
}

.dex-icon-unselected:before {
  content: "\e622"
}

.dex-icon-fullscreen:before {
  content: "\e623"
}

.dex-icon-choose:before {
  content: "\e624"
}

.dex-icon-hide:before {
  content: "\e60b"
}

.dex-icon-share:before {
  content: "\e60c"
}

.dex-icon-success:before {
  content: "\e60d"
}

.dex-icon-indicator:before {
  content: "\e602"
}

.dex-icon-notification:before {
  content: "\e60e"
}

.dex-icon-live:before {
  content: "\e60f"
}

.dex-icon-community:before {
  content: "\e610"
}

.dex-icon-edit:before {
  content: "\e611"
}

.dex-icon-loading:before {
  content: "\e612"
}

.dex-icon-volume:before {
  content: "\e613"
}

.dex-icon-safety:before {
  content: "\e615"
}

.dex-icon-user:before {
  content: "\e616"
}

.dex-icon-close:before {
  content: "\e617"
}

.dex-icon-reset:before {
  content: "\e618"
}

.dex-icon-headcount:before {
  content: "\e619"
}

.dex-icon-information:before {
  content: "\e61a"
}

.dex-icon-time:before {
  content: "\e61b"
}

.dex-icon-more:before {
  content: "\e61c"
}

.dex-icon-stop:before {
  content: "\e61d"
}

.dex-icon-settings:before {
  content: "\e605"
}

.dex-icon-Copy:before,
.dex-icon-copy:before {
  content: "\e604"
}

.dex-icon-arrow:before {
  content: "\e606"
}

.dex-icon-show:before {
  content: "\e603"
}

.dex-icon-vip:before {
  content: "\e607"
}

.dex-icon-select:before {
  content: "\e608"
}

.dex-icon-unchosen:before {
  content: "\e609"
}

.dex-icon-layout:before {
  content: "\e60a"
}

.dex-icon[size="12"] {
  font-size: 12px
}

.dex-icon[size="14"] {
  font-size: 14px
}

.dex-icon[size="16"] {
  font-size: 16px
}

.dex-icon[size="18"] {
  font-size: 18px
}

.dex-icon[size="20"] {
  font-size: 20px
}

.dex-icon[size="22"] {
  font-size: 22px
}

.dex-icon[size="24"] {
  font-size: 24px
}

.dex-icon[size="26"] {
  font-size: 26px
}

.dex-icon[size="28"] {
  font-size: 28px
}

.dex-icon[size="30"] {
  font-size: 30px
}

.dex-icon[size="32"] {
  font-size: 32px
}

.dex-icon[size="36"] {
  font-size: 36px
}

.dex-icon[size="40"] {
  font-size: 40px
}

.dex-icon[size="48"] {
  font-size: 48px
}

.dex-icon[size="56"] {
  font-size: 56px
}

.dex-icon[size="64"] {
  font-size: 64px
}

.container-a315a2fa {
  background-color: var(--dex-component-background-color);
  border-radius: var(--dex-border-radius-mid);
  height: 44px;
  overflow: hidden;
  padding: 10px 12px
}

.container-a315a2fa .name-b226067f {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 500
}

.alert-b69e74de {
  margin-bottom: 20px
}

.footer-a222c2eb {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px 24px 24px
}

.explain-f58b38ad {
  color: var(--dex-tertiary-font-color);
  display: flex;
  font-size: 12px;
  margin-top: 4px
}

.explain-f58b38ad .transferLimit-dd6798a8 {
  margin-left: auto
}

.label-f37e72f2 {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 8px;
  margin-top: 16px
}

.tipHolder-ebc529b3 {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 4px
}

.tokenSelect-a9d0edc8 {
  width: 100%
}

.tokenSelect-a9d0edc8 .dex-select-selector .dex-select-selection-search-input {
  padding-left: 44px
}

.container-d1717a1c {
  background-color: var(--dex-trade-component-background-color);
  display: flex;
  gap: 12px;
  padding: 12px
}

.container-d1717a1c .dotContainer-b8ab520d {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: center
}

.container-d1717a1c .dotContainer-b8ab520d .dot-a41ba20e {
  background-color: var(--dex-quaternary-font-color);
  border-radius: 2px;
  height: 2px;
  width: 2px
}

.container-d1717a1c .dotContainer-b8ab520d .first-cd3c8f44 {
  background-color: var(--dex-primary-color);
  border-radius: 6px;
  height: 6px;
  width: 6px
}

.container-d1717a1c .dotContainer-b8ab520d .last-be1cd3c3 {
  background-color: var(--dex-warning-color);
  border-radius: 6px;
  height: 6px;
  width: 6px
}

.container-d1717a1c .main-d3f92be9 {
  flex: 1 1
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .text-c70f704a {
  color: var(--dex-secondary-font-color);
  flex: 1 1;
  font-size: 14px;
  line-height: 20px
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .select-d1e5ef96 {
  border: none;
  width: 100%
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .select-d1e5ef96 .dex-select-selection-item {
  font-weight: 500
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .selectContainer-a771156b {
  width: 300px
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .selectFrom-fae93bc1 {
  transform: translateY(0);
  transition: transform .3s
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .selectTo-fd9e71fd {
  transform: translateY(0);
  transition: transform .33s
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .selectFrom-fae93bc1.swaped-a4639f1e {
  transform: translateY(41px);
  transition: transform .3s
}

.container-d1717a1c .main-d3f92be9 .selectContainer-a771156b .selectTo-fd9e71fd.swaped-a4639f1e {
  transform: translateY(-41px);
  transition: transform .3s
}

.fixedAccount-a033ddcd {
  font-weight: 500;
  line-height: 20px;
  padding: 10px 12px
}

.dex-menu {
  display: inline-block;
  font-size: 14px;
  list-style: none;
  margin: 0;
  z-index: var(--dex-cascader-dropdown-zIndex)
}

.dex-menu-overlay {
  border: 1px solid var(--dex-base-border-color)
}

.dex-menu li.dex-menu-submenu,
.dex-menu-item {
  border-radius: var(--dex-border-radius-small);
  color: var(--dex-primary-font-color);
  cursor: pointer;
  transition: all .3s
}

.dex-menu li.dex-menu-submenu:hover,
.dex-menu-item:hover {
  background-color: var(--dex-trade-divider-color);
  transition: all .3s
}

.dex-menu-item {
  line-height: 20px;
  padding: 10px 12px
}

.dex-menu-item-active {
  color: var(--dex-primary-color)
}

.dex-menu li.dex-menu-submenu-open {
  background-color: var(--dex-trade-divider-color)
}

.dex-menu-search {
  background-color: var(--dex-primary-container-bg);
  padding: 4px 0 0;
  position: sticky;
  top: 0
}

.dex-menu-search-input {
  min-width: 152px
}

.dex-menu-search-input .dex-input-prefix {
  padding: 0 6px
}

.dex-menu-search-input .dex-input {
  padding: 0 6px 0 0
}

.dex-menu:has(.dex-menu-search) {
  padding-top: 0
}

div.dex-menu {
  border-radius: var(--dex-border-radius-mid);
  box-shadow: var(--dex-primary-box-shadow);
  padding: 4px
}

div.dex-menu,
ul.dex-menu,
ul.dex-menu-submenu {
  background-color: var(--dex-primary-container-bg)
}

ul.dex-menu,
ul.dex-menu-submenu {
  max-height: 238px;
  min-width: var(--dex-menu-min-width);
  overflow: auto;
  padding: 0;
  width: 100%
}

.dex-menu-hidden {
  display: none
}

div.dex-menu-submenu {
  background-color: var(--dex-primary-container-bg);
  border: 1px solid var(--dex-base-border-color);
  border-radius: var(--dex-border-radius-mid);
  box-shadow: var(--dex-primary-box-shadow);
  font-size: 0;
  min-width: var(--dex-menu-min-width);
  padding: 4px;
  z-index: var(--dex-cascader-dropdown-zIndex)
}

div.dex-menu-submenu-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
  padding: 10px 12px
}

.dex-menu-submenu-popup {
  position: absolute
}

.dex-menu-submenu-hidden {
  display: none
}

.dex-menu-trigger {
  align-items: center;
  border: 1px solid var(--dex-common-border-color);
  border-radius: var(--dex-border-radius-mid);
  cursor: pointer;
  display: inline-flex;
  justify-content: space-between;
  padding: 10px 12px
}

.dex-menu-trigger-label,
.dex-menu-trigger-placeholder {
  font-size: 14px;
  font-weight: 500;
  height: 20px;
  line-height: 20px;
  margin-right: 12px
}

.dex-menu-trigger-placement {
  color: var(--dex-tertiary-font-color)
}

.dex-menu-trigger-icon {
  transform: rotate(0deg);
  transition: all .3s
}

.dex-menu-trigger.dex-menu-open {
  border-color: var(--dex-primary-font-color)
}

.dex-menu-open .dex-menu-trigger-icon {
  transform: rotate(180deg);
  transition: all .3s
}

.suffix-fbeb79f3 {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center
}

.divider-d7c45fb0 {
  border-right: 1px solid var(--dex-quaternary-font-color);
  height: 12px;
  width: 0
}

.contract-bill-alert {
  padding-bottom: 0 !important;
  width: 960px
}

.contract-bill-alert .contract-bill-alert-table {
  border: 1px solid #cad7e0;
  border-radius: 2px;
  position: relative;
  width: 912px
}

.contract-bill-alert .contract-bill-alert-table .text-align-right {
  text-align: right
}

.contract-bill-alert .contract-bill-alert-table .td-padding-left20 {
  padding-left: 20px
}

.contract-bill-alert .contract-bill-alert-table .td-padding-right20 {
  padding-right: 20px
}

.contract-bill-alert .contract-bill-alert-table table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%
}

.contract-bill-alert .contract-bill-alert-table table thead {
  box-shadow: inset 0 -1px 0 0 #cad7e0
}

.contract-bill-alert .contract-bill-alert-table table thead tr th {
  color: #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 8px 0;
  vertical-align: baseline
}

.contract-bill-alert .contract-bill-alert-table table tbody tr {
  height: 35px
}

.contract-bill-alert .contract-bill-alert-table table tbody tr td {
  color: #263241;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.contract-bill-alert .contract-bill-alert-table .under-table-swapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 176px;
  justify-content: center;
  width: 100%
}

.contract-bill-alert .contract-bill-alert-table .under-table-swapper .under-table-nodata {
  align-items: center;
  color: #8a8a8e;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 22px
}

.contract-bill-alert .contract-bill-alert-table .under-table-swapper .under-table-nodata .under-table-nodata-icon {
  height: 36px;
  margin-bottom: 10px;
  width: 35px
}

.contract-bill-alert .pagination-wrapper {
  margin-left: 8px !important;
  width: 912px !important
}

.definition-table-common {
  min-height: 432px;
  padding: 0 30px;
  position: relative
}

.definition-table-common .text-align-left {
  text-align: left
}

.definition-table-common .text-align-right {
  text-align: right
}

.definition-table-common .padding-left10 {
  padding-left: 10px
}

.definition-table-common .padding-right10 {
  padding-right: 10px
}

.definition-table-common table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  text-align: left;
  width: 100%
}

.definition-table-common table thead tr th {
  color: #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 8px 10px 8px 0;
  vertical-align: top
}

.definition-table-common table tbody tr {
  box-shadow: inset 0 -1px 0 0 #ecf1f8;
  height: 48px
}

.definition-table-common table tbody tr:hover {
  background-color: #f8fafd
}

.definition-table-common table tbody tr td {
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding-right: 10px
}

.definition-table-common .under-table-swapper {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  left: 0;
  position: absolute;
  width: 100%
}

.react-calendar {
  background: #fff;
  border: 1px solid #a0a096;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.125em;
  max-width: 100%;
  width: 350px
}

.react-calendar--doubleView {
  width: 700px
}

.react-calendar--doubleView .react-calendar__viewContainer {
  display: flex;
  margin: -.5em
}

.react-calendar--doubleView .react-calendar__viewContainer>* {
  margin: .5em;
  width: 50%
}

.react-calendar,
.react-calendar *,
.react-calendar :after,
.react-calendar :before {
  box-sizing: border-box
}

.react-calendar button {
  border: 0;
  margin: 0;
  outline: none
}

.react-calendar button:enabled:hover {
  cursor: pointer
}

.react-calendar__navigation {
  display: flex;
  height: 44px;
  margin-bottom: 1em
}

.react-calendar__navigation button {
  background: none;
  min-width: 44px
}

.react-calendar__navigation button:disabled {
  background-color: #f0f0f0
}

.react-calendar__navigation button:enabled:focus,
.react-calendar__navigation button:enabled:hover {
  background-color: #e6e6e6
}

.react-calendar__month-view__weekdays {
  font-size: .75em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase
}

.react-calendar__month-view__weekdays__weekday {
  padding: .5em
}

.react-calendar__month-view__weekNumbers .react-calendar__tile {
  align-items: center;
  display: flex;
  font-size: .75em;
  font-weight: 700;
  justify-content: center
}

.react-calendar__month-view__days__day--weekend {
  color: #d10000
}

.react-calendar__month-view__days__day--neighboringMonth {
  color: #757575
}

.react-calendar__century-view .react-calendar__tile,
.react-calendar__decade-view .react-calendar__tile,
.react-calendar__year-view .react-calendar__tile {
  padding: 2em .5em
}

.react-calendar__tile {
  background: none;
  line-height: 16px;
  max-width: 100%;
  padding: 10px 6.6667px;
  text-align: center
}

.react-calendar__tile:disabled {
  background-color: #f0f0f0
}

.react-calendar__tile:enabled:focus,
.react-calendar__tile:enabled:hover {
  background-color: #e6e6e6
}

.react-calendar__tile--now {
  background: #ffff76
}

.react-calendar__tile--now:enabled:focus,
.react-calendar__tile--now:enabled:hover {
  background: #ffffa9
}

.react-calendar__tile--hasActive {
  background: #76baff
}

.react-calendar__tile--hasActive:enabled:focus,
.react-calendar__tile--hasActive:enabled:hover {
  background: #a9d4ff
}

.react-calendar__tile--active {
  background: #006edc;
  color: #fff
}

.react-calendar__tile--active:enabled:focus,
.react-calendar__tile--active:enabled:hover {
  background: #1087ff
}

.react-calendar--selectRange .react-calendar__tile--hover {
  background-color: #e6e6e6
}

.react-daterange-picker {
  display: inline-flex;
  position: relative
}

.react-daterange-picker,
.react-daterange-picker *,
.react-daterange-picker :after,
.react-daterange-picker :before {
  box-sizing: border-box
}

.react-daterange-picker--disabled {
  background-color: #f0f0f0;
  color: #6d6d6d
}

.react-daterange-picker__wrapper {
  align-items: center;
  border: thin solid gray;
  display: flex;
  flex-grow: 1;
  flex-shrink: 0
}

.react-daterange-picker__inputGroup {
  box-sizing: content-box;
  flex-grow: 1;
  height: 100%;
  min-width: calc(12px + 4.754em);
  padding: 0 2px
}

.react-daterange-picker__inputGroup__divider {
  padding: 1px 0;
  white-space: pre
}

.react-daterange-picker__inputGroup__input {
  -moz-appearance: textfield;
  background: none;
  border: 0;
  box-sizing: content-box;
  font: inherit;
  height: 100%;
  min-width: .54em;
  padding: 0 1px;
  position: relative
}

.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button,
.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.react-daterange-picker__inputGroup__input:invalid {
  background: rgba(255, 0, 0, .1)
}

.react-daterange-picker__inputGroup__input--hasLeadingZero {
  margin-left: -.54em;
  padding-left: calc(1px + .54em)
}

.react-daterange-picker__button {
  background: transparent;
  border: 0;
  padding: 4px 6px
}

.react-daterange-picker__button:enabled {
  cursor: pointer
}

.react-daterange-picker__button:enabled:focus .react-daterange-picker__button__icon,
.react-daterange-picker__button:enabled:hover .react-daterange-picker__button__icon {
  stroke: #0078d7
}

.react-daterange-picker__button:disabled .react-daterange-picker__button__icon {
  stroke: #6d6d6d
}

.react-daterange-picker__button svg {
  display: inherit
}

.react-daterange-picker__calendar {
  left: 0;
  max-width: 100vw;
  position: absolute;
  top: 100%;
  width: 350px;
  z-index: 1
}

.react-daterange-picker__calendar--closed {
  display: none
}

.react-daterange-picker__calendar .react-calendar {
  border-width: thin
}

.analysis-chart {
  background: #fff;
  height: 280px;
  margin-bottom: 12px;
  padding: 22px 24px 8px;
  width: 594px
}

.analysis-chart .title {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  margin: 0
}

.analysis-chart .chart {
  box-sizing: content-box;
  height: 210px;
  padding: 18px 0 0
}

.analysis-chart .chart div {
  border-radius: 0 !important
}

.analysis-chart .noData {
  background-image: url(images/image_1fa2fb4ddc914c5fe7d6e512088f08c2cbd72a54.png);
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 60px;
  box-sizing: border-box;
  color: #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  height: 220px;
  padding-top: 140px;
  text-align: center;
  width: 100%
}

.type1-bd780dd7 {
  padding: 4px 0 8px
}

.type1-bd780dd7 .activityTab-d7b36e5c {
  color: #808799;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  height: 20px;
  line-height: 20px;
  margin-right: 32px
}

.type1-bd780dd7 .activityTab-d7b36e5c.active-c7269d2a {
  border-color: var(--dexc-primary-color);
  color: #fff;
  position: relative
}

.type1-bd780dd7 .activityTab-d7b36e5c.active-c7269d2a:before {
  background: var(--dexc-primary-color);
  bottom: -8px;
  content: "";
  display: inline-block;
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-12px);
  width: 24px
}

.type2-c22f70d8 .activityTab-d7b36e5c {
  border: 1px solid #212632;
  color: #f0f1f4;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-right: -1px;
  padding: 6px 16px
}

.type2-c22f70d8 .activityTab-d7b36e5c.active-c7269d2a {
  border-color: var(--dexc-primary-color);
  color: var(--dexc-primary-color);
  margin-right: 0
}

.type2-c22f70d8 .activityTab-d7b36e5c:hover {
  border-color: var(--dexc-primary-color);
  margin-right: 0
}

.profitAnalysis-e508ea01 {
  background: linear-gradient(180deg, #14161d 0, #14161d 228px, #f9f9f9 0, #f9f9f9);
  padding-bottom: 114px
}

.profitAnalysis-e508ea01 .content-e69618d5 {
  margin: 0 auto;
  width: 1200px
}

.profitAnalysis-e508ea01 .content-e69618d5 .title-e7c29815 {
  background-image: url(images/image_94c5f3d581d07f53e31a96259f642273d0d79471.png);
  background-position: left 30px;
  background-repeat: no-repeat;
  background-size: 22px;
  border-bottom: 1px solid #212632;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  padding: 27px 0 13px 34px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 {
  display: flex;
  justify-content: space-between;
  padding: 17px 0 24px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 {
  display: flex
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .select-bfc7adae {
  border: 1px solid #212632;
  color: #f0f1f4;
  font-size: 12px;
  font-weight: 400;
  height: 28px;
  line-height: 14px;
  margin-right: 16px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .select-bfc7adae .select-value-box {
  padding-right: 26px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .select-bfc7adae .select-value-box .select-value-box-title {
  margin-right: 4px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .select-bfc7adae .select-arrow {
  color: #808799
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .select-bfc7adae .select-list {
  border-radius: 0
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker {
  margin-right: 0
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .daterange-picker-mask {
  background: #13161e;
  border: 1px solid #212632;
  border-radius: 0;
  color: #f0f1f4;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  height: auto;
  line-height: 14px;
  padding: 6px 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-daterange-picker__wrapper {
  border: 1px solid #212632;
  border-radius: 0;
  color: #f0f1f4;
  height: 28px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__inputGroup:nth-child(3) {
  justify-content: end
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__inputGroup>input {
  border: none;
  color: #f0f1f4;
  height: 26px;
  line-height: 26px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__inputGroup__leadingZero {
  color: #f0f1f4;
  line-height: 26px
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__calendar-button {
  display: block;
  height: 26px;
  margin-left: 4px;
  padding: 0
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__calendar-button img {
  vertical-align: bottom
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-calendar {
  border-radius: 0
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-calendar .react-calendar__tile {
  border-radius: 0;
  width: 11%
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-calendar .react-calendar__tile--rangeStart,
.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-calendar react-calendar__tile--rangeEnd {
  border-radius: 0
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .hbdm-daterange-picker .react-calendar .react-calendar__tile--now {
  border: 1px solid var(--dexc-success-color);
  color: var(--dexc-success-color)
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .selected-ea9473fa .react-daterange-picker__wrapper {
  border-color: var(--dexc-success-color)
}

.profitAnalysis-e508ea01 .content-e69618d5 .filter-d32f2160 .filterRight-b3b29056 .export-f082a8c8 {
  background: #121f25;
  background-image: url(images/image_bd8c1004a060d08efe14e0c4e6ebc7fd8f6349a5.png);
  background-position: 12px;
  background-repeat: no-repeat;
  background-size: 16px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  height: 28px;
  line-height: 17px;
  padding: 5.5px 12px 5.5px 32px
}

.profitAnalysis-e508ea01 .content-e69618d5 .chartWrapper-dc594f13 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.profitAnalysis-e508ea01 .content-e69618d5 .remind-d0b70afc {
  color: #909090;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  margin-top: 4px
}

.container-c28e7832 .dex-table-wrapper {
  --dex-table-thead-cell-padding: 12px 12px;
  --dex-table-tbody-cell-padding: 12px 12px;
  --dex-table-cell-first-last-padding: 12px
}

.container-c28e7832 .dex-table-wrapper .dex-table {
  min-height: unset
}

.container-c28e7832 .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-cell,
.container-c28e7832 .dex-table-wrapper .dex-table .dex-table-thead .dex-table-cell {
  font-size: 12px;
  line-height: 16px
}

.container-c28e7832 .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-cell:last-child,
.container-c28e7832 .dex-table-wrapper .dex-table .dex-table-thead .dex-table-cell:last-child {
  text-align: left
}

.position-volume-chart {
  margin-left: 30px;
  padding-bottom: 40px;
  position: relative
}

.position-volume-chart .trend-chart-title {
  font-size: 12px;
  margin-left: 15px;
  margin-top: 40px;
  padding-right: 10px
}

.position-volume-chart .trend-chart-title .title-style {
  color: #000;
  font-size: 16px;
  height: 24px
}

.position-volume-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px
}

.position-volume-chart .position-volume-chart-tooltip {
  color: #fff
}

.position-volume-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.position-volume-chart-tooltip {
  color: #fff;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.position-volume-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.position-volume-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative
}

.position-volume-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px
}

.position-volume-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.position-volume-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.position-turnover-chart {
  margin-left: 30px;
  padding-bottom: 40px;
  position: relative
}

.position-turnover-chart .trend-chart-title {
  font-size: 12px;
  margin-left: 15px;
  margin-top: 40px;
  padding-right: 10px
}

.position-turnover-chart .trend-chart-title .title-style {
  color: #000;
  font-size: 16px;
  height: 24px
}

.position-turnover-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px
}

.position-turnover-chart .position-turnover-chart-tooltip {
  color: #fff
}

.position-turnover-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.position-turnover-chart-tooltip {
  color: #232a4a;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.position-turnover-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.position-turnover-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative
}

.position-turnover-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px
}

.position-turnover-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.position-turnover-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.position-turnover-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.position-turnover-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.long-short-trend-chart .trend-chart-title {
  padding-right: 8px;
  text-align: center
}

.long-short-trend-chart .trend-chart-title .icon-warn-info:before {
  vertical-align: top
}

.long-short-trend-chart .title-tooltip {
  left: calc(-250px + 50%);
  width: 500px
}

.long-short-trend-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.long-short-trend-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.long-short-trend-chart {
  margin-left: 30px;
  position: relative
}

.long-short-trend-chart .trend-chart-title {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin-bottom: 8px;
  margin-top: 40px
}

.long-short-trend-chart .trend-chart-title .title-style {
  margin-right: 10px;
  text-align: left
}

.long-short-trend-chart .trend-chart-title .center-page-select-root {
  float: right;
  width: 64px
}

.long-short-trend-chart .trend-chart-title .icon-warn-info {
  height: 12px;
  margin-left: 5px
}

.long-short-trend-chart .trend-chart-title .icon-warn-info:before {
  color: #54748f;
  cursor: pointer;
  font-size: 12px;
  vertical-align: middle
}

.long-short-trend-chart .time-period {
  position: absolute;
  right: 35px;
  z-index: 9999
}

.long-short-trend-chart .trend-chart-tip {
  font-size: 12px;
  max-width: 300px;
  min-width: 176px;
  padding: 10px;
  word-wrap: break-word
}

.long-short-trend-chart .trend-chart-tip .trend-chart-tip-title {
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal
}

.long-short-trend-chart .trend-chart-tip .long-text,
.long-short-trend-chart .trend-chart-tip .short-text {
  white-space: normal
}

.long-short-trend-chart div[_echarts_instance_] {
  margin-top: -15px
}

.long-short-trend-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.long-short-trend-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative;
  text-align: left
}

.long-short-trend-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px;
  margin-left: 0 !important
}

.long-short-trend-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.long-short-trend-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.swap-position-volume-chart {
  margin: 0 20px;
  padding-bottom: 40px;
  position: relative
}

.swap-position-volume-chart .trend-chart-title {
  font-size: 12px;
  margin-left: 15px;
  margin-top: 40px;
  padding-right: 12px
}

.swap-position-volume-chart .trend-chart-title .title-style {
  color: #000;
  font-size: 16px;
  height: 24px
}

.swap-position-volume-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px
}

.swap-position-volume-chart .position-volume-chart-tooltip {
  color: #fff
}

.swap-position-volume-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.swap-position-volume-chart-tooltip {
  color: #fff;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.swap-position-turnover-chart {
  margin: 0 20px;
  padding-bottom: 40px;
  position: relative
}

.swap-position-turnover-chart .trend-chart-title {
  font-size: 12px;
  margin-left: 15px;
  margin-top: 40px;
  padding-right: 12px
}

.swap-position-turnover-chart .trend-chart-title .title-style {
  color: #000;
  font-size: 16px;
  height: 24px
}

.swap-position-turnover-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px
}

.swap-position-turnover-chart .position-turnover-chart-tooltip {
  color: #fff
}

.swap-position-turnover-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.swap-position-turnover-chart-tooltip {
  color: #232a4a;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.swap-long-short-trend-chart .trend-chart-title .icon-warn-info:before {
  vertical-align: top
}

.swap-long-short-trend-chart {
  margin-left: 20px;
  position: relative
}

.swap-long-short-trend-chart div[_echarts_instance_] {
  margin-top: -15px
}

.swap-long-short-trend-chart .trend-chart-title {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin-top: 40px
}

.swap-long-short-trend-chart .trend-chart-title .title-style {
  margin-right: 10px;
  text-align: left
}

.swap-long-short-trend-chart .trend-chart-title .center-page-select-root {
  float: right;
  width: 64px
}

.swap-long-short-trend-chart .trend-chart-title .icon-warn-info {
  cursor: pointer;
  height: 12px;
  margin-left: 5px
}

.swap-long-short-trend-chart .trend-chart-title .icon-warn-info:before {
  color: #54748f;
  cursor: pointer;
  font-size: 12px;
  vertical-align: middle
}

.swap-long-short-trend-chart .time-period {
  position: absolute;
  right: 35px;
  z-index: 9999
}

.swap-long-short-trend-chart .trend-chart-tip {
  font-size: 12px;
  max-width: 300px;
  min-width: 176px;
  padding: 10px;
  word-wrap: break-word
}

.swap-long-short-trend-chart .trend-chart-tip .trend-chart-tip-title {
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal
}

.swap-long-short-trend-chart .trend-chart-tip .long-text,
.swap-long-short-trend-chart .trend-chart-tip .short-text {
  white-space: normal
}

.swap-long-short-trend-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.swap-long-short-trend-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative;
  text-align: left
}

.swap-long-short-trend-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px;
  margin-left: 0 !important
}

.swap-long-short-trend-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.swap-long-short-trend-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.swap-long-short-trend-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.swap-long-short-trend-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.base-rate-chart .trend-chart-title .center-page-select-root,
.basis-chart .trend-chart-title .center-page-select-root {
  width: 64px
}

.linear-swap-position-volume-chart {
  margin: 0 20px;
  padding-bottom: 40px;
  position: relative
}

.linear-swap-position-volume-chart .trend-chart-title {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-left: 15px;
  margin-top: 40px;
  padding-right: 12px
}

.linear-swap-position-volume-chart .trend-chart-title .title-style {
  color: #000;
  flex: 1 1;
  font-size: 16px;
  height: 24px
}

.linear-swap-position-volume-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px !important
}

.linear-swap-position-volume-chart .position-volume-chart-tooltip {
  color: #fff
}

.linear-swap-position-volume-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.linear-swap-position-volume-chart-tooltip {
  color: #fff;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.swap-position-volume-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.swap-position-volume-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative
}

.swap-position-volume-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px
}

.swap-position-volume-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.swap-position-volume-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.linear-swap-position-turnover-chart {
  margin: 0 20px;
  padding-bottom: 40px;
  position: relative
}

.linear-swap-position-turnover-chart .trend-chart-title {
  display: flex;
  font-size: 12px;
  justify-content: space-between;
  margin-left: 15px;
  margin-top: 40px;
  padding-right: 12px
}

.linear-swap-position-turnover-chart .trend-chart-title .title-style {
  color: #000;
  flex: 1 1;
  font-size: 16px;
  height: 24px
}

.linear-swap-position-turnover-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px !important
}

.linear-swap-position-turnover-chart .position-turnover-chart-tooltip {
  color: #fff
}

.linear-swap-position-turnover-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.linear-swap-position-turnover-chart-tooltip {
  color: #fff;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.swap-position-turnover-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.swap-position-turnover-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative
}

.swap-position-turnover-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px
}

.swap-position-turnover-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.swap-position-turnover-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.linear-long-short-trend-chart {
  margin-left: 20px;
  position: relative
}

.linear-long-short-trend-chart .trend-chart-title {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin-top: 40px
}

.linear-long-short-trend-chart .trend-chart-title .title-style {
  margin-right: 10px;
  text-align: left
}

.linear-long-short-trend-chart .trend-chart-title .icon-warn-info {
  height: 12px;
  margin-left: 5px
}

.linear-long-short-trend-chart .trend-chart-title .icon-warn-info:before {
  color: #54748f;
  cursor: pointer;
  font-size: 12px;
  vertical-align: top
}

.linear-long-short-trend-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px !important
}

.linear-long-short-trend-chart .time-period {
  position: absolute;
  right: 35px;
  z-index: 9999
}

.linear-long-short-trend-chart .trend-chart-tip {
  max-width: 300px;
  min-width: 176px;
  padding: 10px;
  word-wrap: break-word
}

.linear-long-short-trend-chart .trend-chart-tip .trend-chart-tip-title {
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal
}

.linear-long-short-trend-chart .trend-chart-tip .long-text,
.linear-long-short-trend-chart .trend-chart-tip .short-text {
  white-space: normal
}

.linear-long-short-trend-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.linear-long-short-trend-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative;
  text-align: left
}

.linear-long-short-trend-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px;
  margin-left: 0 !important
}

.linear-long-short-trend-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.linear-long-short-trend-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.linear-long-short-trend-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.linear-long-short-trend-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.linear-long-short-trend-account-chart {
  margin-left: 20px;
  position: relative
}

.linear-long-short-trend-account-chart .trend-chart-title {
  display: flex;
  font-size: 16px;
  justify-content: space-between;
  margin-top: 40px
}

.linear-long-short-trend-account-chart .trend-chart-title .title-style {
  margin-right: 10px;
  text-align: left
}

.linear-long-short-trend-account-chart .trend-chart-title .center-page-select-root {
  float: right;
  margin-right: 3px;
  width: 64px !important
}

.linear-long-short-trend-account-chart .trend-chart-title .icon-warn-info {
  cursor: pointer;
  height: 12px;
  margin-left: 5px
}

.linear-long-short-trend-account-chart .trend-chart-title .icon-warn-info:before {
  color: #54748f;
  cursor: pointer;
  font-size: 12px;
  vertical-align: middle
}

.linear-long-short-trend-account-chart .time-period {
  position: absolute;
  right: 35px;
  z-index: 9999
}

.linear-long-short-trend-account-chart .trend-chart-tip {
  font-size: 12px;
  max-width: 300px;
  min-width: 176px;
  padding: 10px;
  word-wrap: break-word
}

.linear-long-short-trend-account-chart .trend-chart-tip .trend-chart-tip-title {
  max-width: 300px;
  word-wrap: break-word;
  white-space: normal
}

.linear-long-short-trend-account-chart .trend-chart-tip .long-text,
.linear-long-short-trend-account-chart .trend-chart-tip .short-text {
  white-space: normal
}

.linear-long-short-trend-account-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.linear-long-short-trend-account-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative;
  text-align: left
}

.linear-long-short-trend-account-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px;
  margin-left: 0 !important
}

.linear-long-short-trend-account-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.linear-long-short-trend-account-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.linear-long-short-trend-account-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.linear-long-short-trend-account-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.basis-chart {
  margin-left: 30px;
  padding-bottom: 40px;
  position: relative
}

.basis-chart .trend-chart-title {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 40px
}

.basis-chart .trend-chart-title .title-style {
  color: #000;
  font-size: 16px;
  height: 24px;
  margin-right: 4px
}

.basis-chart .trend-chart-title .icon-warn-info {
  height: 12px
}

.basis-chart .trend-chart-title .icon-warn-info:before {
  color: #54748f;
  cursor: pointer;
  font-size: 12px;
  vertical-align: top
}

.basis-chart .trend-chart-title .center-page-select-root {
  float: right;
  width: 64px !important
}

.basis-chart .basis-chart-tooltip {
  color: #fff
}

.basis-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.basis-chart-tooltip {
  color: #232a4a;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.basis-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.basis-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative
}

.basis-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px;
  margin-right: 4px
}

.basis-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.basis-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.basis-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.basis-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.base-rate-chart {
  margin-left: 30px;
  padding-bottom: 40px;
  position: relative
}

.base-rate-chart .trend-chart-title {
  font-size: 12px;
  margin-left: 10px;
  margin-top: 40px
}

.base-rate-chart .trend-chart-title .title-style {
  color: #000;
  font-size: 16px;
  height: 24px;
  margin-right: 4px
}

.base-rate-chart .trend-chart-title .icon-warn-info {
  height: 12px
}

.base-rate-chart .trend-chart-title .icon-warn-info:before {
  color: #54748f;
  cursor: pointer;
  font-size: 12px;
  vertical-align: top
}

.base-rate-chart .trend-chart-title .center-page-select-root {
  float: right;
  width: 64px !important
}

.base-rate-chart .base-rate-chart-tooltip {
  color: #fff
}

.base-rate-chart-select {
  position: absolute;
  right: 16px;
  top: 40px
}

.base-rate-chart-tooltip {
  color: #232a4a;
  font-size: 12px;
  padding: 5px 15px 5px 10px
}

.base-rate-chart.chart-fullscreen {
  height: 100%;
  margin: 0;
  padding: 24px;
  width: 100%
}

.base-rate-chart.chart-fullscreen .trend-chart-title {
  margin-left: 0;
  margin-top: 0;
  padding-right: 80px;
  position: relative
}

.base-rate-chart.chart-fullscreen .trend-chart-title .title-style {
  color: #263241;
  font-size: 20px;
  margin-right: 4px
}

.base-rate-chart.chart-fullscreen .trend-chart-title .icon-info-close {
  bottom: 0;
  color: #8a8a8e;
  cursor: pointer;
  font-size: 14px;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0
}

.base-rate-chart.chart-fullscreen .title-tooltip {
  bottom: auto;
  top: 7px
}

.base-rate-chart.chart-fullscreen .title-tooltip .tooltip-arrow {
  bottom: auto;
  top: -4px;
  transform: rotate(180deg)
}

.base-rate-chart.chart-share-root {
  margin-left: 0;
  padding-bottom: 10px
}

.fund-rate-all-chart-wrap {
  height: 290px;
  margin-bottom: 20px;
  position: relative
}

.fund-rate-all-chart-wrap .chart-header {
  position: absolute;
  right: 30px;
  top: 40px;
  z-index: 1
}

.fund-rate-all-chart-wrap .fund-rate-chart {
  position: absolute;
  top: 40px;
  width: 100%
}

.fund-rate-all-chart-wrap .chart-tooltip {
  color: #fff;
  font-size: 14px;
  padding: 8px
}

.k-chart-head {
  border-bottom: 1px solid;
  font-size: 12px;
  justify-content: space-between;
  width: 100%
}

.k-chart-head,
.k-chart-head .chart-operate {
  align-items: center;
  display: flex;
  height: 24px
}

.k-chart-head .chart-operate .max-screen {
  display: inline-block;
  height: inherit;
  vertical-align: top
}

.k-chart-head .chart-operate .max-screen button {
  background: transparent;
  border-radius: 0;
  height: inherit;
  padding: 0 8px;
  transition: all .15s
}

.k-chart-head .chart-operate .max-screen button.selected {
  color: var(--dexc-primary-color)
}

.k-chart-head .chart-operate .chart-icon-wrap {
  align-items: center;
  display: flex;
  height: 100%
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn {
  background: transparent;
  border-left: 1px solid;
  border-radius: 0;
  height: 100%;
  padding: 3px 8px 0;
  position: relative;
  width: 32px
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip {
  background-color: #fff !important;
  border-radius: 2px;
  bottom: calc(100% + 12px);
  color: #596a7a !important;
  display: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .15));
  font-size: 12px;
  left: 50%;
  line-height: 18px;
  padding: 8px 16px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  width: auto;
  z-index: 11
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip:before {
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  border-top: 6px solid;
  border-top-color: #fff !important;
  bottom: -6px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen {
  bottom: unset !important;
  top: calc(100% + 10px) !important
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: 6px dashed transparent !important;
  border-right: 6px dashed transparent !important;
  border-top-color: transparent !important;
  top: -12px
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen {
  left: 15px !important;
  top: calc(100% + 7px) !important;
  transform: unset !important
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: unset !important;
  border-right: 10px dashed transparent !important;
  left: 5px;
  top: -12px
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover {
  color: var(--dexc-primary-color) !important
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover .tip {
  display: inline-block !important
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn i {
  font-size: 14px;
  height: 14px
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:last-child {
  border-right: 1px solid
}

.k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .icon-chart-setting {
  font-size: 16px !important;
  height: 16px
}

.estimated-rate-kchart-wrap p,
.premium-index-kchart-wrap p {
  color: #000;
  font-size: 16px;
  line-height: 16px;
  padding: 24px 0 16px
}

.estimated-rate-kchart-wrap .premium-index-kchart,
.premium-index-kchart-wrap .premium-index-kchart {
  height: 488px !important
}

.estimated-rate-kchart-wrap .k-chart-tip-wrap,
.premium-index-kchart-wrap .k-chart-tip-wrap {
  background: #fff;
  border: none
}

.estimated-rate-kchart-wrap #estimatedRateKchartOutDomId,
.estimated-rate-kchart-wrap #premiumIndexKchartOutDomId,
.premium-index-kchart-wrap #estimatedRateKchartOutDomId,
.premium-index-kchart-wrap #premiumIndexKchartOutDomId {
  border: 1px solid #dfe2e7;
  height: 512px;
  width: 100%
}

.estimated-rate-kchart-wrap #estimatedRateKchartOutDomId:-webkit-full-screen,
.estimated-rate-kchart-wrap #premiumIndexKchartOutDomId:-webkit-full-screen,
.premium-index-kchart-wrap #estimatedRateKchartOutDomId:-webkit-full-screen,
.premium-index-kchart-wrap #premiumIndexKchartOutDomId:-webkit-full-screen {
  bottom: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important
}

.estimated-rate-kchart-wrap #estimatedRateKchartOutDomId #estimatedRateKchart,
.estimated-rate-kchart-wrap #estimatedRateKchartOutDomId #premiumIndexKchart,
.estimated-rate-kchart-wrap #premiumIndexKchartOutDomId #estimatedRateKchart,
.estimated-rate-kchart-wrap #premiumIndexKchartOutDomId #premiumIndexKchart,
.premium-index-kchart-wrap #estimatedRateKchartOutDomId #estimatedRateKchart,
.premium-index-kchart-wrap #estimatedRateKchartOutDomId #premiumIndexKchart,
.premium-index-kchart-wrap #premiumIndexKchartOutDomId #estimatedRateKchart,
.premium-index-kchart-wrap #premiumIndexKchartOutDomId #premiumIndexKchart {
  height: calc(100% - 24px);
  width: 100%
}

.estimated-rate-kchart-wrap {
  margin-top: 16px
}

.mark-price-wrap .mark-price {
  background-color: #fff;
  border-radius: 4px
}

.mark-price-wrap .mark-price header {
  align-items: center;
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  display: flex;
  height: 48px;
  padding: 0 30px
}

.mark-price-wrap .mark-price header .back-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  color: #357ce1;
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  line-height: 28px;
  margin-right: 30px;
  padding: 0 8px
}

.mark-price-wrap .mark-price header .back-btn .icon-back {
  height: 12px;
  margin-right: 2px;
  transform: scale(.7) translateY(-2px);
  vertical-align: middle
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap {
  align-items: center;
  display: flex
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap .mark-price-tab-text {
  align-items: center;
  background-color: #fff;
  border: 1px solid #dfe2e7;
  box-sizing: border-box;
  color: #000;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  min-width: 113px;
  padding: 0 16px;
  text-align: center
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap .mark-price-tab-text:first-child {
  border-radius: 2px 0 0 2px
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap .mark-price-tab-text:last-child {
  border-radius: 0 2px 2px 0
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap .mark-price-tab-text:first-child:not(.mark-price-header-tab-wrap-selected) {
  border-right: none
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap .mark-price-tab-text:last-child:not(.mark-price-header-tab-wrap-selected) {
  border-left: none
}

.mark-price-wrap .mark-price header .mark-price-header-tab-wrap .mark-price-header-tab-wrap-selected {
  background: linear-gradient(0deg, #357ce1, #357ce1);
  border-color: #357ce1;
  color: #fff
}

.mark-price-wrap .mark-price main {
  padding: 20px 30px
}

.mark-price-wrap .mark-price main .mark-price-info {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-name {
  align-items: center;
  display: flex
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-name .mark-price-info-text {
  font-size: 16px;
  line-height: 16px;
  margin: 0 6px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-name .select-value-box {
  font-size: 16px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-name .select-list {
  font-weight: 400
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-name .icon-warn-info {
  color: #54748f;
  cursor: pointer
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-price {
  margin-left: 12px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-updown p {
  align-items: center;
  display: flex;
  font-size: 12px;
  margin-left: 12px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-updown p .upper-low-icon {
  margin-right: 4px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-high,
.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-low {
  color: #8a8a8e;
  font-size: 12px
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-high span,
.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-low span {
  color: #000
}

.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-high,
.mark-price-wrap .mark-price main .mark-price-info .mark-price-info-low {
  margin-left: 14px
}

.price-index-card-page .card-page-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 20px 30px
}

.price-index-card-page .price-index-card {
  flex-shrink: 0;
  margin-bottom: 20px;
  margin-right: 30px
}

.price-index-card-page .price-index-card:nth-child(4n) {
  margin-right: 0
}

.price-index-card {
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  height: 102px;
  position: relative;
  width: 292px
}

.price-index-card .price-index-card-fake {
  background: #fff;
  box-shadow: 0 5px 10px rgba(28, 36, 44, .05);
  height: 102px;
  padding: 16px;
  position: relative;
  top: 0;
  transition: top .3s;
  width: 292px
}

.price-index-card:hover .price-index-card-fake {
  top: -4px;
  transition: top .3s
}

.price-index-card .card-top {
  align-items: center;
  display: flex;
  height: 20px;
  justify-content: space-between
}

.price-index-card .card-top-symbol {
  font-size: 14px
}

.price-index-card .card-top-rate {
  align-items: center;
  display: flex;
  font-size: 12px;
  height: 20px;
  justify-content: center;
  min-width: 56px;
  padding: 4px
}

.price-index-card .card-bottom {
  margin-top: 16px
}

.price-index-card .card-bottom-price {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1
}

.price-index-card .card-bottom-origin-price {
  align-items: flex-end;
  display: flex
}

.price-index-card .card-bottom-origin-price span:first-child {
  align-items: center;
  display: flex;
  font-size: 18px;
  font-weight: 500;
  height: 18px;
  margin-right: 4px
}

.price-index-card .card-bottom-origin-price span:last-child {
  align-items: center;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  height: 12px
}

.price-index-card .card-bottom-convert-price {
  font-size: 12px;
  height: 12px;
  margin-top: 4px
}

.price-index-card .small-kline {
  bottom: 0;
  position: absolute;
  right: 0
}

.price-index-kline-page .price-index-kline-chart-wrap {
  padding: 20px 30px
}

.price-index-kline-page .k-chart-head {
  border-bottom: 1px solid;
  font-size: 12px;
  justify-content: space-between;
  width: 100%
}

.price-index-kline-page .k-chart-head,
.price-index-kline-page .k-chart-head .chart-operate {
  align-items: center;
  display: flex;
  height: 24px
}

.price-index-kline-page .k-chart-head .chart-operate .max-screen {
  display: inline-block;
  height: inherit;
  vertical-align: top
}

.price-index-kline-page .k-chart-head .chart-operate .max-screen button {
  background: transparent;
  border-radius: 0;
  height: inherit;
  padding: 0 8px;
  transition: all .15s
}

.price-index-kline-page .k-chart-head .chart-operate .max-screen button.selected {
  color: var(--dexc-primary-color)
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap {
  align-items: center;
  display: flex;
  height: 100%
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn {
  background: transparent;
  border-left: 1px solid;
  border-radius: 0;
  height: 100%;
  padding: 3px 8px 0;
  position: relative;
  width: 32px
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip {
  background-color: #fff !important;
  border-radius: 2px;
  bottom: calc(100% + 12px);
  color: #596a7a !important;
  display: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .15));
  font-size: 12px;
  left: 50%;
  line-height: 18px;
  padding: 8px 16px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  width: auto;
  z-index: 11
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip:before {
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  border-top: 6px solid;
  border-top-color: #fff !important;
  bottom: -6px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen {
  bottom: unset !important;
  top: calc(100% + 10px) !important
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: 6px dashed transparent !important;
  border-right: 6px dashed transparent !important;
  border-top-color: transparent !important;
  top: -12px
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen {
  left: 15px !important;
  top: calc(100% + 7px) !important;
  transform: unset !important
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: unset !important;
  border-right: 10px dashed transparent !important;
  left: 5px;
  top: -12px
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover {
  color: var(--dexc-primary-color) !important
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover .tip {
  display: inline-block !important
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn i {
  font-size: 14px;
  height: 14px
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:last-child {
  border-right: 1px solid
}

.price-index-kline-page .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .icon-chart-setting {
  font-size: 16px !important;
  height: 16px
}

.price-index-kline-page #priceIndexKlineChartOutDom {
  border: 1px solid #dfe2e7;
  height: 512px;
  width: 100%
}

.price-index-kline-page #priceIndexKlineChartOutDom:-webkit-full-screen {
  bottom: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important
}

.price-index-kline-page #priceIndexKlineChartOutDom #priceIndexKlineChart {
  height: calc(100% - 24px);
  width: 100%
}

.kline-chart-market {
  align-items: center;
  display: flex;
  height: 16px;
  margin-bottom: 20px
}

.kline-chart-market .kline-chart-market-symbol {
  font-size: 16px;
  font-weight: 500;
  height: 16px;
  line-height: 16px
}

.kline-chart-market .kline-chart-market-symbol .icon-warn-info {
  cursor: pointer;
  margin-left: 8px
}

.kline-chart-market .kline-chart-market-price {
  align-items: center;
  display: flex;
  font-weight: 500;
  margin: 0 17px 0 12px
}

.kline-chart-market .kline-chart-market-price span:first-child {
  font-size: 16px;
  margin-right: 12px
}

.kline-chart-market .kline-chart-market-price i {
  font-size: 12px;
  margin-right: 4px
}

.kline-chart-market .kline-chart-market-price span:last-child {
  font-size: 12px
}

.kline-chart-market .kline-chart-market-high,
.kline-chart-market .kline-chart-market-low {
  align-items: center;
  display: flex;
  font-size: 12px;
  height: 12px;
  margin-right: 15px
}

.kline-chart-market .kline-chart-market-high span,
.kline-chart-market .kline-chart-market-low span {
  height: 12px;
  line-height: 12px
}

.kline-chart-market .kline-chart-market-high span:first-child,
.kline-chart-market .kline-chart-market-low span:first-child {
  margin-right: 4px
}

.price-index-relation-contract {
  margin-top: 40px
}

.price-index-relation-contract .price-index-relation-contract-title {
  align-items: center;
  display: flex;
  font-size: 16px;
  font-weight: 500;
  height: 16px;
  padding-left: 8px;
  position: relative
}

.price-index-relation-contract .price-index-relation-contract-title>span:first-child {
  height: 16px;
  line-height: 16px;
  margin-right: 4px
}

.price-index-relation-contract .price-index-relation-contract-title .icon-warn-info {
  cursor: pointer;
  font-size: 12px
}

.price-index-relation-contract .price-index-relation-contract-title:before {
  background-color: var(--dexc-primary-color);
  border-radius: 1.5px;
  content: "";
  height: 14px;
  left: 0;
  position: absolute;
  top: 0;
  width: 3px
}

.price-index-relation-contract .center-page-table-wrap {
  border-top: 1px solid #e6ecf2;
  margin-top: 20px;
  padding: 0 !important
}

.price-index-relation-contract .center-page-table-wrap .table-head-line th {
  text-align: right;
  width: 25%
}

.price-index-relation-contract .center-page-table-wrap .table-head-line th:first-child {
  padding-left: 0 !important;
  text-align: left;
  width: 20%
}

.price-index-relation-contract .center-page-table-wrap .table-head-line th:last-child {
  width: 30%
}

.price-index-relation-contract .center-page-table-wrap .table-body-line td {
  text-align: right;
  width: 25%
}

.price-index-relation-contract .center-page-table-wrap .table-body-line td:first-child {
  padding-left: 0 !important;
  text-align: left;
  width: 20%
}

.price-index-relation-contract .center-page-table-wrap .table-body-line td:last-child {
  padding-right: 16px !important;
  width: 30%
}

.price-index-relation-contract .relation-contract-go-trade {
  cursor: pointer;
  position: relative
}

.price-index-relation-contract .relation-contract-go-trade .icon-home-go-exchange {
  opacity: 0;
  position: absolute;
  right: 0;
  top: 26px;
  transition: top .3s
}

.price-index-relation-contract .relation-contract-go-trade:hover .icon-home-go-exchange {
  opacity: 1;
  top: 18px;
  transition: all .3s
}

.price-index-header {
  justify-content: flex-start !important
}

.price-index-header.content-box-title {
  padding: 0 30px
}

.price-index-header .price-index-header-back {
  align-items: center;
  border: 1px solid;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 28px;
  justify-content: center;
  margin-right: 30px;
  padding: 0 8px;
  white-space: nowrap
}

.price-index-header .price-index-header-back .icon-back {
  transform: scale(.8)
}

.price-index-header .price-index-header-tab-wrap {
  align-items: center;
  display: flex
}

.price-index-header .price-index-header-tab-wrap .price-index-tab-btn {
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccd2da;
  color: #000;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  height: 28px;
  justify-content: center;
  padding: 0 16px;
  white-space: nowrap
}

.price-index-header .price-index-header-tab-wrap .price-index-tab-btn:first-child {
  border-radius: 2px 0 0 2px
}

.price-index-header .price-index-header-tab-wrap .price-index-tab-btn:last-child {
  border-radius: 0 2px 2px 0
}

.price-index-header .price-index-header-tab-wrap .price-index-tab-btn:first-child:not(.price-index-header-tab-wrap-selected) {
  border-right: none
}

.price-index-header .price-index-header-tab-wrap .price-index-tab-btn:last-child:not(.price-index-header-tab-wrap-selected) {
  border-left: none
}

.price-index-header .price-index-header-tab-wrap .price-index-tab-btn.price-index-header-tab-wrap-selected {
  background-color: var(--dexc-primary-color);
  border: 1px solid var(--dexc-primary-color);
  color: #fff
}

.price-index-header .center-page-select-root.vi-VI {
  width: 114px !important
}

#markPriceKchartOutDomId {
  border: 1px solid #dfe2e7;
  height: 512px;
  width: 100%
}

#markPriceKchartOutDomId:-webkit-full-screen {
  bottom: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;
  left: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0 !important;
  min-width: 0 !important;
  object-fit: contain;
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important
}

#markPriceKchartOutDomId #markPriceKchart {
  height: calc(100% - 24px);
  width: 100%
}

#markPriceKchartOutDomId .k-chart-head {
  border-bottom: 1px solid;
  font-size: 12px;
  justify-content: space-between;
  width: 100%
}

#markPriceKchartOutDomId .k-chart-head,
#markPriceKchartOutDomId .k-chart-head .chart-operate {
  align-items: center;
  display: flex;
  height: 24px
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .max-screen {
  display: inline-block;
  height: inherit;
  vertical-align: top
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .max-screen button {
  background: transparent;
  border-radius: 0;
  height: inherit;
  padding: 0 8px;
  transition: all .15s
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .max-screen button.selected {
  color: var(--dexc-primary-color)
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap {
  align-items: center;
  display: flex;
  height: 100%
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn {
  background: transparent;
  border-left: 1px solid;
  border-radius: 0;
  height: 100%;
  padding: 3px 8px 0;
  position: relative;
  width: 32px
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip {
  background-color: #fff !important;
  border-radius: 2px;
  bottom: calc(100% + 12px);
  color: #596a7a !important;
  display: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .15));
  font-size: 12px;
  left: 50%;
  line-height: 18px;
  padding: 8px 16px;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  width: auto;
  z-index: 11
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip:before {
  border-left: 6px dashed transparent;
  border-right: 6px dashed transparent;
  border-top: 6px solid;
  border-top-color: #fff !important;
  bottom: -6px;
  content: "";
  height: 0;
  left: 50%;
  margin-left: -5px;
  position: absolute;
  width: 0
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen {
  bottom: unset !important;
  top: calc(100% + 10px) !important
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: 6px dashed transparent !important;
  border-right: 6px dashed transparent !important;
  border-top-color: transparent !important;
  top: -12px
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen {
  left: 15px !important;
  top: calc(100% + 7px) !important;
  transform: unset !important
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn.chart-screen .tip.full-screen:before {
  border-bottom: 6px solid #fff !important;
  border-left: unset !important;
  border-right: 10px dashed transparent !important;
  left: 5px;
  top: -12px
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover {
  color: var(--dexc-primary-color) !important
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:hover .tip {
  display: inline-block !important
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn i {
  font-size: 14px;
  height: 14px
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn:last-child {
  border-right: 1px solid
}

#markPriceKchartOutDomId .k-chart-head .chart-operate .chart-icon-wrap .chart-icon-btn .icon-chart-setting {
  font-size: 16px !important;
  height: 16px
}

.mark-price-related-contract {
  margin-top: 42px
}

.mark-price-related-contract .mark-price-related-contract-title {
  align-items: center;
  display: flex
}

.mark-price-related-contract .mark-price-related-contract-title .mark-price-related-contract-title-sign {
  background: #357ce1;
  border-radius: 1.5px;
  height: 14px;
  width: 3px
}

.mark-price-related-contract .mark-price-related-contract-title .mark-price-related-contract-title-name {
  font-size: 16px;
  font-weight: 500;
  margin-left: 4px;
  margin-right: 4px
}

.mark-price-related-contract table {
  border-top: 1px solid #e6ecf2;
  color: #000;
  font-size: 12px;
  margin-top: 20px;
  width: 100%
}

.mark-price-related-contract table thead tr {
  height: 30px
}

.mark-price-related-contract table thead tr th {
  color: #8a8a8e;
  font-weight: 400
}

.mark-price-related-contract table tbody tr {
  box-shadow: inset 0 -1px 0 #e6ecf2;
  height: 40px
}

.mark-price-related-contract table tbody tr td .goto-trade {
  align-items: center;
  color: var(--dexc-primary-color);
  display: flex;
  justify-content: flex-end;
  overflow: hidden
}

.mark-price-related-contract table tbody tr td .goto-trade .goto-trade-right {
  align-items: center;
  cursor: pointer;
  display: flex
}

.mark-price-related-contract table tbody tr td .goto-trade .goto-trade-right .icon-arrow-trade {
  color: #357ce1;
  margin-left: 4px;
  transform: translateY(30px);
  transition: .1s
}

.mark-price-related-contract table tbody tr td .goto-trade .goto-trade-right:hover .icon-arrow-trade {
  transform: translateY(0)
}

.container-da92686e .dex-table-wrapper {
  --dex-table-thead-cell-padding: 12px 12px;
  --dex-table-tbody-cell-padding: 12px 12px;
  --dex-table-cell-first-last-padding: 12px
}

.container-da92686e .dex-table-wrapper .dex-table {
  min-height: unset
}

.container-da92686e .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-cell,
.container-da92686e .dex-table-wrapper .dex-table .dex-table-thead .dex-table-cell {
  font-size: 12px;
  line-height: 16px
}

.container-da92686e .dex-table-wrapper .dex-table .dex-table-tbody .dex-table-cell:last-child,
.container-da92686e .dex-table-wrapper .dex-table .dex-table-thead .dex-table-cell:last-child {
  text-align: left
}

.linearSwapElements-d41bbe90 .data-center-wrap {
  padding: unset
}

.subaccount-center-page {
  border: none !important
}

.subaccount-details {
  min-height: 528px
}

.subaccount-details .subaccount-details-title {
  align-items: center;
  background: #fff;
  border: 1px solid #e6ecf2;
  display: flex;
  height: 48px;
  justify-content: space-between;
  line-height: unset !important;
  padding: 0 20px
}

.subaccount-details .tickicon {
  margin-right: 8px
}

.subaccount-details .place-holder {
  display: inline-block;
  width: 20px
}

.subaccount-details .mark-icon {
  border: 1px solid #357ce1;
  border-radius: 1.6px;
  color: #357ce1;
  margin-left: 5px;
  padding: 1px 5px
}

.subaccount-details .subaccount-details-content .center-page-table-wrap {
  padding-bottom: 0
}

.subaccount-details .subaccount-details-content .center-page-table-wrap .table-box {
  border-top: 1px solid #e6ecf2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 582px !important
}

.subaccount-details .subaccount-details-content .center-page-table-wrap .table-box .sub-asset-info-table-head {
  display: flex
}

.subaccount-details .subaccount-details-content .center-page-table-wrap .table-box th.pointer {
  cursor: pointer;
  position: relative;
  top: 1px
}

.subaccount-details .subaccount-details-content .center-page-table-wrap .table-box .table-body-td-cross-isolated {
  border: 1px solid var(--up-color);
  border-radius: 2px;
  color: var(--up-color);
  line-height: 18px;
  margin-left: 3px;
  min-width: 20px;
  padding: 0 3px
}

.subaccount-details .subaccount-details-content .center-page-table-wrap .table-head-line {
  vertical-align: baseline
}

.subaccount-details .subaccount-details-content .back-button {
  align-items: center;
  background-color: transparent;
  border: 1px solid #dfe2e7;
  border-radius: 2px;
  color: var(--dexc-primary-color);
  display: flex;
  height: 30px;
  padding: 0 8px
}

.subaccount-details .subaccount-details-content .back-button .icon-back {
  font-size: 12px;
  height: 12px;
  margin-right: 2px;
  transform: scale(.7)
}

.subaccount-details .subaccount-details-content .subaccount-details-wrap-border {
  border: 1px solid #dfe2e7;
  margin-top: 20px
}

.subaccount-details .subaccount-details-content .details-btn-wrap {
  align-items: center;
  background: #f2f6fa;
  box-shadow: 0 1px 0 0 #e6ecf2, 0 -1px 0 0 #e6ecf2;
  display: flex;
  height: 48px
}

.subaccount-details .subaccount-details-content .details-btn-wrap .details-btn {
  background: #f2f6fa;
  border-radius: 0;
  color: #596a7a;
  font-size: 14px;
  height: 100%;
  line-height: 1;
  margin-right: 16px;
  padding: 0 10px;
  text-align: center;
  transition: all .2s
}

.subaccount-details .subaccount-details-content .details-btn-wrap .details-btn:hover {
  color: #596a7a
}

.subaccount-details .subaccount-details-content .details-btn-wrap .details-btn.active {
  border-bottom: 2px solid var(--dexc-primary-color);
  color: #000
}

.subaccount-details .subaccount-details-content .sub-current-order-condition {
  align-items: center;
  display: flex;
  height: 60px;
  justify-content: space-between;
  padding: 0 30px 0 20px
}

.subaccount-details .subaccount-details-content .sub-current-order-condition .query-button {
  margin-top: 0
}

.subaccount-details .subaccount-details-content .sub-current-order-condition .select-btn-wrap {
  align-items: center;
  display: flex
}

.subaccount-details .subaccount-details-content .sub-current-order-condition .select-btn-wrap .query-button {
  margin-right: 20px
}

.subaccount-details .subaccount-details-content .select-condition-wrap {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  min-width: 990px
}

.subaccount-details .subaccount-details-content .select-condition-wrap .center-page-select-title {
  margin-left: 16px
}

.subaccount-details .subaccount-details-content .select-condition-wrap .select-condition-symbol {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.subaccount-details .subaccount-details-content .select-condition-wrap .select-condition-symbol:first-child .center-page-select-title {
  margin-left: 10px
}

.subaccount-details .subaccount-details-content .select-condition-wrap .select-condition-symbol .center-page-convert-font {
  width: 130px !important
}

.subaccount-details .subaccount-details-content .select-condition-wrap .select-condition-symbol .center-page-select-root {
  margin-right: 0
}

.subaccount-details .subaccount-details-content .sub-contract-order-notice {
  color: #8a8a8e;
  font-size: 12px;
  width: 700px
}

.subaccount-details .table-box-head-extra .table-head-line td {
  padding: 7px 0 !important
}

.subaccount-details .table-head-two-line th {
  vertical-align: top
}

.sub-current-order-condition-btn-wrapper {
  align-items: center;
  display: flex
}

.sub-current-order-condition-btn-wrapper .revoke-btn {
  background: #fff;
  border: 1px solid var(--up-color);
  border-radius: 2px;
  color: var(--up-color);
  font-size: 12px;
  height: 28px;
  line-height: 28px;
  margin-left: 16px;
  min-width: 80px;
  padding: 0 15px
}

.thd-revoke {
  color: var(--up-color);
  font-size: 12px;
  line-height: 12px;
  text-align: right
}

.new-select-body-wrap-modal-wrapper-white,
.new-select-white {
  height: 36px;
  outline: none;
  padding-top: 8px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 1px;
  width: 45px;
  z-index: 11
}

.new-select-body-wrap-modal-wrapper-white:not(.new-select-mobile),
.new-select-white:not(.new-select-mobile) {
  cursor: pointer
}

.new-select-body-wrap-modal-wrapper-white .new-select-arrow-wrapper,
.new-select-white .new-select-arrow-wrapper {
  height: 100%;
  width: 100%
}

.new-select-body-wrap-modal-wrapper-white .new-select-arrow-line,
.new-select-white .new-select-arrow-line {
  border-left: 1px solid;
  height: 24px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 0
}

.new-select-body-wrap-modal-wrapper-white .new-select-arrow,
.new-select-white .new-select-arrow {
  border-bottom: 2px solid #8a8a8e;
  border-right: 2px solid #8a8a8e;
  display: inline-block;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s;
  width: 10px
}

.new-select-body-wrap-modal-wrapper-white .new-select-arrow-rotate,
.new-select-white .new-select-arrow-rotate {
  transform: rotate(225deg);
  transform-origin: 62% 75%;
  transition: transform .2s
}

.new-select-body-wrap-modal-wrapper-white .new-select-arrow-rotate-reset,
.new-select-white .new-select-arrow-rotate-reset {
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s
}

.new-select-body-wrap-modal-wrapper-white .new-select-list,
.new-select-white .new-select-list {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px 0 rgba(28, 36, 44, .12);
  box-sizing: border-box;
  opacity: 0;
  padding: 4px 0;
  position: absolute;
  right: 0;
  top: 36px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s, opacity .2s
}

.new-select-body-wrap-modal-wrapper-white .new-select-list li,
.new-select-white .new-select-list li {
  background: #fff;
  color: #000;
  font-size: 12px;
  line-height: 28px;
  padding-left: 16px;
  position: relative;
  text-align: left;
  width: 100%
}

.new-select-body-wrap-modal-wrapper-white .new-select-list li:hover,
.new-select-white .new-select-list li:hover {
  background: #f2f6fa;
  color: var(--dexc-primary-color)
}

.new-select-body-wrap-modal-wrapper-white .new-select-slide-down,
.new-select-white .new-select-slide-down {
  opacity: 1;
  transform: scale(1);
  transform-origin: top
}

.new-select-blue,
.new-select-body-wrap-modal-wrapper-blue {
  height: 36px;
  outline: none;
  padding-top: 8px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 1px;
  width: 45px;
  z-index: 11
}

.new-select-blue:not(.new-select-mobile),
.new-select-body-wrap-modal-wrapper-blue:not(.new-select-mobile) {
  cursor: pointer
}

.new-select-blue .new-select-arrow-wrapper,
.new-select-body-wrap-modal-wrapper-blue .new-select-arrow-wrapper {
  height: 100%;
  width: 100%
}

.new-select-blue .new-select-arrow-line,
.new-select-body-wrap-modal-wrapper-blue .new-select-arrow-line {
  border-left: 1px solid;
  height: 24px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 0
}

.new-select-blue .new-select-arrow,
.new-select-body-wrap-modal-wrapper-blue .new-select-arrow {
  border-bottom: 2px solid #808799;
  border-right: 2px solid #808799;
  display: inline-block;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s;
  width: 10px
}

.new-select-blue .new-select-arrow-rotate,
.new-select-body-wrap-modal-wrapper-blue .new-select-arrow-rotate {
  transform: rotate(225deg);
  transform-origin: 62% 75%;
  transition: transform .2s
}

.new-select-blue .new-select-arrow-rotate-reset,
.new-select-body-wrap-modal-wrapper-blue .new-select-arrow-rotate-reset {
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s
}

.new-select-blue .new-select-list,
.new-select-body-wrap-modal-wrapper-blue .new-select-list {
  background: #212632;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(17, 18, 23, .5);
  box-sizing: border-box;
  opacity: 0;
  padding: 4px 0;
  position: absolute;
  right: 0;
  top: 36px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s, opacity .2s
}

.new-select-blue .new-select-list li,
.new-select-body-wrap-modal-wrapper-blue .new-select-list li {
  background: #212632;
  color: #808799;
  font-size: 12px;
  line-height: 28px;
  padding-left: 16px;
  position: relative;
  text-align: left;
  width: 100%
}

.new-select-blue .new-select-list li:hover,
.new-select-body-wrap-modal-wrapper-blue .new-select-list li:hover {
  background: #2e3354;
  color: #d2d6ec
}

.new-select-blue .new-select-slide-down,
.new-select-body-wrap-modal-wrapper-blue .new-select-slide-down {
  opacity: 1;
  transform: scale(1);
  transform-origin: top
}

.new-select-black {
  height: 36px;
  outline: none;
  padding-top: 8px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 1px;
  width: 45px;
  z-index: 11
}

.new-select-black:not(.new-select-mobile) {
  cursor: pointer
}

.new-select-black .new-select-arrow-wrapper {
  height: 100%;
  width: 100%
}

.new-select-black .new-select-arrow-line {
  border-left: 1px solid;
  height: 24px;
  left: 0;
  position: absolute;
  top: 6px;
  width: 0
}

.new-select-black .new-select-arrow {
  border-bottom: 2px solid #697080;
  border-right: 2px solid #697080;
  display: inline-block;
  height: 10px;
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s;
  width: 10px
}

.new-select-black .new-select-arrow-rotate {
  transform: rotate(225deg);
  transform-origin: 62% 75%;
  transition: transform .2s
}

.new-select-black .new-select-arrow-rotate-reset {
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s
}

.new-select-black .new-select-list {
  background: #34363f;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(17, 17, 20, .5);
  box-sizing: border-box;
  opacity: 0;
  padding: 4px 0;
  position: absolute;
  right: 0;
  top: 36px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s, opacity .2s
}

.new-select-black .new-select-list li {
  background: #34363f;
  color: #697080;
  font-size: 12px;
  line-height: 28px;
  padding-left: 16px;
  position: relative;
  text-align: left;
  width: 100%
}

.new-select-black .new-select-list li:hover {
  background: #3e404b;
  color: #d5def2
}

.new-select-black .new-select-slide-down {
  opacity: 1;
  transform: scale(1);
  transform-origin: top
}

.new-select-item-tip {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 16px 0 rgba(69, 97, 137, .2);
  color: #263241;
  display: none;
  font-size: 12px;
  line-height: 1.5;
  padding: 7px 11px;
  position: absolute;
  right: -204px;
  text-align: left;
  top: 0;
  width: 195px;
  z-index: 41
}

.new-select-item-tip .new-select-item-tip-arrow {
  border-bottom: 5px solid transparent;
  border-right: 5px solid #fff;
  border-top: 5px solid transparent;
  left: -5px;
  position: absolute;
  top: 16px
}

.new-select-item-tip-left {
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 4px 16px 0 rgba(69, 97, 137, .2);
  color: #263241;
  display: none;
  font-size: 12px;
  left: -202px;
  line-height: 1.5;
  padding: 7px 11px;
  position: absolute;
  text-align: left;
  top: 0;
  width: 195px;
  z-index: 41
}

.new-select-item-tip-left .new-select-item-tip-arrow {
  border-bottom: 5px solid transparent;
  border-left: 5px solid #fff;
  border-top: 5px solid transparent;
  position: absolute;
  right: -5px;
  top: 16px
}

.all-position-price-input-root-white {
  display: flex;
  height: 32px;
  position: relative;
  width: 128px
}

.all-position-price-input-root-white .price-input {
  font-size: 12px;
  height: 32px;
  padding: 0 40px 0 8px;
  width: 128px
}

.all-position-price-input-root-white .price-input:focus {
  z-index: 1
}

.all-position-price-input-root-white .new-select {
  height: 32px;
  padding-top: 6px;
  right: 22px;
  width: 22px
}

.all-position-price-input-root-white .new-select .new-select-arrow-line {
  display: none
}

.all-position-price-input-root-white .new-select .new-select-arrow {
  border-bottom: 2px solid #ccd2da;
  border-right: 2px solid #ccd2da;
  height: 6px;
  width: 6px
}

.all-position-price-input-root-white .new-select .new-select-list {
  top: 32px;
  width: 106px !important
}

.all-position-price-input-root-white .rival-price-common-button {
  border-bottom: 1px solid;
  border-radius: 0 3px 3px 0;
  border-top: 1px solid;
  border-color: transparent currentcolor;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin: 0;
  padding: 0 3px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 22px;
  z-index: 1
}

.all-position-price-input-root-white .rival-price-common-button.border-blue {
  z-index: 1
}

.all-position-price-input-root-white .rival-price-button {
  background-color: rgba(244, 247, 250, .4);
  border-bottom: 1px solid;
  border-radius: 0 3px 3px 0;
  border-top: 1px solid;
  border-color: transparent currentcolor;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin: 0;
  padding: 0 3px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 22px;
  z-index: 1
}

.all-position-price-input-root-white .rival-price-button.border-blue {
  z-index: 1
}

.all-position-price-input-root-white .rival-price-button:hover {
  border-color: var(--dexc-white-primary-color) !important;
  color: var(--dexc-white-primary-color);
  z-index: 3
}

.all-position-price-input-root-white .icon-flash-close.price-flash-close-blue-border {
  border-color: var(--dexc-white-primary-color) !important
}

.all-position-price-input-root-white .icon-flash-close.price-flash-close-blue-border.error {
  border-color: var(--dexc-error-color) !important
}

.all-position-price-input-root-white .price-input-line {
  background: #ccd2da;
  height: 30px;
  position: absolute;
  right: 21px;
  top: 1px;
  width: 1px;
  z-index: 2
}

.all-position-price-input-root-white .icon-flash-close:before {
  height: 12px;
  left: 5px;
  position: absolute;
  top: 1px
}

.all-position-price-input-root-blue {
  display: flex;
  height: 32px;
  position: relative;
  width: 128px
}

.all-position-price-input-root-blue .price-input {
  font-size: 12px;
  height: 32px;
  padding: 0 40px 0 8px;
  width: 128px
}

.all-position-price-input-root-blue .price-input:focus {
  z-index: 1
}

.all-position-price-input-root-blue .new-select {
  height: 32px;
  padding-top: 6px;
  right: 22px;
  width: 22px
}

.all-position-price-input-root-blue .new-select .new-select-arrow-line {
  display: none
}

.all-position-price-input-root-blue .new-select .new-select-arrow {
  border-bottom: 2px solid #30353e;
  border-right: 2px solid #30353e;
  height: 6px;
  width: 6px
}

.all-position-price-input-root-blue .new-select .new-select-list {
  top: 32px;
  width: 106px !important
}

.all-position-price-input-root-blue .rival-price-common-button {
  border-bottom: 1px solid;
  border-radius: 0 3px 3px 0;
  border-top: 1px solid;
  border-color: transparent currentcolor;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin: 0;
  padding: 0 3px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 22px;
  z-index: 1
}

.all-position-price-input-root-blue .rival-price-common-button.border-blue {
  z-index: 1
}

.all-position-price-input-root-blue .rival-price-button {
  background-color: rgba(19, 22, 37, .2);
  border-bottom: 1px solid;
  border-radius: 0 3px 3px 0;
  border-top: 1px solid;
  border-color: transparent currentcolor;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin: 0;
  padding: 0 3px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 22px;
  z-index: 1
}

.all-position-price-input-root-blue .rival-price-button.border-blue {
  z-index: 1
}

.all-position-price-input-root-blue .rival-price-button:hover {
  border-color: var(--dexc-dark-primary-color) !important;
  color: var(--dexc-dark-primary-color);
  z-index: 3
}

.all-position-price-input-root-blue .icon-flash-close.price-flash-close-blue-border {
  border-color: var(--dexc-dark-primary-color) !important
}

.all-position-price-input-root-blue .icon-flash-close.price-flash-close-blue-border.error {
  border-color: var(--dexc-error-color) !important
}

.all-position-price-input-root-blue .price-input-line {
  background: #30353e;
  height: 30px;
  position: absolute;
  right: 21px;
  top: 1px;
  width: 1px;
  z-index: 2
}

.all-position-price-input-root-blue .icon-flash-close:before {
  height: 12px;
  left: 5px;
  position: absolute;
  top: 1px
}

.all-position-price-input-root-black {
  display: flex;
  height: 32px;
  position: relative;
  width: 128px
}

.all-position-price-input-root-black .price-input {
  font-size: 12px;
  height: 32px;
  padding: 0 40px 0 8px;
  width: 128px
}

.all-position-price-input-root-black .price-input:focus {
  z-index: 1
}

.all-position-price-input-root-black .new-select {
  height: 32px;
  padding-top: 6px;
  right: 22px;
  width: 22px
}

.all-position-price-input-root-black .new-select .new-select-arrow-line {
  display: none
}

.all-position-price-input-root-black .new-select .new-select-arrow {
  border-bottom: 2px solid #3f4254;
  border-right: 2px solid #3f4254;
  height: 6px;
  width: 6px
}

.all-position-price-input-root-black .new-select .new-select-list {
  top: 32px;
  width: 106px !important
}

.all-position-price-input-root-black .rival-price-common-button {
  border-bottom: 1px solid;
  border-radius: 0 3px 3px 0;
  border-top: 1px solid;
  border-color: transparent currentcolor;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin: 0;
  padding: 0 3px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 22px;
  z-index: 1
}

.all-position-price-input-root-black .rival-price-common-button.border-blue {
  z-index: 1
}

.all-position-price-input-root-black .rival-price-button {
  background-color: rgba(25, 26, 31, .2);
  border-bottom: 1px solid;
  border-radius: 0 3px 3px 0;
  border-top: 1px solid;
  border-color: transparent currentcolor;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  height: 32px;
  line-height: 30px;
  margin: 0;
  padding: 0 3px;
  position: absolute;
  right: 0;
  text-align: center;
  width: 22px;
  z-index: 1
}

.all-position-price-input-root-black .rival-price-button.border-blue {
  z-index: 1
}

.all-position-price-input-root-black .rival-price-button:hover {
  border-color: var(--dexc-white-primary-color) !important;
  color: var(--dexc-white-primary-color);
  z-index: 3
}

.all-position-price-input-root-black .icon-flash-close.price-flash-close-blue-border {
  border-color: var(--dexc-white-primary-color) !important
}

.all-position-price-input-root-black .icon-flash-close.price-flash-close-blue-border.error {
  border-color: #e04545 !important
}

.all-position-price-input-root-black .price-input-line {
  background: #3f4254;
  height: 30px;
  position: absolute;
  right: 21px;
  top: 1px;
  width: 1px;
  z-index: 2
}

.all-position-price-input-root-black .icon-flash-close:before {
  height: 12px;
  left: 5px;
  position: absolute;
  top: 1px
}

.all-position-volume-input-root {
  margin-right: 8px;
  position: relative;
  text-align: left
}

.all-position-volume-input-root .volumn-input {
  height: 32px;
  padding-left: 8px;
  width: 80px
}

.sub-all-position-operate-wrap {
  width: 52px
}

.sub-all-position-operate-wrap .close-order-button-wrap {
  display: flex;
  float: right;
  position: relative
}

.sub-all-position-operate-wrap .close-order-button-wrap .close-order-button {
  border-radius: 2px;
  font-size: 12px;
  height: 32px;
  padding: 0 14px;
  position: relative;
  white-space: nowrap
}

.sub-all-position-operate-wrap .close-order-button-wrap .close-order-button-line {
  border-left: 1px dotted;
  height: 100%;
  position: absolute;
  right: -10px;
  top: -43px;
  width: 0
}

.revoke-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.revoke-modal-wrapper.revoke-modal-wrapper-mobile .revoke-modal-content {
  transform: scale(.8)
}

.revoke-modal-wrapper .revoke-modal-content {
  background-color: #fff;
  padding: 24px;
  width: 480px
}

.revoke-modal-wrapper .revoke-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.revoke-modal-wrapper .revoke-modal-content .modal-close:after {
  content: "\D7"
}

.revoke-modal-wrapper .revoke-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.revoke-modal-wrapper .revoke-modal-content .modal-title {
  color: #263241;
  font-size: 20px;
  line-height: 30px;
  max-width: 90%;
  min-height: 48px;
  padding-bottom: 20px
}

.revoke-modal-wrapper .revoke-modal-content .modal-title .yellow-font {
  color: var(--dexc-warning-color)
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content {
  border: none;
  padding: 0
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list {
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  position: relative
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-left {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  left: 16px;
  line-height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right {
  height: 40px;
  padding: 0;
  width: 100%
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root {
  box-sizing: border-box;
  height: 40px;
  width: 100%
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box {
  height: 40px
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box .select-value {
  color: #8a8a8e;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%)
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box .select-arrow {
  display: none
}

.revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-list {
  left: -1%;
  min-width: 102%
}

.revoke-modal-wrapper .revoke-modal-content .modal-footer {
  margin-top: 20px;
  text-align: right
}

.revoke-modal-wrapper .revoke-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px
}

.revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-cancel-button {
  background-color: transparent;
  color: var(--dexc-primary-color)
}

.revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.sub-account-revoke-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.sub-account-revoke-modal-wrapper .revoke-modal-content {
  background-color: #fff;
  padding: 24px 24px 16px;
  width: 480px
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 14px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close:after {
  content: "\D7"
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-title {
  color: #263241;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 20px;
  margin-right: 30px;
  min-height: 48px
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-title .yellow-font {
  color: var(--dexc-warning-color)
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list {
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  position: relative
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-left {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  left: 16px;
  line-height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right {
  height: 40px;
  width: 100%
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root {
  box-sizing: border-box;
  height: 40px;
  width: 100%
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box {
  height: 40px
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box .select-value {
  color: #8a8a8e;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%)
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box .select-arrow {
  display: none
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-list {
  left: -1%;
  min-width: 102%
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer {
  text-align: right
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  min-width: 60px;
  padding: 0 16px
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-revoke-button {
  background-color: transparent;
  color: var(--dexc-primary-color);
  margin-right: 16px
}

.sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.swap-revoke-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.swap-revoke-modal-wrapper.revoke-modal-wrapper-mobile .revoke-modal-content {
  transform: scale(.8)
}

.swap-revoke-modal-wrapper .revoke-modal-content {
  background-color: #fff;
  padding: 24px;
  width: 480px
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-close:after {
  content: "\D7"
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-title {
  color: #263241;
  font-size: 20px;
  line-height: 30px;
  max-width: 90%;
  min-height: 48px;
  padding-bottom: 20px
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-title .yellow-font {
  color: var(--dexc-warning-color)
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content {
  border: none;
  padding: 0
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list {
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  position: relative
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-left {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  left: 16px;
  line-height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right {
  height: 40px;
  padding: 0;
  width: 100%
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root {
  box-sizing: border-box;
  height: 40px;
  width: 100%
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box {
  height: 40px
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box .select-value {
  color: #8a8a8e;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%)
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box .select-arrow {
  display: none
}

.swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-list {
  left: -1%;
  min-width: 102%
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-footer {
  margin-top: 20px;
  text-align: right
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-cancel-button {
  background-color: transparent;
  color: var(--dexc-primary-color)
}

.swap-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.swap-sub-account-revoke-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content {
  background-color: #fff;
  padding: 24px 24px 16px;
  width: 480px
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 14px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close:after {
  content: "\D7"
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-title {
  color: #263241;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 20px;
  margin-right: 30px;
  min-height: 48px
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-title .yellow-font {
  color: var(--dexc-warning-color)
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list {
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  position: relative
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-left {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  left: 16px;
  line-height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right {
  height: 40px;
  width: 100%
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root {
  box-sizing: border-box;
  height: 40px;
  width: 100%
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box {
  height: 40px
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box .select-value {
  color: #8a8a8e;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%)
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box .select-arrow {
  display: none
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-list {
  left: -1%;
  min-width: 102%
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer {
  text-align: right
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  min-width: 60px;
  padding: 0 16px
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-revoke-button {
  background-color: transparent;
  color: var(--dexc-primary-color);
  margin-right: 16px
}

.swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.linear-swap-revoke-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.linear-swap-revoke-modal-wrapper.revoke-modal-wrapper-mobile .revoke-modal-content {
  transform: scale(.8)
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content {
  background-color: #fff;
  padding: 24px;
  width: 480px
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 11px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-close:after {
  content: "\D7"
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-title {
  color: #263241;
  font-size: 20px;
  line-height: 30px;
  max-width: 90%;
  min-height: 48px;
  padding-bottom: 20px
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-title .yellow-font {
  color: var(--dexc-warning-color)
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content {
  border: none;
  padding: 0
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list {
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  position: relative
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-left {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  left: 16px;
  line-height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right {
  height: 40px;
  padding: 0;
  width: 100%
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root {
  box-sizing: border-box;
  height: 40px;
  width: 100%
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box {
  height: 40px
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box .select-value {
  color: #8a8a8e;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%)
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-value-box .select-arrow {
  display: none
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .cancel-order-modal-content .cancel-order-list .cancel-order-list-right .revoke-select-root .select-list {
  left: -1%;
  min-width: 102%
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-footer {
  margin-top: 20px;
  text-align: right
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding: 0 20px
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-cancel-button {
  background-color: transparent;
  color: var(--dexc-primary-color)
}

.linear-swap-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.linear-swap-sub-account-revoke-modal-wrapper {
  align-items: center;
  background-color: rgba(0, 0, 0, .5);
  bottom: 0;
  display: flex;
  height: 100vh;
  justify-content: center;
  left: 0;
  pointer-events: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100vw;
  z-index: 901
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content {
  background-color: #fff;
  padding: 24px 24px 16px;
  width: 480px
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 24px;
  font-style: normal;
  height: 14px;
  line-height: 14px;
  position: relative;
  text-align: center;
  width: 14px;
  z-index: 301
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close:after {
  content: "\D7"
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-close:hover {
  color: var(--dexc-dark-primary-color)
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-title {
  color: #263241;
  font-size: 20px;
  line-height: 28px;
  margin-bottom: 20px;
  margin-right: 30px;
  min-height: 48px
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-title .yellow-font {
  color: var(--dexc-warning-color)
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list {
  height: 40px;
  line-height: 40px;
  margin-bottom: 16px;
  position: relative
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-left {
  color: #000;
  font-size: 14px;
  font-weight: 500;
  left: 16px;
  line-height: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%)
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right {
  height: 40px;
  width: 100%
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root {
  box-sizing: border-box;
  height: 40px;
  width: 100%
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box {
  height: 40px
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box .select-value {
  color: #8a8a8e;
  font-size: 14px;
  line-height: 14px;
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%)
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-value-box .select-arrow {
  display: none
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .revoke-order-modal-content .revoke-order-list .revoke-order-list-right .revoke-select-root .select-list {
  left: -1%;
  min-width: 102%
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer {
  text-align: right
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer button {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  min-width: 60px;
  padding: 0 16px
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-revoke-button {
  background-color: transparent;
  color: var(--dexc-primary-color);
  margin-right: 16px
}

.linear-swap-sub-account-revoke-modal-wrapper .revoke-modal-content .modal-footer .modal-confirm-button {
  background-color: var(--dexc-primary-color);
  color: #fff
}

.stop-loss-details-alert-inner,
.stop-loss-details-alert-inner.alert-inner,
.stop-loss-details-alert-inner.alert-inner-limit {
  width: 960px
}

.stop-loss-details-alert-inner .fail-reason-wrap {
  color: #263241;
  line-height: 30px;
  padding: 20px;
  text-align: center
}

.stop-loss-details-alert-inner .alert-title {
  font-weight: 500
}

.stop-loss-details-alert-inner .scroll-style-white::-webkit-scrollbar-track {
  background: transparent
}

.stop-loss-details-alert-inner .scroll-style-white::-webkit-scrollbar {
  width: 6px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content {
  background: rgba(242, 246, 250, .2);
  border: 1px solid #cad7e0;
  border-radius: 2px;
  max-height: 408px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content.scroll-unset {
  overflow: unset
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-table {
  position: relative;
  width: 100%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title {
  display: flex;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  padding: 8px 0
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title .tooltip {
  line-height: 14px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title .text-top {
  padding: 0 3px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title span {
  display: inline-block;
  vertical-align: top
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .order-trade-detail-list-title-limit .item {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  justify-content: flex-start;
  width: 18%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .order-trade-detail-list-title-limit .item:first-child {
  padding-left: 10px;
  width: 28%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .order-trade-detail-list-title-limit .item:last-child {
  padding-right: 10px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .order-trade-detail-list-title-limit .item.right {
  justify-content: flex-end
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title .item {
  display: inline-block;
  font-size: 12px;
  width: 10.30928%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title .item:first-child {
  padding-left: 10px;
  width: 12.7%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-list-title .item:last-child {
  padding-right: 10px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box {
  color: #232a4a;
  font-size: 12px;
  max-height: 336px;
  overflow-y: auto
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list .item {
  padding: 0 3px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list .main-font {
  color: #263241
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list {
  align-items: center;
  display: flex;
  height: 40px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list:first-child {
  border-top: 1px solid #cad7e0
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list .item {
  width: 10.30928%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list .item:first-child {
  padding-left: 10px;
  width: 12.7%
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content .stop-loss-detail-alert-list-box .stop-loss-trade-detail-list .item:last-child {
  padding-right: 3px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst {
  overflow: scroll;
  padding: 20px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .stop-loss-detail-alert-list-box {
  max-height: 200000px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-explain-wrap {
  font-size: 14px;
  text-align: justify;
  width: 480px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-table-limit,
.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .stop-loss-detail-list-table {
  border: 1px solid #cad7e0
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .force-detail {
  margin-bottom: 16px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .force-order {
  margin: 15px 0
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-link-wrap {
  padding-top: 10px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-link-wrap a {
  display: inline-block;
  margin-top: 10px
}

.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .order-trade-detail-list-title-limit,
.stop-loss-details-alert-inner .stop-loss-detail-alert-inner-content-burst .stop-loss-detail-list-title {
  line-height: 14px;
  padding: 4px 0
}

.stop-loss-details-alert-inner-warn {
  align-items: center;
  background: rgba(224, 147, 0, .05);
  border: 1px solid rgba(224, 147, 0, .3);
  display: flex;
  margin-top: 16px;
  min-height: 40px;
  padding: 10px 16px
}

.stop-loss-details-alert-inner-warn>i {
  color: var(--dexc-warning-color)
}

.stop-loss-details-alert-inner-warn>p {
  color: #000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 10px
}

@media only screen and (max-width:1023px) {
  .stop-loss-details-alert-inner.alert-inner-plan {
    width: 748px
  }

  .stop-loss-details-alert-inner.alert-inner-plan .stop-loss-detail-alert-inner-content {
    overflow-x: scroll
  }
}

.guide-card-alert-modal {
  align-items: center;
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  display: flex;
  left: 0;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 901
}

.guide-card-alert-modal .guide-card-alert {
  background-color: #fff;
  border-radius: 14px;
  box-shadow: 0 0 20px rgba(28, 36, 44, .2);
  display: flex;
  flex-direction: column;
  height: 500px;
  margin: 0 auto;
  min-height: 500px;
  min-width: 880px;
  padding: 38px 40px 0;
  position: relative;
  width: 880px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-cancel {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  padding: 5px;
  position: absolute;
  right: 40px;
  top: 43px;
  z-index: 10
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-right-bg {
  height: 500px;
  position: absolute;
  right: 0;
  top: 0;
  width: 435px
}

.guide-card-alert-modal .guide-card-alert .scroll-style-white::-webkit-scrollbar {
  height: 6px;
  width: 6px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll {
  height: 30px;
  left: 40px;
  position: absolute;
  top: 38px;
  width: 650px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll .icon-arrow-go {
  background: rgba(24, 25, 30, .5)
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll .icon-arrow-go:before {
  color: #fff
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll .icon-arrow-go:hover {
  background: rgba(36, 131, 255, .5)
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll .guide-card-alert-tab {
  align-items: center;
  display: flex;
  height: 30px;
  white-space: nowrap
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll .guide-card-alert-tab .guide-card-alert-tab-item {
  color: #000;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
  margin-right: 24px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-tab-scroll .guide-card-alert-tab .guide-card-alert-tab-item-s {
  border-bottom: 2px solid var(--dexc-primary-color);
  color: #000;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  margin-right: 24px;
  padding-bottom: 2px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-one-title {
  color: #14181f;
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 39px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-card-wrap {
  overflow: hidden;
  width: 800px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-card-wrap .guide-card-alert-card-anim {
  display: flex;
  transition: transform .3s ease-in
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-card-wrap .guide-card-alert-card-anim .guide-card-alert-card {
  min-width: 800px;
  width: 800px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg {
  align-items: center;
  bottom: 24px;
  display: flex;
  position: absolute;
  right: 40px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg .guide-card-alert-pg-il {
  height: 24px;
  margin-right: 8px;
  width: 24px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg .guide-card-alert-pg-item {
  background: #fff;
  border-radius: 3px;
  cursor: pointer;
  height: 6px;
  margin: 0 4px;
  opacity: .5;
  width: 6px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg .guide-card-alert-pg-item-s {
  background: var(--dexc-primary-color);
  border-radius: 5px;
  cursor: pointer;
  height: 10px;
  margin: 0 2px;
  width: 10px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg .guide-card-alert-pg-ir {
  cursor: pointer;
  height: 24px;
  margin-left: 8px;
  width: 24px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg .guide-card-alert-pg-finish {
  background: var(--dexc-primary-color);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  line-height: 24px;
  margin-left: 10px;
  padding: 0 8px
}

.guide-card-alert-modal .guide-card-alert .guide-card-alert-pg .guide-card-alert-pg-finish:active {
  opacity: .7
}

.guide-card-alert-modal .guide-card-alert .guide-card-left-bottom-link {
  bottom: 28px;
  color: var(--up-color);
  font-size: 14px;
  left: 40px;
  line-height: 16px;
  position: absolute
}

.guide-card-wrap {
  position: relative
}

.guide-card-wrap .scroll-style-white::-webkit-scrollbar {
  height: 6px;
  width: 6px
}

.guide-card-wrap .guide-card-text-wrap {
  overflow-y: auto
}

.guide-card-wrap .guide-card-text-wrap .guide-card-title {
  align-items: flex-end;
  color: var(--dexc-primary-color);
  display: flex;
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 17px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-title .guide-card-title-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 20px;
  margin-right: 8px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-title {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 8px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-title-nomargin {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-title-next-wrap {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 8px;
  margin-left: 12px;
  position: relative
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-title-next-wrap:after {
  background: #000;
  border-radius: 2px;
  content: "";
  height: 4px;
  left: -12px;
  position: absolute;
  top: 7px;
  width: 4px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-link-style1 {
  color: var(--up-color);
  font-size: 12px;
  line-height: 18px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-desc {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 18px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-title-link {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 8px
}

.guide-card-wrap .guide-card-text-wrap .guide-card-sub-title-link a {
  color: var(--up-color)
}

.guide-card-wrap .guide-card-right-bg {
  position: absolute;
  right: 0
}

.content-scroll {
  position: relative;
  width: 100%
}

.content-scroll .content-scroll-list {
  display: flex;
  overflow: hidden
}

.content-scroll.white .scroll-left-btn,
.content-scroll.white .scroll-right-btn {
  align-items: center;
  background: #f2f6fa;
  color: #000;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 2
}

.content-scroll.white .scroll-left-btn:before,
.content-scroll.white .scroll-right-btn:before {
  align-items: center;
  display: flex;
  justify-content: center
}

.content-scroll.white .scroll-left-btn:hover,
.content-scroll.white .scroll-right-btn:hover {
  background: var(--dexc-primary-color)
}

.content-scroll.white .scroll-left-btn {
  left: 0;
  transform: rotateY(180deg);
  transform-origin: center center
}

.content-scroll.white .scroll-right-btn {
  right: 0;
  transform: rotateY(0deg);
  transform-origin: center center
}

.content-scroll.blue .scroll-left-btn,
.content-scroll.blue .scroll-right-btn {
  align-items: center;
  background: rgba(20, 24, 38, .8);
  color: #f9f9f9;
  cursor: pointer;
  display: flex;
  font-weight: 700;
  height: 100%;
  justify-content: center;
  position: absolute;
  top: 0;
  width: 20px;
  z-index: 2
}

.content-scroll.blue .scroll-left-btn:before,
.content-scroll.blue .scroll-right-btn:before {
  align-items: center;
  display: flex;
  justify-content: center
}

.content-scroll.blue .scroll-left-btn:hover,
.content-scroll.blue .scroll-right-btn:hover {
  background: var(--dexc-primary-color)
}

.content-scroll.blue .scroll-left-btn {
  left: 0;
  transform: rotateY(180deg);
  transform-origin: center center
}

.content-scroll.blue .scroll-right-btn {
  right: 0;
  transform: rotateY(0deg);
  transform-origin: center center
}

.tip-aaea918c {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 12px;
  text-align: left
}

.checkbox-ceb35208 {
  margin-top: 16px
}

.dex-dropdown-select-select-value-small {
  font-size: 12px;
  font-weight: 400;
  height: 28px;
  line-height: 28px
}

.dex-dropdown-select-select-value-mid {
  font-size: 14px;
  font-weight: 400;
  height: 36px;
  line-height: 36px
}

.dex-dropdown-select-select-value-large {
  font-size: 14px;
  font-weight: 400;
  height: 44px;
  line-height: 44px
}

.tabContentLayoutContainer-c1e166a1 {
  display: flex;
  flex-direction: column;
  height: 100%
}

.tabContentLayoutContainer-c1e166a1 .header-c00d9064 {
  background-color: var(--dexc-dark-trade-bg);
  position: sticky;
  top: 0;
  z-index: 6
}

.tabContentLayoutContainer-c1e166a1 .body-a8b02ad1 {
  flex: 1 1
}

.positionTable-f6cede7a {
  --dex-table-hover-bg: var(--dex-table-bg);
  --price-col-width: 140px;
  --amount-col-width: 120px
}

.positionTable-f6cede7a .dex-table-tbody .dex-table-row .dex-table-cell {
  padding-bottom: 20px !important;
  padding-top: 4px !important
}

.positionTable-f6cede7a .dex-table-tbody .dex-table-row .dex-table-cell:first-child {
  padding-bottom: 14px !important
}

.btnContainer-a6931cad {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-start
}

.operateColHeader-fbbcf18f {
  display: flex
}

.operateColHeader-fbbcf18f .priceTitle-b1e2e69a {
  margin-right: 9px;
  text-align: left;
  width: var(--price-col-width)
}

.operateColHeader-fbbcf18f .amountTitle-d77c2f47 {
  margin-right: 8px;
  text-align: left;
  width: var(--amount-col-width)
}

.operateColHeader-fbbcf18f .operateTitle-ccc541fd {
  flex: 1 1;
  text-align: right
}

.positionForm-b23615ad {
  align-items: center;
  display: flex
}

.positionForm-b23615ad .priceCol-a24e5608 {
  margin-right: 8px;
  padding: 1px;
  width: var(--price-col-width)
}

.positionForm-b23615ad .priceCol-a24e5608 .priceInput-fa991f7c .dex-input {
  padding: 0 0 0 12px
}

.positionForm-b23615ad .amountCol-d8acdc68 {
  margin-right: 8px;
  padding: 1px;
  width: var(--amount-col-width)
}

.lightingIcon-deb6a1e2 {
  cursor: pointer;
  margin-left: 4px;
  margin-right: -4px
}

.operateCol-eaa86c0a {
  display: flex;
  flex: 1 1;
  gap: 10px;
  justify-content: flex-end;
  padding: 1px
}

.operateCol-eaa86c0a button {
  white-space: normal
}

.operateCol-eaa86c0a button:not(:first-child) {
  max-width: 80px
}

.operateCol-eaa86c0a button:first-child {
  max-width: 100px
}

.converted-e2fcf131 {
  color: var(--dex-tertiary-font-color) !important
}

.contractNameContainer-df3d5547 {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.contractNameContainer-df3d5547 .contractName-d8eee09c {
  color: var(--dex-primary-font-color);
  cursor: pointer;
  font-size: 12px;
  line-height: 16px
}

.contractNameContainer-df3d5547 .contractName-d8eee09c:hover {
  color: var(--dex-primary-color)
}

.contractNameContainer-df3d5547 .contractName-d8eee09c.contractNamePortfolio-d99eee0c {
  cursor: auto
}

.contractNameContainer-df3d5547 .contractName-d8eee09c.contractNamePortfolio-d99eee0c:hover {
  color: inherit
}

.contractNameContainer-df3d5547 .adl-db789792 {
  margin-left: 4px
}

.contractNameContainer-df3d5547 .editIcon-f7a3fca1 {
  cursor: pointer;
  margin-left: 8px
}

.contractNameContainer-df3d5547 .editIcon-f7a3fca1 :hover {
  color: var(--dex-primary-color)
}

.tags-fcd45197 {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  margin-top: 2px
}

.tag-a1660a66 {
  background-color: var(--dex-component-background-color);
  border-radius: 2px;
  color: var(--dex-secondary-font-color);
  font-size: 12px;
  line-height: 14px;
  padding: 2px 4px
}

.adlContainer-d7be5024 {
  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: flex-start
}

.adlContainer-d7be5024 .adl-db789792 {
  background-color: var(--dex-quaternary-font-color);
  border-radius: 5px;
  height: 10px;
  position: relative;
  width: 2px
}

.adlContainer-d7be5024 .adl-db789792:after {
  background-color: var(--dex-quaternary-font-color);
  bottom: -2px;
  content: "";
  height: 1px;
  position: absolute;
  visibility: visible;
  width: 2px
}

.adlContainer-d7be5024 .adl-db789792.adlActive-a55e5e5e,
.adlContainer-d7be5024 .adl-db789792.adlActive-a55e5e5e:after {
  background-color: var(--dex-primary-color)
}

.contractNameHeader-fa35d68e {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.contractNameHeader-fa35d68e .editIcon-f7a3fca1 {
  color: var(--dex-secondary-font-color) !important;
  cursor: pointer;
  margin-left: 4px
}

.contractNameHeader-fa35d68e .editIcon-f7a3fca1:hover {
  color: var(--dexc-primary-font-color) !important
}

.plusIcon-a7c938eb {
  cursor: pointer
}

.plusIcon-a7c938eb:hover {
  color: var(--dex-primary-color)
}

.divider-ce2c0d6d {
  border: none;
  border-right: 1px solid var(--dex-trade-component-background-color);
  height: 24px;
  margin: 0;
  padding: 0;
  width: 0
}

.description-fcf7a35e {
  margin-bottom: 26px
}

.description-fcf7a35e .dex-description-list-item {
  padding-left: 0;
  padding-right: 0
}

.description-fcf7a35e .dex-description-label {
  color: var(--secondary-font-color);
  font-size: 14px;
  line-height: 20px
}

.description-fcf7a35e .dex-description-value {
  color: var(--primary-font-color);
  font-size: 14px;
  line-height: 20px
}

.header-c0cdb53d {
  color: var(--dex-primary-font-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  margin: 0;
  padding: 24px;
  word-wrap: break-word
}

.sliderContainer-b51b4b63 {
  padding: 4px 0 20px 10px
}

.alertContainer-bdcb21ca {
  padding: 16px 0
}

.alertContainer-bdcb21ca .dex-alert-message,
.alertContainer-bdcb21ca .dex-alert-title,
.alertContainer-bdcb21ca .dex-info-icon {
  color: var(--dexc-secondary-font-color) !important
}

.linkContainer-eed4d3d9 {
  gap: 2px;
  justify-content: flex-start;
  padding: 8px 0 0
}

.dex-subnum-tooltip,
.linkContainer-eed4d3d9 {
  align-items: center;
  display: flex
}

.dex-subnum-tooltip .dex-copy-icon {
  margin-left: 6px
}

.dex-subnum-box {
  cursor: pointer
}

.dex-subnum-tooltip-box .dex-tooltip-inner {
  background: #262b33;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
  color: var(--dexc-dark-primary-font-color);
  padding: 8px
}

.dex-subnum-tooltip-box .dex-tooltip-arrow {
  border-top-color: #262b33
}

.dex-contract-box {
  background: var(--dexc-dark-primary-container-bg);
  border-radius: var(--dex-border-radius-large);
  overflow: hidden;
  width: 320px
}

.dex-contract-box ::-webkit-scrollbar {
  display: none
}

.dex-contract-box .dex-tabs {
  margin-bottom: 8px
}

.dex-contract-box .dex-tabs .dex-tabs-nav {
  padding-left: 16px
}

.dex-contract-box .dex-tabs .dex-tabs-tab {
  font-size: 14px;
  font-weight: 500
}

.dex-contract-box .dex-contract-box-tab {
  font-size: 14px
}

.dex-contract-box .dex-contract-box-tab-second-box {
  border-bottom: 1px solid var(--dex-common-border-color);
  margin: 0 16px;
  overflow: auto;
  position: relative
}

.dex-contract-box .dex-contract-box-tab-second-box .dex-radio-group {
  display: inline-block;
  overflow: auto;
  white-space: nowrap
}

.dex-contract-box .dex-contract-box-tab-second-box .dex-radio-group .dex-button {
  min-width: auto
}

.dex-contract-box .dex-contract-box-tab-second-box .dex-radio-group .dex-button:hover {
  background-color: transparent;
  color: var(--dex-primary-font-color)
}

.dex-contract-box .dex-contract-box-tab-second-box .dex-radio-group .dex-radio-group-item {
  color: var(--dex-secondary-font-color);
  display: inline-block;
  font-size: var(--dex-secondary-font-size);
  font-weight: 500;
  margin-right: 16px;
  padding: 8px 0
}

.dex-contract-box .dex-contract-box-tab-second-box .dex-radio-group .dex-radio-group-item:last-child {
  margin-right: 0
}

.dex-contract-box .dex-contract-box-tab-second-box .dex-radio-group .dex-radio-group-item-active {
  color: var(--dex-primary-font-color)
}

.dex-contract-box .dex-contract-box-tab-third-box {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px
}

.dex-contract-box .dex-contract-box-tab-third-box .dex-radio-group-item {
  border-radius: 4px;
  margin-right: 4px;
  padding: 4px 8px
}

.dex-contract-box .dex-contract-box-tab-third-box .dex-radio-group-item-active {
  background-color: var(--dexc-trade-component-bg-color)
}

.dex-contract-box .dex-contract-box-input-box {
  display: flex;
  margin-top: 8px;
  padding: 0 16px
}

.dex-contract-box .dex-contract-box-input-box .dex-button-default:not(:disabled):active {
  background: none
}

.dex-contract-box .dex-contract-box-input-box .dex-radio-group {
  background-color: var(--dex-component-background-color);
  border-radius: var(--dex-border-radius-mid);
  margin-right: 8px;
  padding-left: 2px
}

.dex-contract-box .dex-contract-box-input-box .dex-radio-group .dex-button {
  line-height: 1;
  min-width: auto
}

.dex-contract-box .dex-contract-box-input-box .dex-radio-group .dex-button:hover {
  color: var(--dex-primary-font-color)
}

.dex-contract-box .dex-contract-box-input-box .dex-radio-group .dex-radio-group-item {
  border-radius: var(--dex-border-radius-mid);
  color: var(--dex-secondary-font-color);
  font-size: var(--dex-secondary-font-size);
  margin-right: 2px;
  padding: 6px 8px
}

.dex-contract-box .dex-contract-box-input-box .dex-radio-group .dex-radio-group-item-active {
  background-color: var(--dex-primary-container-bg);
  color: var(--dex-primary-font-color)
}

.dex-contract-box .dex-contract-box-input-box .dex-contract-box-input {
  height: 28px
}

.dex-contract-box .dex-contract-box-input-box .dex-contract-box-input .dex-input-prefix {
  padding: 9px 0 5px 10px
}

.dex-contract-box .dex-contract-box-input-box .dex-contract-box-input .dex-input {
  font-size: var(--dex-secondary-font-size);
  padding-left: 0;
  text-align: left
}

.dex-contract-box .dex-contract-box-input-box .dex-contract-box-input input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  background: url(images/image_638d9b1ab71495bd85478d2ebb62d5c611f224b3.png) 0 0 no-repeat;
  background-size: contain;
  cursor: pointer;
  height: 16px;
  width: 16px
}

.dex-contract-box .dex-contract-box-input-box .dex-contract-box-converted {
  align-items: center;
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  display: flex;
  font-size: var(--dex-secondary-font-size);
  margin-left: 10px
}

.dex-contract-box .dex-contract-box-input-box .dex-contract-box-converted .dex-contract-box-converted-label {
  margin-left: 10px
}

.dex-contract-box .dex-contract-box-contract-list {
  display: flex;
  flex-direction: column;
  padding-top: 16px
}

.dex-contract-box .dex-contract-box-contract-list-head {
  align-items: center;
  color: var(--dex-secondary-font-color);
  display: flex;
  font-size: var(--dex-secondary-font-size);
  line-height: 1;
  margin-bottom: 8px;
  padding: 0 16px
}

.dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col {
  cursor: pointer
}

.dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort {
  align-items: center;
  display: flex;
  margin-left: 2px
}

.dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-defalut {
  background: url(images/image_e27ea40807b41dce9afae18654b939969f22b806.png) 0 0 no-repeat;
  background-size: cover;
  height: 12px;
  width: 12px
}

.dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-ase,
.dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-desc {
  background: url(images/image_ea007ce3e5c520d1e6ebd8ce30dcaa314160e289.png) 0 0 no-repeat;
  background-size: cover
}

.dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-desc {
  transform: rotate(180deg)
}

.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-body-col,
.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-head-col {
  align-items: center;
  display: flex
}

.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-body-col:first-child,
.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-head-col:first-child {
  flex: 1 1
}

.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-body-col:nth-child(2),
.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-head-col:nth-child(2) {
  justify-content: flex-end;
  text-align: right
}

.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-body-col:last-child,
.dex-contract-box .dex-contract-box-contract-list .dex-contract-box-contract-head-col:last-child {
  flex: none;
  justify-content: flex-end;
  text-align: right;
  width: 60px
}

.dex-contract-box .dex-contract-box-contract-list-body {
  flex: 1 1;
  overflow: auto
}

.dex-contract-box .dex-contract-box-contract-list-body::-webkit-scrollbar {
  height: var(--dex-scrollbar-width);
  width: var(--dex-scrollbar-width)
}

.dex-contract-box .dex-contract-box-contract-list-body::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: var(--dex-scrollbar-redius)
}

.dex-contract-box .dex-contract-box-contract-list-body::-webkit-scrollbar-track {
  background-color: var(--dex-scrollbar-track-bg)
}

.dex-contract-box .dex-contract-box-contract-list-body::-webkit-scrollbar-corner {
  background-color: var(--dex-scrollbar-corner-bg)
}

.dex-contract-box .dex-contract-box-contract-list-body .dex-contract-box-contract-body-col .dex-contract-box-contract-body-label-icon {
  display: flex
}

.dex-contract-box .dex-contract-box-contract-list-body .dex-contract-box-contract-body-col .dex-contract-box-contract-body-label-icon .dex-token-symbol {
  border: none;
  margin-right: 4px
}

.dex-contract-box .dex-contract-box-contract-list-body .dex-contract-box-contract-body-col-sell {
  color: var(--dex-sell-color)
}

.dex-contract-box .dex-contract-box-contract-list-body .dex-contract-box-contract-body-col-buy {
  color: var(--dex-buy-color)
}

.dex-contract-box .dex-contract-box-contract-list-body-item {
  align-items: center;
  align-items: flex-start;
  color: var(--dex-primary-font-color);
  cursor: pointer;
  display: flex;
  font-size: var(--dex-secondary-font-size);
  padding: 6px 16px
}

.dex-contract-box .dex-contract-box-contract-list-body-item-current,
.dex-contract-box .dex-contract-box-contract-list-body-item:hover {
  background: var(--dex-contract-list-hover-background)
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-contract-box-contract-label {
  line-height: 16px;
  margin-right: 4px
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-contract-box-contract-label-top {
  display: flex
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-contract-box-contract-label-bottom {
  color: var(--dexc-secondary-font-color);
  margin-top: 2px
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-collect-icon {
  margin-right: 4px
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-hot-icon {
  margin-left: 4px
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-contract-box-new-icon {
  background-color: var(--dex-contract-list-new-icon-bg);
  border-radius: var(--dex-border-radius-small);
  color: var(--dex-error-color);
  line-height: 16px;
  margin-left: 4px;
  padding: 0 4px
}

.dex-contract-box .dex-contract-box-contract-list-body-item .dex-contract-box-cross-icon {
  background-color: var(--dex-trade-divider-color);
  border-radius: var(--dex-border-radius-xs);
  color: var(--dex-secondary-font-color);
  line-height: 16px;
  margin-left: 4px;
  padding: 0 4px
}

html[data-dex-theme=dark] .dex-contract-box .dex-contract-box-contract-list-body-no-data .no-data-bg {
  background: url(images/image_e0018cb45370d56fe9471d8a8a766c0c8baaeaca.png) 0 0 no-repeat;
  background-size: cover
}

html[data-dex-theme=dark] .dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-defalut {
  background: url(images/image_6074a5e19240bd98f101ab99a13daa152c103635.png) 0 0 no-repeat;
  background-size: cover
}

html[data-dex-theme=dark] .dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-ase,
html[data-dex-theme=dark] .dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-desc {
  background: url(images/image_93a9625b87238d18b8ac382840f097719fe6a5c5.png) 0 0 no-repeat;
  background-size: cover
}

html[data-dex-theme=dark] .dex-contract-box .dex-contract-box-contract-list-head .dex-contract-box-contract-head-col-sort .sort-desc {
  transform: rotate(180deg)
}

.dex-sub-header {
  background-color: var(--dexc-dark-trade-bg);
  border-radius: var(--dex-border-radius-mid)
}

.dex-sub-header .dex-sub-header-box {
  border-radius: var(--dex-border-radius-mid);
  display: flex;
  height: 58px;
  justify-content: space-between
}

.dex-sub-header .dex-sub-header-box .dex-sub-header-left {
  display: flex;
  width: 100%
}

.dex-sub-header .dex-sub-header-sum-list-box {
  align-items: center;
  display: flex;
  flex: 1 1;
  overflow: auto
}

.dex-sub-header .dex-sub-header-sum-list-box::-webkit-scrollbar {
  height: var(--dex-scrollbar-width);
  width: var(--dex-scrollbar-width)
}

.dex-sub-header .dex-sub-header-sum-list-box::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: var(--dex-scrollbar-redius)
}

.dex-sub-header .dex-sub-header-sum-list-box::-webkit-scrollbar-track {
  background-color: var(--dex-scrollbar-track-bg)
}

.dex-sub-header .dex-sub-header-sum-list-box::-webkit-scrollbar-corner {
  background-color: var(--dex-scrollbar-corner-bg)
}

.dex-sub-header .dex-sub-header-sum-list {
  align-items: center;
  color: var(--dexc-dark-secondary-font-color);
  display: flex;
  flex: 1 1;
  font-size: var(--dex-secondary-font-size)
}

.dex-sub-header .dex-sub-header-sum-list .dex-sub-header-sum-item {
  display: flex;
  flex: none;
  flex-direction: column;
  margin-right: 16px
}

.dex-sub-header .dex-sub-header-sum-list .dex-sub-header-sum-item-tip-txt {
  border-bottom: 1px dashed var(--dexc-tertiary-font-color);
  cursor: pointer;
  display: inline-block
}

.dex-sub-header .dex-sub-header-sum-list .dex-sub-header-sum-item-value {
  color: var(--dex-primary-font-color)
}

.dex-sub-header .dex-sub-header-sum-list .dex-sub-header-sum-item-value-color {
  color: var(--dex-buy-color)
}

.dex-sub-header .dex-sub-header-sum-list .dex-sub-header-sum-item-value-sell {
  color: var(--dex-sell-color)
}

.dex-sub-header .dex-sub-header-contract-box {
  align-items: center;
  display: flex;
  flex: none;
  position: relative
}

.dex-sub-header .dex-sub-header-contract-box .dex-dropdown-trigger {
  cursor: pointer;
  height: 100%
}

.dex-sub-header .dex-sub-header-contract-box .dex-dropdown-trigger:hover .dex-sub-header-contract-label .dex-icon,
.dex-sub-header .dex-sub-header-contract-box .dex-dropdown-trigger:hover .dex-sub-header-contract-label .dex-icon-next {
  transition: transform .2s
}

.dex-sub-header .dex-sub-header-contract-box .dex-dropdown-trigger.dex-dropdown-open .dex-sub-header-contract-label .dex-icon,
.dex-sub-header .dex-sub-header-contract-box .dex-dropdown-trigger.dex-dropdown-open .dex-sub-header-contract-label .dex-icon-next {
  transform: rotate(180deg)
}

.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract {
  margin-right: 24px;
  padding-left: 16px
}

.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-label {
  align-items: center;
  color: var(--dex-primary-font-color);
  display: flex;
  font-size: 20px;
  line-height: 1
}

.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-label-name {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  margin: 0;
  padding: 0
}

.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-label .dex-icon,
.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-label .dex-icon-next {
  margin-left: 4px;
  margin-top: 3px
}

.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-tip {
  color: var(--dex-secondary-font-color);
  font-size: var(--dex-secondary-font-size)
}

.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-label .dex-icon,
.dex-sub-header .dex-sub-header-contract-box .dex-sub-header-contract-label .dex-icon-next {
  transition: transform .2s
}

.dex-sub-header .dex-sub-header-contract-price {
  margin-right: 16px
}

.dex-sub-header .dex-sub-header-contract-price-new {
  color: var(--dex-buy-color);
  font-size: 20px;
  line-height: 1
}

.dex-sub-header .dex-sub-header-contract-price-new-sell {
  color: var(--dex-sell-color)
}

.dex-sub-header .dex-sub-header-contract-price-tip {
  color: var(--dex-secondary-font-color);
  font-size: var(--dex-secondary-font-size)
}

.dex-dropdown .dex-contract-box {
  box-shadow: 0 4px 8px rgba(54, 47, 47, .2);
  width: 100%;
  z-index: 10
}

.dex-switch {
  background-color: var(--dex-quaternary-font-color);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: inline-block;
  height: var(--switch-height);
  line-height: 20px;
  overflow: hidden;
  padding: 0;
  position: relative;
  transition: all .2s cubic-bezier(.35, 0, .25, 1);
  vertical-align: middle;
  width: var(--switch-width)
}

.dex-switch-inner-checked,
.dex-switch-inner-unchecked {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 12px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left .2s cubic-bezier(.35, 0, .25, 1), right .2s cubic-bezier(.35, 0, .25, 1)
}

.dex-switch-inner-checked {
  right: 100%
}

.dex-switch-inner-unchecked {
  left: calc(50% + 2px)
}

.dex-switch:after {
  background-color: var(--dex-switch-handler-bg);
  border-radius: 50% 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
  content: " ";
  cursor: pointer;
  height: var(--switch-circle-size);
  position: absolute;
  top: calc((var(--switch-height) - var(--switch-circle-size))/2);
  transition: left .2s cubic-bezier(.35, 0, .25, 1);
  width: var(--switch-circle-size)
}

.dex-switch:focus {
  outline: none
}

.dex-switch-checked {
  background-color: var(--dex-switch-on-bg, var(--dex-primary-color))
}

.dex-switch-checked .dex-switch-inner-checked {
  right: calc(50% + 2px)
}

.dex-switch-checked .dex-switch-inner-unchecked {
  left: 100%
}

.dex-switch-disabled {
  background: #ccc;
  cursor: no-drop
}

.dex-switch-disabled:after {
  background: #9e9e9e;
  cursor: no-drop
}

.dex-switch-label {
  display: inline-block;
  font-size: 14px;
  line-height: 20px;
  padding-left: 10px;
  pointer-events: none;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  vertical-align: middle;
  white-space: normal
}

.dex-switch-small {
  --switch-width: 20px;
  --switch-height: 12px;
  --switch-circle-size: 8px
}

.dex-switch-small:after {
  left: 2px
}

.dex-switch-small.dex-switch-checked:after {
  left: 14px
}

.dex-switch-mid {
  --switch-width: 28px;
  --switch-height: 16px;
  --switch-circle-size: 12px
}

.dex-switch-mid:after {
  left: 2px
}

.dex-switch-mid.dex-switch-checked:after {
  left: 15px
}

.dex-switch-large {
  --switch-width: 38px;
  --switch-height: 20px;
  --switch-circle-size: 14px
}

.dex-switch-large:after {
  left: 3px
}

.dex-switch-large.dex-switch-checked:after {
  left: 21px
}

.dex-kline-container {
  background-color: var(--dex-mc-kline-header-background);
  border-radius: 4px;
  height: 100%;
  min-width: 300px;
  overflow: hidden;
  position: relative
}

.dex-kline-container .dex-kline-header {
  min-width: unset
}

.dex-kline-container .dex-modal-root {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.dex-kline-container .dex-modal-root .dex-modal-mask,
.dex-kline-container .dex-modal-root .dex-modal-wrap {
  position: absolute
}

html[data-dex-theme=dark] .dex-kline-container .dex-mc-kline-chart,
html[data-dex-theme=dark] .dex-kline-container .dex_chart_container {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark.1ab2a88d.svg*/
    url() 50% no-repeat
}

html[data-dex-theme=dark][lang^=zh] .dex-kline-container .dex-mc-kline-chart,
html[data-dex-theme=dark][lang^=zh] .dex-kline-container .dex_chart_container {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-cn.593ab0d4.svg*/
    url() 50% no-repeat
}

html[data-dex-theme=light] .dex-kline-container .dex-mc-kline-chart,
html[data-dex-theme=light] .dex-kline-container .dex_chart_container,
html[data-dex-theme=white] .dex-kline-container .dex-mc-kline-chart,
html[data-dex-theme=white] .dex-kline-container .dex_chart_container {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white.7141dee9.svg*/
    url() 50% no-repeat
}

html[data-dex-theme=light] .dex-kline-container[lang^=zh] .dex-mc-kline-chart,
html[data-dex-theme=light] .dex-kline-container[lang^=zh] .dex_chart_container,
html[data-dex-theme=white] .dex-kline-container[lang^=zh] .dex-mc-kline-chart,
html[data-dex-theme=white] .dex-kline-container[lang^=zh] .dex_chart_container {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white-cn.593ab0d4.svg*/
    url() 50% no-repeat
}

.dex-mc-pro-kline {
  background-color: var(--dex-mc-kline-header-background);
  height: 631px;
  width: 100%
}

.dex-mc-pro-kline-fullscreen {
  height: calc(100% - 28px);
  width: 100%
}

.dex-mc-orderbook-price {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 8px 16px
}

.dex-mc-orderbook-price-container {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 8px
}

.dex-mc-orderbook-price-price-up {
  color: var(--dex-buy-color);
  font-size: 20px;
  font-weight: 500;
  line-height: 20px
}

.dex-mc-orderbook-price-price-down {
  color: var(--dex-sell-color) !important
}

.dex-mc-orderbook-price-tender {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 4px
}

html[data-dex-theme=light],
html[data-dex-theme=white] {
  --dex-mc-orderbook-action-icon-selected-bg: #f5f5f5;
  --dex-mc-orderbook-action-icon-horizontal-line: #adadb4;
  --dex-mc-orderbook-action-icon-selected-horizontal-line: #565656
}

html[data-dex-theme=dark] {
  --dex-mc-orderbook-action-icon-selected-bg: #1d1d1d;
  --dex-mc-orderbook-action-icon-horizontal-line: #343434;
  --dex-mc-orderbook-action-icon-selected-horizontal-line: #8a8a8e
}

.dex-mc-orderbook-action-bar {
  align-items: center;
  display: flex;
  height: 40px;
  justify-content: space-between;
  padding: 16px 16px 4px
}

.dex-mc-orderbook-action-bar-display-mode {
  margin-right: 8px
}

.dex-mc-orderbook-action-bar-icon-button {
  cursor: pointer;
  height: 20px;
  width: 20px
}

.dex-mc-orderbook-action-bar-icon-button:not(:first-child) {
  margin-left: 8px
}

.dex-mc-orderbook-action-bar-icon-button-selected {
  background-color: var(--dex-component-background-color)
}

.dex-mc-orderbook-action-bar .dex-select {
  min-width: unset
}

.dex-mc-orderbook-action-bar .dex-select .dex-select-selector {
  font-size: 12px;
  line-height: 16px;
  min-height: auto;
  padding: 2px 24px 2px 8px
}

.dex-mc-orderbook-action-bar .dex-select .dex-select-arrow {
  right: 6px
}

.dex-mc-orderbook-price-list {
  display: flex;
  flex: 1 1;
  flex-direction: column
}

.dex-mc-orderbook-price-list-header {
  color: var(--dexc-dark-secondary-font-color);
  display: flex;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  padding: 8px 16px
}

.dex-mc-orderbook-price-list-header span {
  flex: 1 1;
  text-align: right;
  white-space: nowrap
}

.dex-mc-orderbook-price-list-header-price {
  flex: 0.8 1 !important;
  text-align: left !important
}

.dex-mc-orderbook-price-list-header-total {
  flex: 0.8 1 !important
}

.dex-mc-orderbook-price-list-line-container {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  justify-content: space-between
}

.dex-mc-orderbook-price-list-line {
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 0 0;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 400;
  height: 22px;
  line-height: 16px;
  padding: 3px 16px;
  position: relative;
  transition: margin .3s;
  white-space: nowrap
}

.dex-mc-orderbook-price-list-line:hover {
  background-color: var(--dex-mc-orderbook-price-label-hover-background-color)
}

.dex-mc-orderbook-price-list-line-amount,
.dex-mc-orderbook-price-list-line-total {
  color: var(--dex-primary-font-color);
  flex: 1 1;
  text-align: right
}

.dex-mc-orderbook-price-list-line-price {
  flex: 0.8 1 !important;
  text-align: left !important
}

.dex-mc-orderbook-price-list-line-price-ask {
  color: var(--dex-sell-color) !important
}

.dex-mc-orderbook-price-list-line-price-bid {
  color: var(--dex-buy-color) !important
}

.dex-mc-orderbook-price-list-line-total {
  flex: 0.8 1 !important
}

.dex-mc-orderbook-price-list-line-background {
  height: 22px;
  left: 100%;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: transform .3s;
  width: 100%
}

.dex-mc-orderbook-price-list-line-background-ask {
  background-color: var(--dex-mc-sell-color-fade10)
}

.dex-mc-orderbook-price-list-line-background-bid {
  background-color: var(--dex-mc-buy-color-fade10)
}

.dex-mc-orderbook-price-list-price-wrapper {
  font-size: 18px;
  font-weight: 500;
  height: 52px;
  line-height: 18px;
  padding: 8px 16px
}

.dex-mc-orderbook-price-list-price-wrapper-realtime-label {
  color: var(--dex-tertiary-font-color);
  font-size: 12px
}

.dex-mc-orderbook-price-list-price-wrapper-realtime-container {
  align-items: center;
  display: flex
}

.dex-mc-orderbook-price-list-price-wrapper-up {
  color: var(--dex-buy-color)
}

.dex-mc-orderbook-price-list-price-wrapper-down {
  color: var(--dex-sell-color) !important
}

.dex-mc-orderbook-price-list-price-wrapper-tender {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  margin-left: 4px
}

.dex-mc-orderbook {
  background-color: var(--dexc-dark-trade-bg);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 210px;
  overflow: hidden;
  width: 100%
}

.dex-mc-orderbook-header {
  border-bottom: 1px solid var(--dexc-dark-common-border-color);
  box-sizing: border-box;
  color: var(--dex-primary-font-color);
  font-size: 16px;
  font-weight: 500;
  height: 40px;
  line-height: 22px;
  padding: 9px 16px
}

.dex-mc-rt {
  --header-height: 40px;
  background-color: var(--dexc-dark-trade-bg);
  height: 100%;
  overflow: auto
}

.dex-mc-rt.dex-mc-rt-hide-header .dex-mc-rt-title {
  top: 0
}

.dex-mc-rt-header {
  border-bottom: 1px solid var(--dexc-dark-common-border-color);
  color: var(--dexc-primary-font-color);
  font-size: 12px;
  font-weight: 400;
  height: var(--header-height);
  line-height: normal;
  padding: 9px 16px;
  top: 0
}

.dex-mc-rt-header,
.dex-mc-rt-title {
  background-color: inherit;
  position: sticky;
  z-index: 1
}

.dex-mc-rt-title {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  top: var(--header-height)
}

.dex-mc-rt-title>span {
  color: var(--dexc-dark-secondary-font-color);
  flex: 1 1;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  text-align: right
}

.dex-mc-rt-title>span:first-child {
  text-align: left
}

.dex-mc-rt-row {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 3px 16px
}

.dex-mc-rt-row>span {
  color: var(--dexc-primary-font-color);
  flex: 1 1;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-align: right
}

.dex-mc-rt-row>span:first-child {
  text-align: left
}

.dex-mc-rt-empty {
  align-items: center;
  display: flex;
  height: calc(100% - var(--header-height));
  justify-content: center;
  width: 100%
}

.kLine-d725a409 {
  flex: 1 1;
  height: 100%;
  position: relative;
  width: 100%
}

.depthContrainer-cf158c42 {
  height: calc(100% - 28px)
}

.depthContrainer-cf158c42 #depthChartRoot {
  background-color: transparent;
  height: 100%
}

.dex-slider-with-counter-wrapper .dex-slider-counter {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 40px
}

.dex-slider-with-counter-wrapper .dex-slider-counter-add,
.dex-slider-with-counter-wrapper .dex-slider-counter-subtract {
  align-items: center;
  background-color: var(--dexc-trade-component-bg-color);
  border-radius: var(--dex-border-radius-mid);
  color: var(--dexc-secondary-font-color);
  cursor: pointer;
  display: flex;
  height: 24px;
  justify-content: center;
  width: 24px
}

.dex-slider-with-counter-wrapper .dex-slider-counter-input {
  display: flex;
  margin: 0 4px;
  width: 80px
}

.dex-slider-with-counter-wrapper .dex-slider-counter-input .dex-input {
  background: none;
  border: none;
  color: var(--dex-primary-font-color);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  outline: none;
  padding: 0;
  text-align: center
}

.dex-slider-with-counter-wrapper .dex-slider-counter-input .dex-input-affix-wrapper {
  background: var(--dex-primary-container-bg);
  border: none;
  justify-content: center
}

.dex-slider-with-counter-wrapper .dex-slider-counter-input .dex-input-affix-wrapper .dex-input-suffix {
  color: var(--dex-primary-font-color);
  padding: 0;
  text-align: left
}

.dex-slider-wrapper {
  cursor: pointer;
  padding-left: calc(var(--dex-slider-handle-size)/2);
  padding-right: calc(var(--dex-slider-handle-size)/2)
}

.dex-slider {
  box-sizing: border-box;
  cursor: pointer;
  padding-bottom: 0;
  padding-top: 0;
  position: relative
}

.dex-slider,
.dex-slider-rail {
  height: var(--dex-slider-trail-height);
  width: 100%
}

.dex-slider-rail {
  background-color: var(--dexc-base-border-color);
  position: absolute
}

.dex-slider-track {
  background-color: var(--dexc-primary-font-color);
  box-sizing: border-box;
  height: var(--dex-slider-trail-height);
  position: absolute;
  width: 100%
}

.dex-slider-step {
  height: 100%;
  position: absolute;
  width: 100%
}

.dex-slider-step .dex-slider-dot {
  background-color: var(--dexc-base-border-color);
  border: 2px solid var(--dexc-trade-secondary-container-bg);
  border-radius: 100%;
  height: var(--dex-slider-dot-size);
  position: absolute;
  top: calc(var(--dex-slider-dot-size)/-2 + var(--dex-slider-trail-height)/2);
  width: var(--dex-slider-dot-size)
}

.dex-slider-step .dex-slider-dot:hover {
  height: var(--dex-slider-handle-size);
  top: calc(var(--dex-slider-handle-size)/-2 + var(--dex-slider-trail-height)/2);
  width: var(--dex-slider-handle-size)
}

.dex-slider-step .dex-slider-dot-active {
  background-color: var(--dexc-primary-font-color);
  border-color: var(--dexc-pure-black-color)
}

.dex-slider-handle {
  background-color: var(--dexc-primary-font-color);
  border-radius: 100%;
  height: var(--dex-slider-handle-size);
  outline: none;
  position: absolute;
  top: calc(var(--dex-slider-handle-size)/-2 + var(--dex-slider-trail-height)/2);
  transition: box-shadow .2s;
  width: var(--dex-slider-handle-size)
}

.dex-slider-handle:after {
  background-color: var(--dex-primary-container-bg);
  border-radius: 100%;
  content: "";
  height: calc(var(--dex-slider-handle-size) - 4px);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--dex-slider-handle-size) - 4px)
}

.dex-slider-handle:hover {
  transition: box-shadow .2s
}

.dex-slider-mark {
  position: absolute;
  top: 10px;
  width: 100%
}

.dex-slider-mark-text {
  color: var(--dex-tertiary-font-color);
  font-size: var(--dex-secondary-font-size);
  position: absolute
}

.dex-slider-mark-text:first-child {
  transform: translateX(calc(var(--dex-slider-dot-size)/-2)) !important
}

.dex-slider-mark-text:last-child {
  left: unset !important;
  right: 0 !important;
  transform: translateX(calc(var(--dex-slider-dot-size)/2/2)) !important
}

.dex-slider-disabled {
  cursor: not-allowed
}

.dex-slider-disabled .dex-slider-step .dex-slider-dot {
  background-color: var(--dex-input-disabled-bg);
  pointer-events: none
}

.dex-slider-disabled .dex-slider-handle,
.dex-slider-disabled .dex-slider-rail,
.dex-slider-disabled .dex-slider-track {
  background-color: var(--dex-input-disabled-bg)
}

.dex-slider-disabled .dex-slider-handle {
  pointer-events: none
}

.dex-slider-tooltip .dex-tooltip-inner {
  background-color: var(--dex-primary-color);
  border-radius: var(--dex-border-radius-small);
  color: #fff;
  min-height: unset;
  min-width: unset;
  padding: 2px 5px;
  position: relative
}

.dex-slider-tooltip .dex-tooltip-inner:after {
  background-color: var(--dex-primary-color);
  border-radius: 4px 0 0 0;
  bottom: -2px;
  content: "";
  height: 6px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 6px
}

@font-face {
  font-family: dm-icon;
  font-style: normal;
  font-weight: 400;
  src:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/dm-icon.6887a016.eot*/
    url();
  src:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/dm-icon.6887a016.eot?61f1c21c#iefix*/
    url() format("embedded-opentype"),
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/dm-icon.cdd2b7ef.woff2?61f1c21c*/
    url() format("woff2"),
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/dm-icon.6a66a527.woff?61f1c21c*/
    url() format("woff"),
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/dm-icon.19ceced3.ttf?61f1c21c*/
    url() format("truetype"),
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/dm-icon.4f9f8827.svg?61f1c21c#dm-icon*/
    url() format("svg")
}

[class*=" icon"],
[class^=icon] {
  font-family: dm-icon !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal
}

.icon-analysis:before {
  content: "\ea01"
}

.icon-arrow-expansion:before {
  content: "\ea02"
}

.icon-arrow-go:before {
  content: "\ea03"
}

.icon-arrow-right:before {
  content: "\ea04"
}

.icon-arrow-trade:before {
  content: "\ea05"
}

.icon-arrow:before {
  content: "\ea06"
}

.icon-assets-menu-close:before {
  content: "\ea07"
}

.icon-assets-menu-open:before {
  content: "\ea08"
}

.icon-auditing:before {
  content: "\ea09"
}

.icon-back:before {
  content: "\ea0a"
}

.icon-blue-theme:before {
  content: "\ea0b"
}

.icon-calculator-choose:before {
  content: "\ea0c"
}

.icon-carousel-arrow:before {
  content: "\ea0d"
}

.icon-chart-screen:before {
  content: "\ea0e"
}

.icon-chart-setting:before {
  content: "\ea0f"
}

.icon-chart-study:before {
  content: "\ea10"
}

.icon-checked-disabled:before {
  content: "\ea11"
}

.icon-checked:before {
  content: "\ea12"
}

.icon-clear:before {
  content: "\ea13"
}

.icon-coingecko:before {
  content: "\ea14"
}

.icon-copy-text:before {
  content: "\ea15"
}

.icon-cross-cn:before {
  content: "\ea16"
}

.icon-cross-en:before {
  content: "\ea17"
}

.icon-cryptorank:before {
  content: "\ea18"
}

.icon-cutdown-close:before {
  content: "\ea19"
}

.icon-data-icon:before {
  content: "\ea1a"
}

.icon-delet:before {
  content: "\ea1b"
}

.icon-discord:before {
  content: "\ea1c"
}

.icon-download-sign:before {
  content: "\ea1d"
}

.icon-drag:before {
  content: "\ea1e"
}

.icon-edit:before {
  content: "\ea1f"
}

.icon-error:before {
  content: "\ea20"
}

.icon-export:before {
  content: "\ea21"
}

.icon-facebook:before {
  content: "\ea22"
}

.icon-flash-close:before {
  content: "\ea23"
}

.icon-footer-logo:before {
  content: "\ea24"
}

.icon-go-up:before {
  content: "\ea25"
}

.icon-grid-quick:before {
  content: "\ea26"
}

.icon-header-menu:before {
  content: "\ea27"
}

.icon-home-android:before {
  content: "\ea28"
}

.icon-home-banner-arrow:before {
  content: "\ea29"
}

.icon-home-download:before {
  content: "\ea2a"
}

.icon-home-go-exchange:before {
  content: "\ea2b"
}

.icon-home-macOS:before {
  content: "\ea2c"
}

.icon-home-notice-mark:before {
  content: "\ea2d"
}

.icon-home-notice:before {
  content: "\ea2e"
}

.icon-home-windows:before {
  content: "\ea2f"
}

.icon-chat:before {
  content: "\ea30"
}

.icon-index-compare-icon:before {
  content: "\ea31"
}

.icon-info-agree:before {
  content: "\ea32"
}

.icon-info-close:before {
  content: "\ea33"
}

.icon-instagram:before {
  content: "\ea34"
}

.icon-invisible:before {
  content: "\ea35"
}

.icon-language:before {
  content: "\ea36"
}

.icon-link-new-page:before {
  content: "\ea37"
}

.icon-list-menu:before {
  content: "\ea38"
}

.icon-lock:before {
  content: "\ea39"
}

.icon-logo:before {
  content: "\ea3a"
}

.icon-maker-select:before {
  content: "\ea3b"
}

.icon-maker-taker:before {
  content: "\ea3c"
}

.icon-maker-unselect:before {
  content: "\ea3d"
}

.icon-medium:before {
  content: "\ea3e"
}

.icon-microblog:before {
  content: "\ea3f"
}

.icon-mobile-transfer:before {
  content: "\ea40"
}

.icon-new-account:before {
  content: "\ea41"
}

.icon-new-buy:before {
  content: "\ea42"
}

.icon-new-calculator:before {
  content: "\ea43"
}

.icon-new-download:before {
  content: "\ea44"
}

.icon-new-info:before {
  content: "\ea45"
}

.icon-new-notice:before {
  content: "\ea46"
}

.icon-new-parameter:before {
  content: "\ea47"
}

.icon-new-rate:before {
  content: "\ea48"
}

.icon-new-setting:before {
  content: "\ea49"
}

.icon-new-transfer:before {
  content: "\ea4a"
}

.icon-num-dot:before {
  content: "\ea4b"
}

.icon-num-eight:before {
  content: "\ea4c"
}

.icon-num-five:before {
  content: "\ea4d"
}

.icon-num-four:before {
  content: "\ea4e"
}

.icon-num-nine:before {
  content: "\ea4f"
}

.icon-num-one:before {
  content: "\ea50"
}

.icon-num-percent:before {
  content: "\ea51"
}

.icon-num-seven:before {
  content: "\ea52"
}

.icon-num-six:before {
  content: "\ea53"
}

.icon-num-three:before {
  content: "\ea54"
}

.icon-num-two:before {
  content: "\ea55"
}

.icon-num-zero:before {
  content: "\ea56"
}

.icon-ok:before {
  content: "\ea57"
}

.icon-old-trade:before {
  content: "\ea58"
}

.icon-open-done:before {
  content: "\ea59"
}

.icon-open-warn:before {
  content: "\ea5a"
}

.icon-operator-guide:before {
  content: "\ea5b"
}

.icon-order-course-guide:before {
  content: "\ea5c"
}

.icon-phone-app:before {
  content: "\ea5d"
}

.icon-phone-computer:before {
  content: "\ea5e"
}

.icon-phone-tick:before {
  content: "\ea5f"
}

.icon-price-down:before {
  content: "\ea60"
}

.icon-price-up:before {
  content: "\ea61"
}

.icon-pulldown-arrows:before {
  content: "\ea62"
}

.icon-question:before {
  content: "\ea63"
}

.icon-reset-default:before {
  content: "\ea64"
}

.icon-reset:before {
  content: "\ea65"
}

.icon-rise-color:before {
  content: "\ea66"
}

.icon-round-checked:before {
  content: "\ea67"
}

.icon-round-disabled:before {
  content: "\ea68"
}

.icon-round-unchecked:before {
  content: "\ea69"
}

.icon-search:before {
  content: "\ea6a"
}

.icon-share-pic:before {
  content: "\ea6b"
}

.icon-skew:before {
  content: "\ea6c"
}

.icon-sort-by:before {
  content: "\ea6d"
}

.icon-star:before {
  content: "\ea6e"
}

.icon-support:before {
  content: "\ea6f"
}

.icon-switch-off:before {
  content: "\ea70"
}

.icon-switch-on:before {
  content: "\ea71"
}

.icon-switch-type:before {
  content: "\ea72"
}

.icon-switch:before {
  content: "\ea73"
}

.icon-tag-10000X:before {
  content: "\ea74"
}

.icon-tag-1000X:before {
  content: "\ea75"
}

.icon-tag-100X:before {
  content: "\ea76"
}

.icon-tag-10X:before {
  content: "\ea77"
}

.icon-tag-111X:before {
  content: "\ea78"
}

.icon-tag-125X:before {
  content: "\ea79"
}

.icon-tag-1X:before {
  content: "\ea7a"
}

.icon-tag-20X:before {
  content: "\ea7b"
}

.icon-tag-2X:before {
  content: "\ea7c"
}

.icon-tag-30X:before {
  content: "\ea7d"
}

.icon-tag-3X:before {
  content: "\ea7e"
}

.icon-tag-50X:before {
  content: "\ea7f"
}

.icon-tag-5X:before {
  content: "\ea80"
}

.icon-tag-75X:before {
  content: "\ea81"
}

.icon-tag-88X:before {
  content: "\ea82"
}

.icon-taker-select:before {
  content: "\ea83"
}

.icon-taker-unselect:before {
  content: "\ea84"
}

.icon-telegram:before {
  content: "\ea85"
}

.icon-tiktok:before {
  content: "\ea86"
}

.icon-time-zone:before {
  content: "\ea87"
}

.icon-trade-control:before {
  content: "\ea88"
}

.icon-transaction-reflash:before {
  content: "\ea89"
}

.icon-twitter:before {
  content: "\ea8a"
}

.icon-unchecked-round:before {
  content: "\ea8b"
}

.icon-unchecked:before {
  content: "\ea8c"
}

.icon-unlock:before {
  content: "\ea8d"
}

.icon-user:before {
  content: "\ea8e"
}

.icon-visible:before {
  content: "\ea8f"
}

.icon-warn-info:before {
  content: "\ea90"
}

.icon-warn:before {
  content: "\ea91"
}

.icon-wechat:before {
  content: "\ea92"
}

.icon-white-theme:before {
  content: "\ea93"
}

.icon-youtube:before {
  content: "\ea94"
}

*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style:
}

.container {
  width: 100%
}

@media (min-width:640px) {
  .container {
    max-width: 640px
  }
}

@media (min-width:768px) {
  .container {
    max-width: 768px
  }
}

@media (min-width:1024px) {
  .container {
    max-width: 1024px
  }
}

@media (min-width:1280px) {
  .container {
    max-width: 1280px
  }
}

@media (min-width:1536px) {
  .container {
    max-width: 1536px
  }
}

.card-container {
  border-color: var(--dex-common-border-color);
  border-radius: 8px;
  border-style: solid;
  border-width: 1px;
  padding: 24px;
  width: 100%
}

.info-page-label {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  line-height: 16px
}

.info-page-title {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 500
}

.\!visible {
  visibility: visible !important
}

.visible {
  visibility: visible
}

.invisible {
  visibility: hidden
}

.collapse {
  visibility: collapse
}

.static {
  position: static
}

.fixed {
  position: fixed
}

.absolute {
  position: absolute
}

.relative {
  position: relative
}

.sticky {
  position: sticky
}

.bottom-48 {
  bottom: 48px
}

.left-0 {
  left: 0
}

.top-0 {
  top: 0
}

.top-6 {
  top: 6px
}

.z-\[1\] {
  z-index: 1
}

.z-\[99\] {
  z-index: 99
}

.m-0 {
  margin: 0
}

.mx-6 {
  margin-left: 6px;
  margin-right: 6px
}

.my-12 {
  margin-bottom: 12px;
  margin-top: 12px
}

.my-16 {
  margin-bottom: 16px;
  margin-top: 16px
}

.my-18 {
  margin-bottom: 18px;
  margin-top: 18px
}

.my-8 {
  margin-bottom: 8px;
  margin-top: 8px
}

.mb-10 {
  margin-bottom: 10px
}

.mb-100 {
  margin-bottom: 100px
}

.mb-12 {
  margin-bottom: 12px
}

.mb-2 {
  margin-bottom: 2px
}

.mb-20 {
  margin-bottom: 20px
}

.mb-24 {
  margin-bottom: 24px
}

.mb-32 {
  margin-bottom: 32px
}

.mb-4 {
  margin-bottom: 4px
}

.mb-6 {
  margin-bottom: 6px
}

.mb-8 {
  margin-bottom: 8px
}

.mb-80 {
  margin-bottom: 80px
}

.ml-2 {
  margin-left: 2px
}

.ml-4 {
  margin-left: 4px
}

.ml-8 {
  margin-left: 8px
}

.ml-\[2px\] {
  margin-left: 2px
}

.ml-\[6px\] {
  margin-left: 6px
}

.ml-auto {
  margin-left: auto
}

.mr-24 {
  margin-right: 24px
}

.mr-28 {
  margin-right: 28px
}

.mr-4 {
  margin-right: 4px
}

.mr-\[6px\] {
  margin-right: 6px
}

.mt-0 {
  margin-top: 0
}

.mt-100 {
  margin-top: 100px
}

.mt-12 {
  margin-top: 12px
}

.mt-16 {
  margin-top: 16px
}

.mt-2 {
  margin-top: 2px
}

.mt-20 {
  margin-top: 20px
}

.mt-24 {
  margin-top: 24px
}

.mt-32 {
  margin-top: 32px
}

.mt-4 {
  margin-top: 4px
}

.mt-40 {
  margin-top: 40px
}

.mt-42 {
  margin-top: 42px
}

.mt-6 {
  margin-top: 6px
}

.mt-8 {
  margin-top: 8px
}

.block {
  display: block
}

.inline-block {
  display: inline-block
}

.inline {
  display: inline
}

.flex {
  display: flex
}

.table {
  display: table
}

.table-cell {
  display: table-cell
}

.grid {
  display: grid
}

.contents {
  display: contents
}

.list-item {
  display: list-item
}

.\!hidden {
  display: none !important
}

.hidden {
  display: none
}

.h-1 {
  height: 1px
}

.h-24 {
  height: 24px
}

.h-28 {
  height: 28px
}

.h-32 {
  height: 32px
}

.h-44 {
  height: 44px
}

.h-50 {
  height: 50px
}

.h-\[234px\] {
  height: 234px
}

.h-\[35px\] {
  height: 35px
}

.h-\[36px\] {
  height: 36px
}

.h-\[76px\] {
  height: 76px
}

.h-\[800px\] {
  height: 800px
}

.h-full {
  height: 100%
}

.h-screen {
  height: 100vh
}

.min-h-\[228px\] {
  min-height: 228px
}

.w-1 {
  width: 1px
}

.w-1\/3 {
  width: 33.333333%
}

.w-120 {
  width: 120px
}

.w-50 {
  width: 50px
}

.w-\[112px\] {
  width: 112px
}

.w-\[1200px\] {
  width: 1200px
}

.w-\[15px\] {
  width: 15px
}

.w-\[220px\] {
  width: 220px
}

.w-\[35px\] {
  width: 35px
}

.w-\[380px\] {
  width: 380px
}

.w-\[64px\] {
  width: 64px
}

.w-\[66px\] {
  width: 66px
}

.w-\[76px\] {
  width: 76px
}

.w-full {
  width: 100%
}

.w-screen {
  width: 100vw
}

.min-w-120 {
  min-width: 120px
}

.min-w-68 {
  min-width: 68px
}

.flex-1 {
  flex: 1 1 0%
}

.rotate-0 {
  --tw-rotate: 0deg
}

.rotate-0,
.rotate-180 {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-180 {
  --tw-rotate: 180deg
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.cursor-move {
  cursor: move
}

.cursor-not-allowed {
  cursor: not-allowed
}

.cursor-pointer {
  cursor: pointer
}

.resize {
  resize: both
}

.flex-row {
  flex-direction: row
}

.flex-col {
  flex-direction: column
}

.flex-col-reverse {
  flex-direction: column-reverse
}

.flex-wrap {
  flex-wrap: wrap
}

.items-start {
  align-items: flex-start
}

.items-center {
  align-items: center
}

.justify-start {
  justify-content: flex-start
}

.justify-end {
  justify-content: flex-end
}

.justify-center {
  justify-content: center
}

.justify-between {
  justify-content: space-between
}

.gap-15 {
  gap: 15px
}

.gap-16 {
  gap: 16px
}

.gap-2 {
  gap: 2px
}

.gap-4 {
  gap: 4px
}

.gap-6 {
  gap: 6px
}

.gap-8 {
  gap: 8px
}

.gap-\[16px\] {
  gap: 16px
}

.divide-x>:not([hidden])~:not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-left-width: calc(1px*(1 - var(--tw-divide-x-reverse)));
  border-right-width: calc(1px*var(--tw-divide-x-reverse))
}

.divide-white\/20>:not([hidden])~:not([hidden]) {
  border-color: hsla(0, 0%, 100%, .2)
}

.overflow-hidden,
.truncate {
  overflow: hidden
}

.truncate {
  text-overflow: ellipsis
}

.truncate,
.whitespace-nowrap {
  white-space: nowrap
}

.text-wrap {
  text-wrap: wrap
}

.rounded {
  border-radius: .25rem
}

.rounded-lg {
  border-radius: 8px
}

.rounded-md {
  border-radius: 4px
}

.rounded-sm {
  border-radius: 2px
}

.border {
  border-width: 1px
}

.border-x-0 {
  border-left-width: 0;
  border-right-width: 0
}

.border-b {
  border-bottom-width: 1px
}

.border-t-0 {
  border-top-width: 0
}

.border-solid {
  border-style: solid
}

.border-none {
  border-style: none
}

.border-blue {
  border-color: var(--dex-primary-color)
}

.border-common-border-color {
  border-color: var(--dex-common-border-color)
}

.border-trade-input-disabled-bg {
  border-color: var(--dex-trade-input-disabled-bg)
}

.border-transparent {
  border-color: transparent
}

.bg-blue {
  background-color: var(--dex-primary-color)
}

.bg-down {
  background-color: var(--dex-sell-color)
}

.bg-secondary-container-bg {
  background-color: var(--dex-secondary-container-bg)
}

.bg-trade-component-bg {
  background-color: var(--dex-trade-component-background-color)
}

.bg-trade-input-disabled-bg {
  background-color: var(--dex-trade-input-disabled-bg)
}

.bg-trade-primary-container-bg {
  background-color: var(--dex-trade-primary-container-bg)
}

.bg-trade-special-container-bg {
  background-color: var(--dex-trade-special-container-bg)
}

.bg-transparent {
  background-color: transparent
}

.bg-up {
  background-color: var(--dex-buy-color)
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.p-0 {
  padding: 0
}

.p-1 {
  padding: 1px
}

.p-3 {
  padding: 3px
}

.px-10 {
  padding-left: 10px;
  padding-right: 10px
}

.px-11 {
  padding-left: 11px;
  padding-right: 11px
}

.px-16 {
  padding-left: 16px;
  padding-right: 16px
}

.px-5 {
  padding-left: 5px;
  padding-right: 5px
}

.px-6 {
  padding-left: 6px;
  padding-right: 6px
}

.px-8 {
  padding-left: 8px;
  padding-right: 8px
}

.py-0 {
  padding-bottom: 0;
  padding-top: 0
}

.py-12 {
  padding-bottom: 12px;
  padding-top: 12px
}

.py-16 {
  padding-bottom: 16px;
  padding-top: 16px
}

.py-2 {
  padding-bottom: 2px;
  padding-top: 2px
}

.py-4 {
  padding-bottom: 4px;
  padding-top: 4px
}

.py-6 {
  padding-bottom: 6px;
  padding-top: 6px
}

.pb-12 {
  padding-bottom: 12px
}

.pb-16 {
  padding-bottom: 16px
}

.pb-24 {
  padding-bottom: 24px
}

.pb-44 {
  padding-bottom: 44px
}

.pb-6 {
  padding-bottom: 6px
}

.pb-\[35px\] {
  padding-bottom: 35px
}

.pl-16 {
  padding-left: 16px
}

.pl-4 {
  padding-left: 4px
}

.pl-8 {
  padding-left: 8px
}

.pr-16 {
  padding-right: 16px
}

.pr-8 {
  padding-right: 8px
}

.pt-12 {
  padding-top: 12px
}

.pt-14 {
  padding-top: 14px
}

.pt-16 {
  padding-top: 16px
}

.pt-8 {
  padding-top: 8px
}

.text-center {
  text-align: center
}

.text-right {
  text-align: right
}

.align-sub {
  vertical-align: sub
}

.text-12 {
  font-size: 12px
}

.text-14 {
  font-size: 14px
}

.text-16 {
  font-size: 16px
}

.text-18 {
  font-size: 18px
}

.text-24 {
  font-size: 24px
}

.text-26 {
  font-size: 26px
}

.text-30 {
  font-size: 30px
}

.text-\[12px\] {
  font-size: 12px
}

.text-base {
  font-size: 14px;
  line-height: 20px
}

.text-lg {
  font-size: 16px;
  line-height: 22px
}

.text-sm {
  font-size: 12px;
  line-height: 16px
}

.text-xl {
  font-size: 20px;
  line-height: 28px
}

.font-bold {
  font-weight: 700
}

.font-light {
  font-weight: 300
}

.font-medium {
  font-weight: 500
}

.font-normal {
  font-weight: 400
}

.font-semibold {
  font-weight: 600
}

.uppercase {
  text-transform: uppercase
}

.capitalize {
  text-transform: capitalize
}

.italic {
  font-style: italic
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.leading-12 {
  line-height: 12px
}

.leading-16 {
  line-height: 16px
}

.leading-18 {
  line-height: 18px
}

.leading-20 {
  line-height: 20px
}

.leading-24 {
  line-height: 24px
}

.\!text-primary-font {
  color: var(--dex-primary-font-color) !important
}

.text-blue {
  color: var(--dex-primary-color)
}

.text-error {
  color: var(--dex-error-color)
}

.text-primary-font {
  color: var(--dex-primary-font-color)
}

.text-secondary-font {
  color: var(--dex-secondary-font-color)
}

.text-success {
  color: var(--dex-success-color)
}

.text-tertiary-font {
  color: var(--dex-tertiary-font-color)
}

.text-up {
  color: var(--dex-buy-color)
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline {
  outline-style: solid
}

.blur {
  --tw-blur: blur(8px)
}

.blur,
.invert {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.invert {
  --tw-invert: invert(100%)
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.transition {
  transition-duration: .15s;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.transition-transform {
  transition-duration: .15s;
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.flex-center {
  justify-content: center
}

.flex-center,
.flex-y-center {
  align-items: center;
  display: flex
}

.normal-button {
  background-color: var(--dex-trade-component-background-color);
  font-weight: 500
}

.before\:mr-1:before {
  content: var(--tw-content);
  margin-right: 1px
}

.before\:mr-2:before {
  content: var(--tw-content);
  margin-right: 2px
}

.before\:content-\[\"\B7\"\]:before {
  --tw-content: "·";
  content: var(--tw-content)
}

.before\:content-\[\'\*\'\]:before {
  --tw-content: "*";
  content: var(--tw-content)
}

.before\:content-\[\'1\.\'\]:before {
  --tw-content: "1.";
  content: var(--tw-content)
}

.before\:content-\[\'2\.\'\]:before {
  --tw-content: "2.";
  content: var(--tw-content)
}

.before\:content-\[\'3\.\'\]:before {
  --tw-content: "3.";
  content: var(--tw-content)
}

.first\:pl-0:first-child {
  padding-left: 0
}

.visited\:text-blue:visited {
  color: var(--dex-primary-color)
}

.hover\:\!text-blueHover:hover {
  color: var(--dex-primary-hover-color) !important
}

.hover\:\!text-primary-font:hover {
  color: var(--dex-primary-font-color) !important
}

.hover\:text-blueHover:hover {
  color: var(--dex-primary-hover-color)
}

.hover\:text-primary-font:hover {
  color: var(--dex-primary-font-color)
}

.\[\&\>a\]\:text-blue>a {
  color: var(--dex-primary-color)
}

.\[\&\>span\]\:text-primary-font>span {
  color: var(--dex-primary-font-color)
}

.point {
  cursor: pointer
}

.tooltip-underline {
  cursor: pointer;
  text-decoration-color: var(--dex-tertiary-font-color);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-underline-offset: 4px
}

.up-color {
  color: var(--dex-buy-color)
}

.down-color {
  color: var(--dex-sell-color)
}

.warning-color {
  color: var(--dex-warning-color)
}

.copytrading-tooltip-underLine {
  cursor: pointer;
  -webkit-text-decoration: underline #adadb4 dashed;
  text-decoration: underline #adadb4 dashed;
  text-underline-offset: 4px
}

.scroll-style {
  overflow: auto
}

.scroll-style::-webkit-scrollbar {
  height: 4px;
  width: 4px
}

.scroll-style::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: 4px
}

.scroll-style::-webkit-scrollbar-corner,
.scroll-style::-webkit-scrollbar-track {
  background-color: "transparent"
}

.icon-cutdown-close[class^=icon] {
  display: none
}

.scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: 4px;
  position: relative
}

.dex-message-notice .dex-message-notice-content {
  color: var(--dex-quaternary-font-color)
}

.dex-modal .dex-table-wrapper {
  --dex-trade-bg: var(--dex-trade-primary-container-bg)
}

.root-direction-green,
html[data-red-green-direction=green] {
  --up-color: var(--dexc-success-color);
  --up-color-hover: #007451;
  --up-color-fade10: rgba(var(--dexc-success-color-rgb), 10%);
  --down-color: var(--dexc-error-color);
  --down-color-hover: #bb2237;
  --down-color-fade10: rgba(var(--dexc-error-color-rgb), 10%)
}

.root-direction-red,
html[data-red-green-direction=red] {
  --up-color: var(--dexc-error-color);
  --up-color-hover: #bb2237;
  --up-color-fade10: rgba(var(--dexc-error-color-rgb), 10%);
  --down-color: var(--dexc-success-color);
  --down-color-hover: #007451;
  --down-color-fade10: rgba(var(--dexc-success-color-rgb), 10%)
}

:root {
  --dexc-dark-primary-container-bg: #141414;
  --dex-tooltip-max-width: 340px;
  --dex-header-height: 64px;
  --dexc-primary-color: #6001ff;
  --dex-input-disabled-bg: #202020;
  --dex-quaternary-font-color: #8a8a8e
}

html {
  font: 14px/1.4;
  overflow-x: auto
}

body,
footer,
header,
hr,
p {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

dd,
dl,
h1,
h2,
h3,
h4,
h5,
h6,
td {
  margin: 0;
  padding: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  margin: 0
}

h1 {
  font-size: 24px
}

h2 {
  font-size: 22px
}

h3 {
  font-size: 20px
}

h4 {
  font-size: 16px
}

h5 {
  font-size: 14px
}

h6 {
  font-size: 12px
}

dl,
li,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0
}

div,
dl,
form,
li,
ol,
span,
ul {
  box-sizing: border-box
}

button {
  font: 14px/1.4;
  margin: 0
}

a {
  cursor: pointer;
  text-decoration: none
}

input {
  -webkit-appearance: none;
  border-radius: 2px;
  box-sizing: border-box;
  outline: none;
  padding: 0
}

input::-moz-placeholder {
  color: #8a8a8e
}

input::placeholder {
  color: #8a8a8e
}

input::-ms-clear {
  display: none
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none
}

input[type=number] {
  -moz-appearance: textfield
}

button {
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  padding: 0
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

.margined-perpetual {
  display: inline-block;
  transform: scale(.8)
}

.nowrap {
  white-space: nowrap
}

.sort-by {
  color: #8a8a8e;
  opacity: .4
}

.sort-by.sort-by-active {
  color: var(--dexc-primary-color);
  opacity: 1
}

.body-wrap-modal-wrapper-mask {
  background: rgba(24, 27, 41, .7);
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 201
}

.level-position-center,
.unit-alert-center {
  align-items: center;
  bottom: 0 !important;
  display: flex;
  justify-content: center;
  left: 0 !important;
  margin: auto !important;
  padding: 0 !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important
}

.level-position-center .level-alert,
.level-position-center .linear-swap-level-alert,
.level-position-center .linear-swap-unit-alert,
.level-position-center .swap-level-alert,
.level-position-center .swap-unit-alert,
.level-position-center .trade-unit-alert,
.unit-alert-center .level-alert,
.unit-alert-center .linear-swap-level-alert,
.unit-alert-center .linear-swap-unit-alert,
.unit-alert-center .swap-level-alert,
.unit-alert-center .swap-unit-alert,
.unit-alert-center .trade-unit-alert {
  position: relative
}

.guide-top-0-important {
  bottom: -100px !important;
  top: auto !important
}

.guide-top-55-important {
  bottom: -149px !important;
  top: auto !important
}

.root-white-green {
  background-color: #e9eaed;
  color: #000;
  height: 100%
}

.root-white-green.root-mobile {
  overflow-x: hidden
}

.root-white-green .scroll>div:first-child {
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  scrollbar-track-color: #fff;
  scrollbar-base-color: #fff;
  scrollbar-arrow-color: #fff;
  scrollbar-shadow-color: #fff
}

.root-white-green .scroll>div::-webkit-scrollbar {
  background-color: #fff !important
}

.root-white-green .page-wrap,
.root-white-green .page-wrap-list {
  min-height: calc(100% - 406px);
  overflow: auto;
  width: 100%
}

.root-white-green .page-wrap-list {
  background-color: #fff
}

.root-white-green .page-wrap-list .center-page {
  border: 1px solid #e6ecf2;
  border-radius: 4px
}

.root-white-green .page-wrap-list .center-page .content-box-title {
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  box-shadow: unset;
  box-sizing: border-box;
  padding-left: 14px
}

.root-white-green .page-wrap-list .center-page .content-box-title .hbdm-daterange-picker,
.root-white-green .page-wrap-list .center-page .content-box-title .multiple-select,
.root-white-green .page-wrap-list .center-page .content-box-title .select-white {
  background-color: #fff
}

.root-white-green .page-wrap-list .center-page .pagination-wrapper {
  padding: 0 20px 0 30px
}

.root-white-green .center-page-wrap {
  min-width: 1400px
}

.root-white-green .center-page {
  margin: 24px auto;
  min-height: 528px;
  width: 1320px
}

.root-white-green .center-page .center-page-convert-font {
  color: #8a8a8e;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  width: 115px
}

.root-white-green .center-page .center-page-select-title {
  color: #8a8a8e;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 10px;
  white-space: nowrap
}

.root-white-green .center-page .linear-center-page-select-title {
  color: #8a8a8e;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 10px;
  white-space: nowrap
}

.root-white-green .center-page .center-page-select-root {
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  width: 100px
}

.root-white-green .center-page .center-page-select-item {
  width: 100px
}

.root-white-green .center-page .center-page-table-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  overflow-x: auto;
  width: 100%
}

.root-white-green .center-page .center-page-table-wrap .table-box {
  min-height: 300px
}

.root-white-green .center-page .center-page-table-wrap table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
  width: 100%
}

.root-white-green .center-page .center-page-table-wrap table thead>tr {
  height: 32px
}

.root-white-green .center-page .center-page-table-wrap table tbody {
  max-height: 400px
}

.root-white-green .center-page .center-page-table-wrap table tr {
  height: 48px
}

.root-white-green .center-page .center-page-table-wrap table tr td:first-child,
.root-white-green .center-page .center-page-table-wrap table tr th:first-child {
  padding-left: 30px
}

.root-white-green .center-page .center-page-table-wrap table tr td:last-child,
.root-white-green .center-page .center-page-table-wrap table tr th:last-child {
  padding-right: 30px;
  text-align: right
}

.root-white-green .center-page .center-page-table-wrap table tr button {
  font-size: 12px
}

.root-white-green .center-page .center-page-table-wrap table .table-head-line {
  border: none;
  color: #8a8a8e;
  line-height: 16px
}

.root-white-green .center-page .center-page-table-wrap table .table-head-line td,
.root-white-green .center-page .center-page-table-wrap table .table-head-line th {
  font-weight: 400;
  padding: 8px 0
}

.root-white-green .center-page .center-page-table-wrap table .table-head-two-line {
  border: none;
  color: #8a8a8e;
  height: auto;
  line-height: 16px
}

.root-white-green .center-page .center-page-table-wrap table .table-head-two-line td,
.root-white-green .center-page .center-page-table-wrap table .table-head-two-line th {
  font-weight: 400;
  padding-bottom: 7px;
  padding-top: 7px
}

.root-white-green .center-page .center-page-table-wrap table .table-head-two-line td.pointer,
.root-white-green .center-page .center-page-table-wrap table .table-head-two-line th.pointer {
  cursor: pointer
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line:hover,
.root-white-green .center-page .center-page-table-wrap table .table-body-line:hover td {
  background-color: #f8fafd
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line .table-body-td-nowrap {
  white-space: nowrap
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap {
  background: rgba(229, 235, 245, .3);
  border: 1px solid #ecf1f8
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap {
  padding-right: 0
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr {
  height: 36px
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:first-child,
.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:first-child {
  padding-left: 16px
}

.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:last-child,
.root-white-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:last-child {
  padding-right: 16px
}

.root-white-green .center-page .center-page-list-content-item,
.root-white-green .center-page .center-page-list-title {
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px
}

.root-white-green .center-page .center-page-list-title {
  color: #8a8a8e
}

.root-white-green .center-page .center-page-list-content li {
  border-bottom: 1px solid #ecf1f8;
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px;
  position: relative
}

.root-white-green .center-page .center-page-list-content li:hover {
  background-color: #f8fafd
}

.root-white-green .center-page-title {
  background-color: #fff;
  border-radius: 2px;
  color: #000;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px
}

.root-white-green .tab-selected {
  border-bottom: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 47px;
  line-height: 48px;
  margin-right: 30px
}

.root-white-green .tab-new {
  align-items: center;
  border-top: 2px solid transparent;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 36px;
  justify-content: center;
  line-height: 14px;
  min-width: 120px;
  padding: 0 16px;
  text-align: center
}

@media screen and (min-width:1320px) {
  .root-white-green .tab-new {
    min-width: 150px
  }
}

.root-white-green .tab-new.tab-selected-new {
  border-top: 2px solid var(--dexc-white-primary-color)
}

.root-white-green .tab-new.tab-selected-bottom {
  position: relative
}

.root-white-green .tab-new.tab-selected-bottom:after {
  background-color: var(--dexc-white-primary-color);
  bottom: 0;
  content: "";
  display: balock;
  height: 2px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translateX(-50%);
  width: 16px
}

.root-white-green .content-box {
  background-color: #fff;
  border-radius: 2px
}

.root-white-green .content-box-wrap {
  background-color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  color: #000;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding-right: 20px
}

.root-white-green .trade-content-box-title {
  align-items: center;
  background: #fff;
  border-radius: 2px 2px 0 0;
  color: #000;
  display: flex;
  font-size: 14px;
  height: 36px;
  justify-content: space-between;
  padding-right: 16px
}

.root-white-green .trade-content-query-position-box-title {
  border-bottom: 1px solid #ecf1f8
}

.root-white-green .main-background {
  background-color: #e9eaed
}

.root-white-green .main-top-shadow {
  box-shadow: inset 0 1px 0 0 #e9eaed
}

.root-white-green .main-bottom-shadow {
  box-shadow: inset 0 -1px 0 0 #e9eaed
}

.root-white-green .content-background,
.root-white-green .content-fix-bg {
  background-color: #fff
}

.root-white-green .content-fix-bg-border {
  background-color: #fff;
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-green .content-fix-shadow-border {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-green .red-background {
  background-color: var(--dexc-error-color)
}

.root-white-green .ask-step-background {
  background-color: rgba(250, 77, 86, .1)
}

.root-white-green .green-background {
  background-color: var(--dexc-success-color)
}

.root-white-green .bid-step-background {
  background-color: rgba(0, 180, 100, .1)
}

.root-white-green .spread-background,
.root-white-green .title-background {
  background-color: #fff
}

.root-white-green .input-background {
  background-color: rgba(244, 247, 250, .4)
}

.root-white-green .stroke-background {
  background-color: #ccd2da !important
}

.root-white-green .input-disabled-background {
  background-color: #f2f6fa !important
}

.root-white-green .selected-active:active {
  background-color: rgba(209, 211, 223, .4) !important
}

.root-white-green .blue-background,
.root-white-green .blue-background-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-white-green .split-background {
  background-color: #ecf1f8
}

.root-white-green .alert-background {
  background-color: #fff
}

.root-white-green .cancel-background {
  background-color: #8a8a8e
}

.root-white-green .list-item-hover-background,
.root-white-green .list-item-hover:hover {
  background-color: #f8fafd !important
}

.root-white-green .drop-list-background {
  background-color: #e9eaed
}

.root-white-green .drop-list-item-background:hover {
  background-color: #f2f6fa;
  color: #000
}

.root-white-green .drop-down-list-item-hover:hover {
  background-color: #f2f6fa
}

.root-white-green .select-list-item:hover {
  background-color: #f8fafd;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-green .radio {
  border: 1px solid var(--dexc-white-primary-color)
}

.root-white-green .radio-selected:after {
  background: var(--dexc-white-primary-color)
}

.root-white-green .alert-close:hover {
  color: var(--dexc-white-primary-color)
}

.root-white-green .red-button,
.root-white-green .red-button-no-hover {
  background-color: var(--dexc-error-color);
  color: #fff;
  font-size: 16px
}

.root-white-green .red-button:hover {
  background-color: var(--dexc-error-color);
  opacity: .7
}

.root-white-green .red-button:active {
  background-color: var(--dexc-error-color);
  opacity: 1
}

.root-white-green .red-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-white-green .green-button,
.root-white-green .green-button-no-hover {
  background-color: var(--dexc-success-color);
  color: #fff;
  font-size: 16px
}

.root-white-green .green-button:hover {
  background-color: var(--dexc-success-color);
  opacity: .7
}

.root-white-green .green-button:active {
  background-color: var(--dexc-success-color);
  opacity: 1
}

.root-white-green .green-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-white-green .blue-button {
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.root-white-green .blue-button,
.root-white-green .blue-button:active,
.root-white-green .blue-button:hover {
  background-color: var(--dexc-white-primary-color)
}

.root-white-green .blue-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.root-white-green .blue-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-white-green .transparent-button {
  background-color: transparent;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-green .only-transparent-button {
  background-color: transparent;
  cursor: auto
}

.root-white-green .transparent-button:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-green .transparent-button:active {
  color: var(--dexc-white-primary-color)
}

.root-white-green .transparent-button:disabled {
  color: #d1d3df;
  cursor: not-allowed
}

.root-white-green .btn-hover:hover {
  background-color: rgba(229, 235, 245, .5) !important
}

.root-white-green .btn-hover.active {
  background: var(--dexc-white-primary-color) !important;
  color: #fff
}

.root-white-green .btn-hover.selected {
  background-color: rgba(229, 235, 245, .5) !important
}

.root-white-green .stroke-button {
  background-color: transparent;
  font-size: 12px
}

.root-white-green .stroke-button,
.root-white-green .stroke-button:hover {
  border: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color)
}

.root-white-green .btn-border-font-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-green .blue-text-hover:hover,
.root-white-green .btn-border-font-hover:hover {
  color: var(--dexc-white-primary-color) !important
}

.root-white-green .blue-bg-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-white-green .input {
  background-color: rgba(244, 247, 250, .4);
  border: 1px solid #ccd2da;
  color: #000
}

.root-white-green .input:focus {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-green .input.error {
  border-color: var(--dexc-error-color) !important
}

.root-white-green .input:disabled {
  background-color: #f2f6fa !important;
  border-color: #f2f6fa !important
}

.root-white-green .mobile-box-shadow {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 6px #ccd2da;
  overflow: hidden
}

.root-white-green .tip-text {
  border-bottom: 1px dashed #8a8a8e;
  color: #8a8a8e;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none
}

.root-white-green .tip-text-num {
  color: #8a8a8e
}

.root-white-green .invariant-red-font,
.root-white-green .red-font {
  color: var(--dexc-error-color)
}

.root-white-green .green-font,
.root-white-green .invariant-green-font {
  color: var(--dexc-success-color)
}

.root-white-green .blue-font,
.root-white-green .blue-font-hover {
  color: var(--dexc-white-primary-color)
}

.root-white-green .disabled-font {
  color: #ccd2da
}

.root-white-green .disabled-cursor {
  cursor: not-allowed !important
}

.root-white-green .main-font-hover,
.root-white-green .main-font-hover a {
  color: #000;
  transition: color .2s ease-in-out
}

.root-white-green .main-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-green .three-font {
  color: #000
}

.root-white-green .secondary-font-hover {
  color: #8a8a8e;
  transition: color .2s ease-in-out
}

.root-white-green .secondary-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-green .secondary-font-hover-new {
  color: #8a8a8e;
  transition: color .2s ease-in-out
}

.root-white-green .secondary-font-hover-new:hover {
  color: #000;
  transition: color .2s ease-in-out
}

.root-white-green .main-list-font {
  color: #000
}

.root-white-green .main-list-hover:hover {
  background: #f8fafd
}

.root-white-green .main-list-hover:hover td {
  background: #f8fafd;
  box-shadow: none
}

.root-white-green .third-font {
  color: #8a8a8e;
  opacity: .5
}

.root-white-green .border-split {
  border-color: #ecf1f8 !important
}

.root-white-green .border-secondary {
  border-color: #8a8a8e !important
}

.root-white-green .border-input {
  border-color: #ccd2da !important
}

.root-white-green .border-blue {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-green .border-selected {
  border-color: var(--dexc-primary-font-color) !important
}

.root-white-green .border-green {
  border-color: var(--dexc-success-color) !important
}

.root-white-green .border-red {
  border-color: var(--dexc-error-color) !important
}

.root-white-green .border-white {
  border-color: #000 !important
}

.root-white-green .border-blue-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-green .border-green-hover:hover {
  border-color: var(--dexc-success-color) !important
}

.root-white-green .border-red-hover:hover {
  border-color: var(--dexc-error-color) !important
}

.root-white-green .table-body-border {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-green .text-selected {
  color: var(--dexc-primary-font-color) !important
}

.root-white-green .link {
  color: var(--dexc-white-primary-color);
  text-decoration: none
}

.root-white-green .last-price-font-color {
  color: #000
}

.root-white-green .mobile-level-arrow-background {
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 50%)
}

.root-white-green .table-all-text-right td,
.root-white-green .table-all-text-right tr>th {
  padding-left: 10px;
  padding-right: 0;
  text-align: right
}

.root-white-green .table-all-text-right .thd-text-left {
  padding-left: 0;
  padding-right: 10px;
  text-align: left
}

.root-white-green .table-all-text-right .td-center {
  text-align: center
}

.root-white-green .table-all-text-right .thd-padding-rigth13 {
  padding-right: 13px
}

.root-white-green .table-all-text-right .thd-padding-left0 {
  padding-left: 0
}

.root-white-green .table-all-text-right .thd-padding-right0 {
  padding-right: 0
}

.root-white-green .table-all-text-right .thd-padding-horizontal10 {
  padding-left: 10px;
  padding-right: 10px
}

.root-white-green .icon-export {
  cursor: pointer;
  height: 100%;
  width: 100%
}

.root-white-green .whole-tip-wrap {
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.root-white-green .whole-tip-wrap .content-wrap {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10001
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
  padding: 24px 24px 30px;
  position: relative;
  width: 480px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .close-sign {
  color: #9194a4;
  cursor: pointer;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: absolute;
  right: 24px;
  top: 0;
  z-index: 301
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .close-sign:after {
  content: "×"
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px;
  margin-top: -24px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .content {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  max-height: 452px;
  overflow-y: auto;
  padding-top: 3px;
  text-align: justify;
  white-space: pre-line
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar {
  width: 3px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar-thumb {
  background: #e9eaed;
  border-radius: 1.5px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .footer-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .footer-btn button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  padding: 0 16px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style {
  min-width: 120px
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:first-child {
  background-color: #fff;
  border: 1px solid var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.root-white-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:last-child {
  background-color: var(--dexc-primary-color);
  color: #fff;
  margin-left: 16px
}

.root-white-green .icon-checked {
  color: var(--dexc-white-primary-color) !important
}

.root-white-green .icon-unchecked {
  color: #ccd2da !important
}

.root-white-green .common-border-unchecked {
  border-color: #ccd2da !important
}

.root-white-green .price-index-green-background {
  background-color: rgba(0, 180, 100, .2)
}

.root-white-green .price-index-red-background {
  background-color: rgba(250, 77, 86, .2)
}

.root-white-green .main-font {
  color: #000
}

.root-white-green .secondary-font {
  color: #8a8a8e
}

.root-white-green .mobile-tab-background {
  background-color: #f7f7fb !important
}

.root-blue-green {
  background-color: #000;
  color: #f9f9f9;
  height: 100%
}

.root-blue-green.root-mobile {
  overflow-x: hidden
}

.root-blue-green .scroll>div:first-child {
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  scrollbar-track-color: var(--dexc-trade-primary-container-bg);
  scrollbar-base-color: var(--dexc-trade-primary-container-bg);
  scrollbar-arrow-color: var(--dexc-trade-primary-container-bg);
  scrollbar-shadow-color: var(--dexc-trade-primary-container-bg)
}

.root-blue-green .scroll>div::-webkit-scrollbar {
  background-color: var(--dexc-trade-primary-container-bg) !important
}

.root-blue-green .page-wrap,
.root-blue-green .page-wrap-list {
  min-height: calc(100% - 406px);
  overflow: auto;
  width: 100%
}

.root-blue-green .page-wrap-list {
  background-color: #fff
}

.root-blue-green .page-wrap-list .center-page {
  border: 1px solid #e6ecf2;
  border-radius: 4px
}

.root-blue-green .page-wrap-list .center-page .content-box-title {
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  box-shadow: unset;
  box-sizing: border-box;
  padding-left: 14px
}

.root-blue-green .page-wrap-list .center-page .content-box-title .hbdm-daterange-picker,
.root-blue-green .page-wrap-list .center-page .content-box-title .multiple-select,
.root-blue-green .page-wrap-list .center-page .content-box-title .select-white {
  background-color: #fff
}

.root-blue-green .page-wrap-list .center-page .pagination-wrapper {
  padding: 0 20px 0 30px
}

.root-blue-green .center-page-wrap {
  min-width: 1400px
}

.root-blue-green .center-page {
  margin: 24px auto;
  min-height: 528px;
  width: 1320px
}

.root-blue-green .center-page .center-page-convert-font {
  color: #808799;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  width: 115px
}

.root-blue-green .center-page .center-page-select-title {
  color: #808799;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 10px;
  white-space: nowrap
}

.root-blue-green .center-page .linear-center-page-select-title {
  color: #808799;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 10px;
  white-space: nowrap
}

.root-blue-green .center-page .center-page-select-root {
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  width: 100px
}

.root-blue-green .center-page .center-page-select-item {
  width: 100px
}

.root-blue-green .center-page .center-page-table-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  overflow-x: auto;
  width: 100%
}

.root-blue-green .center-page .center-page-table-wrap .table-box {
  min-height: 300px
}

.root-blue-green .center-page .center-page-table-wrap table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
  width: 100%
}

.root-blue-green .center-page .center-page-table-wrap table thead>tr {
  height: 32px
}

.root-blue-green .center-page .center-page-table-wrap table tbody {
  max-height: 400px
}

.root-blue-green .center-page .center-page-table-wrap table tr {
  height: 48px
}

.root-blue-green .center-page .center-page-table-wrap table tr td:first-child,
.root-blue-green .center-page .center-page-table-wrap table tr th:first-child {
  padding-left: 30px
}

.root-blue-green .center-page .center-page-table-wrap table tr td:last-child,
.root-blue-green .center-page .center-page-table-wrap table tr th:last-child {
  padding-right: 30px;
  text-align: right
}

.root-blue-green .center-page .center-page-table-wrap table tr button {
  font-size: 12px
}

.root-blue-green .center-page .center-page-table-wrap table .table-head-line {
  border: none;
  color: #808799;
  line-height: 16px
}

.root-blue-green .center-page .center-page-table-wrap table .table-head-line td,
.root-blue-green .center-page .center-page-table-wrap table .table-head-line th {
  font-weight: 400;
  padding: 8px 0
}

.root-blue-green .center-page .center-page-table-wrap table .table-head-two-line {
  border: none;
  color: #808799;
  height: auto;
  line-height: 16px
}

.root-blue-green .center-page .center-page-table-wrap table .table-head-two-line td,
.root-blue-green .center-page .center-page-table-wrap table .table-head-two-line th {
  font-weight: 400;
  padding-bottom: 7px;
  padding-top: 7px
}

.root-blue-green .center-page .center-page-table-wrap table .table-head-two-line td.pointer,
.root-blue-green .center-page .center-page-table-wrap table .table-head-two-line th.pointer {
  cursor: pointer
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line:hover,
.root-blue-green .center-page .center-page-table-wrap table .table-body-line:hover td {
  background-color: #0f121f
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line .table-body-td-nowrap {
  white-space: nowrap
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap {
  background: rgba(229, 235, 245, .3);
  border: 1px solid rgba(33, 38, 50, .5)
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap {
  padding-right: 0
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr {
  height: 36px
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:first-child,
.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:first-child {
  padding-left: 16px
}

.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:last-child,
.root-blue-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:last-child {
  padding-right: 16px
}

.root-blue-green .center-page .center-page-list-content-item,
.root-blue-green .center-page .center-page-list-title {
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px
}

.root-blue-green .center-page .center-page-list-title {
  color: #808799
}

.root-blue-green .center-page .center-page-list-content li {
  border-bottom: 1px solid rgba(33, 38, 50, .5);
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px;
  position: relative
}

.root-blue-green .center-page .center-page-list-content li:hover {
  background-color: #0f121f
}

.root-blue-green .center-page-title {
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: 2px;
  color: #f9f9f9;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px
}

.root-blue-green .tab-selected {
  border-bottom: 1px solid var(--dexc-dark-primary-color);
  color: var(--dexc-dark-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 47px;
  line-height: 48px;
  margin-right: 30px
}

.root-blue-green .tab-new {
  align-items: center;
  border-top: 2px solid transparent;
  color: #f9f9f9;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 36px;
  justify-content: center;
  line-height: 14px;
  min-width: 120px;
  padding: 0 16px;
  text-align: center
}

@media screen and (min-width:1320px) {
  .root-blue-green .tab-new {
    min-width: 150px
  }
}

.root-blue-green .tab-new.tab-selected-new {
  border-top: 2px solid var(--dexc-dark-primary-color)
}

.root-blue-green .tab-new.tab-selected-bottom {
  position: relative
}

.root-blue-green .tab-new.tab-selected-bottom:after {
  background-color: var(--dexc-dark-primary-color);
  bottom: 0;
  content: "";
  display: balock;
  height: 2px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translateX(-50%);
  width: 16px
}

.root-blue-green .content-box {
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: 2px
}

.root-blue-green .content-box-wrap {
  background-color: var(--dexc-trade-primary-container-bg);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  color: #f9f9f9;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding-right: 20px
}

.root-blue-green .trade-content-box-title {
  align-items: center;
  background: var(--dexc-trade-primary-container-bg);
  border-radius: 2px 2px 0 0;
  color: #f9f9f9;
  display: flex;
  font-size: 14px;
  height: 36px;
  justify-content: space-between;
  padding-right: 16px
}

.root-blue-green .trade-content-query-position-box-title {
  border-bottom: 1px solid rgba(33, 38, 50, .5)
}

.root-blue-green .main-background {
  background-color: #000
}

.root-blue-green .main-top-shadow {
  box-shadow: inset 0 1px 0 0 #000
}

.root-blue-green .main-bottom-shadow {
  box-shadow: inset 0 -1px 0 0 #000
}

.root-blue-green .content-background,
.root-blue-green .content-fix-bg,
.root-blue-green .content-fix-bg-border {
  background-color: var(--dexc-trade-primary-container-bg)
}

.root-blue-green .content-fix-bg-border,
.root-blue-green .content-fix-shadow-border {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-blue-green .red-background {
  background-color: var(--dexc-error-color)
}

.root-blue-green .ask-step-background {
  background-color: rgba(250, 77, 86, .1)
}

.root-blue-green .green-background {
  background-color: var(--dexc-success-color)
}

.root-blue-green .bid-step-background {
  background-color: rgba(0, 180, 100, .1)
}

.root-blue-green .title-background {
  background-color: var(--dexc-trade-primary-container-bg)
}

.root-blue-green .spread-background {
  background-color: #fff
}

.root-blue-green .input-background {
  background-color: rgba(19, 22, 37, .2)
}

.root-blue-green .stroke-background {
  background-color: #30353e !important
}

.root-blue-green .input-disabled-background {
  background-color: #0f121f !important
}

.root-blue-green .selected-active:active {
  background-color: rgba(209, 211, 223, .4) !important
}

.root-blue-green .blue-background,
.root-blue-green .blue-background-hover:hover {
  background-color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .split-background {
  background-color: rgba(33, 38, 50, .5)
}

.root-blue-green .alert-background {
  background-color: #fff
}

.root-blue-green .cancel-background {
  background-color: #808799
}

.root-blue-green .list-item-hover-background,
.root-blue-green .list-item-hover:hover {
  background-color: #0f121f !important
}

.root-blue-green .drop-list-background {
  background-color: #212632
}

.root-blue-green .drop-list-item-background:hover {
  background-color: #2e3354;
  color: #f9f9f9
}

.root-blue-green .drop-down-list-item-hover:hover {
  background-color: #2e3354
}

.root-blue-green .select-list-item:hover {
  background-color: #0f121f;
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-green .radio {
  border: 1px solid var(--dexc-dark-primary-color)
}

.root-blue-green .radio-selected:after {
  background: var(--dexc-dark-primary-color)
}

.root-blue-green .alert-close:hover {
  color: var(--dexc-dark-primary-color)
}

.root-blue-green .red-button,
.root-blue-green .red-button-no-hover {
  background-color: var(--dexc-error-color);
  color: #fff;
  font-size: 16px
}

.root-blue-green .red-button:hover {
  background-color: var(--dexc-error-color);
  opacity: .7
}

.root-blue-green .red-button:active {
  background-color: var(--dexc-error-color);
  opacity: 1
}

.root-blue-green .red-button:disabled {
  background-color: #4e5b85;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-blue-green .green-button,
.root-blue-green .green-button-no-hover {
  background-color: var(--dexc-success-color);
  color: #fff;
  font-size: 16px
}

.root-blue-green .green-button:hover {
  background-color: var(--dexc-success-color);
  opacity: .7
}

.root-blue-green .green-button:active {
  background-color: var(--dexc-success-color);
  opacity: 1
}

.root-blue-green .green-button:disabled {
  background-color: #4e5b85;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-blue-green .blue-button {
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.root-blue-green .blue-button,
.root-blue-green .blue-button:active,
.root-blue-green .blue-button:hover {
  background-color: var(--dexc-dark-primary-color)
}

.root-blue-green .blue-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.root-blue-green .blue-button:disabled {
  background-color: #4e5b85;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-blue-green .transparent-button {
  background-color: transparent;
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-green .only-transparent-button {
  background-color: transparent;
  cursor: auto
}

.root-blue-green .transparent-button:hover {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-green .transparent-button:active {
  color: var(--dexc-dark-primary-color)
}

.root-blue-green .transparent-button:disabled {
  color: #4e5b85;
  cursor: not-allowed
}

.root-blue-green .btn-hover:hover {
  background-color: rgba(37, 42, 68, .5) !important
}

.root-blue-green .btn-hover.active {
  background: var(--dexc-dark-primary-color) !important;
  color: #fff
}

.root-blue-green .btn-hover.selected {
  background-color: rgba(37, 42, 68, .5) !important
}

.root-blue-green .stroke-button {
  background-color: transparent;
  font-size: 12px
}

.root-blue-green .stroke-button,
.root-blue-green .stroke-button:hover {
  border: 1px solid var(--dexc-dark-primary-color);
  color: var(--dexc-dark-primary-color)
}

.root-blue-green .btn-border-font-hover:hover {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .blue-text-hover:hover,
.root-blue-green .btn-border-font-hover:hover {
  color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .blue-bg-hover:hover {
  background-color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .input {
  background-color: rgba(19, 22, 37, .2);
  border: 1px solid #30353e;
  color: #f9f9f9
}

.root-blue-green .input:focus {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .input.error {
  border-color: var(--dexc-error-color) !important
}

.root-blue-green .input:disabled {
  background-color: #0f121f !important;
  border-color: #0f121f !important
}

.root-blue-green .mobile-box-shadow {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 6px #30353e;
  overflow: hidden
}

.root-blue-green .tip-text {
  border-bottom: 1px dashed #808799;
  color: #808799;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none
}

.root-blue-green .tip-text-num {
  color: #808799
}

.root-blue-green .invariant-red-font,
.root-blue-green .red-font {
  color: var(--dexc-error-color)
}

.root-blue-green .green-font,
.root-blue-green .invariant-green-font {
  color: var(--dexc-success-color)
}

.root-blue-green .blue-font,
.root-blue-green .blue-font-hover {
  color: var(--dexc-dark-primary-color)
}

.root-blue-green .disabled-font {
  color: #30353e
}

.root-blue-green .disabled-cursor {
  cursor: not-allowed !important
}

.root-blue-green .main-font-hover,
.root-blue-green .main-font-hover a {
  color: #f9f9f9;
  transition: color .2s ease-in-out
}

.root-blue-green .main-font-hover:hover {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-green .three-font {
  color: #f2f6fa
}

.root-blue-green .secondary-font-hover {
  color: #808799;
  transition: color .2s ease-in-out
}

.root-blue-green .secondary-font-hover:hover {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-green .secondary-font-hover-new {
  color: #808799;
  transition: color .2s ease-in-out
}

.root-blue-green .secondary-font-hover-new:hover {
  color: #b0b8db;
  transition: color .2s ease-in-out
}

.root-blue-green .main-list-font {
  color: #b0b8db
}

.root-blue-green .main-list-hover:hover {
  background: #0f121f
}

.root-blue-green .main-list-hover:hover td {
  background: #0f121f;
  box-shadow: none
}

.root-blue-green .third-font {
  color: #808799;
  opacity: .5
}

.root-blue-green .border-split {
  border-color: rgba(33, 38, 50, .5) !important
}

.root-blue-green .border-secondary {
  border-color: #808799 !important
}

.root-blue-green .border-input {
  border-color: #30353e !important
}

.root-blue-green .border-blue {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .border-selected {
  border-color: var(--dexc-primary-font-color) !important
}

.root-blue-green .border-green {
  border-color: var(--dexc-success-color) !important
}

.root-blue-green .border-red {
  border-color: var(--dexc-error-color) !important
}

.root-blue-green .border-white {
  border-color: #f9f9f9 !important
}

.root-blue-green .border-blue-hover:hover {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-green .border-green-hover:hover {
  border-color: var(--dexc-success-color) !important
}

.root-blue-green .border-red-hover:hover {
  border-color: var(--dexc-error-color) !important
}

.root-blue-green .table-body-border {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-blue-green .text-selected {
  color: var(--dexc-primary-font-color) !important
}

.root-blue-green .link {
  color: var(--dexc-dark-primary-color);
  text-decoration: none
}

.root-blue-green .last-price-font-color {
  color: #b0b8db
}

.root-blue-green .mobile-level-arrow-background {
  background-image: linear-gradient(90deg, rgba(20, 24, 38, 0), #141826 50%)
}

.root-blue-green .table-all-text-right td,
.root-blue-green .table-all-text-right tr>th {
  padding-left: 10px;
  padding-right: 0;
  text-align: right
}

.root-blue-green .table-all-text-right .thd-text-left {
  padding-left: 0;
  padding-right: 10px;
  text-align: left
}

.root-blue-green .table-all-text-right .td-center {
  text-align: center
}

.root-blue-green .table-all-text-right .thd-padding-rigth13 {
  padding-right: 13px
}

.root-blue-green .table-all-text-right .thd-padding-left0 {
  padding-left: 0
}

.root-blue-green .table-all-text-right .thd-padding-right0 {
  padding-right: 0
}

.root-blue-green .table-all-text-right .thd-padding-horizontal10 {
  padding-left: 10px;
  padding-right: 10px
}

.root-blue-green .icon-export {
  cursor: pointer;
  height: 100%;
  width: 100%
}

.root-blue-green .whole-tip-wrap {
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.root-blue-green .whole-tip-wrap .content-wrap {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10001
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
  padding: 24px 24px 30px;
  position: relative;
  width: 480px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .close-sign {
  color: #9194a4;
  cursor: pointer;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: absolute;
  right: 24px;
  top: 0;
  z-index: 301
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .close-sign:after {
  content: "×"
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px;
  margin-top: -24px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .content {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  max-height: 452px;
  overflow-y: auto;
  padding-top: 3px;
  text-align: justify;
  white-space: pre-line
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar {
  width: 3px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar-thumb {
  background: #e9eaed;
  border-radius: 1.5px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .footer-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .footer-btn button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  padding: 0 16px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style {
  min-width: 120px
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:first-child {
  background-color: #fff;
  border: 1px solid var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.root-blue-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:last-child {
  background-color: var(--dexc-primary-color);
  color: #fff;
  margin-left: 16px
}

.root-blue-green .icon-checked {
  color: var(--dexc-white-primary-color) !important
}

.root-blue-green .icon-unchecked {
  color: #30353e !important
}

.root-blue-green .common-border-unchecked {
  border-color: #30353e !important
}

.root-blue-green .price-index-green-background {
  background-color: rgba(0, 180, 100, .2)
}

.root-blue-green .price-index-red-background {
  background-color: rgba(250, 77, 86, .2)
}

.root-blue-green .main-font {
  color: #f9f9f9
}

.root-blue-green .secondary-font {
  color: #808799
}

.root-blue-green .mobile-tab-background {
  background-color: rgba(56, 63, 102, .5) !important
}

.root-black-green {
  background-color: #34363f;
  color: #d5def2;
  height: 100%
}

.root-black-green.root-mobile {
  overflow-x: hidden
}

.root-black-green .scroll>div:first-child {
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  scrollbar-track-color: #1f2126;
  scrollbar-base-color: #1f2126;
  scrollbar-arrow-color: #1f2126;
  scrollbar-shadow-color: #1f2126
}

.root-black-green .scroll>div::-webkit-scrollbar {
  background-color: #1f2126 !important
}

.root-black-green .page-wrap,
.root-black-green .page-wrap-list {
  min-height: calc(100% - 406px);
  overflow: auto;
  width: 100%
}

.root-black-green .page-wrap-list {
  background-color: #fff
}

.root-black-green .page-wrap-list .center-page {
  border: 1px solid #e6ecf2;
  border-radius: 4px
}

.root-black-green .page-wrap-list .center-page .content-box-title {
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  box-shadow: unset;
  box-sizing: border-box;
  padding-left: 14px
}

.root-black-green .page-wrap-list .center-page .content-box-title .hbdm-daterange-picker,
.root-black-green .page-wrap-list .center-page .content-box-title .multiple-select,
.root-black-green .page-wrap-list .center-page .content-box-title .select-white {
  background-color: #fff
}

.root-black-green .page-wrap-list .center-page .pagination-wrapper {
  padding: 0 20px 0 30px
}

.root-black-green .center-page-wrap {
  min-width: 1400px
}

.root-black-green .center-page {
  margin: 24px auto;
  min-height: 528px;
  width: 1320px
}

.root-black-green .center-page .center-page-convert-font {
  color: #697080;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  width: 115px
}

.root-black-green .center-page .center-page-select-title {
  color: #697080;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 10px;
  white-space: nowrap
}

.root-black-green .center-page .linear-center-page-select-title {
  color: #697080;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 10px;
  white-space: nowrap
}

.root-black-green .center-page .center-page-select-root {
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  width: 100px
}

.root-black-green .center-page .center-page-select-item {
  width: 100px
}

.root-black-green .center-page .center-page-table-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  overflow-x: auto;
  width: 100%
}

.root-black-green .center-page .center-page-table-wrap .table-box {
  min-height: 300px
}

.root-black-green .center-page .center-page-table-wrap table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
  width: 100%
}

.root-black-green .center-page .center-page-table-wrap table thead>tr {
  height: 32px
}

.root-black-green .center-page .center-page-table-wrap table tbody {
  max-height: 400px
}

.root-black-green .center-page .center-page-table-wrap table tr {
  height: 48px
}

.root-black-green .center-page .center-page-table-wrap table tr td:first-child,
.root-black-green .center-page .center-page-table-wrap table tr th:first-child {
  padding-left: 30px
}

.root-black-green .center-page .center-page-table-wrap table tr td:last-child,
.root-black-green .center-page .center-page-table-wrap table tr th:last-child {
  padding-right: 30px;
  text-align: right
}

.root-black-green .center-page .center-page-table-wrap table tr button {
  font-size: 12px
}

.root-black-green .center-page .center-page-table-wrap table .table-head-line {
  border: none;
  color: #697080;
  line-height: 16px
}

.root-black-green .center-page .center-page-table-wrap table .table-head-line td,
.root-black-green .center-page .center-page-table-wrap table .table-head-line th {
  font-weight: 400;
  padding: 8px 0
}

.root-black-green .center-page .center-page-table-wrap table .table-head-two-line {
  border: none;
  color: #697080;
  height: auto;
  line-height: 16px
}

.root-black-green .center-page .center-page-table-wrap table .table-head-two-line td,
.root-black-green .center-page .center-page-table-wrap table .table-head-two-line th {
  font-weight: 400;
  padding-bottom: 7px;
  padding-top: 7px
}

.root-black-green .center-page .center-page-table-wrap table .table-head-two-line td.pointer,
.root-black-green .center-page .center-page-table-wrap table .table-head-two-line th.pointer {
  cursor: pointer
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line {
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line:hover,
.root-black-green .center-page .center-page-table-wrap table .table-body-line:hover td {
  background-color: rgba(52, 54, 63, .5)
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line .table-body-td-nowrap {
  white-space: nowrap
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap {
  background: rgba(229, 235, 245, .3);
  border: 1px solid #1e2238
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap {
  padding-right: 0
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr {
  height: 36px
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:first-child,
.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:first-child {
  padding-left: 16px
}

.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:last-child,
.root-black-green .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:last-child {
  padding-right: 16px
}

.root-black-green .center-page .center-page-list-content-item,
.root-black-green .center-page .center-page-list-title {
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px
}

.root-black-green .center-page .center-page-list-title {
  color: #697080
}

.root-black-green .center-page .center-page-list-content li {
  border-bottom: 1px solid #1e2238;
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px;
  position: relative
}

.root-black-green .center-page .center-page-list-content li:hover {
  background-color: rgba(52, 54, 63, .5)
}

.root-black-green .center-page-title {
  background-color: #191a1f;
  border-radius: 2px;
  color: #d5def2;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px
}

.root-black-green .tab-selected {
  border-bottom: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 47px;
  line-height: 48px;
  margin-right: 30px
}

.root-black-green .tab-new {
  align-items: center;
  border-top: 2px solid transparent;
  color: #d5def2;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 36px;
  justify-content: center;
  line-height: 14px;
  min-width: 120px;
  padding: 0 16px;
  text-align: center
}

@media screen and (min-width:1320px) {
  .root-black-green .tab-new {
    min-width: 150px
  }
}

.root-black-green .tab-new.tab-selected-new {
  border-top: 2px solid var(--dexc-white-primary-color)
}

.root-black-green .tab-new.tab-selected-bottom {
  position: relative
}

.root-black-green .tab-new.tab-selected-bottom:after {
  background-color: var(--dexc-white-primary-color);
  bottom: 0;
  content: "";
  display: balock;
  height: 2px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translateX(-50%);
  width: 16px
}

.root-black-green .content-box {
  background-color: #1f2126;
  border-radius: 2px
}

.root-black-green .content-box-wrap {
  background-color: #191a1f;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  color: #d5def2;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding-right: 20px
}

.root-black-green .trade-content-box-title {
  align-items: center;
  background: #191a1f;
  border-radius: 2px 2px 0 0;
  color: #d5def2;
  display: flex;
  font-size: 14px;
  height: 36px;
  justify-content: space-between;
  padding-right: 16px
}

.root-black-green .trade-content-query-position-box-title {
  border-bottom: 1px solid #1e2238
}

.root-black-green .main-background {
  background-color: #34363f
}

.root-black-green .main-top-shadow {
  box-shadow: inset 0 1px 0 0 #34363f
}

.root-black-green .main-bottom-shadow {
  box-shadow: inset 0 -1px 0 0 #34363f
}

.root-black-green .content-background,
.root-black-green .content-fix-bg {
  background-color: #1f2126
}

.root-black-green .content-fix-bg-border {
  background-color: #1f2126;
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-green .content-fix-shadow-border {
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-green .red-background {
  background-color: #e04545
}

.root-black-green .ask-step-background {
  background-color: rgba(224, 69, 69, .1)
}

.root-black-green .green-background {
  background-color: #05c19e
}

.root-black-green .bid-step-background {
  background-color: rgba(5, 193, 158, .1)
}

.root-black-green .title-background {
  background-color: #191a1f
}

.root-black-green .spread-background {
  background-color: #fff
}

.root-black-green .input-background {
  background-color: rgba(25, 26, 31, .2)
}

.root-black-green .stroke-background {
  background-color: #3f4254 !important
}

.root-black-green .input-disabled-background {
  background-color: #191a1f !important
}

.root-black-green .selected-active:active {
  background-color: rgba(209, 211, 223, .4) !important
}

.root-black-green .blue-background,
.root-black-green .blue-background-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-black-green .split-background {
  background-color: #1e2238
}

.root-black-green .alert-background {
  background-color: #fff
}

.root-black-green .cancel-background {
  background-color: #697080
}

.root-black-green .list-item-hover-background,
.root-black-green .list-item-hover:hover {
  background-color: rgba(52, 54, 63, .5) !important
}

.root-black-green .drop-list-background {
  background-color: #34363f
}

.root-black-green .drop-list-item-background:hover {
  background-color: #3e404b;
  color: #d5def2
}

.root-black-green .drop-down-list-item-hover:hover {
  background-color: #3e404b
}

.root-black-green .select-list-item:hover {
  background-color: rgba(52, 54, 63, .5);
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-green .radio {
  border: 1px solid var(--dexc-white-primary-color)
}

.root-black-green .radio-selected:after {
  background: var(--dexc-white-primary-color)
}

.root-black-green .alert-close:hover {
  color: var(--dexc-white-primary-color)
}

.root-black-green .red-button,
.root-black-green .red-button-no-hover {
  background-color: #e04545;
  color: #fff;
  font-size: 16px
}

.root-black-green .red-button:hover {
  background-color: #e04545;
  opacity: .7
}

.root-black-green .red-button:active {
  background-color: #e04545;
  opacity: 1
}

.root-black-green .red-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-black-green .green-button,
.root-black-green .green-button-no-hover {
  background-color: #05c19e;
  color: #fff;
  font-size: 16px
}

.root-black-green .green-button:hover {
  background-color: #05c19e;
  opacity: .7
}

.root-black-green .green-button:active {
  background-color: #05c19e;
  opacity: 1
}

.root-black-green .green-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-black-green .blue-button {
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.root-black-green .blue-button,
.root-black-green .blue-button:active,
.root-black-green .blue-button:hover {
  background-color: var(--dexc-white-primary-color)
}

.root-black-green .blue-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.root-black-green .blue-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-black-green .transparent-button {
  background-color: transparent;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-green .only-transparent-button {
  background-color: transparent;
  cursor: auto
}

.root-black-green .transparent-button:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-green .transparent-button:active {
  color: var(--dexc-white-primary-color)
}

.root-black-green .transparent-button:disabled {
  color: #d1d3df;
  cursor: not-allowed
}

.root-black-green .btn-hover:hover {
  background-color: rgba(52, 54, 63, .5) !important
}

.root-black-green .btn-hover.active {
  background: var(--dexc-white-primary-color) !important;
  color: #fff
}

.root-black-green .btn-hover.selected {
  background-color: rgba(52, 54, 63, .5) !important
}

.root-black-green .stroke-button {
  background-color: transparent;
  font-size: 12px
}

.root-black-green .stroke-button,
.root-black-green .stroke-button:hover {
  border: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color)
}

.root-black-green .btn-border-font-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-green .blue-text-hover:hover,
.root-black-green .btn-border-font-hover:hover {
  color: var(--dexc-white-primary-color) !important
}

.root-black-green .blue-bg-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-black-green .input {
  background-color: rgba(25, 26, 31, .2);
  border: 1px solid #3f4254;
  color: #d5def2
}

.root-black-green .input:focus {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-green .input.error {
  border-color: #e04545 !important
}

.root-black-green .input:disabled {
  background-color: #191a1f !important;
  border-color: #191a1f !important
}

.root-black-green .mobile-box-shadow {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 6px #3f4254;
  overflow: hidden
}

.root-black-green .tip-text {
  border-bottom: 1px dashed #697080;
  color: #697080;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none
}

.root-black-green .tip-text-num {
  color: #697080
}

.root-black-green .invariant-red-font,
.root-black-green .red-font {
  color: #e04545
}

.root-black-green .green-font,
.root-black-green .invariant-green-font {
  color: #05c19e
}

.root-black-green .blue-font,
.root-black-green .blue-font-hover {
  color: var(--dexc-white-primary-color)
}

.root-black-green .disabled-font {
  color: #3f4254
}

.root-black-green .disabled-cursor {
  cursor: not-allowed !important
}

.root-black-green .main-font-hover,
.root-black-green .main-font-hover a {
  color: #d5def2;
  transition: color .2s ease-in-out
}

.root-black-green .main-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-green .three-font {
  color: #f2f6fa
}

.root-black-green .secondary-font-hover {
  color: #697080;
  transition: color .2s ease-in-out
}

.root-black-green .secondary-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-green .secondary-font-hover-new {
  color: #697080;
  transition: color .2s ease-in-out
}

.root-black-green .secondary-font-hover-new:hover {
  color: #a7b7c7;
  transition: color .2s ease-in-out
}

.root-black-green .main-list-font {
  color: #a7b7c7
}

.root-black-green .main-list-hover:hover {
  background: rgba(52, 54, 63, .5)
}

.root-black-green .main-list-hover:hover td {
  background: rgba(52, 54, 63, .5);
  box-shadow: none
}

.root-black-green .third-font {
  color: #697080;
  opacity: .5
}

.root-black-green .border-split {
  border-color: #1e2238 !important
}

.root-black-green .border-secondary {
  border-color: #697080 !important
}

.root-black-green .border-input {
  border-color: #3f4254 !important
}

.root-black-green .border-blue {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-green .border-selected {
  border-color: var(--dexc-primary-font-color) !important
}

.root-black-green .border-green {
  border-color: #05c19e !important
}

.root-black-green .border-red {
  border-color: #e04545 !important
}

.root-black-green .border-white {
  border-color: #d5def2 !important
}

.root-black-green .border-blue-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-green .border-green-hover:hover {
  border-color: #05c19e !important
}

.root-black-green .border-red-hover:hover {
  border-color: #e04545 !important
}

.root-black-green .table-body-border {
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-green .text-selected {
  color: var(--dexc-primary-font-color) !important
}

.root-black-green .link {
  color: var(--dexc-white-primary-color);
  text-decoration: none
}

.root-black-green .last-price-font-color {
  color: #a7b7c7
}

.root-black-green .mobile-level-arrow-background {
  background-image: linear-gradient(90deg, rgba(20, 24, 38, 0), #141826 50%)
}

.root-black-green .table-all-text-right td,
.root-black-green .table-all-text-right tr>th {
  padding-left: 10px;
  padding-right: 0;
  text-align: right
}

.root-black-green .table-all-text-right .thd-text-left {
  padding-left: 0;
  padding-right: 10px;
  text-align: left
}

.root-black-green .table-all-text-right .td-center {
  text-align: center
}

.root-black-green .table-all-text-right .thd-padding-rigth13 {
  padding-right: 13px
}

.root-black-green .table-all-text-right .thd-padding-left0 {
  padding-left: 0
}

.root-black-green .table-all-text-right .thd-padding-right0 {
  padding-right: 0
}

.root-black-green .table-all-text-right .thd-padding-horizontal10 {
  padding-left: 10px;
  padding-right: 10px
}

.root-black-green .icon-export {
  cursor: pointer;
  height: 100%;
  width: 100%
}

.root-black-green .whole-tip-wrap {
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.root-black-green .whole-tip-wrap .content-wrap {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10001
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
  padding: 24px 24px 30px;
  position: relative;
  width: 480px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .close-sign {
  color: #9194a4;
  cursor: pointer;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: absolute;
  right: 24px;
  top: 0;
  z-index: 301
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .close-sign:after {
  content: "×"
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px;
  margin-top: -24px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .content {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  max-height: 452px;
  overflow-y: auto;
  padding-top: 3px;
  text-align: justify;
  white-space: pre-line
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar {
  width: 3px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar-thumb {
  background: #e9eaed;
  border-radius: 1.5px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .footer-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .footer-btn button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  padding: 0 16px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style {
  min-width: 120px
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:first-child {
  background-color: #fff;
  border: 1px solid var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.root-black-green .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:last-child {
  background-color: var(--dexc-primary-color);
  color: #fff;
  margin-left: 16px
}

.root-black-green .icon-checked {
  color: var(--dexc-white-primary-color) !important
}

.root-black-green .icon-unchecked {
  color: #ccd2da !important
}

.root-black-green .common-border-unchecked {
  border-color: #ccd2da !important
}

.root-black-green .price-index-green-background {
  background-color: rgba(0, 180, 100, .2)
}

.root-black-green .price-index-red-background {
  background-color: rgba(250, 77, 86, .2)
}

.root-black-green .main-font {
  color: #d5def2
}

.root-black-green .secondary-font {
  color: #697080
}

.root-black-green .mobile-tab-background {
  background-color: rgba(56, 63, 102, .5) !important
}

.root-white-red {
  background-color: #e9eaed;
  color: #000;
  height: 100%
}

.root-white-red.root-mobile {
  overflow-x: hidden
}

.root-white-red .scroll>div:first-child {
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  scrollbar-track-color: #fff;
  scrollbar-base-color: #fff;
  scrollbar-arrow-color: #fff;
  scrollbar-shadow-color: #fff
}

.root-white-red .scroll>div::-webkit-scrollbar {
  background-color: #fff !important
}

.root-white-red .page-wrap,
.root-white-red .page-wrap-list {
  min-height: calc(100% - 406px);
  overflow: auto;
  width: 100%
}

.root-white-red .page-wrap-list {
  background-color: #fff
}

.root-white-red .page-wrap-list .center-page {
  border: 1px solid #e6ecf2;
  border-radius: 4px
}

.root-white-red .page-wrap-list .center-page .content-box-title {
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  box-shadow: unset;
  box-sizing: border-box;
  padding-left: 14px
}

.root-white-red .page-wrap-list .center-page .content-box-title .hbdm-daterange-picker,
.root-white-red .page-wrap-list .center-page .content-box-title .multiple-select,
.root-white-red .page-wrap-list .center-page .content-box-title .select-white {
  background-color: #fff
}

.root-white-red .page-wrap-list .center-page .pagination-wrapper {
  padding: 0 20px 0 30px
}

.root-white-red .center-page-wrap {
  min-width: 1400px
}

.root-white-red .center-page {
  margin: 24px auto;
  min-height: 528px;
  width: 1320px
}

.root-white-red .center-page .center-page-convert-font {
  color: #8a8a8e;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  width: 115px
}

.root-white-red .center-page .center-page-select-title {
  color: #8a8a8e;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 10px;
  white-space: nowrap
}

.root-white-red .center-page .linear-center-page-select-title {
  color: #8a8a8e;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 10px;
  white-space: nowrap
}

.root-white-red .center-page .center-page-select-root {
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  width: 100px
}

.root-white-red .center-page .center-page-select-item {
  width: 100px
}

.root-white-red .center-page .center-page-table-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  overflow-x: auto;
  width: 100%
}

.root-white-red .center-page .center-page-table-wrap .table-box {
  min-height: 300px
}

.root-white-red .center-page .center-page-table-wrap table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
  width: 100%
}

.root-white-red .center-page .center-page-table-wrap table thead>tr {
  height: 32px
}

.root-white-red .center-page .center-page-table-wrap table tbody {
  max-height: 400px
}

.root-white-red .center-page .center-page-table-wrap table tr {
  height: 48px
}

.root-white-red .center-page .center-page-table-wrap table tr td:first-child,
.root-white-red .center-page .center-page-table-wrap table tr th:first-child {
  padding-left: 30px
}

.root-white-red .center-page .center-page-table-wrap table tr td:last-child,
.root-white-red .center-page .center-page-table-wrap table tr th:last-child {
  padding-right: 30px;
  text-align: right
}

.root-white-red .center-page .center-page-table-wrap table tr button {
  font-size: 12px
}

.root-white-red .center-page .center-page-table-wrap table .table-head-line {
  border: none;
  color: #8a8a8e;
  line-height: 16px
}

.root-white-red .center-page .center-page-table-wrap table .table-head-line td,
.root-white-red .center-page .center-page-table-wrap table .table-head-line th {
  font-weight: 400;
  padding: 8px 0
}

.root-white-red .center-page .center-page-table-wrap table .table-head-two-line {
  border: none;
  color: #8a8a8e;
  height: auto;
  line-height: 16px
}

.root-white-red .center-page .center-page-table-wrap table .table-head-two-line td,
.root-white-red .center-page .center-page-table-wrap table .table-head-two-line th {
  font-weight: 400;
  padding-bottom: 7px;
  padding-top: 7px
}

.root-white-red .center-page .center-page-table-wrap table .table-head-two-line td.pointer,
.root-white-red .center-page .center-page-table-wrap table .table-head-two-line th.pointer {
  cursor: pointer
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line:hover,
.root-white-red .center-page .center-page-table-wrap table .table-body-line:hover td {
  background-color: #f8fafd
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line .table-body-td-nowrap {
  white-space: nowrap
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap {
  background: rgba(229, 235, 245, .3);
  border: 1px solid #ecf1f8
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap {
  padding-right: 0
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr {
  height: 36px
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:first-child,
.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:first-child {
  padding-left: 16px
}

.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:last-child,
.root-white-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:last-child {
  padding-right: 16px
}

.root-white-red .center-page .center-page-list-content-item,
.root-white-red .center-page .center-page-list-title {
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px
}

.root-white-red .center-page .center-page-list-title {
  color: #8a8a8e
}

.root-white-red .center-page .center-page-list-content li {
  border-bottom: 1px solid #ecf1f8;
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px;
  position: relative
}

.root-white-red .center-page .center-page-list-content li:hover {
  background-color: #f8fafd
}

.root-white-red .center-page-title {
  background-color: #fff;
  border-radius: 2px;
  color: #000;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px
}

.root-white-red .tab-selected {
  border-bottom: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 47px;
  line-height: 48px;
  margin-right: 30px
}

.root-white-red .tab-new {
  align-items: center;
  border-top: 2px solid transparent;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 36px;
  justify-content: center;
  line-height: 14px;
  min-width: 120px;
  padding: 0 16px;
  text-align: center
}

@media screen and (min-width:1320px) {
  .root-white-red .tab-new {
    min-width: 150px
  }
}

.root-white-red .tab-new.tab-selected-new {
  border-top: 2px solid var(--dexc-white-primary-color)
}

.root-white-red .tab-new.tab-selected-bottom {
  position: relative
}

.root-white-red .tab-new.tab-selected-bottom:after {
  background-color: var(--dexc-white-primary-color);
  bottom: 0;
  content: "";
  display: balock;
  height: 2px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translateX(-50%);
  width: 16px
}

.root-white-red .content-box {
  background-color: #fff;
  border-radius: 2px
}

.root-white-red .content-box-wrap {
  background-color: #fff;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  color: #000;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding-right: 20px
}

.root-white-red .trade-content-box-title {
  align-items: center;
  background: #fff;
  border-radius: 2px 2px 0 0;
  color: #000;
  display: flex;
  font-size: 14px;
  height: 36px;
  justify-content: space-between;
  padding-right: 16px
}

.root-white-red .trade-content-query-position-box-title {
  border-bottom: 1px solid #ecf1f8
}

.root-white-red .main-background {
  background-color: #e9eaed
}

.root-white-red .main-top-shadow {
  box-shadow: inset 0 1px 0 0 #e9eaed
}

.root-white-red .main-bottom-shadow {
  box-shadow: inset 0 -1px 0 0 #e9eaed
}

.root-white-red .content-background,
.root-white-red .content-fix-bg {
  background-color: #fff
}

.root-white-red .content-fix-bg-border {
  background-color: #fff;
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-red .content-fix-shadow-border {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-red .red-background {
  background-color: var(--dexc-success-color)
}

.root-white-red .ask-step-background {
  background-color: rgba(0, 180, 100, .1)
}

.root-white-red .green-background {
  background-color: var(--dexc-error-color)
}

.root-white-red .bid-step-background {
  background-color: rgba(250, 77, 86, .1)
}

.root-white-red .spread-background,
.root-white-red .title-background {
  background-color: #fff
}

.root-white-red .input-background {
  background-color: rgba(244, 247, 250, .4)
}

.root-white-red .stroke-background {
  background-color: #ccd2da !important
}

.root-white-red .input-disabled-background {
  background-color: #f2f6fa !important
}

.root-white-red .selected-active:active {
  background-color: rgba(209, 211, 223, .4) !important
}

.root-white-red .blue-background,
.root-white-red .blue-background-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-white-red .split-background {
  background-color: #ecf1f8
}

.root-white-red .alert-background {
  background-color: #fff
}

.root-white-red .cancel-background {
  background-color: #8a8a8e
}

.root-white-red .list-item-hover-background,
.root-white-red .list-item-hover:hover {
  background-color: #f8fafd !important
}

.root-white-red .drop-list-background {
  background-color: #e9eaed
}

.root-white-red .drop-list-item-background:hover {
  background-color: #f2f6fa;
  color: #000
}

.root-white-red .drop-down-list-item-hover:hover {
  background-color: #f2f6fa
}

.root-white-red .select-list-item:hover {
  background-color: #f8fafd;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-red .radio {
  border: 1px solid var(--dexc-white-primary-color)
}

.root-white-red .radio-selected:after {
  background: var(--dexc-white-primary-color)
}

.root-white-red .alert-close:hover {
  color: var(--dexc-white-primary-color)
}

.root-white-red .red-button,
.root-white-red .red-button-no-hover {
  background-color: var(--dexc-success-color);
  color: #fff;
  font-size: 16px
}

.root-white-red .red-button:hover {
  background-color: var(--dexc-success-color);
  opacity: .7
}

.root-white-red .red-button:active {
  background-color: var(--dexc-success-color);
  opacity: 1
}

.root-white-red .red-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-white-red .green-button,
.root-white-red .green-button-no-hover {
  background-color: var(--dexc-error-color);
  color: #fff;
  font-size: 16px
}

.root-white-red .green-button:hover {
  background-color: var(--dexc-error-color);
  opacity: .7
}

.root-white-red .green-button:active {
  background-color: var(--dexc-error-color);
  opacity: 1
}

.root-white-red .green-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-white-red .blue-button {
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.root-white-red .blue-button,
.root-white-red .blue-button:active,
.root-white-red .blue-button:hover {
  background-color: var(--dexc-white-primary-color)
}

.root-white-red .blue-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.root-white-red .blue-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-white-red .transparent-button {
  background-color: transparent;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-red .only-transparent-button {
  background-color: transparent;
  cursor: auto
}

.root-white-red .transparent-button:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-red .transparent-button:active {
  color: var(--dexc-white-primary-color)
}

.root-white-red .transparent-button:disabled {
  color: #d1d3df;
  cursor: not-allowed
}

.root-white-red .btn-hover:hover {
  background-color: rgba(229, 235, 245, .5) !important
}

.root-white-red .btn-hover.active {
  background: var(--dexc-white-primary-color) !important;
  color: #fff
}

.root-white-red .btn-hover.selected {
  background-color: rgba(229, 235, 245, .5) !important
}

.root-white-red .stroke-button {
  background-color: transparent;
  font-size: 12px
}

.root-white-red .stroke-button,
.root-white-red .stroke-button:hover {
  border: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color)
}

.root-white-red .btn-border-font-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-red .blue-text-hover:hover,
.root-white-red .btn-border-font-hover:hover {
  color: var(--dexc-white-primary-color) !important
}

.root-white-red .blue-bg-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-white-red .input {
  background-color: rgba(244, 247, 250, .4);
  border: 1px solid #ccd2da;
  color: #000
}

.root-white-red .input:focus {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-red .input.error {
  border-color: var(--dexc-error-color) !important
}

.root-white-red .input:disabled {
  background-color: #f2f6fa !important;
  border-color: #f2f6fa !important
}

.root-white-red .mobile-box-shadow {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 6px #ccd2da;
  overflow: hidden
}

.root-white-red .tip-text {
  border-bottom: 1px dashed #8a8a8e;
  color: #8a8a8e;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none
}

.root-white-red .tip-text-num {
  color: #8a8a8e
}

.root-white-red .red-font {
  color: var(--dexc-success-color)
}

.root-white-red .green-font,
.root-white-red .invariant-red-font {
  color: var(--dexc-error-color)
}

.root-white-red .invariant-green-font {
  color: var(--dexc-success-color)
}

.root-white-red .blue-font,
.root-white-red .blue-font-hover {
  color: var(--dexc-white-primary-color)
}

.root-white-red .disabled-font {
  color: #ccd2da
}

.root-white-red .disabled-cursor {
  cursor: not-allowed !important
}

.root-white-red .main-font-hover,
.root-white-red .main-font-hover a {
  color: #000;
  transition: color .2s ease-in-out
}

.root-white-red .main-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-red .three-font {
  color: #000
}

.root-white-red .secondary-font-hover {
  color: #8a8a8e;
  transition: color .2s ease-in-out
}

.root-white-red .secondary-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-white-red .secondary-font-hover-new {
  color: #8a8a8e;
  transition: color .2s ease-in-out
}

.root-white-red .secondary-font-hover-new:hover {
  color: #000;
  transition: color .2s ease-in-out
}

.root-white-red .main-list-font {
  color: #000
}

.root-white-red .main-list-hover:hover {
  background: #f8fafd
}

.root-white-red .main-list-hover:hover td {
  background: #f8fafd;
  box-shadow: none
}

.root-white-red .third-font {
  color: #8a8a8e;
  opacity: .5
}

.root-white-red .border-split {
  border-color: #ecf1f8 !important
}

.root-white-red .border-secondary {
  border-color: #8a8a8e !important
}

.root-white-red .border-input {
  border-color: #ccd2da !important
}

.root-white-red .border-blue {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-red .border-selected {
  border-color: var(--dexc-primary-font-color) !important
}

.root-white-red .border-green {
  border-color: var(--dexc-error-color) !important
}

.root-white-red .border-red {
  border-color: var(--dexc-success-color) !important
}

.root-white-red .border-white {
  border-color: #000 !important
}

.root-white-red .border-blue-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-white-red .border-green-hover:hover {
  border-color: var(--dexc-error-color) !important
}

.root-white-red .border-red-hover:hover {
  border-color: var(--dexc-success-color) !important
}

.root-white-red .table-body-border {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.root-white-red .text-selected {
  color: var(--dexc-primary-font-color) !important
}

.root-white-red .link {
  color: var(--dexc-white-primary-color);
  text-decoration: none
}

.root-white-red .last-price-font-color {
  color: #000
}

.root-white-red .mobile-level-arrow-background {
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0), #fff 50%)
}

.root-white-red .table-all-text-right td,
.root-white-red .table-all-text-right tr>th {
  padding-left: 10px;
  padding-right: 0;
  text-align: right
}

.root-white-red .table-all-text-right .thd-text-left {
  padding-left: 0;
  padding-right: 10px;
  text-align: left
}

.root-white-red .table-all-text-right .td-center {
  text-align: center
}

.root-white-red .table-all-text-right .thd-padding-rigth13 {
  padding-right: 13px
}

.root-white-red .table-all-text-right .thd-padding-left0 {
  padding-left: 0
}

.root-white-red .table-all-text-right .thd-padding-right0 {
  padding-right: 0
}

.root-white-red .table-all-text-right .thd-padding-horizontal10 {
  padding-left: 10px;
  padding-right: 10px
}

.root-white-red .icon-export {
  cursor: pointer;
  height: 100%;
  width: 100%
}

.root-white-red .whole-tip-wrap {
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.root-white-red .whole-tip-wrap .content-wrap {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10001
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
  padding: 24px 24px 30px;
  position: relative;
  width: 480px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .close-sign {
  color: #9194a4;
  cursor: pointer;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: absolute;
  right: 24px;
  top: 0;
  z-index: 301
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .close-sign:after {
  content: "×"
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px;
  margin-top: -24px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .content {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  max-height: 452px;
  overflow-y: auto;
  padding-top: 3px;
  text-align: justify;
  white-space: pre-line
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar {
  width: 3px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar-thumb {
  background: #e9eaed;
  border-radius: 1.5px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .footer-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .footer-btn button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  padding: 0 16px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style {
  min-width: 120px
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:first-child {
  background-color: #fff;
  border: 1px solid var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.root-white-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:last-child {
  background-color: var(--dexc-primary-color);
  color: #fff;
  margin-left: 16px
}

.root-white-red .icon-checked {
  color: var(--dexc-white-primary-color) !important
}

.root-white-red .icon-unchecked {
  color: #ccd2da !important
}

.root-white-red .common-border-unchecked {
  border-color: #ccd2da !important
}

.root-white-red .price-index-green-background {
  background-color: rgba(250, 77, 86, .2)
}

.root-white-red .price-index-red-background {
  background-color: rgba(0, 180, 100, .2)
}

.root-white-red .main-font {
  color: #000
}

.root-white-red .secondary-font {
  color: #8a8a8e
}

.root-white-red .mobile-tab-background {
  background-color: #f7f7fb !important
}

.root-blue-red {
  background-color: #000;
  color: #f9f9f9;
  height: 100%
}

.root-blue-red.root-mobile {
  overflow-x: hidden
}

.root-blue-red .scroll>div:first-child {
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  scrollbar-track-color: var(--dexc-trade-primary-container-bg);
  scrollbar-base-color: var(--dexc-trade-primary-container-bg);
  scrollbar-arrow-color: var(--dexc-trade-primary-container-bg);
  scrollbar-shadow-color: var(--dexc-trade-primary-container-bg)
}

.root-blue-red .scroll>div::-webkit-scrollbar {
  background-color: var(--dexc-trade-primary-container-bg) !important
}

.root-blue-red .page-wrap,
.root-blue-red .page-wrap-list {
  min-height: calc(100% - 406px);
  overflow: auto;
  width: 100%
}

.root-blue-red .page-wrap-list {
  background-color: #fff
}

.root-blue-red .page-wrap-list .center-page {
  border: 1px solid #e6ecf2;
  border-radius: 4px
}

.root-blue-red .page-wrap-list .center-page .content-box-title {
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  box-shadow: unset;
  box-sizing: border-box;
  padding-left: 14px
}

.root-blue-red .page-wrap-list .center-page .content-box-title .hbdm-daterange-picker,
.root-blue-red .page-wrap-list .center-page .content-box-title .multiple-select,
.root-blue-red .page-wrap-list .center-page .content-box-title .select-white {
  background-color: #fff
}

.root-blue-red .page-wrap-list .center-page .pagination-wrapper {
  padding: 0 20px 0 30px
}

.root-blue-red .center-page-wrap {
  min-width: 1400px
}

.root-blue-red .center-page {
  margin: 24px auto;
  min-height: 528px;
  width: 1320px
}

.root-blue-red .center-page .center-page-convert-font {
  color: #808799;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  width: 115px
}

.root-blue-red .center-page .center-page-select-title {
  color: #808799;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 10px;
  white-space: nowrap
}

.root-blue-red .center-page .linear-center-page-select-title {
  color: #808799;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 10px;
  white-space: nowrap
}

.root-blue-red .center-page .center-page-select-root {
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  width: 100px
}

.root-blue-red .center-page .center-page-select-item {
  width: 100px
}

.root-blue-red .center-page .center-page-table-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  overflow-x: auto;
  width: 100%
}

.root-blue-red .center-page .center-page-table-wrap .table-box {
  min-height: 300px
}

.root-blue-red .center-page .center-page-table-wrap table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
  width: 100%
}

.root-blue-red .center-page .center-page-table-wrap table thead>tr {
  height: 32px
}

.root-blue-red .center-page .center-page-table-wrap table tbody {
  max-height: 400px
}

.root-blue-red .center-page .center-page-table-wrap table tr {
  height: 48px
}

.root-blue-red .center-page .center-page-table-wrap table tr td:first-child,
.root-blue-red .center-page .center-page-table-wrap table tr th:first-child {
  padding-left: 30px
}

.root-blue-red .center-page .center-page-table-wrap table tr td:last-child,
.root-blue-red .center-page .center-page-table-wrap table tr th:last-child {
  padding-right: 30px;
  text-align: right
}

.root-blue-red .center-page .center-page-table-wrap table tr button {
  font-size: 12px
}

.root-blue-red .center-page .center-page-table-wrap table .table-head-line {
  border: none;
  color: #808799;
  line-height: 16px
}

.root-blue-red .center-page .center-page-table-wrap table .table-head-line td,
.root-blue-red .center-page .center-page-table-wrap table .table-head-line th {
  font-weight: 400;
  padding: 8px 0
}

.root-blue-red .center-page .center-page-table-wrap table .table-head-two-line {
  border: none;
  color: #808799;
  height: auto;
  line-height: 16px
}

.root-blue-red .center-page .center-page-table-wrap table .table-head-two-line td,
.root-blue-red .center-page .center-page-table-wrap table .table-head-two-line th {
  font-weight: 400;
  padding-bottom: 7px;
  padding-top: 7px
}

.root-blue-red .center-page .center-page-table-wrap table .table-head-two-line td.pointer,
.root-blue-red .center-page .center-page-table-wrap table .table-head-two-line th.pointer {
  cursor: pointer
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line:hover,
.root-blue-red .center-page .center-page-table-wrap table .table-body-line:hover td {
  background-color: #0f121f
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line .table-body-td-nowrap {
  white-space: nowrap
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap {
  background: rgba(229, 235, 245, .3);
  border: 1px solid rgba(33, 38, 50, .5)
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap {
  padding-right: 0
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr {
  height: 36px
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:first-child,
.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:first-child {
  padding-left: 16px
}

.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:last-child,
.root-blue-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:last-child {
  padding-right: 16px
}

.root-blue-red .center-page .center-page-list-content-item,
.root-blue-red .center-page .center-page-list-title {
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px
}

.root-blue-red .center-page .center-page-list-title {
  color: #808799
}

.root-blue-red .center-page .center-page-list-content li {
  border-bottom: 1px solid rgba(33, 38, 50, .5);
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px;
  position: relative
}

.root-blue-red .center-page .center-page-list-content li:hover {
  background-color: #0f121f
}

.root-blue-red .center-page-title {
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: 2px;
  color: #f9f9f9;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px
}

.root-blue-red .tab-selected {
  border-bottom: 1px solid var(--dexc-dark-primary-color);
  color: var(--dexc-dark-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 47px;
  line-height: 48px;
  margin-right: 30px
}

.root-blue-red .tab-new {
  align-items: center;
  border-top: 2px solid transparent;
  color: #f9f9f9;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 36px;
  justify-content: center;
  line-height: 14px;
  min-width: 120px;
  padding: 0 16px;
  text-align: center
}

@media screen and (min-width:1320px) {
  .root-blue-red .tab-new {
    min-width: 150px
  }
}

.root-blue-red .tab-new.tab-selected-new {
  border-top: 2px solid var(--dexc-dark-primary-color)
}

.root-blue-red .tab-new.tab-selected-bottom {
  position: relative
}

.root-blue-red .tab-new.tab-selected-bottom:after {
  background-color: var(--dexc-dark-primary-color);
  bottom: 0;
  content: "";
  display: balock;
  height: 2px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translateX(-50%);
  width: 16px
}

.root-blue-red .content-box {
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: 2px
}

.root-blue-red .content-box-wrap {
  background-color: var(--dexc-trade-primary-container-bg);
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  color: #f9f9f9;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding-right: 20px
}

.root-blue-red .trade-content-box-title {
  align-items: center;
  background: var(--dexc-trade-primary-container-bg);
  border-radius: 2px 2px 0 0;
  color: #f9f9f9;
  display: flex;
  font-size: 14px;
  height: 36px;
  justify-content: space-between;
  padding-right: 16px
}

.root-blue-red .trade-content-query-position-box-title {
  border-bottom: 1px solid rgba(33, 38, 50, .5)
}

.root-blue-red .main-background {
  background-color: #000
}

.root-blue-red .main-top-shadow {
  box-shadow: inset 0 1px 0 0 #000
}

.root-blue-red .main-bottom-shadow {
  box-shadow: inset 0 -1px 0 0 #000
}

.root-blue-red .content-background,
.root-blue-red .content-fix-bg,
.root-blue-red .content-fix-bg-border {
  background-color: var(--dexc-trade-primary-container-bg)
}

.root-blue-red .content-fix-bg-border,
.root-blue-red .content-fix-shadow-border {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-blue-red .red-background {
  background-color: var(--dexc-success-color)
}

.root-blue-red .ask-step-background {
  background-color: rgba(0, 180, 100, .1)
}

.root-blue-red .green-background {
  background-color: var(--dexc-error-color)
}

.root-blue-red .bid-step-background {
  background-color: rgba(250, 77, 86, .1)
}

.root-blue-red .title-background {
  background-color: var(--dexc-trade-primary-container-bg)
}

.root-blue-red .spread-background {
  background-color: #fff
}

.root-blue-red .input-background {
  background-color: rgba(19, 22, 37, .2)
}

.root-blue-red .stroke-background {
  background-color: #30353e !important
}

.root-blue-red .input-disabled-background {
  background-color: #0f121f !important
}

.root-blue-red .selected-active:active {
  background-color: rgba(209, 211, 223, .4) !important
}

.root-blue-red .blue-background,
.root-blue-red .blue-background-hover:hover {
  background-color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .split-background {
  background-color: rgba(33, 38, 50, .5)
}

.root-blue-red .alert-background {
  background-color: #fff
}

.root-blue-red .cancel-background {
  background-color: #808799
}

.root-blue-red .list-item-hover-background,
.root-blue-red .list-item-hover:hover {
  background-color: #0f121f !important
}

.root-blue-red .drop-list-background {
  background-color: #212632
}

.root-blue-red .drop-list-item-background:hover {
  background-color: #2e3354;
  color: #f9f9f9
}

.root-blue-red .drop-down-list-item-hover:hover {
  background-color: #2e3354
}

.root-blue-red .select-list-item:hover {
  background-color: #0f121f;
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-red .radio {
  border: 1px solid var(--dexc-dark-primary-color)
}

.root-blue-red .radio-selected:after {
  background: var(--dexc-dark-primary-color)
}

.root-blue-red .alert-close:hover {
  color: var(--dexc-dark-primary-color)
}

.root-blue-red .red-button,
.root-blue-red .red-button-no-hover {
  background-color: var(--dexc-success-color);
  color: #fff;
  font-size: 16px
}

.root-blue-red .red-button:hover {
  background-color: var(--dexc-success-color);
  opacity: .7
}

.root-blue-red .red-button:active {
  background-color: var(--dexc-success-color);
  opacity: 1
}

.root-blue-red .red-button:disabled {
  background-color: #4e5b85;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-blue-red .green-button,
.root-blue-red .green-button-no-hover {
  background-color: var(--dexc-error-color);
  color: #fff;
  font-size: 16px
}

.root-blue-red .green-button:hover {
  background-color: var(--dexc-error-color);
  opacity: .7
}

.root-blue-red .green-button:active {
  background-color: var(--dexc-error-color);
  opacity: 1
}

.root-blue-red .green-button:disabled {
  background-color: #4e5b85;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-blue-red .blue-button {
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.root-blue-red .blue-button,
.root-blue-red .blue-button:active,
.root-blue-red .blue-button:hover {
  background-color: var(--dexc-dark-primary-color)
}

.root-blue-red .blue-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.root-blue-red .blue-button:disabled {
  background-color: #4e5b85;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-blue-red .transparent-button {
  background-color: transparent;
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-red .only-transparent-button {
  background-color: transparent;
  cursor: auto
}

.root-blue-red .transparent-button:hover {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-red .transparent-button:active {
  color: var(--dexc-dark-primary-color)
}

.root-blue-red .transparent-button:disabled {
  color: #4e5b85;
  cursor: not-allowed
}

.root-blue-red .btn-hover:hover {
  background-color: rgba(37, 42, 68, .5) !important
}

.root-blue-red .btn-hover.active {
  background: var(--dexc-dark-primary-color) !important;
  color: #fff
}

.root-blue-red .btn-hover.selected {
  background-color: rgba(37, 42, 68, .5) !important
}

.root-blue-red .stroke-button {
  background-color: transparent;
  font-size: 12px
}

.root-blue-red .stroke-button,
.root-blue-red .stroke-button:hover {
  border: 1px solid var(--dexc-dark-primary-color);
  color: var(--dexc-dark-primary-color)
}

.root-blue-red .btn-border-font-hover:hover {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .blue-text-hover:hover,
.root-blue-red .btn-border-font-hover:hover {
  color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .blue-bg-hover:hover {
  background-color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .input {
  background-color: rgba(19, 22, 37, .2);
  border: 1px solid #30353e;
  color: #f9f9f9
}

.root-blue-red .input:focus {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .input.error {
  border-color: var(--dexc-error-color) !important
}

.root-blue-red .input:disabled {
  background-color: #0f121f !important;
  border-color: #0f121f !important
}

.root-blue-red .mobile-box-shadow {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 6px #30353e;
  overflow: hidden
}

.root-blue-red .tip-text {
  border-bottom: 1px dashed #808799;
  color: #808799;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none
}

.root-blue-red .tip-text-num {
  color: #808799
}

.root-blue-red .red-font {
  color: var(--dexc-success-color)
}

.root-blue-red .green-font,
.root-blue-red .invariant-red-font {
  color: var(--dexc-error-color)
}

.root-blue-red .invariant-green-font {
  color: var(--dexc-success-color)
}

.root-blue-red .blue-font,
.root-blue-red .blue-font-hover {
  color: var(--dexc-dark-primary-color)
}

.root-blue-red .disabled-font {
  color: #30353e
}

.root-blue-red .disabled-cursor {
  cursor: not-allowed !important
}

.root-blue-red .main-font-hover,
.root-blue-red .main-font-hover a {
  color: #f9f9f9;
  transition: color .2s ease-in-out
}

.root-blue-red .main-font-hover:hover {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-red .three-font {
  color: #f2f6fa
}

.root-blue-red .secondary-font-hover {
  color: #808799;
  transition: color .2s ease-in-out
}

.root-blue-red .secondary-font-hover:hover {
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.root-blue-red .secondary-font-hover-new {
  color: #808799;
  transition: color .2s ease-in-out
}

.root-blue-red .secondary-font-hover-new:hover {
  color: #b0b8db;
  transition: color .2s ease-in-out
}

.root-blue-red .main-list-font {
  color: #b0b8db
}

.root-blue-red .main-list-hover:hover {
  background: #0f121f
}

.root-blue-red .main-list-hover:hover td {
  background: #0f121f;
  box-shadow: none
}

.root-blue-red .third-font {
  color: #808799;
  opacity: .5
}

.root-blue-red .border-split {
  border-color: rgba(33, 38, 50, .5) !important
}

.root-blue-red .border-secondary {
  border-color: #808799 !important
}

.root-blue-red .border-input {
  border-color: #30353e !important
}

.root-blue-red .border-blue {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .border-selected {
  border-color: var(--dexc-primary-font-color) !important
}

.root-blue-red .border-green {
  border-color: var(--dexc-error-color) !important
}

.root-blue-red .border-red {
  border-color: var(--dexc-success-color) !important
}

.root-blue-red .border-white {
  border-color: #f9f9f9 !important
}

.root-blue-red .border-blue-hover:hover {
  border-color: var(--dexc-dark-primary-color) !important
}

.root-blue-red .border-green-hover:hover {
  border-color: var(--dexc-error-color) !important
}

.root-blue-red .border-red-hover:hover {
  border-color: var(--dexc-success-color) !important
}

.root-blue-red .table-body-border {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-blue-red .text-selected {
  color: var(--dexc-primary-font-color) !important
}

.root-blue-red .link {
  color: var(--dexc-dark-primary-color);
  text-decoration: none
}

.root-blue-red .last-price-font-color {
  color: #b0b8db
}

.root-blue-red .mobile-level-arrow-background {
  background-image: linear-gradient(90deg, rgba(20, 24, 38, 0), #141826 50%)
}

.root-blue-red .table-all-text-right td,
.root-blue-red .table-all-text-right tr>th {
  padding-left: 10px;
  padding-right: 0;
  text-align: right
}

.root-blue-red .table-all-text-right .thd-text-left {
  padding-left: 0;
  padding-right: 10px;
  text-align: left
}

.root-blue-red .table-all-text-right .td-center {
  text-align: center
}

.root-blue-red .table-all-text-right .thd-padding-rigth13 {
  padding-right: 13px
}

.root-blue-red .table-all-text-right .thd-padding-left0 {
  padding-left: 0
}

.root-blue-red .table-all-text-right .thd-padding-right0 {
  padding-right: 0
}

.root-blue-red .table-all-text-right .thd-padding-horizontal10 {
  padding-left: 10px;
  padding-right: 10px
}

.root-blue-red .icon-export {
  cursor: pointer;
  height: 100%;
  width: 100%
}

.root-blue-red .whole-tip-wrap {
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.root-blue-red .whole-tip-wrap .content-wrap {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10001
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
  padding: 24px 24px 30px;
  position: relative;
  width: 480px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .close-sign {
  color: #9194a4;
  cursor: pointer;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: absolute;
  right: 24px;
  top: 0;
  z-index: 301
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .close-sign:after {
  content: "×"
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px;
  margin-top: -24px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .content {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  max-height: 452px;
  overflow-y: auto;
  padding-top: 3px;
  text-align: justify;
  white-space: pre-line
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar {
  width: 3px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar-thumb {
  background: #e9eaed;
  border-radius: 1.5px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .footer-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .footer-btn button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  padding: 0 16px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style {
  min-width: 120px
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:first-child {
  background-color: #fff;
  border: 1px solid var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.root-blue-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:last-child {
  background-color: var(--dexc-primary-color);
  color: #fff;
  margin-left: 16px
}

.root-blue-red .icon-checked {
  color: var(--dexc-white-primary-color) !important
}

.root-blue-red .icon-unchecked {
  color: #30353e !important
}

.root-blue-red .common-border-unchecked {
  border-color: #30353e !important
}

.root-blue-red .price-index-green-background {
  background-color: rgba(250, 77, 86, .2)
}

.root-blue-red .price-index-red-background {
  background-color: rgba(0, 180, 100, .2)
}

.root-blue-red .main-font {
  color: #f9f9f9
}

.root-blue-red .secondary-font {
  color: #808799
}

.root-blue-red .mobile-tab-background {
  background-color: rgba(56, 63, 102, .5) !important
}

.root-black-red {
  background-color: #34363f;
  color: #d5def2;
  height: 100%
}

.root-black-red.root-mobile {
  overflow-x: hidden
}

.root-black-red .scroll>div:first-child {
  margin-bottom: 0 !important;
  overflow-x: hidden !important;
  scrollbar-track-color: #1f2126;
  scrollbar-base-color: #1f2126;
  scrollbar-arrow-color: #1f2126;
  scrollbar-shadow-color: #1f2126
}

.root-black-red .scroll>div::-webkit-scrollbar {
  background-color: #1f2126 !important
}

.root-black-red .page-wrap,
.root-black-red .page-wrap-list {
  min-height: calc(100% - 406px);
  overflow: auto;
  width: 100%
}

.root-black-red .page-wrap-list {
  background-color: #fff
}

.root-black-red .page-wrap-list .center-page {
  border: 1px solid #e6ecf2;
  border-radius: 4px
}

.root-black-red .page-wrap-list .center-page .content-box-title {
  background: #f2f6fa;
  border-bottom: 1px solid #e6ecf2;
  box-shadow: unset;
  box-sizing: border-box;
  padding-left: 14px
}

.root-black-red .page-wrap-list .center-page .content-box-title .hbdm-daterange-picker,
.root-black-red .page-wrap-list .center-page .content-box-title .multiple-select,
.root-black-red .page-wrap-list .center-page .content-box-title .select-white {
  background-color: #fff
}

.root-black-red .page-wrap-list .center-page .pagination-wrapper {
  padding: 0 20px 0 30px
}

.root-black-red .center-page-wrap {
  min-width: 1400px
}

.root-black-red .center-page {
  margin: 24px auto;
  min-height: 528px;
  width: 1320px
}

.root-black-red .center-page .center-page-convert-font {
  color: #697080;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
  width: 115px
}

.root-black-red .center-page .center-page-select-title {
  color: #697080;
  font-size: 12px;
  margin-left: 16px;
  margin-right: 10px;
  white-space: nowrap
}

.root-black-red .center-page .linear-center-page-select-title {
  color: #697080;
  font-size: 12px;
  margin-left: 12px;
  margin-right: 10px;
  white-space: nowrap
}

.root-black-red .center-page .center-page-select-root {
  border-radius: 2px;
  height: 28px;
  line-height: 28px;
  width: 100px
}

.root-black-red .center-page .center-page-select-item {
  width: 100px
}

.root-black-red .center-page .center-page-table-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
  overflow-x: auto;
  width: 100%
}

.root-black-red .center-page .center-page-table-wrap .table-box {
  min-height: 300px
}

.root-black-red .center-page .center-page-table-wrap table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 12px;
  text-align: left;
  width: 100%
}

.root-black-red .center-page .center-page-table-wrap table thead>tr {
  height: 32px
}

.root-black-red .center-page .center-page-table-wrap table tbody {
  max-height: 400px
}

.root-black-red .center-page .center-page-table-wrap table tr {
  height: 48px
}

.root-black-red .center-page .center-page-table-wrap table tr td:first-child,
.root-black-red .center-page .center-page-table-wrap table tr th:first-child {
  padding-left: 30px
}

.root-black-red .center-page .center-page-table-wrap table tr td:last-child,
.root-black-red .center-page .center-page-table-wrap table tr th:last-child {
  padding-right: 30px;
  text-align: right
}

.root-black-red .center-page .center-page-table-wrap table tr button {
  font-size: 12px
}

.root-black-red .center-page .center-page-table-wrap table .table-head-line {
  border: none;
  color: #697080;
  line-height: 16px
}

.root-black-red .center-page .center-page-table-wrap table .table-head-line td,
.root-black-red .center-page .center-page-table-wrap table .table-head-line th {
  font-weight: 400;
  padding: 8px 0
}

.root-black-red .center-page .center-page-table-wrap table .table-head-two-line {
  border: none;
  color: #697080;
  height: auto;
  line-height: 16px
}

.root-black-red .center-page .center-page-table-wrap table .table-head-two-line td,
.root-black-red .center-page .center-page-table-wrap table .table-head-two-line th {
  font-weight: 400;
  padding-bottom: 7px;
  padding-top: 7px
}

.root-black-red .center-page .center-page-table-wrap table .table-head-two-line td.pointer,
.root-black-red .center-page .center-page-table-wrap table .table-head-two-line th.pointer {
  cursor: pointer
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line {
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line:hover,
.root-black-red .center-page .center-page-table-wrap table .table-body-line:hover td {
  background-color: rgba(52, 54, 63, .5)
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line .table-body-td-nowrap {
  white-space: nowrap
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap {
  background: rgba(229, 235, 245, .3);
  border: 1px solid #1e2238
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap {
  padding-right: 0
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr {
  height: 36px
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:first-child,
.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:first-child {
  padding-left: 16px
}

.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr td:last-child,
.root-black-red .center-page .center-page-table-wrap table .table-body-line-wrap .table-body-td-wrap table tr th:last-child {
  padding-right: 16px
}

.root-black-red .center-page .center-page-list-content-item,
.root-black-red .center-page .center-page-list-title {
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px
}

.root-black-red .center-page .center-page-list-title {
  color: #697080
}

.root-black-red .center-page .center-page-list-content li {
  border-bottom: 1px solid #1e2238;
  font-size: 12px;
  margin-left: 20px;
  margin-right: 20px;
  padding: 14px 10px;
  position: relative
}

.root-black-red .center-page .center-page-list-content li:hover {
  background-color: rgba(52, 54, 63, .5)
}

.root-black-red .center-page-title {
  background-color: #191a1f;
  border-radius: 2px;
  color: #d5def2;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  margin-bottom: 10px;
  padding-left: 30px;
  padding-right: 30px
}

.root-black-red .tab-selected {
  border-bottom: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  height: 47px;
  line-height: 48px;
  margin-right: 30px
}

.root-black-red .tab-new {
  align-items: center;
  border-top: 2px solid transparent;
  color: #d5def2;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 36px;
  justify-content: center;
  line-height: 14px;
  min-width: 120px;
  padding: 0 16px;
  text-align: center
}

@media screen and (min-width:1320px) {
  .root-black-red .tab-new {
    min-width: 150px
  }
}

.root-black-red .tab-new.tab-selected-new {
  border-top: 2px solid var(--dexc-white-primary-color)
}

.root-black-red .tab-new.tab-selected-bottom {
  position: relative
}

.root-black-red .tab-new.tab-selected-bottom:after {
  background-color: var(--dexc-white-primary-color);
  bottom: 0;
  content: "";
  display: balock;
  height: 2px;
  left: 50%;
  margin: 0 auto;
  position: absolute;
  transform: translateX(-50%);
  width: 16px
}

.root-black-red .content-box {
  background-color: #1f2126;
  border-radius: 2px
}

.root-black-red .content-box-wrap {
  background-color: #191a1f;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  color: #d5def2;
  display: flex;
  font-size: 16px;
  height: 48px;
  justify-content: space-between;
  line-height: 48px;
  padding-right: 20px
}

.root-black-red .trade-content-box-title {
  align-items: center;
  background: #191a1f;
  border-radius: 2px 2px 0 0;
  color: #d5def2;
  display: flex;
  font-size: 14px;
  height: 36px;
  justify-content: space-between;
  padding-right: 16px
}

.root-black-red .trade-content-query-position-box-title {
  border-bottom: 1px solid #1e2238
}

.root-black-red .main-background {
  background-color: #34363f
}

.root-black-red .main-top-shadow {
  box-shadow: inset 0 1px 0 0 #34363f
}

.root-black-red .main-bottom-shadow {
  box-shadow: inset 0 -1px 0 0 #34363f
}

.root-black-red .content-background,
.root-black-red .content-fix-bg {
  background-color: #1f2126
}

.root-black-red .content-fix-bg-border {
  background-color: #1f2126;
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-red .content-fix-shadow-border {
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-red .red-background {
  background-color: #05c19e
}

.root-black-red .ask-step-background {
  background-color: rgba(5, 193, 158, .1)
}

.root-black-red .green-background {
  background-color: #e04545
}

.root-black-red .bid-step-background {
  background-color: rgba(224, 69, 69, .1)
}

.root-black-red .title-background {
  background-color: #191a1f
}

.root-black-red .spread-background {
  background-color: #fff
}

.root-black-red .input-background {
  background-color: rgba(25, 26, 31, .2)
}

.root-black-red .stroke-background {
  background-color: #3f4254 !important
}

.root-black-red .input-disabled-background {
  background-color: #191a1f !important
}

.root-black-red .selected-active:active {
  background-color: rgba(209, 211, 223, .4) !important
}

.root-black-red .blue-background,
.root-black-red .blue-background-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-black-red .split-background {
  background-color: #1e2238
}

.root-black-red .alert-background {
  background-color: #fff
}

.root-black-red .cancel-background {
  background-color: #697080
}

.root-black-red .list-item-hover-background,
.root-black-red .list-item-hover:hover {
  background-color: rgba(52, 54, 63, .5) !important
}

.root-black-red .drop-list-background {
  background-color: #34363f
}

.root-black-red .drop-list-item-background:hover {
  background-color: #3e404b;
  color: #d5def2
}

.root-black-red .drop-down-list-item-hover:hover {
  background-color: #3e404b
}

.root-black-red .select-list-item:hover {
  background-color: rgba(52, 54, 63, .5);
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-red .radio {
  border: 1px solid var(--dexc-white-primary-color)
}

.root-black-red .radio-selected:after {
  background: var(--dexc-white-primary-color)
}

.root-black-red .alert-close:hover {
  color: var(--dexc-white-primary-color)
}

.root-black-red .red-button,
.root-black-red .red-button-no-hover {
  background-color: #05c19e;
  color: #fff;
  font-size: 16px
}

.root-black-red .red-button:hover {
  background-color: #05c19e;
  opacity: .7
}

.root-black-red .red-button:active {
  background-color: #05c19e;
  opacity: 1
}

.root-black-red .red-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-black-red .green-button,
.root-black-red .green-button-no-hover {
  background-color: #e04545;
  color: #fff;
  font-size: 16px
}

.root-black-red .green-button:hover {
  background-color: #e04545;
  opacity: .7
}

.root-black-red .green-button:active {
  background-color: #e04545;
  opacity: 1
}

.root-black-red .green-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-black-red .blue-button {
  color: #fff;
  cursor: pointer;
  font-size: 16px
}

.root-black-red .blue-button,
.root-black-red .blue-button:active,
.root-black-red .blue-button:hover {
  background-color: var(--dexc-white-primary-color)
}

.root-black-red .blue-button:active {
  color: hsla(0, 0%, 100%, .8)
}

.root-black-red .blue-button:disabled {
  background-color: #d1d3df;
  color: hsla(0, 0%, 100%, .8);
  cursor: not-allowed
}

.root-black-red .transparent-button {
  background-color: transparent;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-red .only-transparent-button {
  background-color: transparent;
  cursor: auto
}

.root-black-red .transparent-button:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-red .transparent-button:active {
  color: var(--dexc-white-primary-color)
}

.root-black-red .transparent-button:disabled {
  color: #d1d3df;
  cursor: not-allowed
}

.root-black-red .btn-hover:hover {
  background-color: rgba(52, 54, 63, .5) !important
}

.root-black-red .btn-hover.active {
  background: var(--dexc-white-primary-color) !important;
  color: #fff
}

.root-black-red .btn-hover.selected {
  background-color: rgba(52, 54, 63, .5) !important
}

.root-black-red .stroke-button {
  background-color: transparent;
  font-size: 12px
}

.root-black-red .stroke-button,
.root-black-red .stroke-button:hover {
  border: 1px solid var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-color)
}

.root-black-red .btn-border-font-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-red .blue-text-hover:hover,
.root-black-red .btn-border-font-hover:hover {
  color: var(--dexc-white-primary-color) !important
}

.root-black-red .blue-bg-hover:hover {
  background-color: var(--dexc-white-primary-color) !important
}

.root-black-red .input {
  background-color: rgba(25, 26, 31, .2);
  border: 1px solid #3f4254;
  color: #d5def2
}

.root-black-red .input:focus {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-red .input.error {
  border-color: #e04545 !important
}

.root-black-red .input:disabled {
  background-color: #191a1f !important;
  border-color: #191a1f !important
}

.root-black-red .mobile-box-shadow {
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -3px 6px #3f4254;
  overflow: hidden
}

.root-black-red .tip-text {
  border-bottom: 1px dashed #697080;
  color: #697080;
  cursor: pointer;
  display: inline-block;
  padding-bottom: 1px;
  text-decoration: none
}

.root-black-red .tip-text-num {
  color: #697080
}

.root-black-red .red-font {
  color: #05c19e
}

.root-black-red .green-font,
.root-black-red .invariant-red-font {
  color: #e04545
}

.root-black-red .invariant-green-font {
  color: #05c19e
}

.root-black-red .blue-font,
.root-black-red .blue-font-hover {
  color: var(--dexc-white-primary-color)
}

.root-black-red .disabled-font {
  color: #3f4254
}

.root-black-red .disabled-cursor {
  cursor: not-allowed !important
}

.root-black-red .main-font-hover,
.root-black-red .main-font-hover a {
  color: #d5def2;
  transition: color .2s ease-in-out
}

.root-black-red .main-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-red .three-font {
  color: #f2f6fa
}

.root-black-red .secondary-font-hover {
  color: #697080;
  transition: color .2s ease-in-out
}

.root-black-red .secondary-font-hover:hover {
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.root-black-red .secondary-font-hover-new {
  color: #697080;
  transition: color .2s ease-in-out
}

.root-black-red .secondary-font-hover-new:hover {
  color: #a7b7c7;
  transition: color .2s ease-in-out
}

.root-black-red .main-list-font {
  color: #a7b7c7
}

.root-black-red .main-list-hover:hover {
  background: rgba(52, 54, 63, .5)
}

.root-black-red .main-list-hover:hover td {
  background: rgba(52, 54, 63, .5);
  box-shadow: none
}

.root-black-red .third-font {
  color: #697080;
  opacity: .5
}

.root-black-red .border-split {
  border-color: #1e2238 !important
}

.root-black-red .border-secondary {
  border-color: #697080 !important
}

.root-black-red .border-input {
  border-color: #3f4254 !important
}

.root-black-red .border-blue {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-red .border-selected {
  border-color: var(--dexc-primary-font-color) !important
}

.root-black-red .border-green {
  border-color: #e04545 !important
}

.root-black-red .border-red {
  border-color: #05c19e !important
}

.root-black-red .border-white {
  border-color: #d5def2 !important
}

.root-black-red .border-blue-hover:hover {
  border-color: var(--dexc-white-primary-color) !important
}

.root-black-red .border-green-hover:hover {
  border-color: #e04545 !important
}

.root-black-red .border-red-hover:hover {
  border-color: #05c19e !important
}

.root-black-red .table-body-border {
  box-shadow: inset 0 -1px 0 0 #1e2238
}

.root-black-red .text-selected {
  color: var(--dexc-primary-font-color) !important
}

.root-black-red .link {
  color: var(--dexc-white-primary-color);
  text-decoration: none
}

.root-black-red .last-price-font-color {
  color: #a7b7c7
}

.root-black-red .mobile-level-arrow-background {
  background-image: linear-gradient(90deg, rgba(20, 24, 38, 0), #141826 50%)
}

.root-black-red .table-all-text-right td,
.root-black-red .table-all-text-right tr>th {
  padding-left: 10px;
  padding-right: 0;
  text-align: right
}

.root-black-red .table-all-text-right .thd-text-left {
  padding-left: 0;
  padding-right: 10px;
  text-align: left
}

.root-black-red .table-all-text-right .td-center {
  text-align: center
}

.root-black-red .table-all-text-right .thd-padding-rigth13 {
  padding-right: 13px
}

.root-black-red .table-all-text-right .thd-padding-left0 {
  padding-left: 0
}

.root-black-red .table-all-text-right .thd-padding-right0 {
  padding-right: 0
}

.root-black-red .table-all-text-right .thd-padding-horizontal10 {
  padding-left: 10px;
  padding-right: 10px
}

.root-black-red .icon-export {
  cursor: pointer;
  height: 100%;
  width: 100%
}

.root-black-red .whole-tip-wrap {
  background-color: rgba(24, 27, 41, .7);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000
}

.root-black-red .whole-tip-wrap .content-wrap {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10001
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  mix-blend-mode: normal;
  padding: 24px 24px 30px;
  position: relative;
  width: 480px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .close-sign {
  color: #9194a4;
  cursor: pointer;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: absolute;
  right: 24px;
  top: 0;
  z-index: 301
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .close-sign:after {
  content: "×"
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px;
  margin-top: -24px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .content {
  color: #000;
  font-size: 14px;
  line-height: 22px;
  max-height: 452px;
  overflow-y: auto;
  padding-top: 3px;
  text-align: justify;
  white-space: pre-line
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar {
  width: 3px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .content::-webkit-scrollbar-thumb {
  background: #e9eaed;
  border-radius: 1.5px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .footer-btn {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .footer-btn button {
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  padding: 0 16px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style {
  min-width: 120px
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:first-child {
  background-color: #fff;
  border: 1px solid var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.root-black-red .whole-tip-wrap .content-wrap .content-inner .footer-btn .btn-style:last-child {
  background-color: var(--dexc-primary-color);
  color: #fff;
  margin-left: 16px
}

.root-black-red .icon-checked {
  color: var(--dexc-white-primary-color) !important
}

.root-black-red .icon-unchecked {
  color: #ccd2da !important
}

.root-black-red .common-border-unchecked {
  border-color: #ccd2da !important
}

.root-black-red .price-index-green-background {
  background-color: rgba(250, 77, 86, .2)
}

.root-black-red .price-index-red-background {
  background-color: rgba(0, 180, 100, .2)
}

.root-black-red .main-font {
  color: #d5def2
}

.root-black-red .secondary-font {
  color: #697080
}

.root-black-red .mobile-tab-background {
  background-color: rgba(56, 63, 102, .5) !important
}

@keyframes common-hover-show {
  0% {
    opacity: 0;
    transform: translateY(-10px)
  }

  90% {
    opacity: 1
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes common-click-show {
  0% {
    max-height: 0;
    opacity: 0
  }

  to {
    max-height: 350px;
    opacity: 1
  }
}

@keyframes common-click-show-taker {
  0% {
    max-height: 0;
    opacity: 0
  }

  to {
    max-height: 500px;
    opacity: 1
  }
}

@keyframes common-arrow-rotate {
  0% {
    transform: rotate(225deg);
    transform-origin: 60% 75%;
    transition: transform .2s
  }

  to {
    transform: rotate(45deg);
    transform-origin: center center;
    transition: transform .2s
  }
}

@keyframes common-arrow-rotate-reset {
  0% {
    transform: rotate(45deg);
    transform-origin: center center;
    transition: transform .2s
  }

  to {
    transform: rotate(225deg);
    transform-origin: 60% 75%;
    transition: transform .2s
  }
}

@keyframes arrow-init-animation {
  0% {
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform .2s
  }

  to {
    transform: rotate(180deg);
    transform-origin: center center;
    transition: transform .2s
  }
}

@keyframes arrow-pulldown-animation {
  0% {
    transform: rotate(180deg);
    transform-origin: center center;
    transition: transform .2s
  }

  to {
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform .2s
  }
}

@keyframes home-move {
  0% {
    opacity: .5;
    transform: translateY(50px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes loading-jump {
  0% {
    transform: translateY(0)
  }

  to {
    transform: translateY(20px)
  }
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

@keyframes connection-scale {
  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(1.5)
  }

  75% {
    transform: scale(.95)
  }

  to {
    transform: scale(1)
  }
}

@keyframes opacity-show {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

[class*=" icon"],
[class^=icon] {
  align-items: center;
  display: flex;
  font: 12px icon
}

[class*=" icon"]:before,
[class^=icon]:before {
  display: inline-block;
  height: inherit
}

.icon-info-agree,
.icon-list-menu,
.icon-new-rank,
.icon-round-disabled,
.icon-round-unchecked,
.icon-share-pic,
.icon-switch-off,
.icon-switch-on,
.icon-telegram,
.icon-wechat {
  height: 12px
}

.icon-round-checked:before {
  background: radial-gradient(circle closest-side, #fff 50%, transparent 0);
  border-radius: 50%
}

.icon-checked:before {
  background: radial-gradient(circle closest-side, #fff 80%, transparent 0)
}

.opacity-show {
  animation: opacity-show .5s ease-in-out;
  opacity: 1
}

.invariant-yellow-font-all {
  color: var(--dexc-warning-color) !important
}

.green-font {
  color: var(--dexc-success-color)
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.content-box-title {
  align-items: center;
  background: #fff;
  border-radius: 4px 4px 0 0;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .1);
  display: flex;
  height: 50px;
  justify-content: space-between;
  line-height: unset;
  padding: 0 30px 0 0
}

.content-box-title .select-condition-wrap {
  align-items: center;
  display: flex;
  justify-content: flex-start
}

.content-box-title .select-condition-wrap .select-condition-symbol {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.content-box-title .select-condition-wrap .select-condition-symbol .center-page-convert-font {
  width: auto
}

.query-button {
  font-size: 12px !important;
  margin-right: 10px;
  margin-top: 10px
}

.export-button,
.query-button {
  float: right;
  height: 28px !important;
  line-height: 28px;
  width: 90px !important
}

.export-button {
  margin-top: 16px
}

.pagination-wrapper {
  align-items: center;
  display: flex;
  height: 48px;
  justify-content: space-between;
  width: 100%
}

.arrow-box {
  cursor: pointer;
  display: inline-block;
  height: 100%
}

.arrow-box .arrow-content {
  border: 1px solid #d2d6ec;
  border-radius: 2px;
  display: inline-block;
  height: 16px;
  position: relative;
  width: 16px
}

.arrow-box .arrow-content:before {
  border-bottom: 2px solid #d2d6ec;
  border-right: 2px solid #d2d6ec;
  content: "";
  display: inline-block;
  height: 6px;
  left: 3px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform .2s;
  width: 6px
}

.arrow-box-up .arrow-content:before {
  top: 5px;
  transform: rotate(225deg)
}

.flex-align-center {
  align-items: center;
  display: flex
}

.right {
  text-align: right
}

.center {
  text-align: center
}

.td-right,
.th-right {
  padding-right: 15px;
  text-align: right !important
}

.td-center,
.th-center {
  text-align: center
}

.sort {
  display: inline-block;
  margin-left: 5px;
  position: relative;
  vertical-align: middle;
  width: 8px
}

.sort .sort-common,
.sort .sort-up {
  border: 4px solid transparent;
  display: block;
  height: 0;
  width: 0
}

.sort .sort-up {
  border-bottom-color: #9ca9b5;
  opacity: .3
}

.sort .sort-up-selected {
  border: 4px solid transparent;
  border-bottom: 4px solid var(--dexc-primary-color);
  display: block;
  height: 0;
  opacity: .8;
  width: 0
}

.sort .sort-down {
  border: 4px solid transparent;
  border-top-color: #9ca9b5;
  opacity: .3
}

.sort .sort-down,
.sort .sort-down-selected {
  display: block;
  height: 0;
  margin-top: 2px;
  width: 0
}

.sort .sort-down-selected {
  border: 4px solid transparent;
  border-top: 4px solid var(--dexc-primary-color);
  opacity: .8
}

.thead-sort {
  align-items: flex-start;
  display: inline-flex;
  height: 14px;
  line-height: 14px
}

.thead-sort .sort-wrapped {
  display: inline-flex;
  flex-direction: column;
  height: 14px;
  justify-content: center;
  margin-left: 5px;
  width: 8px
}

.thead-sort .sort-wrapped .sort-up {
  border-bottom: 4px solid #9ca9b5
}

.thead-sort .sort-wrapped .sort-down,
.thead-sort .sort-wrapped .sort-up {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  display: inline-block;
  height: 0;
  opacity: .3;
  width: 0
}

.thead-sort .sort-wrapped .sort-down {
  border-top: 4px solid #9ca9b5;
  margin-top: 2px
}

.thead-sort .sort-wrapped.sort-active.up .sort-up {
  border-bottom: 4px solid var(--dexc-primary-color);
  opacity: .8
}

.thead-sort .sort-wrapped.sort-active.down .sort-down {
  border-top: 4px solid var(--dexc-primary-color);
  opacity: .8
}

.thead-sort+.unit {
  padding-right: 14px
}

.full-screen-alert {
  align-items: center;
  background-color: rgba(0, 0, 0, .7);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 201
}

.full-screen-alert .full-screen-alert-inner {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  padding-bottom: 30px;
  padding-left: 24px;
  padding-right: 24px;
  position: relative
}

.full-screen-alert .full-screen-alert-inner .drag-bar {
  background: transparent;
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 201
}

.full-screen-alert .full-screen-alert-inner .alert-title {
  color: #232a4a;
  display: inline-block;
  font-size: 20px;
  line-height: 72px
}

.full-screen-alert .full-screen-alert-inner .alert-sub-title {
  color: #232a4a;
  font-size: 14px;
  font-style: normal;
  margin-left: 10px
}

.full-screen-alert .full-screen-alert-inner .alert-close {
  color: #9194a4;
  cursor: pointer;
  float: right;
  font-size: 30px;
  font-style: normal;
  margin-top: 10px;
  position: relative;
  z-index: 301
}

.full-screen-alert .full-screen-alert-inner .alert-close:after {
  content: "×"
}

.full-screen-alert .full-screen-alert-inner .alert-selected-text {
  color: #232a4a;
  font-size: 14px;
  margin-left: 10px
}

.full-screen-alert .full-screen-alert-inner .alert-selected-root {
  background-color: #fff;
  border-color: #d1d3df;
  border-radius: 2px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  width: 100%
}

.full-screen-alert .full-screen-alert-inner .alert-selected-item-root {
  width: 100%
}

.full-screen-alert .full-screen-alert-inner .alert-selected-item {
  height: 48px;
  line-height: 48px;
  padding-left: 20px;
  text-align: left;
  width: 100%
}

.full-screen-alert .full-screen-alert-inner .alert-button,
.full-screen-alert .full-screen-alert-inner .alert-confirm-button {
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-top: 16px;
  min-width: 120px;
  padding: 0 16px
}

.full-screen-alert .full-screen-alert-inner .alert-confirm-button {
  background-color: var(--dexc-primary-color);
  display: inline-block;
  text-align: center
}

.full-screen-alert .full-screen-alert-inner .alert-cancel-button {
  background-color: transparent;
  color: var(--dexc-primary-color);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  margin-top: 16px;
  min-width: 120px;
  text-align: center
}

.full-screen-alert .full-screen-alert-inner .border-input {
  border-color: #d1d3df !important
}

.full-screen-alert .full-screen-alert-inner .trade-unit-alert-contract-face {
  color: #9194a4
}

.blue-button,
.green-button,
.green-button-no-hover,
.input,
.red-button,
.red-button-no-hover,
.stroke-button {
  height: 100%;
  width: 100%
}

.radio {
  border-radius: 50%;
  display: inline-block;
  font-style: normal;
  height: 12px;
  margin-right: 8px;
  position: relative;
  top: 1px;
  width: 12px
}

.radio-selected:after {
  border-radius: 50%;
  bottom: 4px;
  content: "";
  left: 4px;
  position: absolute;
  right: 4px;
  top: 4px
}

.body-wrapper-order-board-list {
  right: -45px !important;
  top: 30px !important
}

.body-wrapper-position-order-form-list {
  background-color: transparent
}

.body-wrapper-ul-position-order-form-list {
  right: 22px !important;
  top: 30px !important
}

.icon-warn-info {
  cursor: pointer
}

.transfer-ratio-marker-wrap {
  align-items: center;
  display: flex;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0
}

.transfer-ratio-marker-wrap .tooltip-new {
  align-items: center;
  display: inline-flex;
  height: 12px
}

.transfer-ratio-marker-wrap .tooltip-new .transfer-ratio-icon {
  align-items: center;
  background-color: var(--dexc-primary-color);
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  height: 12px;
  justify-content: center;
  min-width: 22px;
  padding: 2px 0
}

.transfer-ratio-marker-wrap .tooltip-new .transfer-ratio-icon i {
  color: #fff;
  transform: scale(.7)
}

.calculator-trading-unit-text-common {
  color: var(--dexc-primary-color);
  cursor: pointer;
  position: relative
}

.calculator-trading-unit-text-common:after {
  border-bottom: 1px dashed var(--dexc-primary-color);
  bottom: -1px;
  content: "";
  left: 0;
  position: absolute;
  width: 100%
}

.table-sticky {
  left: 0;
  position: sticky !important;
  z-index: 2
}

.root-blue {
  background-color: var(--dexc-trade-bg) !important
}

.root-blue .table-sticky {
  background-color: var(--dexc-trade-primary-container-bg)
}

.root-blue td.table-sticky {
  box-shadow: inset 0 -1px 0 0 rgba(33, 38, 50, .5)
}

.root-white {
  background-color: var(--dexc-trade-bg) !important
}

.root-white .table-sticky {
  background-color: #fff
}

.root-white td.table-sticky {
  box-shadow: inset 0 -1px 0 0 #ecf1f8
}

.position-input-percent-box {
  border-radius: 2px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .5);
  display: none;
  padding: 4px 0;
  position: absolute;
  top: 34px;
  width: 80px;
  z-index: 11
}

.position-input-percent-box li {
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  height: 28px;
  line-height: 28px;
  padding-left: 8px
}

.position-input-percent-box .selected {
  background: #d00
}

.position-input-percent-box.input-percent-box-white {
  background: #fff !important
}

.position-input-percent-box.input-percent-box-white li:hover {
  background: #f2f6fa;
  color: var(--dexc-primary-color)
}

.position-input-percent-box.input-percent-box-blue {
  background: #212632 !important
}

.position-input-percent-box.input-percent-box-blue li:hover {
  background: #2e3354;
  color: #d2d6ec
}

.position-input-percent-box.input-percent-box-black {
  background: #34363f !important
}

.position-input-percent-box.input-percent-box-black li:hover {
  background: #3e404b;
  color: #d5def2
}

.limit-order-modal-content,
.plan-order-modal-content {
  background: rgba(242, 246, 250, .2);
  border: 1px solid #cad7e0;
  border-radius: 2px;
  box-sizing: border-box;
  padding: 16px 16px 0
}

.limit-order-modal-content .plan-order-modal-content-item,
.limit-order-modal-content .plan-order-modal-content-item-may-empty,
.plan-order-modal-content .plan-order-modal-content-item,
.plan-order-modal-content .plan-order-modal-content-item-may-empty {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px
}

.limit-order-modal-content .plan-order-modal-content-item .plan-order-modal-content-item-right,
.limit-order-modal-content .plan-order-modal-content-item-may-empty .plan-order-modal-content-item-right,
.plan-order-modal-content .plan-order-modal-content-item .plan-order-modal-content-item-right,
.plan-order-modal-content .plan-order-modal-content-item-may-empty .plan-order-modal-content-item-right {
  text-align: right
}

.limit-order-modal-content .plan-order-modal-content-item .convert-text,
.limit-order-modal-content .plan-order-modal-content-item-may-empty .convert-text,
.plan-order-modal-content .plan-order-modal-content-item .convert-text,
.plan-order-modal-content .plan-order-modal-content-item-may-empty .convert-text {
  color: #8a8a8e;
  font-size: 12px;
  line-height: 12px;
  margin-top: 4px
}

.limit-order-modal-content .plan-order-modal-content-item .alert-text,
.limit-order-modal-content .plan-order-modal-content-item-may-empty .alert-text,
.plan-order-modal-content .plan-order-modal-content-item .alert-text,
.plan-order-modal-content .plan-order-modal-content-item-may-empty .alert-text {
  color: #ef5656;
  font-size: 12px;
  line-height: 12px
}

.limit-order-modal-content .stop-loss-section,
.plan-order-modal-content .stop-loss-section {
  border-top: 1px dashed #dfe2e7;
  padding-top: 16px
}

.limit-order-modal-content .plan-order-modal-content-item-may-empty,
.plan-order-modal-content .plan-order-modal-content-item-may-empty {
  display: none
}

.limit-order-modal-content .invariant-yellow-font-all {
  color: inherit !important
}

.btn-box-center {
  align-items: center;
  display: flex;
  justify-content: center
}

.btn-box-center span {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical
}

.slider-c3292346 {
  margin: 18px auto
}

.notLogin-f099cf6b {
  color: var(--dexc-primary-font-color)
}

.notLogin-f099cf6b,
.notLogin-f099cf6b:hover {
  background-color: var(--dexc-dark-primary-color)
}

.disabled-fb5e2f5f {
  color: var(--dex-quaternary-font-color)
}

.disabled-fb5e2f5f,
.disabled-fb5e2f5f:not(:disabled):hover {
  background-color: var(--dex-input-disabled-bg)
}

.formWrapper-c9b4b893 {
  width: 100%
}

.formWrapper-c9b4b893 .buttonsContainer-b0ad1638 {
  padding-top: 20px
}

.formWrapper-c9b4b893 .buttonsContainer-b0ad1638>.buttons-c7a67a4b {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center
}

.formWrapper-c9b4b893>.canOpenClose-de36c2e8 {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px
}

.minscreen-orderboard .canOpenClose-de36c2e8 {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: space-between;
  margin-top: 4px
}

.minscreen-orderboard .canOpenClose-de36c2e8>span {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

html[data-theme=blue] .container-afb1cf6b {
  --label-font-color: var(--dexc-primary-font-color);
  --desc-font-color: var(--dexc-tertiary-font-color);
  --item-bg: #222838;
  --bg: #1b202e
}

html[data-theme=white] .container-afb1cf6b {
  --label-font-color: var(--dexc-primary-font-color);
  --desc-font-color: var(--dexc-tertiary-font-color);
  --item-bg: #f6f7fa;
  --bg: #fff
}

.container-afb1cf6b .containerContent-f5e4b98c {
  padding-bottom: 24px
}

.container-afb1cf6b .containerContent-f5e4b98c .list-e11b699c .item-cd73eca9 {
  align-items: center;
  background-color: var(--item-bg);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 14px 12px
}

.container-afb1cf6b .containerContent-f5e4b98c .list-e11b699c .item-cd73eca9 .text-e2ab60e3 .label-cc79c2f3 {
  color: var(--label-font-color);
  font-size: 14px;
  text-align: left
}

.container-afb1cf6b .containerContent-f5e4b98c .list-e11b699c .item-cd73eca9 .text-e2ab60e3 .desc-e33f28c4 {
  color: var(--desc-font-color);
  font-size: 12px;
  margin-top: 4px;
  text-align: left
}

.container-afb1cf6b .containerContent-f5e4b98c .list-e11b699c .item-cd73eca9.active-c8d70237 {
  border: 1px solid var(--dexc-primary-color)
}

.unitButton-f7293337 {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 4px;
  justify-content: flex-end
}

.unitButton-f7293337 .unit-e5d31119 {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.formLayoutWrapper-e081b061 {
  display: flex;
  height: 100%;
  justify-content: space-between;
  width: 100%
}

.formLayoutWrapper-e081b061 .formContainer-a309a4d4 {
  flex: 1 1;
  max-width: calc(50% - 16px)
}

.formLayoutWrapper-e081b061 hr {
  border: none;
  border-right: 1px dashed var(--dexc-common-border-color);
  width: 0
}

.marketForm-ca6b48db .buttons-eb3d79ed {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center
}

.canOpenClose-a862e727 {
  display: flex;
  justify-content: flex-end
}

.minscreen-orderboard .canOpenClose-a862e727 {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.minscreen-orderboard .canOpenClose-a862e727>span {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.timeWeightedItem-d276ee2a {
  align-items: center;
  display: flex
}

.timeWeightedItem-d276ee2a>:last-child {
  margin-left: 4px
}

.checkboxLabel-ce97a39d {
  color: var(--dexc-secondary-font-color);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  text-underline-offset: 4px
}

.container-a31c191f {
  width: auto
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 {
  margin-bottom: 12px;
  margin-top: 12px;
  width: 100%
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 {
  align-items: center;
  display: flex;
  width: 100%
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16 {
  background-color: var(--dexc-trade-component-bg-color);
  color: var(--dexc-secondary-font-color);
  cursor: pointer;
  flex: 1 1;
  font-size: 14px;
  line-height: 24px;
  padding-bottom: 6px;
  padding-top: 6px;
  text-align: center;
  transition: backgroundColor .2s
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16.selected-e3aff54b {
  color: #fff;
  transition: backgroundColor .2s
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16.disabled-d8c29eb7 {
  cursor: not-allowed
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16.buy-ca6c8e56 {
  border-radius: var(--dex-border-radius-mid) 0 0 var(--dex-border-radius-mid)
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16.sell-bffe07c1 {
  border-radius: 0 var(--dex-border-radius-mid) var(--dex-border-radius-mid) 0
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16.buy-ca6c8e56.selected-e3aff54b {
  background-color: var(--up-color)
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .directionSelectContainer-a87cc6c9 .directionSelect-fde87977 .directionSelectItem-af529e16.sell-bffe07c1.selected-e3aff54b {
  background-color: var(--down-color)
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .stopLoss-fda1263f,
.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .stopProfit-dd8aa255 {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .stopProfit-dd8aa255 {
  margin-top: 12px
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .triggerContainer-e11f5d18 {
  position: relative;
  width: 280px
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .triggerContainer-e11f5d18 .converted-e030d50e {
  border-radius: 0 0 2px 2px;
  color: var(--dexc-tertiary-font-color);
  display: none;
  font-size: 12px;
  line-height: 12px;
  margin-top: 4px;
  width: 98%;
  z-index: 1
}

.container-a31c191f .containerContent-cc01c63d .stopLossForm-c62ae594 .triggerContainer-e11f5d18 .converted-e030d50e.show-c9b02d6f {
  display: block
}

.stopLossButtonWrapper-bd277fac {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: center
}

.stopLossButton-e2770302 {
  align-items: center;
  background-color: var(--dex-input-background-color);
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--dexc-primary-font-color);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  justify-content: center;
  line-height: 16px;
  padding: 8px 0;
  width: 100%
}

.stopLossButton-e2770302:not(.disabled-a0201b47):hover {
  border-color: var(--dexc-primary-color);
  color: var(--dexc-primary-color)
}

.stopLossButton-e2770302:not(.disabled-a0201b47):hover circle,
.stopLossButton-e2770302:not(.disabled-a0201b47):hover line {
  stroke: var(--dexc-primary-color)
}

.stopLossButton-e2770302 :last-child {
  margin-left: 5px
}

.stopLossButton-e2770302.disabled-a0201b47 {
  background-color: var(--dex-input-disabled-background-color);
  color: var(--dexc-tertiary-font-color);
  cursor: not-allowed;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.stopLossButton-e2770302.disabled-a0201b47 circle,
.stopLossButton-e2770302.disabled-a0201b47 line {
  stroke: var(--dexc-tertiary-font-color)
}

.stopLossButtonIcon-a59c3cde circle,
.stopLossButtonIcon-a59c3cde line {
  stroke: var(--dexc-primary-font-color)
}

.stopLossButtonIcon-a59c3cde:not(.disabled-a0201b47):hover circle,
.stopLossButtonIcon-a59c3cde:not(.disabled-a0201b47):hover line {
  stroke: var(--dexc-primary-color)
}

.stopLossBoard-d5a79386 .stopLossBoardHeader-f1874751 {
  align-items: center;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 6px
}

.stopLossBoard-d5a79386 .stopLossBoardHeader-f1874751>span {
  color: #475369;
  margin-right: auto
}

.stopLossBoard-d5a79386 .stopLossBoardHeader-f1874751>i {
  cursor: pointer;
  height: 16px;
  line-height: 16px;
  text-align: center;
  width: 16px
}

.stopLossBoard-d5a79386 .stopLossBoardHeader-f1874751 i:last-of-type {
  margin-left: 2px
}

.stopLossBoard-d5a79386 .stopLossBoardBody-ea8a9bd9 {
  background-color: var(--dex-trade-component-background-color);
  border-radius: var(--dex-border-radius-mid);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px
}

.hidden-fb28ccd2 {
  display: none
}

.checkbox-d5b1c897 {
  padding-bottom: 8px;
  padding-top: 4px
}

.checkboxLabel-fa2de283 {
  cursor: pointer;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  text-underline-offset: 4px
}

.priceInputWithSelect-b5d34519 .dex-select-focused .dex-select-selector {
  border: 1px solid var(--dexc-primary-font-color);
  border-radius: 8px
}

.stopLossButton-e6c9821d {
  align-items: center;
  border: 1px solid var(--dex-common-border-color);
  color: var(--dexc-primary-color);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  justify-content: center;
  line-height: 24px;
  margin-bottom: 10px;
  transition: all .2s
}

.stopLossButton-e6c9821d:not(.disabled-fff688bb):hover {
  border-color: var(--dexc-primary-color);
  transition: all .2s
}

.stopLossButton-e6c9821d.disabled-fff688bb {
  color: var(--dexc-quaternary-font-color);
  cursor: not-allowed
}

.stopLossBoard-d88897b3 {
  margin-bottom: 8px;
  margin-top: 8px
}

.stopLossBoard-d88897b3 .stopLossBoardHeader-d6e5b7c2 {
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  margin-bottom: 6px
}

.stopLossBoard-d88897b3 .stopLossBoardHeader-d6e5b7c2>span {
  color: #475369;
  margin-right: auto
}

.stopLossBoard-d88897b3 .stopLossBoardBody-a75a4928 {
  display: flex;
  gap: 10px
}

.stopLossBoard-d88897b3 .stopLossBoardBody-a75a4928 span {
  border-radius: 2px;
  flex: 1 1;
  font-size: 12px;
  line-height: 24px;
  padding-left: 8px
}

.stopLossBoard-d88897b3 .stopLossBoardBody-a75a4928>span:first-child {
  background-color: var(--up-color-fade10);
  color: var(--up-color)
}

.stopLossBoard-d88897b3 .stopLossBoardBody-a75a4928>span:nth-child(2) {
  background-color: var(--down-color-fade10);
  color: var(--down-color)
}

.checkboxLabel-e23371ce {
  cursor: pointer;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  text-underline-offset: 4px
}

.radioGroup-e5ab2dca {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  padding: 8px 0
}

.stplCheckbox-d0590193 {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.effectiveTimeSelect-dc3dd441 {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: flex-start
}

.effectiveTimeSelect-dc3dd441 .effectiveTimeLabel-bf1598ab {
  color: var(--dex-secondary-font-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.effectiveTimeSelect-dc3dd441 .effectiveTimeValue-cc6752e5 {
  color: var(--dex-primary-font-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.tip-c19b0f03 {
  max-width: unset
}

.tip-c19b0f03 .dex-tooltip-inner {
  max-width: 280px
}

.confirmModalTip-dfa28f69 {
  align-items: flex-start
}

.confirmModalTip-dfa28f69 span {
  color: #596a7a;
  font-size: 12px;
  line-height: 20px
}

.confirmModalTip-dfa28f69 .bold-c45cd512 {
  font-weight: 700
}

.confirmModalTip-dfa28f69 .link-fce0d2f8 {
  display: inline;
  font-size: 12px;
  padding: 0
}

.select-b52f75f8 {
  display: block;
  width: 100%
}

.select-b52f75f8 .dex-select-selector {
  padding: 8px 12px
}

.select-b52f75f8 .dex-select-selector .dex-select-selection-item {
  color: var(--dexc-tertiary-font-color);
  font-size: 14px;
  font-weight: 500
}

.timeShareForm-f217e8a0 .rangeSetting-e834814b .priceInterval-e07684cb {
  align-items: flex-start;
  display: flex;
  gap: 8px;
  justify-content: space-between
}

.timeShareForm-f217e8a0 .rangeSetting-e834814b .priceInterval-e07684cb .priceIntervalInput-d35c4a5a {
  flex: 1 1
}

.timeShareForm-f217e8a0 .rangeSetting-e834814b .priceInterval-e07684cb .priceIntervalSelect-b757e8d6 {
  width: 80px
}

.timeShareForm-f217e8a0 .rangeSetting-e834814b .priceInterval-e07684cb .priceIntervalSelect-b757e8d6 .dex-select-selector {
  padding: 8px 12px
}

.timeShareForm-f217e8a0 .rangeSetting-e834814b .priceInterval-e07684cb .priceIntervalSelect-b757e8d6 .dex-select-selector .dex-select-selection-item {
  color: var(--dex-tertiary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px
}

.minscreen-orderboard .timeShareForm-f217e8a0 .amountSetting-d1a2123c .settingTitle-ef75666a,
.minscreen-orderboard .timeShareForm-f217e8a0 .intervalSetting-c072d75c .settingTitle-ef75666a {
  margin-top: 12px
}

.select-db955c1f {
  border-radius: var(--dex-border-radius-mid);
  display: block;
  margin-top: 16px;
  overflow: hidden;
  width: 100%
}

.select-db955c1f .item-c4119cdd {
  background-color: var(--dexc-trade-component-bg-color);
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 8px;
  text-align: center;
  width: 50%
}

.selected-a606c299.buy-dffaa1f8 {
  background-color: var(--up-color)
}

.selected-a606c299.sell-f2f26659 {
  background-color: var(--down-color)
}

.selected-a606c299.item-c4119cdd {
  color: var(--dexc-pure-black-color)
}

.canUse-dc09a2a1 {
  font-size: 12px;
  font-weight: 400;
  justify-content: flex-start;
  line-height: 16px
}

.canUse-dc09a2a1,
.coupon-a104d6bc {
  align-items: center;
  display: flex;
  gap: 4px
}

.coupon-a104d6bc {
  cursor: pointer
}

.coupon-a104d6bc .value-f25aea77 {
  color: var(--dex-primary-color)
}

.caculatorIcon-afce1bb5 {
  cursor: pointer
}

.caculatorIcon-afce1bb5:hover {
  color: var(--dex-primary-font-color) !important
}

.orderBoardLayout-ac4f1ce8 {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
  margin-top: 12px;
  padding-top: 0
}

.orderBoardLayout-ac4f1ce8 .canUse-dc09a2a1 {
  margin-right: auto
}

.orderBoardLayout-ac4f1ce8 .caculatorIcon-afce1bb5 {
  margin-left: 16px
}

.minOrderBoardLayout-cc4775c2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0
}

.minOrderBoardLayout-cc4775c2 .caculatorIcon-afce1bb5 {
  margin-left: auto
}

.minOrderBoardLayout-cc4775c2 .coupon-a104d6bc .label-aa39ea36 {
  margin-right: auto
}

.label-aa39ea36 {
  color: var(--dexc-dark-secondary-font-color)
}

.label-aa39ea36,
.value-f25aea77 {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.value-f25aea77 {
  color: var(--dex-primary-font-color)
}

.toolTip-c32d5027 .dex-tooltip-inner {
  max-width: unset
}

.container-fd89d0ae {
  display: flex;
  flex-direction: column;
  padding: 2px
}

.container-fd89d0ae .swap-d21e0a0e {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  font-size: 12px
}

.container-fd89d0ae .swap-d21e0a0e>.divider-a57d999a {
  border: none;
  border-right: 1px dashed var(--dex-base-border-color);
  margin: 0 12px;
  width: 0
}

.container-fd89d0ae .swap-d21e0a0e .item-bf4efe69 {
  display: flex;
  flex-direction: column;
  line-height: 18px
}

.container-fd89d0ae .swap-d21e0a0e .item-bf4efe69 p div:last-child {
  color: var(--dex-primary-font-color);
  font-size: 14px;
  font-weight: 500
}

.container-fd89d0ae .swap-d21e0a0e .item-bf4efe69 p+p {
  margin-top: 6px
}

.container-fd89d0ae .futures-fd667247 {
  border: none;
  border-top: 1px dashed var(--dex-common-border-color);
  display: flex;
  margin-top: 6px;
  padding-top: 6px
}

.tradeFee-d40df24d {
  color: var(--dexc-dark-secondary-font-color);
  cursor: pointer;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px
}

.container-c3de8bf5 {
  background-color: var(--dex-primary-container-bg);
  border-radius: var(--dex-border-radius-mid);
  overflow: hidden;
  width: 320px
}

.container-c3de8bf5 .header-c0cb77e8 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 16px
}

.container-c3de8bf5 .header-c0cb77e8 .title-f8aef4ba {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 16px
}

.container-c3de8bf5 .list-a0880e6a .item-c55bfe88 {
  align-items: center;
  cursor: move;
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  width: 100%
}

.container-c3de8bf5 .list-a0880e6a .item-c55bfe88 .checkbox-f7d79713 .dex-checkbox-label {
  margin-left: 8px
}

.container-c3de8bf5 .footer-e635f95e {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  padding: 16px
}

.container-c3de8bf5 .footer-e635f95e>button {
  flex-grow: 1
}

.handlerIcon-cc406935 {
  background-color: gray;
  cursor: move;
  height: 20px;
  width: 20px
}

.dex-drag-list-item {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none
}

.dex-drag-list-handler {
  cursor: move;
  display: inline-block
}

.dex-circle-plus-icon {
  color: var(--dex-tertiary-font-color)
}

.container-df6c87f8 {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  padding: 16px auto 12px
}

.container-df6c87f8 .item-fe059b49 {
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px
}

.container-df6c87f8 .item-fe059b49.active-b5ad968a {
  color: var(--dex-primary-font-color)
}

.right-a783ff75 {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between
}

.transferProfitRatio-f0f2a923 {
  background-color: var(--dex-primary-color);
  border-radius: 2px;
  color: var(--dex-white);
  font-size: 12px;
  font-weight: 500;
  height: 16px;
  line-height: 16px;
  padding: 0 4px
}

.clearPadding-eb7b6fdd {
  padding: 0 4px !important
}

html[data-dex-theme=dark] .depth-chart-blue {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark.1ab2a88d.svg*/
    url() 50% no-repeat
}

html[data-dex-theme=dark] .depth-chart-white {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white.7141dee9.svg*/
    url() 50% no-repeat
}

html[data-dex-theme=dark][lang^=zh] .depth-chart-blue {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-cn.593ab0d4.svg*/
    url() 50% no-repeat
}

html[data-dex-theme=dark][lang^=zh] .depth-chart-white {
  background:
    /*savepage-url=https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white-cn.593ab0d4.svg*/
    url() 50% no-repeat
}

.quickOrder-a0ebf8dc {
  border: 1px solid var(--dexc-base-border-color) !important;
  border-radius: 8px
}

.priceLabel-cf9c270d {
  align-items: center;
  border: none;
  color: var(--dexc-pure-black-color);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  justify-content: center;
  min-width: 106px;
  padding: 6px 0
}

.priceLabel-cf9c270d.buy-eee98615,
.priceLabel-cf9c270d.buy-eee98615:hover {
  background-color: var(--up-color)
}

.priceLabel-cf9c270d.sell-f51a02c4,
.priceLabel-cf9c270d.sell-f51a02c4:hover {
  background-color: var(--down-color)
}

.input-c77002c2 {
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: 12px;
  height: unset;
  line-height: 12px;
  margin: 0;
  padding: 0;
  text-align: center
}

.ChartContainer-bad247d1 {
  position: relative
}

.ChartContainer-bad247d1 .dex-mc-basic-kline,
.ChartContainer-bad247d1 .dex-mc-kline-chart {
  height: calc(100% - 28px)
}

.ChartContainer-bad247d1 .dex-mc-basic-kline-internal-contract-selector-enable {
  height: calc(100% - 58px)
}

.ChartContainer-bad247d1 .dex-mc-pro-kline {
  height: calc(100% - 28px)
}

.ChartContainer-bad247d1 .dex-mc-pro-kline-internal-contract-selector-enable {
  height: calc(100% - 58px)
}

.ChartContainer-bad247d1 .dex-tabs-content-holder {
  height: calc(100% - 40px)
}

.ChartContainer-bad247d1 .dex-tabs-content {
  height: 100%
}

.ChartContainer-bad247d1 .dex-tabs-tabpane {
  height: 100%;
  overflow-y: auto
}

.ChartContainer-bad247d1 .dex-tabs-tabpane::-webkit-scrollbar {
  height: 6px;
  width: 4px
}

.ChartContainer-bad247d1 .dex-tabs-tabpane::-webkit-scrollbar-track {
  background: transparent
}

.ChartContainer-bad247d1 .dex-tabs-tabpane::-webkit-scrollbar-thumb {
  background: var(--dexc-trade-input-disabled-bg);
  border-radius: 3px
}

.ChartContainer-bad247d1 .dex-tabs-nav {
  padding-left: 16px
}

.ChartContainer-bad247d1 .dex-tabs-nav-wrap {
  flex: none
}

.hbTabsNavData-db1eda81 {
  color: var(--dex-secondary-font-color);
  font-size: 16px;
  font-weight: 500
}

.hbTabsNavData-db1eda81:hover {
  color: var(--dexc-primary-font-color)
}

.CurrencyInfoWraper-be9d17f3 {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 80px;
  justify-content: flex-start;
  padding: 16px
}

.CurrencyInfoWraper-be9d17f3 .dex-token-symbol {
  border: none
}

.CurrencyInfoWraper-be9d17f3 li {
  flex: 1 1;
  min-width: 400px;
  width: 50%
}

.CurrencyInfoWraper-be9d17f3 .header-c4dfb9ae {
  align-items: center;
  color: var(--dexc-tertiary-font-color);
  display: flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  gap: 8px;
  justify-content: flex-start;
  line-height: 24px
}

.CurrencyInfoWraper-be9d17f3 .header-c4dfb9ae strong {
  color: var(--dexc-primary-font-color);
  font-family: HDC Sparkle;
  font-size: 18px;
  font-style: normal;
  line-height: 24px
}

.CurrencyInfoWraper-be9d17f3 .title-c82c3f82 {
  align-items: center;
  color: var(--dexc-primary-font-color);
  display: flex;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  justify-content: space-between;
  line-height: normal;
  margin-bottom: 16px
}

.CurrencyInfoWraper-be9d17f3 .title-c82c3f82 a {
  align-items: center;
  color: var(--dexc-tertiary-font-color);
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  justify-content: flex-start;
  line-height: normal
}

.CurrencyInfoWraper-be9d17f3 .linkTo-e08bc596 {
  transform: rotateY(180deg)
}

.CurrencyInfoWraper-be9d17f3 .info-efcd9f18 {
  color: var(--dexc-secondary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
  padding-bottom: 12px
}

.CurrencyInfoWraper-be9d17f3 .info-efcd9f18 .dex-button-text:not(:disabled):hover {
  color: var(--dex-primary-font-color)
}

.CurrencyInfoWraper-be9d17f3 .ellipsis-fd99d3b1 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden
}

.CurrencyInfoWraper-be9d17f3 dl {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 12px
}

.CurrencyInfoWraper-be9d17f3 dl dt {
  color: var(--dexc-tertiary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px
}

.CurrencyInfoWraper-be9d17f3 dl dt .dex-tip-text {
  font-size: 14px;
  line-height: 20px
}

.CurrencyInfoWraper-be9d17f3 dl dd {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  text-align: right
}

.CurrencyInfoWraper-be9d17f3 dl dd a {
  align-items: center;
  color: var(--dexc-primary-font-color);
  display: flex;
  justify-content: flex-start
}

.CurrencyInfoWraper-be9d17f3 dl dd .small-a8334c12 {
  color: var(--dexc-tertiary-font-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal
}

.CurrencyInfoWraper-be9d17f3 .tableBox-f035cc6f {
  align-items: flex-end;
  border: 1px solid var(--dexc-trade-input-disabled-bg);
  border-radius: 12px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 12px 16px
}

.CurrencyInfoWraper-be9d17f3 .tableBox-f035cc6f>div {
  text-align: center;
  width: 33%
}

.CurrencyInfoWraper-be9d17f3 .tableBox-f035cc6f>div p {
  color: var(--dexc-tertiary-font-color);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 4px
}

.CurrencyInfoWraper-be9d17f3 .tableBox-f035cc6f>div h3 {
  align-items: center;
  display: flex;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  gap: 4px;
  justify-content: center;
  line-height: 22px
}

.CurrencyInfoWraper-be9d17f3 .tableBox-f035cc6f>div strong {
  color: var(--dexc-primary-font-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  text-align: center
}

.CurrencyInfoWraper-be9d17f3 .small-a8334c12 {
  align-items: center;
  color: var(--dexc-tertiary-font-color);
  display: flex;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  justify-content: flex-start;
  line-height: 16px
}

.CurrencyInfoWraper-be9d17f3 .dex-tag-mid {
  padding: 2px;
  text-align: center;
  width: 34px
}

.CurrencyInfoWraper-be9d17f3 .aaa-cd52f11e {
  color: var(--dexc-success-color)
}

.CurrencyInfoWraper-be9d17f3 .aaa-cd52f11e .dex-tag {
  background: rgba(117, 209, 42, .1);
  color: var(--dexc-success-color)
}

.CurrencyInfoWraper-be9d17f3 .aa-ca896f90 {
  color: var(--dexc-success-color)
}

.CurrencyInfoWraper-be9d17f3 .aa-ca896f90 .dex-tag {
  background: rgba(117, 209, 42, .1);
  color: var(--dexc-success-color)
}

.CurrencyInfoWraper-be9d17f3 .c-ff3b2eb2 {
  color: var(--dexc-warning-color)
}

.CurrencyInfoWraper-be9d17f3 .c-ff3b2eb2 .dex-tag {
  background: rgba(255, 164, 53, .1);
  color: var(--dexc-warning-color)
}

.CurrencyInfoWraper-be9d17f3 .bb-a7e95b96 {
  color: var(--dexc-warning-color)
}

.CurrencyInfoWraper-be9d17f3 .bb-a7e95b96 .dex-tag {
  background: rgba(255, 164, 53, .1);
  color: var(--dexc-warning-color)
}

.CurrencyInfoWraper-be9d17f3 .d-e1023b04 {
  color: var(--dexc-error-color)
}

.CurrencyInfoWraper-be9d17f3 .d-e1023b04 .dex-tag {
  background: rgba(255, 74, 138, .1);
  color: var(--dexc-error-color)
}

.CurrencyInfoWraper-be9d17f3 .linkWraper-ae06cad4,
.CurrencyInfoWraper-be9d17f3 .socicalIconWraper-abfcd227 {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: flex-start
}

.CurrencyInfoWraper-be9d17f3 .linkWraper-ae06cad4 a {
  align-items: center;
  border: 1px solid var(--dexc-trade-input-disabled-bg);
  border-radius: 999px;
  color: var(--dexc-primary-font-color);
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  line-height: 20px;
  padding: 8px 12px
}

.CurrencyInfoWraper-be9d17f3 .linkWraper-ae06cad4 a:hover {
  background-color: var(--dexc-trade-component-bg-color)
}

.CurrencyInfoWraper-be9d17f3 .socicalIcon-e5af64a7 svg {
  height: 30px;
  width: 30px
}

/* --- Extracted <style> block #3 --- */
.switch-small .switch-bg {
  border-radius: 16px;
  height: 16px;
  padding: 0 2px;
  width: 30px
}

.switch-small .switch-bg.switch-active-bg:before {
  transform: translateX(13px)
}

.switch-small .switch-bg:before {
  border-radius: 50%;
  content: "";
  height: 12px;
  left: 3px;
  position: absolute;
  top: 2px;
  transition: transform .3s;
  width: 12px;
  z-index: 10
}

.switch-small .switch-bg .switch-icon {
  transform: scale(.5);
  z-index: 1
}

.switch-normal .switch-bg {
  border-radius: 21px;
  height: 21px;
  padding: 0 2px;
  width: 40px
}

.switch-normal .switch-bg.switch-active-bg:before {
  transform: translateX(19px)
}

.switch-normal .switch-bg:before {
  border-radius: 50%;
  content: "";
  height: 17px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 17px;
  z-index: 10
}

.switch-normal .switch-bg:not(.disabled-ani):before {
  transition: transform .3s
}

.switch-normal .switch-icon {
  transform: scale(.6);
  z-index: 1
}

.switch-large .switch-bg {
  border-radius: 31px;
  height: 31px;
  padding: 0 2px;
  width: 60px
}

.switch-large .switch-bg.switch-active-bg:before {
  transform: translateX(29px)
}

.switch-large .switch-bg:before {
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 27px;
  left: 2px;
  position: absolute;
  top: 2px;
  transition: transform .3s;
  width: 27px
}

.switch-large .switch-icon {
  transform: scale(.8);
  z-index: 1
}

.switch-root-white {
  cursor: pointer;
  position: relative
}

.switch-root-white .switch-bg {
  align-items: center;
  background: #ccd2da;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  transition: background .2s ease-in
}

.switch-root-white .switch-bg.switch-active-bg {
  background: var(--dexc-white-primary-color)
}

.switch-root-white .switch-bg.switch-active-bg:before {
  background: #fff
}

.switch-root-white .switch-bg.disabled {
  cursor: not-allowed
}

.switch-root-white .switch-bg:before {
  background: #fff
}

.switch-root-white .switch-bg .switch-icon {
  color: #fff;
  pointer-events: none
}

.switch-root-blue {
  cursor: pointer;
  position: relative
}

.switch-root-blue .switch-bg {
  align-items: center;
  background: #30353e;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  transition: background .2s ease-in
}

.switch-root-blue .switch-bg.switch-active-bg {
  background: var(--dexc-dark-primary-color)
}

.switch-root-blue .switch-bg.switch-active-bg:before {
  background: #fff
}

.switch-root-blue .switch-bg.disabled {
  cursor: not-allowed
}

.switch-root-blue .switch-bg:before {
  background: var(--dexc-trade-primary-container-bg)
}

.switch-root-blue .switch-bg .switch-icon {
  color: #fff;
  pointer-events: none
}

.switch-root-black {
  cursor: pointer;
  position: relative
}

.switch-root-black .switch-bg {
  align-items: center;
  background: #3f4254;
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  transition: background .2s ease-in
}

.switch-root-black .switch-bg.switch-active-bg {
  background: var(--dexc-dark-primary-color)
}

.switch-root-black .switch-bg.switch-active-bg:before {
  background: #fff
}

.switch-root-black .switch-bg.disabled {
  cursor: not-allowed
}

.switch-root-black .switch-bg:before {
  background: #1f2126
}

.switch-root-black .switch-bg .switch-icon {
  color: #fff;
  pointer-events: none
}

.root-blue .switch-bg {
  background: #434954
}

.root-blue .switch-bg .switch-icon {
  color: #13161e
}

.root-blue .switch-bg.switch-active-bg:before,
.root-blue .switch-bg:before {
  background: #13161e
}

.select-body-wrap-modal-wrapper-white,
.select-white {
  border: 1px solid #ccd2da;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  outline: none;
  position: relative
}

.select-body-wrap-modal-wrapper-white.select-outer-wrap.disabled,
.select-white.select-outer-wrap.disabled {
  color: #8a8a8e;
  cursor: not-allowed
}

.select-body-wrap-modal-wrapper-white .select-value-input-wrapped,
.select-white .select-value-input-wrapped {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  position: relative
}

.select-body-wrap-modal-wrapper-white .select-value-input-wrapped input,
.select-white .select-value-input-wrapped input {
  background-color: transparent;
  border: none;
  color: #000;
  padding-left: 28px;
  padding-right: 10px;
  width: 100%
}

.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .icon-search,
.select-white .select-value-input-wrapped .icon-search {
  bottom: 0;
  color: #9ca9b5;
  font-size: 14px;
  height: 100%;
  height: 14px;
  margin: auto;
  max-height: 100%;
  padding-left: 10px;
  position: absolute;
  top: -2px
}

.select-body-wrap-modal-wrapper-white .select-value-box,
.select-white .select-value-box {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 20px;
  position: relative
}

.select-body-wrap-modal-wrapper-white .select-value-box.disabled,
.select-white .select-value-box.disabled {
  color: #8a8a8e
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-value,
.select-white .select-value-box .select-value {
  display: inline-block;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap
}

.select-body-wrap-modal-wrapper-white .select-value-box-title,
.select-white .select-value-box-title {
  margin-right: 12px
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-arrow,
.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .select-arrow,
.select-white .select-value-box .select-arrow,
.select-white .select-value-input-wrapped .select-arrow {
  border: 2px solid #8a8a8e !important;
  border-left: none !important;
  border-top: none !important;
  bottom: 0;
  display: inline-block;
  height: 6px;
  margin: auto;
  position: absolute;
  right: 10px;
  top: -4px;
  transform: rotate(45deg);
  width: 6px
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-arrow-rotate,
.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .select-arrow-rotate,
.select-white .select-value-box .select-arrow-rotate,
.select-white .select-value-input-wrapped .select-arrow-rotate {
  animation: common-arrow-rotate-reset .2s ease-out forwards
}

.select-body-wrap-modal-wrapper-white .select-value-box .select-arrow-rotate-reset,
.select-body-wrap-modal-wrapper-white .select-value-input-wrapped .select-arrow-rotate-reset,
.select-white .select-value-box .select-arrow-rotate-reset,
.select-white .select-value-input-wrapped .select-arrow-rotate-reset {
  animation: common-arrow-rotate .2s ease-out forwards
}

.select-body-wrap-modal-wrapper-white .select-list,
.select-white .select-list {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
  display: none;
  min-width: 100%;
  overflow: auto;
  position: absolute;
  top: calc(100% + 1px);
  width: auto;
  z-index: 11
}

.select-body-wrap-modal-wrapper-white .select-list.select-list-with-children,
.select-white .select-list.select-list-with-children {
  overflow: auto
}

.select-body-wrap-modal-wrapper-white .select-list li,
.select-white .select-list li {
  color: #000;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  text-align: left;
  width: auto
}

.select-body-wrap-modal-wrapper-white .select-list li .select-arrow,
.select-white .select-list li .select-arrow {
  border: 2px solid #8a8a8e !important;
  border-left: none !important;
  border-top: none !important;
  display: inline-block;
  height: 6px;
  position: absolute;
  right: 10px;
  top: calc(50% - 3px);
  transform: rotate(-45deg);
  width: 6px
}

.select-body-wrap-modal-wrapper-white .select-list li span:last-child,
.select-white .select-list li span:last-child {
  float: right;
  margin-right: 20px
}

.select-body-wrap-modal-wrapper-white .select-list li span:first-child,
.select-white .select-list li span:first-child {
  float: none;
  margin-right: 0
}

.select-body-wrap-modal-wrapper-white .select-list li:hover,
.select-white .select-list li:hover {
  background-color: #f8fafd;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap,
.select-white .select-list .children-select-list-wrap {
  z-index: 31
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap li,
.select-white .select-list .children-select-list-wrap li {
  min-width: 120px;
  padding-right: 20px
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list,
.select-white .select-list .children-select-list-wrap .children-select-list {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
  left: 100%;
  max-height: 194px;
  overflow: auto;
  position: absolute;
  top: 0;
  width: auto
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap {
  position: relative
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask {
  background: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search {
  bottom: 0;
  color: #9ca9b5;
  font-size: 14px;
  height: 100%;
  height: 14px;
  margin: auto;
  max-height: 100%;
  padding-left: 10px;
  position: absolute;
  top: 0
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input {
  border: none;
  border-radius: 4px;
  line-height: 30px;
  padding: 0 10px 0 30px;
  width: 100%
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder {
  color: #8a8a8e
}

.select-body-wrap-modal-wrapper-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder,
.select-white .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder {
  color: #8a8a8e
}

.select-body-wrap-modal-wrapper-white .select-list-click,
.select-white .select-list-click {
  animation: common-click-show .2s ease-out forwards;
  display: block
}

.select-body-wrap-modal-wrapper-white .select-hover-click,
.select-white .select-hover-click {
  animation: common-hover-show .3s ease-out forwards;
  display: block
}

.select-body-wrap-modal-wrapper-white {
  border: none
}

.select-blue,
.select-body-wrap-modal-wrapper-blue {
  border: 1px solid #30353e;
  color: #f9f9f9;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  outline: none;
  position: relative
}

.select-blue.select-outer-wrap.disabled,
.select-body-wrap-modal-wrapper-blue.select-outer-wrap.disabled {
  color: #8a8a8e;
  cursor: not-allowed
}

.select-blue .select-value-input-wrapped,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  position: relative
}

.select-blue .select-value-input-wrapped input,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped input {
  background-color: transparent;
  border: none;
  color: #f9f9f9;
  padding-left: 28px;
  padding-right: 10px;
  width: 100%
}

.select-blue .select-value-input-wrapped .icon-search,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .icon-search {
  bottom: 0;
  color: #9ca9b5;
  font-size: 14px;
  height: 100%;
  height: 14px;
  margin: auto;
  max-height: 100%;
  padding-left: 10px;
  position: absolute;
  top: -2px
}

.select-blue .select-value-box,
.select-body-wrap-modal-wrapper-blue .select-value-box {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 20px;
  position: relative
}

.select-blue .select-value-box.disabled,
.select-body-wrap-modal-wrapper-blue .select-value-box.disabled {
  color: #8a8a8e
}

.select-blue .select-value-box .select-value,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-value {
  display: inline-block;
  overflow: hidden;
  pointer-events: none;
  text-overflow: ellipsis;
  white-space: nowrap
}

.select-blue .select-value-box-title,
.select-body-wrap-modal-wrapper-blue .select-value-box-title {
  margin-right: 12px
}

.select-blue .select-value-box .select-arrow,
.select-blue .select-value-input-wrapped .select-arrow,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-arrow,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .select-arrow {
  border: 2px solid #8a8a8e !important;
  border-left: none !important;
  border-top: none !important;
  bottom: 0;
  display: inline-block;
  height: 6px;
  margin: auto;
  position: absolute;
  right: 10px;
  top: -4px;
  transform: rotate(45deg);
  width: 6px
}

.select-blue .select-value-box .select-arrow-rotate,
.select-blue .select-value-input-wrapped .select-arrow-rotate,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-arrow-rotate,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .select-arrow-rotate {
  animation: common-arrow-rotate-reset .2s ease-out forwards
}

.select-blue .select-value-box .select-arrow-rotate-reset,
.select-blue .select-value-input-wrapped .select-arrow-rotate-reset,
.select-body-wrap-modal-wrapper-blue .select-value-box .select-arrow-rotate-reset,
.select-body-wrap-modal-wrapper-blue .select-value-input-wrapped .select-arrow-rotate-reset {
  animation: common-arrow-rotate .2s ease-out forwards
}

.select-blue .select-list,
.select-body-wrap-modal-wrapper-blue .select-list {
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
  display: none;
  min-width: 100%;
  overflow: auto;
  position: absolute;
  top: calc(100% + 1px);
  width: auto;
  z-index: 11
}

.select-blue .select-list.select-list-with-children,
.select-body-wrap-modal-wrapper-blue .select-list.select-list-with-children {
  overflow: auto
}

.select-blue .select-list li,
.select-body-wrap-modal-wrapper-blue .select-list li {
  color: #f9f9f9;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
  text-align: left;
  width: auto
}

.select-blue .select-list li .select-arrow,
.select-body-wrap-modal-wrapper-blue .select-list li .select-arrow {
  border: 2px solid #8a8a8e !important;
  border-left: none !important;
  border-top: none !important;
  display: inline-block;
  height: 6px;
  position: absolute;
  right: 10px;
  top: calc(50% - 3px);
  transform: rotate(-45deg);
  width: 6px
}

.select-blue .select-list li span:last-child,
.select-body-wrap-modal-wrapper-blue .select-list li span:last-child {
  float: right;
  margin-right: 20px
}

.select-blue .select-list li span:first-child,
.select-body-wrap-modal-wrapper-blue .select-list li span:first-child {
  float: none;
  margin-right: 0
}

.select-blue .select-list li:hover,
.select-body-wrap-modal-wrapper-blue .select-list li:hover {
  background-color: #0f121f;
  color: var(--dexc-dark-primary-color);
  transition: color .2s ease-in-out
}

.select-blue .select-list .children-select-list-wrap,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap {
  z-index: 31
}

.select-blue .select-list .children-select-list-wrap li,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap li {
  min-width: 120px;
  padding-right: 20px
}

.select-blue .select-list .children-select-list-wrap .children-select-list,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list {
  background-color: var(--dexc-trade-primary-container-bg);
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
  left: 100%;
  max-height: 194px;
  overflow: auto;
  position: absolute;
  top: 0;
  width: auto
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap {
  position: relative
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-mask {
  background: transparent;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .icon-search {
  bottom: 0;
  color: #9ca9b5;
  font-size: 14px;
  height: 100%;
  height: 14px;
  margin: auto;
  max-height: 100%;
  padding-left: 10px;
  position: absolute;
  top: 0
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input {
  border: none;
  border-radius: 4px;
  line-height: 30px;
  padding: 0 10px 0 30px;
  width: 100%
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::-moz-placeholder {
  color: #8a8a8e
}

.select-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder,
.select-body-wrap-modal-wrapper-blue .select-list .children-select-list-wrap .children-select-list .children-filter-wrap .children-filter-input::placeholder {
  color: #8a8a8e
}

.select-blue .select-list-click,
.select-body-wrap-modal-wrapper-blue .select-list-click {
  animation: common-click-show .2s ease-out forwards;
  display: block
}

.select-blue .select-hover-click,
.select-body-wrap-modal-wrapper-blue .select-hover-click {
  animation: common-hover-show .3s ease-out forwards;
  display: block
}

.select-body-wrap-modal-wrapper-blue {
  border: none
}

.chart-fullscreen-modal-wrapper .chart-fullscreen-modal {
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 901
}

.chart-fullscreen-modal-wrapper .chart-fullscreen-modal .chart-fullscreen-modal-mask {
  background: rgba(28, 36, 44, .2);
  height: 100%;
  width: 100%
}

.chart-fullscreen-modal-wrapper .chart-fullscreen-modal .chart-fullscreen-modal-chart {
  background: #fff;
  bottom: 0;
  height: 468px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 960px
}

.chart-share-modal-wrapper .chart-share-modal {
  height: 100vh;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 901
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-mask {
  background: rgba(28, 36, 44, .2);
  height: 100%;
  min-height: 1300px;
  width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content-wrapper {
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 16vh;
  width: 490px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content {
  background: #fff;
  color: #fff;
  height: auto;
  padding: 40px 58px 30px;
  width: 490px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .icon-info-close {
  color: #8a8a8e;
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-img {
  min-height: 300px;
  width: 375px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-img img {
  display: block;
  height: 100%;
  width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-loading {
  bottom: 0;
  height: 72px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 72px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-loading img {
  display: block;
  height: 100%;
  width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main {
  background: #246cd2;
  height: auto;
  margin: auto;
  padding: 45px 10px 20px;
  position: relative;
  width: 375px;
  z-index: -100
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-logo {
  height: 34px;
  margin: auto;
  width: 242px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-logo img {
  display: block;
  height: 100%;
  width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-title {
  font-size: 18px;
  margin-top: 40px;
  text-align: center
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-desc {
  display: flex;
  justify-content: center;
  margin-top: 12px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-desc>div {
  margin-right: 30px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-title-wrapper .chart-share-modal-content-main-desc>div:last-child {
  margin-right: 0
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper {
  background: #fff;
  border-radius: 8px;
  margin-top: 28px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-dashed {
  color: #e6ecf2;
  height: 13px;
  left: 0;
  margin: auto;
  overflow: hidden;
  position: relative;
  right: 0;
  top: -10px;
  white-space: nowrap;
  width: 335px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc {
  margin: 0 9px;
  padding-bottom: 18px;
  padding-top: 3px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-date {
  color: #8a8a8e;
  font-size: 12px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-flex {
  color: #000;
  display: flex;
  font-size: 12px;
  margin-top: 6px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-flex>div {
  width: 160px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-chart-wrapper .chart-share-modal-content-main-chart-desc .chart-share-modal-content-main-chart-desc-block {
  color: #000;
  font-size: 12px;
  margin-top: 6px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-main .chart-share-modal-content-main-host {
  margin-top: 20px;
  text-align: center
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 30px
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer>div {
  border: 1px solid #367de1;
  border-radius: 2px;
  cursor: pointer;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 100%
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer .chart-share-modal-content-footer-copy {
  color: #367de1
}

.chart-share-modal-wrapper .chart-share-modal .chart-share-modal-content .chart-share-modal-content-footer .chart-share-modal-content-footer-download {
  background: #367de1;
  color: #fff
}

.hbdm-daterange-picker {
  color: #000;
  margin-right: 20px;
  position: relative
}

.hbdm-daterange-picker .daterange-picker-mask {
  background: #fff;
  border: 1px solid #ccd2da;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  font-size: 12px;
  height: 30px;
  justify-content: space-around;
  left: 0;
  line-height: 28px;
  min-width: 230px;
  padding: 0 20px;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: 1
}

.hbdm-daterange-picker .daterange-picker-mask>div {
  white-space: nowrap
}

.hbdm-daterange-picker .range-picker-hidden-icon .react-daterange-picker__clear-button {
  display: none
}

.hbdm-daterange-picker .react-daterange-picker__wrapper {
  border: 1px solid #ccd2da;
  border-radius: 2px;
  cursor: pointer;
  min-width: 230px;
  padding: 0 10px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__range-divider {
  display: block;
  line-height: 28px;
  padding: 0 10px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup {
  display: flex;
  font-size: 12px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup>input {
  color: #000;
  cursor: pointer;
  line-height: 28px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup>.react-daterange-picker__inputGroup__leadingZero {
  color: #000;
  line-height: 28px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper>.react-daterange-picker__inputGroup>.react-date-picker__inputGroup__divider {
  display: block;
  height: 100%;
  line-height: 28px
}

.hbdm-daterange-picker .react-daterange-picker__wrapper .react-daterange-picker__calendar-button {
  display: none
}

.hbdm-daterange-picker .react-calendar {
  border: none;
  border-radius: 4px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .1)
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation {
  border-bottom: 1px solid #ccd2da
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button {
  background-color: transparent;
  font-size: 16px
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button:active,
.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button:hover {
  background-color: transparent;
  color: var(--dexc-white-primary-color)
}

.hbdm-daterange-picker .react-calendar>.react-calendar__navigation>button[disabled] {
  background-color: transparent;
  color: #8a8a8e;
  cursor: not-allowed
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer {
  padding: 0 10px 10px
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__weekdays .react-calendar__month-view__weekdays__weekday abbr {
  color: #000;
  font-weight: 400;
  line-height: 30px;
  text-decoration: none
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile {
  margin-bottom: 5px solid #fff;
  margin-top: 5px solid #fff
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile:hover {
  background: rgba(36, 131, 255, .05);
  color: #1e242d
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile:disabled,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile:disabled,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile:disabled,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile:disabled {
  background: transparent;
  color: #bbb;
  cursor: not-allowed
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__month-view__days__day--weekend,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__month-view__days__day--weekend,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__month-view__days__day--weekend,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__month-view__days__day--weekend {
  color: #1e242d
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--now,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--now,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--now,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--active,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--now {
  background: rgba(36, 131, 255, .05);
  color: var(--dexc-primary-color)
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeStart,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeStart,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeStart,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--hasActive,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeEnd,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeStart {
  background: var(--dexc-primary-color);
  border-radius: 3px;
  color: #fff
}

.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__century-view__decades .react-calendar__tile--rangeStart:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__decade-view__years .react-calendar__tile--rangeStart:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__month-view__days .react-calendar__tile--rangeStart:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--hasActive:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeEnd:hover,
.hbdm-daterange-picker .react-calendar>.react-calendar__viewContainer .react-calendar__year-view__months .react-calendar__tile--rangeStart:hover {
  background: var(--dexc-primary-color);
  color: #fff
}

.tooltip-hover.tooltop-show-hover:hover .tooltip-inner {
  display: block
}

.tooltip-white {
  display: inline-block
}

.tooltip-white .tooltip-inner-wrap {
  position: relative;
  width: 100%
}

.tooltip-white .tooltip-inner {
  bottom: 24px;
  display: none;
  position: absolute;
  text-align: center;
  width: 340px;
  z-index: 21
}

.tooltip-white .tooltip-inner.tooltip-inner-error {
  display: block
}

.tooltip-white .tooltip-inner .tooltip-text {
  color: #000;
  display: inline-block;
  font-size: 12px;
  word-wrap: break-word;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  font-style: normal;
  padding: 10px;
  text-align: left;
  width: auto
}

.tooltip-white .tooltip-inner .tooltip-arrow {
  background-color: transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  bottom: -5px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  display: inline-block;
  position: absolute
}

.tooltip-white .tooltip-inner-left {
  left: -10px;
  text-align: left
}

.tooltip-white .tooltip-inner-left .tooltip-arrow {
  left: 20px
}

.tooltip-white .tooltip-inner-center {
  left: calc(-170px + 50%);
  text-align: center
}

.tooltip-white .tooltip-inner-center .tooltip-arrow {
  left: calc(50% - 5px)
}

.tooltip-white .tooltip-inner-right {
  right: -10px;
  text-align: right
}

.tooltip-white .tooltip-inner-right .tooltip-arrow {
  right: 20px
}

.tooltip-blue {
  display: inline-block
}

.tooltip-blue .tooltip-inner-wrap {
  position: relative;
  width: 100%
}

.tooltip-blue .tooltip-inner {
  bottom: 24px;
  display: none;
  position: absolute;
  text-align: center;
  width: 340px;
  z-index: 21
}

.tooltip-blue .tooltip-inner.tooltip-inner-error {
  display: block
}

.tooltip-blue .tooltip-inner .tooltip-text {
  color: #f9f9f9;
  display: inline-block;
  font-size: 12px;
  word-wrap: break-word;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  font-style: normal;
  padding: 10px;
  text-align: left;
  width: auto
}

.tooltip-blue .tooltip-inner .tooltip-arrow {
  background-color: transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  bottom: -5px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  display: inline-block;
  position: absolute
}

.tooltip-blue .tooltip-inner-left {
  left: -10px;
  text-align: left
}

.tooltip-blue .tooltip-inner-left .tooltip-arrow {
  left: 20px
}

.tooltip-blue .tooltip-inner-center {
  left: calc(-170px + 50%);
  text-align: center
}

.tooltip-blue .tooltip-inner-center .tooltip-arrow {
  left: calc(50% - 5px)
}

.tooltip-blue .tooltip-inner-right {
  right: -10px;
  text-align: right
}

.tooltip-blue .tooltip-inner-right .tooltip-arrow {
  right: 20px
}

.tooltip-black {
  display: inline-block
}

.tooltip-black .tooltip-inner-wrap {
  position: relative;
  width: 100%
}

.tooltip-black .tooltip-inner {
  bottom: 24px;
  display: none;
  position: absolute;
  text-align: center;
  width: 340px;
  z-index: 21
}

.tooltip-black .tooltip-inner.tooltip-inner-error {
  display: block
}

.tooltip-black .tooltip-inner .tooltip-text {
  color: #d5def2;
  display: inline-block;
  font-size: 12px;
  word-wrap: break-word;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  font-style: normal;
  padding: 10px;
  text-align: left;
  width: auto
}

.tooltip-black .tooltip-inner .tooltip-arrow {
  background-color: transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  bottom: -5px;
  box-shadow: 0 10px 20px 0 rgba(28, 36, 44, .1);
  display: inline-block;
  position: absolute
}

.tooltip-black .tooltip-inner-left {
  left: -10px;
  text-align: left
}

.tooltip-black .tooltip-inner-left .tooltip-arrow {
  left: 20px
}

.tooltip-black .tooltip-inner-center {
  left: calc(-170px + 50%);
  text-align: center
}

.tooltip-black .tooltip-inner-center .tooltip-arrow {
  left: calc(50% - 5px)
}

.tooltip-black .tooltip-inner-right {
  right: -10px;
  text-align: right
}

.tooltip-black .tooltip-inner-right .tooltip-arrow {
  right: 20px
}

.sub-wrap-with-side-bar {
  background: #f3f3f3;
  flex: 1 1
}

.sub-wrap-with-side-bar .side-bar {
  background-color: #fff;
  margin-right: 8px;
  min-width: 224px;
  width: 224px
}

.sub-wrap-with-side-bar .side-bar .side-bar-title {
  align-items: center;
  color: var(--dexc-white-primary-font-color);
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  line-height: 16px;
  padding: 31px 0 27px;
  position: relative;
  text-align: center
}

.sub-wrap-with-side-bar .side-bar .side-bar-title img {
  left: 50px;
  position: absolute;
  top: 31px
}

.sub-wrap-with-side-bar .side-bar .side-bar-content .side-bar-item {
  align-items: center;
  color: var(--dexc-white-primary-font-color);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  justify-content: center;
  line-height: 16px;
  padding: 14px 0;
  text-align: center
}

.sub-wrap-with-side-bar .side-bar .side-bar-content .selected {
  background: #f9f9f9;
  color: var(--dexc-white-primary-color)
}

.sub-wrap-with-side-bar .main-content {
  display: flex;
  flex: 1 1
}

.sub-wrap-with-side-bar .main-content .main-wrap {
  background-color: #fff;
  border-radius: 8px;
  flex: 1 1;
  margin: 8px 8px 8px 0;
  padding-left: 16px;
  padding-right: 16px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new {
  background: #fff;
  border-bottom: 1px solid #f3f3f3;
  border-radius: 8px 8px 0 0;
  padding-top: 32px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content {
  color: #fff;
  margin: auto;
  position: relative;
  width: 100%
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title {
  align-items: center;
  display: flex;
  padding-bottom: 30px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title .main-title-text {
  color: #575759;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title .sub-title-text {
  color: var(--dexc-white-primary-font-color);
  font-size: 24px;
  font-weight: 500;
  line-height: 34px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-title .title-between-line {
  margin: 0 6px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap {
  display: flex
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap .btn-selected {
  border-bottom-color: var(--dexc-white-primary-color);
  color: var(--dexc-white-primary-font-color)
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap a {
  background: transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: #909090;
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-right: 24px;
  padding-bottom: 16px
}

.sub-wrap-with-side-bar .main-content .main-wrap .sub-wrap-new .sub-wrap-content .sub-wrap-content-btn-wrap a span {
  display: inline-block;
  font-weight: 500;
  height: 14px;
  line-height: 10px
}

.pagination.pagination-root {
  font-size: 12px
}

.pagination.pagination-root .pagination-input {
  background: transparent;
  font-size: 12px;
  height: 20px;
  margin: 0 6px;
  padding-left: 5px;
  padding-right: 5px;
  width: 40px
}

.pagination.pagination-root .pagination-button {
  background-color: transparent;
  font-size: 12px;
  margin-right: 10px
}

.pagination.pagination-root .pagination-arrow {
  background-color: transparent;
  border: 1px solid;
  border-radius: 2px;
  font-size: 12px;
  height: 20px;
  margin-right: 8px;
  width: 20px
}

.pagination.pagination-root .arrow {
  border-bottom: 2px solid #9ca9b5;
  border-left: 2px solid #9ca9b5;
  display: inline-block;
  height: 8px;
  transform-origin: center center;
  width: 8px
}

.pagination.pagination-root .arrow-pre {
  margin-left: 4px;
  transform: rotate(45deg)
}

.pagination.pagination-root .arrow-next {
  margin-right: 4px;
  transform: rotate(-135deg)
}

.pagination.pagination-root .pagination-confirm {
  color: #fff;
  line-height: 20px;
  min-width: 42px;
  padding: 0 8px;
  text-align: center
}

.pagination.pagination-root .pagination-button:disabled {
  cursor: not-allowed
}

.root-white .pagination-confirm:disabled {
  background-color: #ecf1f8 !important;
  color: #8a8a8e
}

.table-no-data {
  align-items: center;
  color: #596a7a;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  height: 400px;
  justify-content: center;
  line-height: 22px;
  overflow: hidden
}

.table-no-data .table-no-data-text {
  color: #8a8a8e;
  margin-top: 10px
}

.multiple-select,
.multiple-select-body-wrap-modal-wrapper {
  border: 1px solid #ccd2da;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  outline: none;
  position: relative
}

.multiple-select-body-wrap-modal-wrapper-value-box,
.multiple-select-value-box {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 20px;
  position: relative
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-value,
.multiple-select-value-box .multiple-select-value {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-arrow,
.multiple-select-value-box .multiple-select-arrow {
  border: 2px solid #8a8a8e !important;
  border-left: none !important;
  border-top: none !important;
  bottom: 0;
  display: inline-block;
  height: 6px;
  margin: auto;
  position: absolute;
  right: 10px;
  top: -4px;
  transform: rotate(45deg);
  width: 6px
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-arrow-rotate,
.multiple-select-value-box .multiple-select-arrow-rotate {
  animation: common-arrow-rotate-reset .2s ease-out forwards
}

.multiple-select-body-wrap-modal-wrapper-value-box .multiple-select-arrow-rotate-reset,
.multiple-select-value-box .multiple-select-arrow-rotate-reset {
  animation: common-arrow-rotate .2s ease-out forwards
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list,
.multiple-select .multiple-select-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(8, 31, 64, .12);
  max-height: 0;
  max-width: 1200px;
  overflow: auto;
  position: absolute;
  top: calc(100% + 1px);
  z-index: 11
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped,
.multiple-select .multiple-select-list-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped {
  display: flex;
  flex-direction: column;
  overflow-x: auto
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped,
.multiple-select .multiple-select-list-wrapped>.top-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.top-wrapped {
  display: flex;
  flex-basis: 1
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li,
.multiple-select .multiple-select-list-wrapped>.top-wrapped li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.top-wrapped li {
  padding-right: 100px;
  width: auto
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li .value,
.multiple-select .multiple-select-list-wrapped>.top-wrapped li .value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.top-wrapped li .value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.top-wrapped li .value {
  flex: initial
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped,
.multiple-select .multiple-select-list-wrapped>.bottom-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.bottom-wrapped {
  display: flex
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list,
.multiple-select .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list {
  border-right: 1px solid #e6ecf2;
  border-top: 1px solid #e6ecf2
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list:last-child,
.multiple-select .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list:last-child,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list-wrapped>.bottom-wrapped>.bottom-list:last-child,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list-wrapped>.bottom-wrapped>.bottom-list:last-child {
  border-right: none
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li,
.multiple-select .multiple-select-list li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 14px;
  min-height: 40px;
  padding-left: 16px;
  padding-right: 16px;
  text-align: left;
  white-space: nowrap;
  width: 100%
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li .icon-checked,
.multiple-select .multiple-select-body-wrap-modal-wrapper-list li .icon-unchecked,
.multiple-select .multiple-select-list li .icon-checked,
.multiple-select .multiple-select-list li .icon-unchecked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li .icon-checked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li .icon-unchecked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li .icon-checked,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li .icon-unchecked {
  font-size: 14px;
  height: 16px;
  margin-right: 8px;
  width: 16px
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li span.value,
.multiple-select .multiple-select-list li span.value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li span.value,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li span.value {
  flex: 1 1
}

.multiple-select .multiple-select-body-wrap-modal-wrapper-list li:hover,
.multiple-select .multiple-select-list li:hover,
.multiple-select-body-wrap-modal-wrapper .multiple-select-body-wrap-modal-wrapper-list li:hover,
.multiple-select-body-wrap-modal-wrapper .multiple-select-list li:hover {
  background-color: #f8fafd;
  color: var(--dexc-white-primary-color);
  transition: color .2s ease-in-out
}

.multiple-select-body-wrap-modal-wrapper-list-click,
.multiple-select-list-click {
  animation: common-click-show .2s ease-out forwards
}

.multiple-select-body-wrap-modal-wrapper-hover-click,
.multiple-select-hover-click {
  animation: common-hover-show .3s ease-out forwards
}

.multiple-select-body-wrap-modal-wrapper {
  border: none
}

.range-root-white {
  background: #fff;
  cursor: pointer;
  height: 14px;
  line-height: 14px
}

.range-root-white .range-content {
  background: var(--dexc-white-primary-color);
  color: #000;
  height: 100%;
  text-indent: 3px
}

.range-root-blue {
  background: var(--dexc-trade-primary-container-bg);
  cursor: pointer;
  height: 14px;
  line-height: 14px
}

.range-root-blue .range-content {
  background: var(--dexc-dark-primary-color);
  color: #f9f9f9;
  height: 100%;
  text-indent: 3px
}

.range-root-black {
  background: #191a1f;
  cursor: pointer;
  height: 14px;
  line-height: 14px
}

.range-root-black .range-content {
  background: var(--dexc-dark-primary-color);
  color: #d5def2;
  height: 100%;
  text-indent: 3px
}

.rectangle-radio {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  white-space: nowrap
}

.rectangle-radio-item-base {
  background-color: #fff;
  border: 1px solid #dfe2e7;
  border-right-width: 0;
  color: #000;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  padding: 5px 15px
}

.rectangle-radio-item-base-selected {
  background-color: var(--dexc-primary-color) !important;
  border-color: var(--dexc-primary-color) !important;
  border-right-width: 1px;
  color: #fff !important
}

.rectangle-radio-item-base-first {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px
}

.rectangle-radio-item-base-last {
  border-bottom-right-radius: 2px;
  border-right-width: 1px;
  border-top-right-radius: 2px
}

.rectangle-radio-clear-border-left {
  border-left-width: 0
}

.rectangle-radio-item-only-one {
  border-radius: 2px;
  border-width: 1px
}

.table-fix-base {
  background-color: #fff;
  position: sticky !important;
  z-index: 1 !important
}

.table-fix-column-wrap {
  flex: 1 1 !important;
  overflow: auto !important;
  position: relative
}

.table-fix-column-wrap td,
.table-fix-column-wrap th {
  padding: 5px;
  white-space: nowrap
}

.table-fix-left-shaow-wrap .table-fix-left-last:after {
  bottom: 0;
  box-shadow: inset 10px 0 8px -8px #00000026;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%);
  width: 30px
}

.table-fix-right-shaow-wrap .table-fix-right-last:before {
  bottom: 0;
  box-shadow: inset -10px 0 8px -8px #00000026;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-100%);
  width: 30px
}

.table-fix-left-right-shaow-wrap .table-fix-left-last:after {
  bottom: 0;
  box-shadow: inset 10px 0 8px -8px #00000026;
  content: "";
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(100%);
  width: 30px
}

.table-fix-left-right-shaow-wrap .table-fix-right-last:before {
  bottom: 0;
  box-shadow: inset -10px 0 8px -8px #00000026;
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-100%);
  width: 30px
}

.container-ed1f670f {
  --table-content-height: calc(var(--container-height) - 92px);
  background-color: var(--dexc-dark-trade-bg);
  height: 100%;
  overflow: hidden
}

.container-ed1f670f .dex-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%
}

.container-ed1f670f .dex-tabs .dex-tabs-content-holder {
  flex: 1 1;
  overflow: auto
}

.container-ed1f670f .dex-tabs .dex-tabs-content-holder .dex-tabs-content,
.container-ed1f670f .dex-tabs .dex-tabs-content-holder .dex-tabs-content .dex-tabs-tabpane {
  height: 100%
}

.container-ed1f670f .dex-table-wrapper {
  --dex-table-bg: var(--dexc-dark-trade-bg);
  --dex-table-thead-bg: var(--dexc-dark-trade-bg);
  --dex-table-expand-row-bg: var(--dexc-dark-trade-bg);
  --dex-table-tbody-cell-padding: 8px 5px;
  --dex-table-thead-cell-padding: 8px 5px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: unset
}

.container-ed1f670f .dex-table-wrapper .dex-spin {
  flex: 1 1
}

.container-ed1f670f .dex-table-wrapper .dex-spin .dex-spin-container {
  height: 100%
}

.container-ed1f670f .dex-table-wrapper .dex-table {
  height: 100%;
  min-height: unset
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container {
  height: 100%
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content {
  height: 100%;
  min-height: var(--table-content-height)
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content thead>tr>th {
  position: sticky;
  top: 0;
  z-index: 3
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content th.dex-table-cell-fix-left,
.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content th.dex-table-cell-fix-right {
  z-index: 4
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-container .dex-table-content .dex-empty {
  min-height: var(--table-content-height)
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-table-cell {
  font-size: 12px !important
}

.container-ed1f670f .dex-table-wrapper .dex-table .dex-button {
  font-size: 12px
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table thead tr>th:first-of-type {
  padding-left: 16px !important
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table thead tr>th:last-of-type {
  padding-right: 16px !important
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table tbody tr>td:first-of-type {
  padding-left: 16px !important
}

.container-ed1f670f .dex-table-wrapper:not(.dex-table-no-data) table tbody tr>td:last-of-type {
  padding-right: 16px !important
}

.trade-page-layout-classic .container-ed1f670f {
  margin-top: 6px
}

.trade-page-layout-classic .container-ed1f670f,
.trade-page-layout-one .container-ed1f670f {
  --container-height: 380px
}

.trade-page-layout-three .container-ed1f670f,
.trade-page-layout-two .container-ed1f670f {
  --container-height: 412px
}

@media only screen and (max-width:1320px) {

  .trade-page-layout-three .container-ed1f670f,
  .trade-page-layout-two .container-ed1f670f {
    margin-top: 6px
  }
}

.extra-d11ff821 {
  align-items: center;
  display: flex;
  gap: 24px;
  padding-left: 10px
}

.tip-b3e729f2 {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 5px
}

.convertedText-ff7032c7 {
  color: var(--dex-secondary-font-color);
  text-align: left;
  white-space: nowrap
}

.alertContainer-b5440dcd {
  position: absolute;
  top: 40px;
  width: 100%;
  z-index: 7
}

.alertContainer-b5440dcd .link-dbedb904 {
  color: var(--dex-primary-color)
}

.empty-c9bc8421 {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 228px !important;
  justify-content: center;
  margin: 0 !important;
  overflow: hidden
}

.notLogin-a7689fe3 {
  color: var(--dex-secondary-font-color);
  font-size: 16px;
  font-weight: 400;
  height: 228px
}

.btn-ccc50bef {
  font-size: 16px !important
}

.positionFormInput-b95945e1 {
  position: relative
}

.positionFormInput-b95945e1 .input-e644bf25 {
  text-align: left
}

.positionFormInput-b95945e1 .label-a2075899 {
  background-color: var(--dex-component-background-color);
  border-radius: 8px;
  cursor: text;
  font-size: 14px;
  height: calc(100% - 2px);
  left: 50%;
  line-height: 20px;
  padding: 4px 12px;
  position: absolute;
  text-align: left;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2px)
}

.overlay-b590578c {
  text-align: left
}

.refreshButton-bd052289 {
  align-items: center;
  display: flex;
  gap: 4px;
  justify-content: flex-start
}

.cnacelAll-cd143def {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr
}

.cnacelAll-cd143def .dex-radio-group-tag {
  background-color: transparent;
  display: contents
}

.cnacelAll-cd143def .dex-radio-group-tag .dex-radio-group-tag-item {
  align-items: center;
  background-color: var(--dex-component-background-color);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  height: 44px;
  justify-content: center;
  line-height: 44px;
  padding: 0 12px;
  transition: all .2s ease
}

.cnacelAll-cd143def .dex-radio-group-tag .dex-radio-group-tag-item.dex-radio-group-tag-item-active {
  background-color: rgba(1, 115, 229, .07);
  color: var(--dexc-primary-color)
}

.cancelAllItem-c7279a34 {
  align-items: center;
  background: var(--dex-common-border-color);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--dex-primary-font-color);
  cursor: pointer;
  display: flex;
  font-size: 16px;
  justify-content: center;
  padding: 15px 0 14px
}

.cancelAllItem-c7279a34.cancelAllItemActive-a31db5fe {
  border: 1px solid var(--dex-primary-font-color)
}

.tableInModal-b4d95805 .dex-table-wrapper {
  --dex-table-tbody-cell-padding: 8px 16px;
  --dex-table-thead-cell-padding: 8px 16px;
  min-height: unset
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table {
  min-height: unset;
  overflow: unset
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-body::-webkit-scrollbar,
.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-content::-webkit-scrollbar {
  border-radius: 4px;
  height: 6px;
  width: 6px
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-body::-webkit-scrollbar-thumb,
.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-content::-webkit-scrollbar-thumb {
  background-color: var(--dex-quaternary-font-color);
  border-radius: 4px
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-body::-webkit-scrollbar-corner,
.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-content::-webkit-scrollbar-corner {
  background: "transparent"
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-table-cell {
  font-size: 12px !important
}

.tableInModal-b4d95805 .dex-table-wrapper .dex-table .dex-table-container .dex-button {
  font-size: 12px
}

/* --- Extracted <style> block #4 --- */
.root-white-green .page-wrap-list.update-20221117 {
  display: flex;
  flex-direction: column
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap {
  display: flex;
  flex: 1 1
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page {
  border: none;
  padding: 0 16px 22px
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .content-box-title {
  background: #fff;
  border: none;
  box-sizing: initial;
  height: auto;
  padding: 16px 0
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .content-box-title .select-condition-wrap :first-child .center-page-select-title,
.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .content-box-title :first-child.select-condition-symbol .center-page-select-title {
  margin-left: 0
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .center-page-table-wrap .table tr th :first-child {
  padding-left: 0
}

.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .center-page-table-wrap .table-head-line th,
.root-white-green .page-wrap-list.update-20221117 .center-page-wrap .center-page .center-page-table-wrap .table-head-two-line th {
  background: #f7f8fa;
  color: #8a8a8e;
  font-size: 12px;
  font-weight: 400;
  line-height: 15px;
  padding-bottom: 7px !important;
  padding-top: 8px !important;
  vertical-align: top
}

.financial-record {
  overflow: hidden;
  padding-top: 0 !important;
  width: 100% !important
}

.financial-record .pagination-wrapper {
  height: unset !important;
  min-height: 48px !important;
  padding: 16px 20px 16px 30px !important
}

.financial-record>.center-page-title {
  background: #1b2945;
  border-top: 1px solid #171c2c;
  height: 82px;
  padding-top: 46px
}

.financial-record>.center-page-title>p.title {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 16px;
  line-height: 20px;
  margin: auto;
  width: 1320px
}

.financial-record>.center-page-title>p.title .assets-info-icon {
  margin-right: 12px
}

.financial-record-content-box {
  border-radius: 2px;
  font-size: 12px;
  width: 1320px
}

.financial-record-content-box .financial-record-trade-type-drop-list-root {
  display: inline-block;
  vertical-align: top;
  width: 50%
}

.financial-record-content-box .financial-record-trade-type-drop-list-root .financial-record-trade-type-drop-list-item {
  height: 32px;
  line-height: 32px;
  text-align: center;
  width: 100%
}

.financial-record-content-box .content-box-title .header-right {
  align-items: center;
  display: flex
}

.financial-record-content-box .content-box-title .header-right .query-button {
  margin-right: 17px
}

.financial-record-content-box .content-box-title .header-right .financial-export-tooltip .tooltip-arrow {
  left: 4px
}

.financial-record-content-box .query-button {
  margin-left: 16px;
  margin-top: unset !important
}

.financial-record-content-box .list-item {
  display: inline-block;
  width: 200px
}

.financial-record-content-box .list-item-time {
  display: inline-block;
  width: 310px
}

.financial-record-content-box .list-sheet-item {
  display: inline-block;
  width: 130px
}

.financial-record-content-box .list-trade-type-item {
  display: inline-block;
  width: 300px
}

.adjust-coe-wrap .center-page-select-title {
  display: inline-block;
  height: 28px;
  line-height: 28px
}

.adjust-coe-wrap .data-center-title {
  align-items: center;
  display: flex
}

.adjust-coe-wrap .data-center-title .right-style {
  margin-right: 10px
}

.adjust-coe-wrap .data-center-title .icon-warn-info {
  font-size: 14px;
  height: 14px
}

.adjust-coe-wrap .data-center-title .tooltip-new {
  margin-top: -2px
}

.order-trade-detail-alert-inner {
  max-width: 1024px
}

.order-trade-detail-alert-inner .order-trade-fail-content {
  align-items: center;
  display: flex;
  font-size: 16px;
  justify-content: left;
  min-height: 40px;
  padding: 0 10px;
  text-align: left;
  width: 480px;
  word-wrap: break-word;
  background: #fff;
  border-color: #f4f4f6
}

.order-trade-detail-alert-inner .alert-title {
  font-weight: 500
}

.order-trade-detail-alert-inner .scroll-style-white::-webkit-scrollbar-track {
  background: transparent
}

.order-trade-detail-alert-inner .scroll-style-white::-webkit-scrollbar {
  width: 6px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content {
  background: rgba(242, 246, 250, .2);
  border: 1px solid #cad7e0;
  border-radius: 2px;
  max-height: 408px;
  overflow: auto
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .fix-first-column {
  background-color: #fbfcfe;
  left: 0;
  min-height: 32px;
  position: sticky
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .fix-first-column-center {
  align-items: center;
  background-color: #fbfcfe;
  display: flex;
  left: 0;
  min-height: 32px;
  position: sticky
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content.scroll-unset {
  overflow: unset
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-table-plan {
  min-width: 1200px;
  position: relative
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-table-limit {
  width: 910px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan {
  display: flex;
  font-size: 12px;
  line-height: 16px;
  margin: 0;
  padding: 8px 0
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .tooltip,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .tooltip {
  line-height: 14px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .text-top,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .text-top {
  padding: 0 3px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit span,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan span {
  display: inline-block;
  vertical-align: top
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item {
  display: inline-block;
  font-size: 12px;
  width: 20.66667%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item:first-child {
  padding-left: 10px;
  width: 28%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item:nth-child(5) {
  width: 28%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item:last-child {
  padding-right: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .item.right {
  text-align: right
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .text-center {
  text-align: center
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-limit .tip-text {
  white-space: nowrap
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item {
  display: inline-block;
  font-size: 12px;
  width: 8.33333%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item:first-child {
  padding-left: 10px;
  width: 150px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .item:last-child {
  padding-right: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-list-title-plan .close-profit {
  width: 30%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box {
  color: #232a4a;
  font-size: 12px;
  max-height: 336px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item {
  padding: 0 3px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit {
  align-items: center;
  display: flex
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit:hover {
  background: #f2f6fa
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit:first-child {
  border-top: 1px solid #cad7e0
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item {
  width: 20.66667%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item:first-child {
  padding-left: 10px;
  width: 28%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item:nth-child(5) {
  width: 28%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .item:last-child {
  padding-right: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-limit .text-center {
  text-align: center
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan {
  align-items: center;
  display: flex;
  min-height: 40px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan:first-child {
  border-top: 1px solid #cad7e0
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item {
  width: 8.33333%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item:first-child {
  padding-left: 10px;
  width: 150px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .item:last-child {
  padding-right: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content .order-trade-detail-alert-list-box .order-trade-detail-list-plan .close-profit {
  width: 30%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst {
  overflow: scroll;
  padding: 20px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-alert-list-box {
  max-height: 200000px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap {
  font-size: 14px;
  text-align: justify;
  width: 480px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-table-limit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-table-plan {
  border: 1px solid #cad7e0;
  overflow: scroll;
  width: auto
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-alert-list-box,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-title-limit {
  width: 600px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-alert-list-box.ru-RU,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-title-limit.ru-RU {
  width: 700px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-alert-list-box.ru-RU .close-profit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .order-trade-detail-list-title-limit.ru-RU .close-profit {
  width: 25%
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .force-detail {
  margin-bottom: 16px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-explain-wrap .force-order {
  margin: 15px 0
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-link-wrap {
  padding-top: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-link-wrap a {
  display: inline-block;
  margin-top: 10px
}

.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-list-title-limit,
.order-trade-detail-alert-inner .order-trade-detail-alert-inner-content-burst .order-trade-detail-list-title-plan {
  line-height: 14px;
  padding: 4px 0
}

.order-trade-detail-alert-inner-warn {
  align-items: center;
  background: rgba(224, 147, 0, .05);
  border: 1px solid rgba(224, 147, 0, .3);
  display: flex;
  margin-top: 16px;
  min-height: 40px;
  padding: 10px 16px
}

.order-trade-detail-alert-inner-warn>i {
  color: var(--dexc-warning-color)
}

.order-trade-detail-alert-inner-warn>p {
  color: #000;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 20px;
  margin-left: 10px
}

@media only screen and (max-width:1023px) {
  .order-trade-detail-alert-inner.alert-inner-plan {
    width: 748px
  }

  .order-trade-detail-alert-inner.alert-inner-plan .order-trade-detail-alert-inner-content {
    overflow-x: scroll
  }
}

.contract-list-box {
  background: var(--dex-contract-list-background);
  border-radius: var(--dex-border-radius-mid);
  display: flex;
  flex-direction: column;
  height: 100%
}

.contract-list-box .contract-blue div.contract-title {
  background: var(--dex-contract-list-background);
  border-bottom: 1px solid var(--dex-component-background-color);
  box-shadow: none
}

.contract-list-box .dex-contract-box {
  display: flex;
  flex: 1 1;
  flex-direction: column
}

.contract-list-box .dex-contract-box .dex-contract-box-contract-list {
  flex: 1 1;
  overflow: auto
}

.contract-list-box.contract-list-box-max-height {
  height: calc(100vh - var(--dex-header-height) - 64px)
}

.container-c37158b6 {
  display: flex;
  gap: 6px;
  height: 100%
}

.container-c37158b6.merged-f8bdd554 {
  background-color: var(--dexc-dark-trade-bg);
  border-radius: var(--dex-border-radius-small);
  display: flex;
  flex-direction: column;
  gap: 0
}

.header-fbb5b184 {
  align-items: center;
  border-bottom: 1px solid var(--dex-common-border-color);
  display: flex;
  gap: 24px;
  height: 40px;
  justify-content: flex-start;
  padding: 0 16px
}

.header-fbb5b184 .headerItem-a1d2d813 {
  color: var(--dex-secondary-font-color);
  cursor: pointer;
  font-size: 14px;
  line-height: 22px;
  padding-bottom: 8px;
  padding-top: 8px
}

.header-fbb5b184 .headerItemActive-e0479ae3 {
  color: var(--dex-primary-font-color);
  position: relative
}

.header-fbb5b184 .headerItemActive-e0479ae3:before {
  background-color: var(--dex-primary-color);
  border-radius: 2px;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  visibility: visible;
  width: 16px
}

.realtimeTransactionBody-e288ec12 {
  height: calc(100% - 72px)
}

.bidaskContainer-d6c4c5a5,
.rtContainer-c9d1dd89 {
  min-width: 280px;
  width: 280px
}

.unitSelect-ff492b54 .dex-select-selector {
  text-align: right
}

.converted-bb74a92e {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-top: 6px;
  text-align: left
}

.container-dfaad1e4 {
  align-items: center;
  display: flex;
  justify-content: space-between;
  width: 100%
}

.container-dfaad1e4>span {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.container-dfaad1e4 .label-b1ba39ab {
  color: var(--dexc-secondary-font-color)
}

.container-dfaad1e4 .value-f250d118 {
  color: var(--dex-primary-font-color);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.container-a09325c6 {
  color: var(--dex-tertiary-font-color);
  font-size: 12px;
  font-weight: 400
}

.triggerPriceClass-e353efc6 {
  font-weight: 400
}

.normal-d78d15bd,
.triggerPriceClass-e353efc6 {
  color: var(--dex-primary-font-color)
}

.up-e6dc6199 {
  color: var(--up-color)
}

.down-e4f1470b {
  color: var(--down-color)
}

.formItemLeft-d6ba421f {
  flex: 1 1
}

.formItemRight-b88a0f32 {
  width: 144px
}

.select-a38b366a {
  width: 100%
}

.input-f3294b6b .dex-input-suffix {
  padding-right: 28px
}

.container-d777b88d {
  display: flex;
  flex-direction: column;
  min-height: 572px
}

.container-d777b88d .submitBtn-ce84de6e {
  margin-bottom: 24px;
  margin-top: auto
}

.container-fcc50ef9 {
  display: flex;
  flex-direction: column;
  min-height: 572px
}

.amountInput-ee1e434c,
.slider-c8a38c37 {
  margin-bottom: 12px
}

.slider-c8a38c37 {
  margin-top: 12px
}

.submitBtn-e00b04ca {
  margin-bottom: 24px;
  margin-top: auto
}

.input-ff6bc008 .dex-input-suffix {
  padding-right: 28px
}

.container-b575bfae {
  display: flex;
  flex-direction: column;
  min-height: 696px
}

.container-b575bfae .dex-form-item {
  margin-bottom: 12px
}

.modalTitle-bb2a569d {
  font-size: 20px;
  font-weight: 500;
  padding: 24px 0
}

.info-b4fdc8af {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px
}

.info-b4fdc8af .infoItem-bffa2966 {
  align-items: flex-start;
  display: flex;
  flex-direction: column
}

.info-b4fdc8af .infoItem-bffa2966>span {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px
}

.info-b4fdc8af .infoItem-bffa2966 .label-bf6aaba5 {
  color: var(--dexc-secondary-font-color)
}

.info-b4fdc8af .infoItem-bffa2966 .value-ad32883d {
  color: var(--dex-primary-font-color);
  margin-top: 6px
}

.tabs-c9211744 {
  flex: 1 1
}

.content-ca22c59c .title-dd90590c {
  color: var(--dex-modal-title-font-color);
  font-size: 20px;
  line-height: 28px;
  padding: 22px 0;
  text-align: left
}

.content-ca22c59c .title-dd90590c>span:last-child {
  margin-left: 8px
}

.content-ca22c59c .title-dd90590c span.buy-fef2859d {
  color: var(--up-color)
}

.content-ca22c59c .title-dd90590c span.sell-a13c5a6c {
  color: var(--down-color)
}

.content-ca22c59c .desc-cc11e87d {
  margin-bottom: 20px
}

.content-ca22c59c .desc-cc11e87d span {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  line-height: 20px
}

.content-ca22c59c .desc-cc11e87d span:nth-child(2n) {
  color: var(--dexc-warning-color)
}

.content-ca22c59c .alert-bd50c68b {
  margin-bottom: 20px
}

.content-ca22c59c .table-f2c1e73f {
  border-bottom: 1px solid var(--dexc-common-border-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 16px;
  padding-top: 16px
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 {
  align-items: center;
  display: flex;
  justify-content: space-between
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .label-eb5d2e81 {
  color: var(--dexc-secondary-font-color);
  font-size: 14px;
  line-height: 20px;
  text-align: left
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .value-f85a2f5d {
  color: var(--dexc-primary-font-color);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: right
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .convertedValue-fefe1a8c {
  color: var(--dexc-secondary-font-color);
  font-size: 12px;
  line-height: 20px;
  text-align: right
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973 .valueContainer-e8e091f5 {
  display: flex;
  flex-direction: column;
  text-align: right
}

.content-ca22c59c .table-f2c1e73f .tableItem-f4173973:last-child {
  margin-bottom: 0
}

.content-ca22c59c .priceProtection-a731dbec {
  border-bottom: 1px solid var(--dexc-common-border-color);
  color: var(--dexc-secondary-font-color);
  padding-bottom: 16px;
  padding-top: 16px
}

.content-ca22c59c .priceProtection-a731dbec .priceProtectStatus-dde8663d {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px
}

.content-ca22c59c .priceProtection-a731dbec .priceProtectStatus-dde8663d .tooltipLabel-a4c5a3a4 {
  border-bottom: 1px dashed var(--dex-secondary-font-color);
  cursor: pointer
}

.content-ca22c59c .warning-af46980d {
  color: var(--dexc-warning-color);
  font-size: 12px;
  margin-top: 20px;
  text-align: left
}

.content-ca22c59c .extra-d16cedf2 {
  margin-top: 12px
}

/* --- Extracted <style> block #5 --- */
:root {
  --media-url-17: url(images/image_07a59f002a7f0d8310e9a399406217daa078ac32.png);
}


#xbonus-modal {
  --x-border: #392e4e;
  --x-bg: #100b18;
  --x-glow: #8400ff33;
  --x-stars: #af51ff;
  --x-text: #f1eefb;
  --x-muted: #c9c2da;
  --x-btn: #8f3dff;
  --x-btn-hover: #a35aff;
}

.xbonus-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(0px) brightness(.85);
}

.xbonus-card {
  position: relative;
  width: min(720px, 94vw);
  background: var(--x-bg);
  border: 1px solid var(--x-border);
  border-radius: 22px;
  box-shadow: 0 0 0 1px var(--x-border) inset, 0 0 25px 6px var(--x-glow);
  padding: clamp(18px, 2.8vw, 28px);
  overflow: hidden;
}

.xbonus-content {
  position: relative;
  text-align: center;
  z-index: 2;
  color: var(--x-text);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

.xbonus-badge {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .7rem;
  background: #3b2b58;
  border: 1px solid #4a3a6e;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: .78rem;
  margin-bottom: 12px;
}

.xbonus-badge img {
  height: 20px;
}

.xbonus-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0 0 .6rem 0;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.2;
  font-weight: 800;
  text-shadow: 0 0 18px #7b3cff30;
}

.xbonus-title img {
  height: 2.7rem;
}

.xbonus-lead {
  margin: .25rem 0 1.1rem 0;
  color: var(--x-muted);
  font-size: clamp(.95rem, 1.4vw, 1rem);
}

.xbonus-rewards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0 12px 0;
}

.xbonus-reward {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 12px 14px;
  border: 1px solid var(--x-border);
  border-radius: 16px;
  background: #28204375;
  backdrop-filter: blur(2px);
  box-shadow: 0 0 0 1px #2f2544 inset;
}

.xbonus-reward img {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 500px;
  box-shadow: inset 0 0 18px #7f4bff33;
}

.xbonus-reward-text {
  color: var(--x-text);
  font-weight: 700;
}

.xbonus-strong {
  font-weight: 800;
}

.xbonus-foot {
  color: var(--x-muted);
  margin: .6rem 0 1.1rem 0;
}

.xbonus-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  user-select: none;
  background: linear-gradient(180deg, var(--x-btn) 0%, #6d2bff 100%);
  color: #fff;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid #6832cc;
  box-shadow: 0 6px 18px rgba(143, 61, 255, .35), 0 0 0 1px #6d2bff inset;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}

.xbonus-btn:hover {
  background: linear-gradient(180deg, var(--x-btn-hover) 0%, #7b3dff 100%);
}

.xbonus-btn:active {
  transform: translateY(1px) scale(.995);
}

.xbonus-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 22px;
  overflow: hidden;
}

.xbonus-stars__layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--x-stars);
  opacity: .65;
  box-shadow:
    10vw 8vh 0 0 var(--x-stars), 30vw 18vh 0 0 var(--x-stars),
    50vw 12vh 0 0 var(--x-stars), 70vw 20vh 0 0 var(--x-stars),
    20vw 30vh 0 0 var(--x-stars), 42vw 42vh 0 0 var(--x-stars),
    65vw 35vh 0 0 var(--x-stars), 82vw 28vh 0 0 var(--x-stars),
    15vw 60vh 0 0 var(--x-stars), 35vw 68vh 0 0 var(--x-stars),
    55vw 58vh 0 0 var(--x-stars), 75vw 66vh 0 0 var(--x-stars),
    6vw 44vh 0 0 var(--x-stars), 90vw 50vh 0 0 var(--x-stars),
    12vw 22vh 0 0 var(--x-stars), 58vw 24vh 0 0 var(--x-stars);
  animation: xbonus-twinkle 3.2s infinite ease-in-out;
}

.xbonus-stars__l2::before {
  width: 3px;
  height: 3px;
  opacity: .55;
  animation-duration: 4.4s;
}

.xbonus-stars__l3::before {
  width: 1.5px;
  height: 1.5px;
  opacity: .75;
  animation-duration: 5.8s;
}

@keyframes xbonus-twinkle {

  0%,
  100% {
    transform: translateY(0);
    opacity: .25
  }

  50% {
    transform: translateY(-2px);
    opacity: 1
  }
}

@media (max-width:560px) {
  .xbonus-rewards {
    grid-template-columns: 1fr;
  }

  .xbonus-reward {
    padding: 12px;
  }

  .xbonus-token-img {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}

.xbonus-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 22px;
}

.xbonus-star {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
      rgba(151, 120, 255, 1) 0%,
      rgba(151, 120, 255, 0.7) 40%,
      rgba(151, 120, 255, 0.3) 65%,
      rgba(151, 120, 255, 0) 85%);
  box-shadow:
    0 0 10px rgba(255, 0, 200, .6),
    0 0 18px rgba(200, 0, 255, .4);

  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)) scale(var(--sc, 1));
  animation:
    xbonus-star-life var(--life, 3800ms) linear forwards,
    xbonus-star-float var(--float, 2600ms) ease-in-out infinite alternate;
}

@keyframes xbonus-star-life {
  0% {
    opacity: 0;
  }

  10% {
    opacity: var(--o, 0.9);
  }

  35% {
    opacity: calc(var(--o, 0.9) * .65);
  }

  60% {
    opacity: var(--o, 0.9);
  }

  90% {
    opacity: calc(var(--o, 0.9) * .35);
  }

  100% {
    opacity: 0;
  }
}

@keyframes xbonus-star-float {
  0% {
    transform: translate(calc(var(--x, 0) * 1), calc(var(--y, 0) * 1)) scale(var(--sc, 1));
  }

  100% {
    transform: translate(calc(var(--x, 0) * 2.2), calc(var(--y, 0) * 2.2)) scale(calc(var(--sc, 1) * .92));
  }
}

.xbonus-neon {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  border-radius: 22px;
  overflow: visible;
  filter: drop-shadow(0 0 6px #8400ff) drop-shadow(0 0 14px #8400ff);
}

.xbonus-neon path {
  fill: none;
  stroke: #b47dff;
  stroke-width: 2;
  stroke-linecap: round;
  pathLength: 1000;
  stroke-dasharray: 140 1000;
  animation: xbonus-neon-run 5s linear infinite;
}

@keyframes xbonus-neon-run {

  0% {
    stroke-dashoffset: 1000;
    opacity: 1;
  }

  60% {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  80% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}