body {
      background: #0c0c0c;
      color: #eee;
      font-family: Arial, sans-serif;
  }

  .section {
      padding: 60px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .container {
      max-width: 1100px;
      margin: 0 auto;
  }

  h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      text-align: center;
      color: #ccc;
  }

  p,
  li {
      font-size: 1rem;
      line-height: 1.6;
      color: #ccc;
  }

  .page-nav.hub-nav {
      background: #111;
      padding: 15px;
  }

  .page-nav.hub-nav ul {
      display: flex;
      justify-content: center;
      gap: 25px;
      list-style: none;
  }

  .page-nav.hub-nav a {
      color: #33ffcc;
      font-weight: bold;
      text-decoration: none;
  }

  .page-nav.hub-nav a:hover {
      text-decoration: underline;
  }

  .steps {
      list-style: decimal;
      margin-left: 25px;
  }

  .compare-table.hub-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
  }

  .compare-table.hub-table th,
  .compare-table.hub-table td {
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 12px;
      text-align: center;
  }

  .faq__inner,
  .faq-cn {
      margin-top: 25px;
  }

  .faq-item {
      margin-bottom: 15px;
      padding: 15px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 8px;
      background: #1a1a1a;
  }

  .faq-item h3 {
      margin: 0 0 10px;
      font-size: 1.2rem;
      color: var(--dex-primary-color);
  }

  .faq-cn h2 {
      margin-top: 40px;
      font-size: 1.5rem;
      color: #fff;
      text-align: center;
  }

  .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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAmCAYAAABH/4KQAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMcSURBVHgB7VhLUttAEO0eQVLZqSD7iBPADcDLFAngE8RsQlxZQE4QcwJgE8Mq4gT8FlliThA4QZR1AqVlEtB0ukeWJcuSIywBThWvasqyZ6bnTc/067YAxhiY10FE3+CBMYwcwQNjosCYC25f4X6xws3O7aUYLbhnyJWShRWMMR7JjYqxJlckWjPB99XhDwfK4xwR/ayOkckxGtw+QnnMcMskN9bHOixDNLqP4vbzjH4RyXyhLEoA0cuwLanTgXHEowiXxf+tc89P2guaaI73MYtRABB8B4Wd4OZJx6+v+nBHyI3W6eN2g6/kOqAQy4WPCg4Dizb9l00v3dmNeAeGYzstwlG0DpCzDz7blvX7gCvNhVSXx4M9MxlACCdlxLMsVf+x+PY8tcgpDNpJYyYtJ5nk7IO2oywUg060KIDe0cEzN3185rg1ZwnEN9FvqLBx+Wpt/07ITR3vys5nzUIEO4F+2vrXnTLHD7gFxpPoWxbW0h68LSJyKrlIRIx7Ny+X320UueyXS01XW0Gta9bWgd6CitAjx7uPkrh3tdxswS3gL75nT+GH0A4sTJ98WoEKYMh1vebIs0ZaTQ+Su8hHTtK6YwdwtbS2DVF1IVFeFTnedbRTz3/d7MCoINoxH+w9iXooCUOOEF+EtukCSgCVSgTCtQMlEXouLH9EkUtFWXCj4/kTQWnP9aUvBCxisMF3bz6eQ2cSseE3i+drqAohOUkf/PZBg/lfMBQc1UKsR46UkUrXUJsgp/cS48YqnXNDcprO2AVziGpeLnKWvjGFTpYB0jq+p1qv8EZltO/Xywlxj5xSdKgJ10VELeuXRK6bHOTXTVKvDTMkcsOBFXqU7UEFMAHxM5QPT55FjEeRAWUZbXPkmUusfagAvQyhYvF1lPpzehuCUyd7nF1oo2vRLaWVCfQn/qPdbf4lUndPT1Itq07rm3O8t9UjljGnYE2XhnCwB+q56aO2S31lELgBH1PSG/YXLq2uie9mfJSQs5mCZVMmMivhqaN2i6Ou8L95ieRgklZzquFqyQlM4amglSwms0jx8vuxCFeLv2vUa1MKo8fDAAAAAElFTkSuQmCC) 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("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgdmlld0JveD0iMCAwIDYgNiI+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2eiIgb3BhY2l0eT0iLjMwMiIvPjwvc3ZnPg==");
      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(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48dGl0bGU+VE9BU1Qt6K2m56S6IENvcHkgMnN2ZzwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBvcGFjaXR5PSIuMjEzIi8+PHBhdGggZmlsbD0iI0ZBQUQxNCIgZD0iTTcgMTRBNyA3IDAgMSAxIDcgMGE3IDcgMCAwIDEgMCAxNE02LjIyMiAzLjExMXY1LjQ0NWgxLjU1NlYzLjExem0wIDd2MS41NTZoMS41NTZWMTAuMTF6Ii8+PC9nPjwvc3ZnPg==) 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(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij48dGl0bGU+VE9BU1Qt6K2m56S6IENvcHkgMnN2ZzwvdGl0bGU+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMCAwaDE0djE0SDB6IiBvcGFjaXR5PSIuMjEzIi8+PHBhdGggZmlsbD0iI0ZBQUQxNCIgZD0iTTcgMTRBNyA3IDAgMSAxIDcgMGE3IDcgMCAwIDEgMCAxNE02LjIyMiAzLjExMXY1LjQ0NWgxLjU1NlYzLjExem0wIDd2MS41NTZoMS41NTZWMTAuMTF6Ii8+PC9nPjwvc3ZnPg==) 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: url(https://static.sunperp.com/dex-web/static/media/sunperp-watermark.1ab2a88d.svg) 50% no-repeat
  }

  div.chart-outer-wrap .chart-inner-wrap .base-kline-white .dex_chart_container {
      background: url(https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white.7141dee9.svg) 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: 16px;
      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 .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: 16px;
      font-style: normal;
      font-weight: 500;
      gap: 10px;
      height: 38px;
      justify-content: center;
      padding: 2px 24px
  }

  .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 .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;
      padding: 8px 0
  }

  .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("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='none' viewBox='0 0 8 8'%3E%3Cpath stroke='%23141414' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M1 4.357 3.333 6.5 7 1.5'/%3E%3C/svg%3E");
      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(--dex-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-size: 14px;
      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%
  }

  .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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAFM0lEQVR4Ae2Z227jVBSGf9uJc3CSSZM2k+k5KXQEBSpEkQAJCZ4A3oDyCFzOJTfDJbxB5xF4Ad6AG7ihGgnRmYGKTGk7beLm5MTsZc/2IXFSH3ZuRv2lqI3tOv+3/rW97BS40xsq84edI/Pxjsle32CBkrEAkXmoxUNTW6G3TxYJIRzAMi+nDs3aO0C2DNTfp80LgxAKwM1j6zOg1wbGBkxtGag0afdCIIQBOObr+zDVAmD07B2v/gY2DoDSA3onHEIIgGO+sgPUHgLnf7k7KYXOGbD1KVCo0RahEIkBHPPlLWD9I5jdV271uSiFDEul/p5wiEQAjvnSGlBl1U9n/dXnohQuX7C1sA2UN4RCxAbwmV9i1S+vw7z+d7r6XJQCA0F9D6DLqyCIWAA+87Rgl9+ydwRVn4unIKdsiNySEIjIAFPmV/ft7fOqz8VToPVAqWWKiSEiAXDzvfQSjDHsKw71PWle9bl4CiTWcri3nhgiNIDX/HBkQl5usDYo2/vCVJ+Lp0CqbNlpJIAIBcDN99WKZV6734BcbboHhKk+lzcFvh7oZ0yIWwG85gesb7TyCuSVt939UarP5U0hlbUhSDEg5EjmS0uQ1z90+54Upfpc3hRI1Iq0qEkRIeTbzA/UKvrDEfJagbVNw2c+VvW5vCmQaMi9XlNRIOR55ofZZXQHQ2iFIpTKpn3l8CpO9bkmUyBRK6VeFygkhDzL/Chfx01vgFxeg5LR3GHFj0tSfa7JFLyLOiSEPMu83u0im8tDzZecYeVTkupzBaXAh5zzfj6EA2A+bv7IJ6xhsr/L5pDJZPzDih8rovpckymQ+JALhvjae2jK/VU6tB4BWXyZjL35hpE8/ePXqc9cS42gSSOI0ulvv6BjKr5t+ZSMXU3xQwx0oK9/wd79jCkACd9B/+8IkmwfbJ1EQr5/gacvW76Tt1kyH6zUEEdysWY9M5jGALJWRbd9juNTfxulFQWf79Cs8QDcXBLACeT0T77zOf4f/fmEQXyLzktG2XYO2K3dR710z/cBV/2+9YoqKaVCKa9Boj63ZOJZpzN1HH1mXlX95rsXJ5DSX0qPjk8QBDAPYn9t3X9CpmfXVwhtnF3fFao8q7rxz+8Y6xe2r6sztK4vfcc2q8tosFcY81MAsyAo0oPNbaQUN9IoKZjsPGP9fGr787a/CFSkdx+shjYfCDALopTN4iGL1qvQKYxHMMf2ope0Cuv9CnrGCC1d95n/ZLsZyfxMgFkQjYl4w6ZAvS/TZVBWMG6fWS00Wf39tQ23TUOanwswC2KPRVxiM4IrVArpHJQltnjZT5l9PzTI3PNVnxZtVdMim78VYBbEweaWsx7CpGB2r2C0jtla6MC8OcdJ67mzr14qWQBxzIcCCIKgqD9mi5orTAoSzRbWQt1eF63OtbXNWrT11djmQwMEQVDkvHKhUjD67M/dKw9d2WjRWn0f03wkgCAI75CblYKk5qxFTG3UHQyc3neGVQLzkQGCIPiQm5WCpKjW4iXx6jvDKqH5WACTEGnjxhlyQSmMWeXpxa/7zrASYD42wCRESRpaQ27eWqDqO8NKkHlSoi93vRCNQsZqi6AUePWtYWXowsyTEn+97oXYqxRhstvxyRSo+tawkgZCzZOE/IPDC3FQr+BUd2+RqfoSWx+7BVW4eeuzIVDsmfqQ3eIfnUsa9CF7KmQPPi/Y/X6zqLLW6Qg3TxIKQOIQrZGKdFpDVh4uzDxJOACJQ/SQRhbDhZknLQSAZH17IOErdtPw/aLM3+lOAvQ/ABcQKXALQgEAAAAASUVORK5CYII=) 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
  }

  .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("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
  }

  :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
  }

  .shepherd-modal-overlay-container {
      left: 0;
      overflow: hidden;
      pointer-events: none;
      position: fixed;
      top: 0;
      width: 100vw;
      z-index: 9998
  }

  .shepherd-modal-overlay-container.shepherd-modal-is-visible {
      height: 100vh;
      opacity: .5;
      transform: translateZ(0)
  }

  .shepherd-element {
      border-radius: 3px;
      max-width: 300px;
      opacity: 0;
      outline: none;
      overflow: hidden;
      position: relative;
      transition: opacity .3s, visibility .3s;
      visibility: hidden;
      z-index: 9999
  }

  .shepherd-element .shepherd-arrow {
      background: transparent;
      border: 5px solid transparent;
      display: inline-block;
      height: 0;
      position: absolute;
      width: 0
  }

  .shepherd-element .shepherd-content {
      background-color: #0094ff;
      border-radius: 3px;
      box-shadow: 0 10px 20px 0 rgb(28 36 4.4%);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100px;
      outline: none;
      padding: 12px;
      width: 300px
  }

  .shepherd-element .shepherd-content .shepherd-text {
      color: #fff;
      font-size: 14px;
      margin-bottom: 8px;
      text-align: left
  }

  .shepherd-element .shepherd-content .shepherd-footer {
      align-items: center;
      display: flex;
      gap: 16px;
      justify-content: flex-end
  }

  .shepherd-element .shepherd-content .shepherd-footer .shepherd-button {
      background: #fff;
      border-radius: 4px;
      color: #0094ff;
      min-width: 74px;
      padding: 4px 0
  }

  .shepherd-element[data-popper-placement^=bottom] .shepherd-content {
      margin-top: 10px
  }

  .shepherd-element[data-popper-placement^=bottom] .shepherd-arrow {
      border-bottom-color: #0094ff;
      top: 0
  }

  .shepherd-element[data-popper-placement^=top] .shepherd-content {
      margin-bottom: 10px
  }

  .shepherd-element[data-popper-placement^=top] .shepherd-arrow {
      border-top-color: #0094ff;
      bottom: 0
  }

  .shepherd-element[data-popper-placement=bottom-end] .shepherd-arrow,
  .shepherd-element[data-popper-placement=bottom-start] .shepherd-arrow,
  .shepherd-element[data-popper-placement=top-end] .shepherd-arrow,
  .shepherd-element[data-popper-placement=top-start] .shepherd-arrow {
      transform: translateX(-20px)
  }

  .shepherd-element[data-popper-placement=left-end] .shepherd-arrow,
  .shepherd-element[data-popper-placement=left-start] .shepherd-arrow,
  .shepherd-element[data-popper-placement=right-end] .shepherd-arrow,
  .shepherd-element[data-popper-placement=right-start] .shepherd-arrow {
      transform: translateY(-20px)
  }

  .shepherd-element[data-popper-placement^=left] .shepherd-content {
      margin-right: 10px
  }

  .shepherd-element[data-popper-placement^=left] .shepherd-arrow {
      border-left-color: #0094ff;
      right: 0
  }

  .shepherd-element[data-popper-placement^=right] .shepherd-content {
      margin-left: 10px
  }

  .shepherd-element[data-popper-placement^=right] .shepherd-arrow {
      border-right-color: #0094ff;
      left: 0
  }

  .shepherd-element.shepherd-enabled {
      opacity: 1;
      visibility: visible
  }

  .shepherd-button.tour-step-count {
      background: none !important;
      color: #fff !important;
      font-size: 14px;
      margin-right: auto;
      text-align: left
  }

  .shepherd-button.tour-cancel {
      background: none !important;
      color: hsla(0, 0%, 98%, .5) !important;
      line-height: 20px;
      text-align: right
  }

  .shepherd-button.tour-next {
      background: #fff;
      color: #0094ff
  }

  .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;
      background-image: url(./space.png);
      background-repeat: repeat;
  }

  .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: 700;
      line-height: 94px;
      opacity: 0;
      text-align: center;
      transform: translateZ(0);
      visibility: hidden;
      width: 100%;
      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;
      position: absolute;
      right: 0;
      width: 100%;
      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 {
      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;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 60px;
      text-align: center;
      text-transform: capitalize;
      -webkit-text-fill-color: transparent
  }

  .market-dashboard .dashboard-title {
      color: var(--dexc-dark-primary-font-color);
      font-size: 40px;
      font-weight: 700;
      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)
      }
  }

  .cooperative-partner {
      padding: 120px 0 0;
      width: 100%;

  }

  .cooperative-partner .partner-container {
      margin: 0 auto;
      position: relative;
      /* width: 1200px */
  }

  .cooperative-partner .partner-container:before {
      background-image: url(https://static.sunperp.com/dex-web/static/media/cooperative_partner_bg.3b488d31.png);
      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: 700;
      line-height: 52px;
      margin-bottom: 189px;
      position: relative;
      text-align: center;
      z-index: 2
  }

  .cooperative-partner .partner-container .partner-grid {
      align-items: center;
      display: grid;
      gap: 40px;
      grid-template-columns: repeat(4, 1fr);
      position: relative;
      z-index: 2
  }

  .cooperative-partner .partner-container .partner-grid img {
      height: auto;
      width: 240px
  }

  .home-container {
      margin: 0 auto;
      width: 1200px
  }

  .home {
      background-color: var(--dexc-dark-primary-bg-color);
      /* min-width: 1200px; */
      padding-bottom: 150px
  }

  .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)
  }

  :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)
  }

  .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(--dexc-dark-primary-hover-color);
      display: inline-block;
      margin: 0 2px
  }

  :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)
  }

  .loading-root {
      left: 0;
      position: absolute;
      right: 0;
      text-align: center
  }

  .loading-root .loading-circle {
      width: 50px
  }

  .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
  }

  :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
  }

  .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)
  }

  .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%
  }

  .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%
  }

  .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
  }

  .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
  }

  .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
  }

  .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
  }

  .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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFrSURBVHgBnZM9SgNRFIXfS0wiohYaFUERDIJgISI2LkArK220s3ANugM3ILgEdyBaijaCIDZR/GksJAQDGmLQ+DN+h7mRcYhk8MHHnZl7z5k7d97zLraCIBggDEIe0vAOz1CFB+99I1rvI8IsYQoKJmq0QM/L8IjR148B4hxhEXqhDpcqpKhi+S5CP3SbiWpKMumwBmat7Sc4JPHyq03vJahjlCEOQcrMqike6q0zoORBXBwz0ttL8AZZGcppXjdwS0HNtVnUfBBq9ilpfcKwGVy45Kv5JwIZjJhzOama2k/aL+pSBhn3vzUmA81AQ8vhWEiqpHaa8AqnMriyLiZc8rXhwiGey6BoBgs459spqRklLLtwkNspBnLDxTH0wKadhb/EGvge6Ffuor1vbmVt1S0Yt25OYJ+CO8trp87BOvTBNaySr0YPk0xWYMlMshY7Y/fqYEdi6XyLNnUm1lw41EkTVayrI4Rn0fpvhvl+pdBbpmwAAAAASUVORK5CYII=");
      --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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAoCAYAAABjPNNTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAflSURBVHgBxVhdbBxXFT7n3pn1ru1NHLvOj+PUrmJI+SlIEBoJIUgDjwjxUMojbxEKjUpqkxIEwkg80JC0kXgiDwiE+gDhFSGBKlqJB0SIoFJohQpRm5911nYcx7vr3Z2de0+/c3fWdpo0sR3XOcnOrO/Mzv3mOz/3O5dpvXZY4kLf3I66a/ZG7LeROEtsc5SKp9i6NKU6EddJqEZWqpTUKvSLjzRpHca0VhsvPRIZ2ZeS3WadeCepjyLjyQMOiyMSn4r1EbV86qyLowhXABzjLeMWyBZn6Wd9N9cy5epBnpgatEm637HNW0xIDrCsgsR3Y5xCSQEy0msMJvWMa7EDcBMJGe9aGMtJ7BOTNilJynTmsfnVTH1/kBPXeyhND9iIHiEwRCYV8tYpABy8AmaAogwUGYDqgATAOIxZ19KzFcnp2UWOYoEHkvnF2ZFZOsute0Ew9wR47Eq/JfcVG/FOvI/BnOwII+DKwbkWyNVSQ5wy3K3moqVz3HlOHP5T7PQedX3SvqURFfP913fT0be7aD1Mdh0t703zsp/UY+HB4A9cObjUWhPcje/VnJhSwjxLrlWhl/fUaaUHonyuUF8s1mOzhXxqc0aELFhsKqskbPA9bQp3xb4xPT9Dv3q8snqQ45dGLHcdIjEKSwJIE5LDWUwE95ZTL/+h00OztFo7Mt1L3X4Q7i4k1rsuuJ4aeG6E54n3Dcl5utEs068fa9wf5PGZoiX/ddSQ2BqFqHGHqCfNX6mQqf+dTo1N03rthbmt+WZloMHGEBhUoHlbF47yUpc4pe6L0zT5VLryJ3fGpEu+CtcViL0hzVNm3OMNzvNkhl59IIBqL/bfaizOXKGYG3lkFynAFKyCzXC9+rF+mhTzwSDHL38OObAVwcIKDzwbTRICQPfu3F/oFNdoI+zs/hZ17y410kaDpAuhtNXVyYfq0KMMV8uFu4OcvLHFiH0S2WeURaPFhAXh7RZd7/yf6NwnEtpIm2RPfSNlaiStemtReiTve5JqiE9a8AX6xu/tHSCjSuOAMhc+Di62bDzKDMWLf6TJDQa4EujB0ZneNEkVXK274PVcjDHzyBfzt4MEiynxx7UWhjFkSqjTZC/QybuXhQ2zZ9hVd+6tVhXcgvNcdN7gs83WsHgJL4HM1ZM9JoBScHCxR1A6V6Ok+l/aDPsxxIgrpBUFOJ/6W1L0Nwt9Qj95M14C6Vr8ycCi0RhERGKcI3sNqmWBNsOYZczN1qnW6+ZzTZTlaT847fzwrS12CaQYN6qx6FM9slU2oWT+TZto/7s+lpJDLfF9fgc+pttLtHVY2iAnr29vxyJyXwFiDEWxRad2Plg9XKudYze6vZYOu5Yvz9ZdsVlJ37kBv6JmGlpI+0IWG2onDVhEEVj9creBNlAadfO2WTQD+e9cyhWe7eKrj+p4BDm1DUddXUgX5+B/azeXxcwudJf3sHS/CiSjumInsXmWGpc/YygX5UMB16xWtwvbyCctegiGFeRrwDK6PCKjJo2/BSadxqBVJtss4uN47W3FRpiRvkyVrjDpg2qFlPe5dlFXKaFut6ZAD8G8lyLfyc9cRD5uQDa3QUpIc2HvBhxtvgHgExD4LTREGVJR0t4Bk7kpj9ZIF23VSghKC1W7lx6OYVGhIF0zqYuDvGvozOCU0aYDiseo6uHAag99r7ypQHMT5U/hVIQyVJXpM848vTT8RnAzhNwUBYp13VapponkxmgTLaXWt0GcVxAKCTIYXSe9rtcyqWbepKAdjSrJUNQN81PoFjclgQrPlR6F4Pm8aG/H2rejvgAQ0P52GaR354G9qbXSaL10Ctj3IoUO0SZY3cg3cdqNxAGDrI1vu/W1/LdlkGhFAf88cbY8cmgZUD/py3Ti6gB9mPb8tT0Qhs9Te8Frx6HRtp5eoReHLi+DVPM9r2ENb3pP7dgMBcv0mMRM0GSpmz4Mg9iGe8+FQqNxyOyIMqARn+zctgzy5a1ziMTXEIxGNa/XBKLw2W4q8sJGA+0HQFtt/A5k7ILTwoYWaiQqNVzu6WSHxdtBqi3IX7GHchO10oTYpEwZMY+aKv1AN61oA6xw/OrwzUrjFXhuX4g/EUWnizG++Mv00u5TK++/HeTZoUXfRae97ity9o/0p+ElR7Gb90M6NvUlehA7duXJhuffgLnHA3PBvR2ANI9kffr9P7m7kDh+bZ9x9H1UgdAxGg7LVOZ+1FCWt7zYcxDGF2m1dry0HzteR4DqAHU8lD1TsgQQEx2mn+/48+pAqo2XvgCReRgchiDNViLdHDKa+Hht/XsWOxv/wE7bRVyfxgT/7/y8+7szuxJufDRl/ixrzWUaDqBEdZZikpVAazj81J0e/sPdoNxbko2XRgD0GNy/3bRjE2+ddZQaCjphG7FtKz0dD4uBbbfErIuCXmNaivFMty4DLIkzR+jM0FsfBOP+uvHo1KDJu6cRKweDSBKPnQ1YYKQzsYKhNlBR1iFSfFhnrSjzhjMGw5LL4R51L/kLKDwnUKev3QvC6sXtxJWDmPMZzLAzdBkmY0VC4W83cO1wsGFzMDAonb7JZOzZLAanoA5/1Dq96/xqpl67Ap+4egj4DqFUfDoEvIT9Dt0eDUnAilV1QOdFAkBtRPUe+Ze3/Es6OfTPtUy5/jbhuUs7iLuegFP3IijHUAVQlGmXJlQ7TP00vFzzzr+BRu9t4urr692yeQ93APrF7Tx/BAAAAABJRU5ErkJggg==");
      --dex-icon-white-loading-bg-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFrSURBVHgBnZM9SgNRFIXfS0wiohYaFUERDIJgISI2LkArK220s3ANugM3ILgEdyBaijaCIDZR/GksJAQDGmLQ+DN+h7mRcYhk8MHHnZl7z5k7d97zLraCIBggDEIe0vAOz1CFB+99I1rvI8IsYQoKJmq0QM/L8IjR148B4hxhEXqhDpcqpKhi+S5CP3SbiWpKMumwBmat7Sc4JPHyq03vJahjlCEOQcrMqike6q0zoORBXBwz0ttL8AZZGcppXjdwS0HNtVnUfBBq9ilpfcKwGVy45Kv5JwIZjJhzOama2k/aL+pSBhn3vzUmA81AQ8vhWEiqpHaa8AqnMriyLiZc8rXhwiGey6BoBgs459spqRklLLtwkNspBnLDxTH0wKadhb/EGvge6Ffuor1vbmVt1S0Yt25OYJ+CO8trp87BOvTBNaySr0YPk0xWYMlMshY7Y/fqYEdi6XyLNnUm1lw41EkTVayrI4Rn0fpvhvl+pdBbpmwAAAAASUVORK5CYII=");
      --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: url(https://static.sunperp.com/dex-web/static/media/iconfont.34762def.woff2?t=175611939961) 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 {
      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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAuaSURBVHgB7ZxNbBvHFcffLCmZsiWBUtrUiWSFjtG6l8IyggJ2i8IU2viztkugSdGmgOWTHaOAmPTQQw+ijukhkk5OD6nlc4qSihsIaA+i+5UCqVE6rYPWiSPalj8D27RoxYIk7uQ9ailTNCUOubOzu878gAWXu0NS2v++j3kzOwAajUaj0Wg0Go1Go9FoNBqNRqPRaDQajUajeRJh8CXg3r17EWs3bG05a4OOjo4sPME8MQKjiCRcbzAY3MYY6+Wc9+L7CCwJuibYNoufyeLuedymFhcXz6PwaXgC8LXAKGoUBd2Fu1Frk00atxQKPl6vpXd39wwUCvzyjRtXU+AivhOYLBVFHcDdOAhYp0QyaOUjCwsLZ2uJvXHjxkgw2DxlvU1MT18ZApfwjcCWtQ6CM5ZaFyj0GAo9tJrQXV09U4wVw4MFTz14kD+aQ0AxnhfYS8JWgq4bNe5YIRq5ZnwZqWzLOWQLhfm+mzdvZkEhnhWYMl8U9hR4UFiCrLi1tfVo+TFyzYFA8+RK632EGyIb4DEoxubz+UEUl2JYFDwIZt05ctGVx5uamhKriUvQOboB6EYARXhKYBS3Fy/Sv3E3AR4GrXe0Mv52dW3q55wdqf1ZtSJ7xkWj1VaNXV6D+szt7e2by4/Vcs3Vv0eNu3bdgsklz8zMUKz1vLiEYRiJymO1XHM1qD12pZJhBBzEVQsmcfHiTFpVJ89TzXq7u7ujKPskNAhjfOzq1atHwSFcs2DKkine+kVcopr1cm6cAhtg3O7HfnMcHMIVgS1xyXIj4B9S2C06XX4A+7yD9brmauB3DC95Avkod9E+FZeKGpvLM+eKcqRtKOmanZ3ZLrvapdyCUdyk38SlokZlt4iyZpAIeYK2trZBkIxSgTFbHvZTzC1RWdSQ5ZorwXgcl+2qlQlM1Sm0BMeSCQcZqnTN4GghJiDVipUIbM2oSIDPoG4Rxt6x8mPBYJOtrFngV6PPPLPpRyAJJQJTUgU+hLpF5dZL5UiMllFwGMNgwyAJxwUm1+y3pIog6y3vFi25ZiY9CaoGxXfsG9esa4vgqMB+dc1EZVGjkXKkTaTkK44KjEN+0lyNYtLl1is6UiQTvJl6ZWTUjgmM1kuJgrRkQSWYWC3XhlW65sexn1E7JjC6NF9ab2VRwwXXXAaP2h1tckRgmkflx8SKKC9qkItU7ZoraW1ttxWLHRHYmiTnR1bM1LA7UiQHtgtsIF1gK3OOgs+wihrLkw6cKkfWjz03LV1g7F54qhyJMZU8CjQ3N8O6deuWN4ytOGAQKJ4nyosazpcj62PDhvZ+aJAgSAYv2mG0BnCTkqi0kYi1KBQKK9rJHilqHJ7G/yY1O2uchgaROh5sTVJ39eKQqGShJcusk+yJEydSZ86855YXyuGfnTJNfnZ2NpDK5bK2x4alCnz//v0RdHUD4AIkKAlLAtvlzTdHYHhYTS+PBvrxZZwxMzU9PZ0GyUgVGOvOZL1RUAyJu379+kattirvvPN7eP31X4IzLLneYNAYzyLgINKuiPXU3z1QjBPilpAosnTXK4rMJMuVmRqUHTshLvHSSz+GCxcuwNtv/w7qxWnXK4q0K4PxN47xV2l5kuJtKBQCp9m7dx8K/ZFAS3WuVxRpAmP8TYLiwYUNGzY4Zr3lvP/+P+Hll39S7VTR9aKw4/l8IK3S9Yoi00WrfNq+aL0qxCV27txR3EhoJIPbOICZruV6kxMTkeZA02EwTQxfRpQ+c2DvbseeYqiGb2MwVaJEmcnnYeryVbh16zYNBUJLSwg6OzvgG1u2FPdFGBiIn/3gg5/1r+Z6k8nJcDC02GsE2DbGzSgHI4qBOAwmFX3oRqRXPKYYmS5aWfmKLJfcswjT12/Ah/+5UPUcifvC9m3Q3tYGAqA7Zh2lNyRoYN18lAGLBgy2jTPWWxR0zT8ccgf2vNgBCpEisPU0vrRZ/rUQTa4ePpyDyb/8bc02JPL3vrNDqEBy7lwmfuP2Z5sxmTyMFhmBBph/GOyIxfp82U1SBl5goXYXL12q2YZugulr1yHyXE/NttxgWKkrudsGCc2VFmJTgqzRpAgoRDS5unXrM6F2d+6K1WeaJZRBmwMBpcmo59boEEFUYEqoRFhYEGsnA7PAfCmw0v6f6HCkaIbc1KQuUhkBrvRa+VJg0zSF2nU/+6xQu689/VWhdp/PzYFd5gsFXwqsFBQ4K9IuEumpacV0vrtL7EaYmcmDbeZC/hNYxZK8tDYVvozi1tfS0rJd5DNNmBTt+PYLq4rc3tZaPC/CTP6BcExfFewHq+wiEdKCj7UkbwTkk8YtVSgUTpcvG4i/R8ejtT6MN0NRRMqUp6/dKB6jmEtuWdRyiTt374JdMHXIgGKkCYziSrszyVppsTHcaF2Mqhclk7s92ht+OiryfSRyd1dLXYJWkr18BeyCVa8sKEaawBgXz2MBwm49Oo3bUHt7e3q1BuHkyQgWG+Lf/+sfjry78xB89yuNiyYKFUKoIGIX7N2lQTEy+wdkaY08BVAcnaE5yZUrt5aDwkZZgA2yZbfM4I2L5+BdhwUmYT++9CnIgDPzPChGmsBovcLxxXLBNBU01dbWll6r7ePCPuLvd67DG/8/B7/aKpYoNQKVO2VYL/7X2QO7d/s3BqMFZrBgTxa4VqUmDVUSpmo8lTzZbwbYEVYjkfrNxX9Bz/pW+OmmrSAbstxrVmJmHyMNLiBNYBIMhwzpDo2WHxdJmEqEk6fCRnB+ALgZ58DCokNdv8ik4f7CPBx//lsgCxL340/kuOYihjkKLiC1RoeJ1ji66qj1Ng01EqYSj4Sdi2OgCjcyivnrC/+AtmBz5pWerbYSPerrnsfx41u3xQYqxHDHPROyBR5DgcO1EqYSpYwY2NyRRoUtgdXp7M+f++b2V5YeW6XJf3XPD6Ns+aP/XbRf0KiAscfXuFSFK6vNrpU4NYpZ4JtzsVeztP/exJ/6W9a3nPr6lufhqc7ONcuVxfHg69dhKntFurBLoPXu3b0ZXELpgL8TwhbhfKgkbhFmDJJwH/53aaorCUzFDtpK5Gdm4HNs44yoj3DTeou/DwoQzYgbgVzzvUPHly2ErBevqgce3CbctV7CMQtuNCOuF17gfSsOoPXamlIjkXle6AOXcUxgIzA3ZTdxqg17LRc7ni29K1oveGNtEJObQ7F9+7LgMs6NB3OaHO4caKPpu4eOjZTeT0xMRpas1wvw7MF9exLgARwT2DSdWwKB4i665pVPCBjmEW9YL896wTWXcDTJ6hx/awR/QfoD4abB+nM/PLa8rAFZr8kWlc3LXhUc0AfG+9wqalTD0Sk7pvkwwUH6JLOxcnGJAiwkwAMUCuZRL4lLOCpwLvZajoMxBJIg14wFjRXfR9aLdW5XFysjyy2YZuzQ/j0p8BiOT7rLYSLEQc5ANy9Q1lxW0AAvWC/Pklv2oriEklmVlBBZT7zb+BIYzcWOrbiI7lsvz1BC5TW3XI4SgcnquMkbfi626JrNdYnHjrNF1ypWpslHsUq13Qt93bVQNi8aRU5TzRgagKpVudjRFckaFTW4Cyv6ULgxOfQd3L87Dj5A6WDD3cOvJrDrFK6r61Q5kGBBrllpQRITKQYsfmDPD06Dj3BluLBz/OQYCMTOyoGEciYmJiImBKL4H2D1ikXAIchiDcbG9vtM2BIujQcPh5kRmmT0VPwalI/xrsWZiT9HGfB+xmCXHLFZlman4E2YOrjvxTT4GFcEJkhkwwiNrGrJ6JrJpUOdkNi0TgbQOhmcRVittUPQ9VKGjzdIBgwjM19YGPd64lQPrglcolo5k9wiumZp9dxkMhmGUChMD1/T87mLsJgtnpiby8ViMc8tfSQT1wUmMCYn0JKLI0HWQEKfiGvW+AiaztMx/tZU+I+/dbfsqHEOmgUCGo1Go9FoNBqNRqPRaDQajUaj0Wg0Go1Go9FoNBqNRqPRaDQajUaj0Wi+PHwBlAavNkr+j3oAAAAASUVORK5CYII=);
      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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAArCAYAAAADgWq5AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAwhSURBVHgBvVldbBzVFT5n9tf7v+u4jlMXlgpQlUBJFKkSqEkMrcpLgLiAywNVHBWVnwICqaIvNNk8UAmKRHmg/BVC+tDS5MFOAg2oEnFCQh5QwAngipAq6ySN4/pnZ70/s39zb8+5M7Meb5zFiWhPdHNn7ty995tvvnvOudcI/0dL7n3lAAJkhSl36v0Pj8AVGMI3YFLKNFVOYcva9Sgi6nyRGHo5rXnwtOtnWdQwM7PxwZ1wGXZFgAlgH1UbqHC9mvG06d5PoIc7h14elB7cscjzywJ+WYAJ6CBVm22gS7VrCHA2uffVIQS5qU2/t0gq20kq2XaDabAEY0ap8Odkhvpg6ZZlsHxBYFc3xwOpS9mUjWODJJkDLJ12A+LXAOVPvY3KE4s9N2lWUwoQAOOmMD8zJeQ1utNQi3us8qnP43kiMfTaTZpHfOqa9klhimFNgwwgbm6BpAsTb9X7fzl6WYDthTQElkabJghkVZj5Yr16ZMoo/mXf+a8+fHbsSB5rhtQiIYm1iJyqlGVPoiS5v6cSk+VA+BFA+XxzDFNb4wBKDL20GjXPEGJzwbYFjW3AHoD5Vc9tUDbrMFurvPLmyU+e/UN2VMd6VYHKEdgUdIIWCcvp2lnZXQmrdi0RkxOVkkwFOt4nJtfZQ2Vn73zoGvd8LAPUgEDj6oWgxZpWTeNSwNZME+Yatc8+zU0+ds+HQ5+pHxJYDAWlqmshYteQMEPtUYvhbuozGfQI7psKhCZoprgaH3Fvzkj+FAYGzIWgX0igFjywEDT77ACB3qI7DYstuh1usOVGHS4Yxb89c+LIpi1H3/08Rm1cHLBOv2kCSySTTUFXMISTRkn2BOcw5fetd8CykaT2Qi6n9R3IeN2T6v1P6lJUbiXC3DIg3119wd1Pa2GXF1ifG+yEUXjthn1/evSNc1/mC42anIM5KBBQWa6gLFUwl7P6pgJl+2t1gcYMd4TpvgfQ49/onsOPcIjrkZPnEXbt8lwMGvpbPMggSabvIsC2FDLOfanBejX2r37vlaetljmQRgUtfi2GuU4mGa39I2JZ+osoiGHNXnRCiJtclIx3GRfG166ly4kVEsbGCPS9LaAfzkoht7jbNFfAcTOccS7YExCLZ/ed+edvwxV/U+exaAwWmvWlZbGM7CHUi9ACZA0LPYz5ejmO84uN/C8cGqP62DFQcbKv+SCjtYAeoc4vuprSne+8urkJ2Ga36Q9p1cNktfT7pz5+72wpWJPSW1Wg5wpz/L81B0kCw1UbpAXW0nCXNQituqAvuM4NhMDv5XplckKNN0Kg7+WL7RloNSGMDAeY5juZ4okmYHCxWzEb5L4aH/1k/xu7aEYZgShEGwEJzHSUeyxkuQmWbJrY5UWnbJKJwDvcfX31gtLvWK5H/abvIMBuZ3o577ESQzsSHghuQkDd9barWcvOSt3gtBcbNfgqP/t8OeiXQNeqzfm/4AfoAKUErAdlrl6FdNjU5kqW+7KsC7q7y/bLwI3QfB04FA0G8p3FEgsfx2BCjqxcSU+/gN6VvYnKnldvEnvkXdTvLsBqWi4SIjQNN3ntzCvNDVVity7E2fsO7z4a9tIPvH4sNgoSIUBPI1SsF4A8lVAeEr44WmDZp4VgWaGDv4Jkdhup0FV01VxwNM8JxS6Vtd/Nyc5z3+qTwdl1CLdtKENjAyzBCMhdzHCf00AhlyRRO4oNvyw2Ssg1BO2HpGX0Buf5Ypr1PMhwEHM1i8euKEvCoKswhV9chy6SUMrjs3Xfo50dPetPnxfriS6Vkso26YylYRwloMPQkMd5MTLgDW7A5w1jfwlKEA6HoVwl18R6YNCkYVmvgOZFAXECS3KAhFUrr0aeYoq6dJEkRBAoxcU7pHt2TXvdZhra5VwcOEi7B4WQwzTxqDvKsTFg9aYNIZQ7myjnz4a8Pizn64LdfCQSkCXWcr2m5pe+AMbKFSj6UOoUQNgNS38H5goolkUICbHNbi0VjH4flmTKE+yhyQ9GvDB8ZuMjORf4BMICl8xfSnKHRI3YzdUqcOO+nT0UNsColK2FRJ4C2Uuoa5IFRTsM0X2eFxWF57ArlwDLU6Q6lvNi++hSAKnjcXZxHuHdO1V9//S95Nx2DwwIi32le/7qnOxzXjFIffdcxDDntWxlAguNugwzy6zhYs2SBDNcB8tL5K1Ip/schssoiiHQqobsinZBTch1HpeAOWCgpOIRB2fK/zkEufMWARztVgKsGhuTuyQLBVm37G/dOXLS/bqL7jhYvw6jkUjUuqYoZ0U6yw9z4EiUAgqVm2EOzV7EGwngS3T3M61urIjPXLg9Nht4hsFeG0mp3/QxWHv1ZLapHQksxRjwAlFvuXqVKzJEac0V7GtKehrT0nlo5RJ5iPss0KJILq3TksSMXnjIjxeeCoD2zrQp9az6xbj631+clZBcgSN8M/WFQpnZzgPyMOo23oIxtyhg2s6ohuvCtPRJFRw4wnZIVkGDvYThR87UlJewLc+Zm59zCSsf5kDHuTDnEqpDaU72hmPWxq4JoUeu7enBvrFVyPrNMGiZQcqVGXHrDjzfCnjUAmyNf/Py9M3Ow1LRChfKXF4C8nklCecRS0IUDeTknVMJESzZzyaAwfJV2u471pz6mFpau+3gDNutoaBlS+bgcwM+aAHWFOi4P3iD9NYwVKkha7jo9IzCRaaHg7ZumeEOKQtFBW6qUpQqvZygxUxJ/DliOVtISbgwg46Gj12/Qo4c5OSH0p+VX+C2bdtovUlWtZvh5kEMtDLMFtA8EPf6BzxmQCLnEmwKcURJItYCOtlSM8McOLrpH0tiIsl7urxKBSE6i7C8U55iDbtMMTy2SvJbkJ8ahDbsKsD0BiNg6zjg8bL443/esPEWyQy7cmFmm3cc84vO3oDyjyMsiQ5kD8FFDUwbUN4i9cJ3rO1Dd0o67LKtjZKGWzIIzRV1bRsGuKiPMpUs+4lhlsX34st+7aVDgzALODLfmRedyoZpzcV831KTKz9ctBad8hRkkyQHoc+pLRLLoXVSzodVEu9Igqxh1gcB3Ft9dQiz51KA33Iawl4/S+OWd368+b6yWjsL4/6cvfHkmvd0Trtg0BQ4eMfRVbHG5S2+WnRpQjI5i6e40c6F4foJyw/v3g36tt/QZtO7tQXbTljE1MD2cdJbfN1BsmCmvx2KbX/u5tuuihLF8+6NmQ1g3HGV5AGT9A9V4o5qx8Hpu2afS7B1B8PYOxVDL0tCsUu5MEe6kz3YNUX5MBEcEf6tFOXSLlxNPK3WBGJvkz6hkuQjKM4r6tL8/MWxjzf98ctP8qyMklcTHECwbuUWSQoe2VJexfRl5CW4VrsOAuycS/Ta43tJGgz61NmAAN6EFohhAly9++6tPk3b2pK/cf6wsy1gGzTHcXUOwFsl3n0Yjcbba9/d8XjNbwhBcsSOoDpAYV+MNUp8wj2Sa07itWpITlNOzCc/rGOgYyoeK92VlFmjQHmJ5SEofVDbJOMXW37u07xvuPMOsFzZGriELXbyswNs98LnEnw8RYx//o9z/9r82NH947pHil6SBaWXYv6oqiI5J2ZfzGdrfC7B7c5RVbqUJHYL8hSLeDmBZrAPPPC0D2GrE2Fty1K51TnxXCpgdtwfUFFvWSHQJWKbvPqZk4WZx/sPDR0OmqacI8C840A7eHgCdD/NvthQvngmXpZa1jqbmPCTiyU5AAE+MjAQX7Os83U/andq5IlcAHQb7Ci0sXaHgQz6Gr7nxJ68As1KX9k0/3pgcvy5Bw/vGQ/FolKSZqfJO1ybSoHO1zVbEoYFFkp5Snbi8t2+exLre6/7FS3oRymbS2gLmWWw/XZMgMsGbINmpt/kgZw2g5jmg0Fim7ZY4rBerb49WS2euH/07ydETpIkLGn8e6ahDvp+94MfxW+/6rofxr2+dT7Ncz9FqYSXPFDLpFkbbFtmvxawC3iGqq1OX2abt1M1aaoDbTspzNPlGbrRNbWt1OLEX5y25VdzUs6LirWq4UXTjVDZ0k6zV2QsESofUOFtTNPo3EzW6Q8TdDwgDdqlcCHNyxrdczs/v4TlbI/0vzX7bx0O8EuiaWOn+YvZcrsiu9I/e6XBOs+4064TlxiXFxNr8ziV4aUsqq+zKwLcajZjaZgHzkD1b1ybZP8F8mmfTQakefIAAAAASUVORK5CYII=);
      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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGnSURBVHgB7ZfRTcMwEIbP5z70DdMJMkJHIAsAmQD1BdFHJmiZgL6gVryUDaKyQGADNiATVH6skJLDDg3QKHGuTQN96C9FSWwn9+XufHYAjvpnibJGFU49aKSu1sFAc0aWAvSeZwSNJHSaCF8H12+1I8EFQBDDTvbB40I4AZbnNwJ2UG8xHYMQIw4EQgtaXgzHQHRnXKhQUqTCxz78JcA2EB3m+/KZ4TmGxDoYxkUIEw4b6BFKiEzTafEhtgcQYYxSRFWHlHBW9lzmiUykyvrZHkjNF5qMfKnsT3abMWwA/f0l+1VrScjVFkk4NzFcKe74YkI2BkBcTUxxuQK+fopYNh0bAtQloUtLR/4ck7A1AFs5OfuKVgCs4bxC1kG0ApBNQaJXc+nVQbCT0CUVPvQR8bLQHBOQFiByCL+sNuwFQAL2KduAbOrXbsYTUszN2Yc2ABJTH2RCg422jjhBgom9JuuNQv9eAdaufcrvbdlG+Iis6bVxv6o0OwF6i9m7qz9Nq16sgdKuiYFwGq8F+Nrdbi8d3GoV3pt4d1XdotTox4S74h110PoEdC20cG62dXIAAAAASUVORK5CYII=);
      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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALWSURBVHgB7ZhRThNBGMf/386S8tgjlBcTEKMbbbVGYzmB9QTSE4AnoJzAegLKCcQTAJHQqOg2EfF1b2BfTLrazvhNoU0pndnZpTxI+ntqut/O/LI73/fNLDBnzpz/G0JGwjDM/+4vVAXRCx6moqDyBMpfjNomhUh5tAd0D8tBECEjqQW1WBeLG0rKzZFQIqoJ7892FtFUgscnZ1WQ2nEXm8CjejlY3k5zi7Pgp/DnlpSqjmvCE+7lvLgWBEHHJd5zCZqVnEYB1a7KvXeNTxQ8Ojldn5XcCIXKcXj21iXU+opbYViAzO3zzwJugJ7srz0v3juwxVifoOov1HFDchpfiK2kGKPgPpcTEL00XVdKvoMXL0Gq6VnJtVD0ZQAlazAOgsrHL98ryCK4wEXYVk5IiIaua+Xi3foVSZZbpHitVFptlx+tNvmfyDSO7/mvkUWQL1RggTvHxvD3JckLuWEZ4QqgBQqWkarIIsgz3YcFkthscfkZl+Tu8mZSjitAE3byPE7BOI/pwvHXH7+cOoahOzjKDRB9PyiV7rSnDm+6ybmdcY1snb/GEUefTx+4ymliio1zOXUSK3rNofth/K9nnBzG7E6JTTBCEhMJoZ/c8NLU7DaQU7lOakFSqo0UcnrNCeGFk4njINkxrT+roFTqEBZEz69NzdbzNXlZ0vY2FKwPwigY+3+bsDBc2FOzdUxS93O92zaN4wlqWqZJ2Cx8O9vX7cgSEsFShFmscz6JsSJE5YcrS7Bgz2KiGuwUrLezmK1ceVxDkYBVkAtwRNwdcBNwkj0OlneTwhLr4JPiaoN3wXuYLRG/nVcugU6FOuYzhKKEsuNOxO1xTb8dl+CUp7rTBpG3gawoHEBQzVVOk/pc3NIbTE/sIMVOe5DNkrafFlcaSEnmLwtaVJFYJwJ/Wbgqq6VIUXtwzBTxrusxc2aC4wy+NvT8UR+G34uu87ljzpw5t4l/y/s+nbejmVgAAAAASUVORK5CYII=) 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADcSURBVHgB7ZS9DcIwEIWfzSJpgQJokIAlYALYADIJYQQmgCX4FchQkECXNUDKHQ50COz8NETKV1l+d/dsyX5ASaFYHYPR+uD30/SIJEUbFTggWuryxqtJ4MR3Meh0qmFug9X+0pQVsdBL50MKKeJBr10/mfqlSdyq61gPV1+GxzixtlO3IbIaMJEHC0SRl92AeQYLzJij5K8x/oOt8qdMmJhqWMLrtmruL934ioh4BAvCcgCjgYB0YUHf0DXPsJA3KhKHnf50C8Fovnf4jIfsJwm7VMRRHUc2SgrFE7phV5eaJXXGAAAAAElFTkSuQmCC) 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAD/SURBVHgB7ZRLagJBEIarJx4gS0E61DZkkVkFJJeYOUG8QeJJMjlCTmAuYV4kzLjwtWvEAXeuRa2yRtwo2q2jC4X5Vg31Pxr6AVBwUTT/u7XPv05wiEftI/qKuwhEHyK/X5oUJDxRYbV6a44uaP62fe9KNWSJGyNDcw4fH+4Sm9+zDb/j3rOEx1vCMzCb/cT9J8hbwEQROCCaR/kLmN/AATO8Q8FZY30HWt+8yiG+2DQyj9J0UM9bMJaAa3AwHA525livKZFXBweyAavG+VUgoj+dckMpxvVgZcQepqlJjirIKJcRSyWW/4j9la01m6lgNDIGTonWGFQqugYFF8UCUStYpJTH6gYAAAAASUVORK5CYII=) 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAYAAAA5ZDbSAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAATBSURBVHgB7d1PbxtFHMbxZ9eBBJw4bsWfSKXIUA6pQMRcOPRELiBOLUcOBZUjXHgHbd4BHOBIE/ICKBJKC6dFSFVUDjioFTm0sFIrlApQHdcNQXF2mYnayrKq7qw9Y8/+/HwkS628UZN+d3Znx+sYICIiIiIiIhofAXJ6oTb/lvqyU+oLT6q/1kCZUqARIGjsIVnaijdjDJFx4GqtVq3gqbPqm/0UNIDws7u4t9SM4yaGwCiwjjuNqUjthQuggekR3ca/i8OIHJpspEcu49qjRlV9BuWzGILMETxXm689geAPkHUlpItxvBnBocwRrOKeAznRUZNVOJYZWA1xHpoduX8l4lRmYDUhqINcqcExo0kWFRcDC8fAwjGwcBNw5OnpGVSrh5EkCVqtJnbad60+T2acjeBKpYogDFGamMCsCmX7eTLjLLAO8/AfCUPrz5MZ/s8Jx8DCMbBwDCwcAwvnLHCaJg//3NnvWH+ezDgL3LzzDzqdDhIVqr19x/rzZMbZStZOu33wcPU8meE5WDgGFo6BhWNg4RhYOAYWjoGFY2DhGFg4BhaOgYVjYOEYWDgGFo6BhWNg4RhYOAYWjoGFY2DhGFg4BhaOgYVjYOEYWDgGFo6BhWNg4RhYOAYWjoGFc/b+4N2jb6J14mPsPTuPZKoCqSZvXkH52gWUr16Aj5wEbp34BNvqMQ7+UzuyfnQqRzB7+Qv4xvoh+t5rp8Ymbje9U+vQvrEeeOdV5x9D4K1tdUryjfXAux7uxcOy99xx+MZ64GC3hXGVTM7AN9YDT/61iXGlZ9S+sR64cvlLjKvytW/hG/sjWO3FPl4uuFZRP3P56jfwjZPrYP3Dllp/qhn1SdGTLj3feFKdkmbVUcvHw7OW+dmFR2vHU5AzN+Pfcn+Gcx5cixaOgYVjYOF4Dh6xIy++hD7E+yHe+zlaa2RtyBFcTLUwwXmTDRlYOAYuqCDF5ybbMXAxxVOlHaNbSBi4iAJEStNkU2f3ZC3U6zj9wUc4duwVlKenMSq/bjTww/cXDx5iBMmS6aZOAp/+8IyKewY+eH2hfvB4fm4OqytGE0+/BVhejy7FpptbP0S//c673sTtpr+nhYU3UHg5Rq/mJLCv9JGl0IIgyjN6NeuB9eHQVy+r+UCRJUFidGnUzf5tsx5/mNX0CCd7FsRXoou57663HvjGjevwlZ5RF1aKXOfeB6wH9nmmWuBLpXj9p7Vl9MF64I2NX7yMrL+nAgdeQZ+cXAevfn0et29vHcyoRznpaqv5wO/qlLG68pXa8Qp8eA6TZfSJrwePWObrwXph48e1vq/vuBbtu5wLG70Y2Gc5lyUfhYF9FoR9T64eYGB/xevRdxEGxMC+6nNhoxcD+6nvhY1eDOwjS6NXY2D/xCglESxhYN8EiAa9NOrGwL4ZcGGjFwP7xMLCRi8G9sh+gNx3bGQxCRyD3AuCyOTNZHllBlYvJfn3m0UkStKBlyUfxWAEp37+lk1ZrC1s9MoMfCvejNQotn5uoC4WFzZ6GU2yJjB5LgAKfEuE15yNXs0ocBw3miEmFzmS7UsdnwJLphs2m1u7rebflw5Xn1lJERzS9/GoUT0HGkjl0Oz7t+LrRu8UJCIiIiIiIqLH+x+tC3478QIApQAAAABJRU5ErkJggg==) 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADmSURBVHgB7ZSxDsFQFIb/c5t4C8kd7Cyopam1IuEJeAP6JOoRPAELs5iIQW0GQwdPIdGjNYlwb6sRJP3W/5z/nJv89wA538ZIU2zaTr8oS/IUHA9JeyhJkWl3JPg8A6N8ayL4TIXuejkLMg+o2k7FYEwjc/kgBReB7na58FX9QiXWLWdghNg9MY+RsWZarR7eHRA9z4MGBntZBoyhQYAnyPlplP+gYbVGUUqGqhoGeZvV3H2lK1MUgvvQQJoF1DEVcKGBmV31Aho+eipibgYUNonIv1trDxE2deapqdntTnyykfNXXAGsMUnbWOV+5QAAAABJRU5ErkJggg==) 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(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAECSURBVHgB7ZQ9bsJAEIXfrqXcIOkibZQUkVKEJoor5LROAyfANwCfBHMETgAVNSUSBVDwU4BwQQWcAIkZvBQUCHb5KQDJX7kz896uNPuAlFvjnNPsen7wqj7ULB6PTp0RpzS5Xk6BV3UwvrdDAl0WT/lWsx5fbfDj+RmHUUvE1V4pXkvk281G1zQvTcXfrF90CJ0D4hqla272v4BLDZLnRbDA4OgagwosSHAVKXeN8R+MposyE0oWgejz/Tk8VjduEZEIYIFhvoBlTSmEzYA4NGtY6E/nGUlJVECoPemYkqj4enu5PCo0WwG5/tMBtzsk6ukzm/jZDMbL3HCyDJDyUGwAEXhLyX1pPuYAAAAASUVORK5CYII=) 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: url(https://static.sunperp.com/dex-web/static/media/sunperp-watermark.1ab2a88d.svg) 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: url(https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white.7141dee9.svg) 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: url(https://static.sunperp.com/dex-web/static/media/dm-icon.6887a016.eot);
      src: url(https://static.sunperp.com/dex-web/static/media/dm-icon.6887a016.eot?61f1c21c#iefix) format("embedded-opentype"), url(https://static.sunperp.com/dex-web/static/media/dm-icon.cdd2b7ef.woff2?61f1c21c) format("woff2"), url(https://static.sunperp.com/dex-web/static/media/dm-icon.6a66a527.woff?61f1c21c) format("woff"), url(https://static.sunperp.com/dex-web/static/media/dm-icon.19ceced3.ttf?61f1c21c) format("truetype"), url(https://static.sunperp.com/dex-web/static/media/dm-icon.4f9f8827.svg?61f1c21c#dm-icon) 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-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-\[36px\] {
      width: 36px
  }

  .w-\[380px\] {
      width: 380px
  }

  .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-4 {
      padding-left: 4px;
      padding-right: 4px
  }

  .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-66 {
      padding-bottom: 66px
  }

  .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-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
  }

  .depth-chart-blue {
      background: url(https://static.sunperp.com/dex-web/static/media/sunperp-watermark.1ab2a88d.svg) 50% no-repeat
  }

  .depth-chart-white {
      background: url(https://static.sunperp.com/dex-web/static/media/sunperp-watermark-white.7141dee9.svg) 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
  }

  @media (max-width: 1025px) {
      .card-grid {
          display: flex;
          gap: 24px;
          grid-template-columns: repeat(4, 1fr);
          margin: 0 auto;
          width: 90%;
          flex-direction: column;
      }

      .footer {
          display: none;
      }
  }

  @media (max-width: 767px) {
      .split-text-container {
          backface-visibility: hidden;
          color: var(--dexc-dark-primary-font-color);
          font-size: 42px;
          font-weight: 600;
          line-height: 40px;
          opacity: 0;
          text-align: center;
          transform: translateZ(0);
          visibility: hidden;
          width: 90%;
          will-change: transform, opacity;
          z-index: 99
      }

      .galaxy-slot .content-text {
          position: absolute;
          text-align: center;
          top: 150px;
          width: 100%;
          z-index: 99;
      }

      .galaxy-part-container {
          height: 720px;
      }


  }

  .container h2 {
      padding: 20px 0;
  }

  @media (max-width: 1201px) {
      .global-common-header .header-wrap {
          align-items: center;
          display: flex;
          justify-content: space-between;
          margin: 0 auto;
          position: relative;
          width: 100%;
          z-index: 999;
      }
  }

  @media (max-width: 768px) {
      .global-common-header .header-wrap .nav-wraper {
          display: none;
      }
  }